/**
 * RealEstateDashboardView
 *
 * Übersicht/Dashboard für eine Real-Estate-Instanz (PEK).
 * Zeigt Kennzahlen und Links zu Projekten und Parzellen.
 */

import React from 'react';
import { Link } from 'react-router-dom';
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
import { useRealEstateProjects, useRealEstateParcels } from '../../../hooks/useRealEstate';
import styles from '../trustee/TrusteeViews.module.css';

import { useLanguage } from '../../../providers/language/LanguageContext';

export const RealEstateDashboardView: React.FC = () => {
    const { t } = useLanguage();

  const { instance } = useCurrentInstance();
  const { items: projects, loading: projectsLoading } = useRealEstateProjects();
  const { items: parcels, loading: parcelsLoading } = useRealEstateParcels();

  const isLoading = projectsLoading || parcelsLoading;

  return (
    <div className={styles.dashboardView}>
      <div className={styles.statsGrid}>
        {/* Projekte – Link-Karte */}
        <Link to="projects" className={styles.statCard} style={{ textDecoration: 'none', color: 'inherit' }}>
          <div className={styles.statIcon}>📋</div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>
              {isLoading ? '...' : projects.length}
            </div>
            <div className={styles.statLabel}>Projekte</div>
          </div>
        </Link>

        {/* Parzellen – Link-Karte */}
        <Link to="parcels" className={styles.statCard} style={{ textDecoration: 'none', color: 'inherit' }}>
          <div className={styles.statIcon}>🗺️</div>
          <div className={styles.statContent}>
            <div className={styles.statValue}>
              {isLoading ? '...' : parcels.length}
            </div>
            <div className={styles.statLabel}>Parzellen</div>
          </div>
        </Link>

        {/* Rollen (optional) */}
        {instance?.userRoles?.length ? (
          <div className={styles.statCard}>
            <div className={styles.statIcon}>👤</div>
            <div className={styles.statContent}>
              <div className={styles.statValueSmall}>
                {instance.userRoles.map((role, idx) => (
                  <div key={idx}>{role}</div>
                ))}
              </div>
              <div className={styles.statLabel}>
                {instance.userRoles.length === 1 ? t('Deine Rolle') : t('Deine Rollen')}
              </div>
            </div>
          </div>
        ) : null}
      </div>

      {/* Instanz-Infos */}
      <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}>{t('Mandant')}</span>
            <span className={styles.infoValue}>{instance?.mandateName}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RealEstateDashboardView;