/**
 * TrusteeDashboardView
 * 
 * Overview dashboard for a Trustee instance.
 * Shows statistics about positions, documents, and accounting sync status.
 */

import React, { useState, useEffect } from 'react';
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
import { useTrusteePositions, useTrusteeDocuments } from '../../../hooks/useTrustee';
import { useApiRequest } from '../../../hooks/useApi';
import { fetchAccountingConfig, fetchSyncStatus, type AccountingConfig, type AccountingSyncStatus } from '../../../api/trusteeApi';
import styles from './TrusteeViews.module.css';

export const TrusteeDashboardView: React.FC = () => {
  const { instance, instanceId } = useCurrentInstance();
  const { items: positions, loading: posLoading } = useTrusteePositions();
  const { items: documents, loading: docsLoading } = useTrusteeDocuments();
  const { request } = useApiRequest();
  
  const [accountingConfig, setAccountingConfig] = useState<AccountingConfig | null>(null);
  const [syncItems, setSyncItems] = useState<AccountingSyncStatus[]>([]);
  const [accountingLoading, setAccountingLoading] = useState(true);
  
  useEffect(() => {
    if (!instanceId) return;
    const loadAccountingData = async () => {
      setAccountingLoading(true);
      try {
        const [config, syncData] = await Promise.all([
          fetchAccountingConfig(request, instanceId),
          fetchSyncStatus(request, instanceId),
        ]);
        setAccountingConfig(config);
        setSyncItems(syncData?.items || []);
      } catch {
        // Accounting not configured is fine
      } finally {
        setAccountingLoading(false);
      }
    };
    loadAccountingData();
  }, [instanceId, request]);
  
  const isLoading = posLoading || docsLoading || accountingLoading;
  const syncedCount = syncItems.filter(s => s.syncStatus === 'synced').length;
  const syncErrorCount = syncItems.filter(s => s.syncStatus === 'error').length;
  
  return (
    <div className={styles.dashboardView}>
      <div className={styles.statsGrid}>
        <div className={styles.statCard}>
          <div className={styles.statIcon}>📊</div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>
              {isLoading ? '...' : positions.length}
            </div>
            <div className={styles.statLabel}>Positionen</div>
          </div>
        </div>
        
        <div className={styles.statCard}>
          <div className={styles.statIcon}>📄</div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>
              {isLoading ? '...' : documents.length}
            </div>
            <div className={styles.statLabel}>Dokumente</div>
          </div>
        </div>
        
        <div className={styles.statCard}>
          <div className={styles.statIcon}>
            {accountingConfig?.configured ? '✓' : '○'}
          </div>
          <div className={styles.statContent}>
            <div className={styles.statValueSmall}>
              {isLoading ? '...' : (
                accountingConfig?.configured
                  ? <>{syncedCount} synced{syncErrorCount > 0 && <span style={{ color: 'var(--error-color, #dc2626)' }}> / {syncErrorCount} errors</span>}</>
                  : 'Not configured'
              )}
            </div>
            <div className={styles.statLabel}>Buchhaltung</div>
          </div>
        </div>

        <div className={styles.statCard}>
          <div className={styles.statIcon}>👤</div>
          <div className={styles.statContent}>
            <div className={styles.statValueSmall}>
              {instance?.userRoles?.length ? (
                instance.userRoles.map((role: string, idx: number) => (
                  <div key={idx}>{role}</div>
                ))
              ) : '-'}
            </div>
            <div className={styles.statLabel}>
              {(instance?.userRoles?.length || 0) === 1 ? 'Deine Rolle' : 'Deine Rollen'}
            </div>
          </div>
        </div>
      </div>
      
      <div className={styles.infoSection}>
        <h3>Instanz-Details</h3>
        <div className={styles.infoGrid}>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>Instanz:</span>
            <span className={styles.infoValue}>{instance?.instanceLabel}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>Mandant:</span>
            <span className={styles.infoValue}>{instance?.mandateName}</span>
          </div>
          {accountingConfig?.configured && (
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>Buchhaltungssystem:</span>
              <span className={styles.infoValue}>
                {accountingConfig.displayLabel || accountingConfig.connectorType}
                {accountingConfig.lastSyncStatus && ` (${accountingConfig.lastSyncStatus})`}
              </span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default TrusteeDashboardView;