/**
 * TrusteeDashboardView
 * 
 * Übersicht/Dashboard für eine Trustee-Instanz.
 * Zeigt Statistiken über Positionen, Dokumente und Verknüpfungen.
 */

import React from 'react';
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
import { useTrusteePositions, useTrusteeDocuments, useTrusteePositionDocuments } from '../../../hooks/useTrustee';
import styles from './TrusteeViews.module.css';

export const TrusteeDashboardView: React.FC = () => {
  const { instance } = useCurrentInstance();
  const { items: positions, loading: posLoading } = useTrusteePositions();
  const { items: documents, loading: docsLoading } = useTrusteeDocuments();
  const { items: links, loading: linksLoading } = useTrusteePositionDocuments();
  
  const isLoading = posLoading || docsLoading || linksLoading;
  
  return (
    <div className={styles.dashboardView}>
      <div className={styles.statsGrid}>
        {/* Positionen Card */}
        <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>
        
        {/* Dokumente Card */}
        <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>
        
        {/* Verknüpfungen Card */}
        <div className={styles.statCard}>
          <div className={styles.statIcon}>🔗</div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>
              {isLoading ? '...' : links.length}
            </div>
            <div className={styles.statLabel}>Zuordnungen</div>
          </div>
        </div>
        
        {/* Rollen Card */}
        <div className={styles.statCard}>
          <div className={styles.statIcon}>👤</div>
          <div className={styles.statContent}>
            <div className={styles.statValueSmall}>
              {instance?.userRoles?.length ? (
                instance.userRoles.map((role, idx) => (
                  <div key={idx}>{role}</div>
                ))
              ) : '-'}
            </div>
            <div className={styles.statLabel}>
              {(instance?.userRoles?.length || 0) === 1 ? 'Deine Rolle' : 'Deine Rollen'}
            </div>
          </div>
        </div>
      </div>
      
      {/* Info-Bereich */}
      <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>
        </div>
      </div>
    </div>
  );
};

export default TrusteeDashboardView;