'use client';

import Link from 'next/link';
import {
  ArrowRight,
  Boxes,
  FileCheck2,
  FolderTree,
  Inbox,
  Lock,
} from 'lucide-react';

import type { TableauDeBordUtiS } from '@/lib/api';
import { StatutDossierBadge } from '@/components/dossiers/statut-dossier-badge';
import { cn } from '@/lib/utils';

import {
  ListeVide,
  SectionCard,
  StatCard,
  formatDateHeure,
  formatOctets,
} from './dashboard-ui';

/**
 * Un bloc fermé par le profil n'est pas masqué : il est remplacé par la raison
 * du refus, pour que l'UTI-S sache que la donnée existe mais que sa fonction
 * n'est pas ouverte (§5.6.3).
 */
function FonctionFermee({ fonction }: { fonction: string }) {
  return (
    <div className="flex items-center gap-3 rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground">
      <Lock aria-hidden className="h-4 w-4 shrink-0" />
      <p>
        La fonction <span className="font-medium">{fonction}</span> n’est pas
        ouverte sur votre profil. Contactez votre Administrateur Fonctionnel.
      </p>
    </div>
  );
}

/**
 * §5.6.3 : l'UTI-S n'a aucun pouvoir d'administration ; son tableau de bord se
 * compose entièrement à partir des huit fonctions de son profil.
 */
export function DashboardUtiS({ donnees }: { donnees: TableauDeBordUtiS }) {
  const { objets, dossiers } = donnees;

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard
          label="Objets scellés"
          value={objets ? objets.scelles : '—'}
          icon={FileCheck2}
          tone={objets ? 'brand' : 'neutre'}
          hint={objets ? 'Entrés au coffre-fort' : 'Fonction Compter fermée'}
        />
        <StatCard
          label="En attente d’archivage"
          value={objets ? objets.a_archiver : '—'}
          icon={Inbox}
          tone={objets ? 'brand' : 'neutre'}
          hint={
            objets ? 'Déposés, non encore scellés' : 'Fonction Compter fermée'
          }
        />
        <StatCard
          label="Dossiers"
          value={dossiers ? dossiers.total : '—'}
          icon={FolderTree}
          tone={dossiers ? 'brand' : 'neutre'}
          hint={
            dossiers
              ? `${dossiers.ouverts} ouvert${dossiers.ouverts > 1 ? 's' : ''} · ${dossiers.scelles} scellé${dossiers.scelles > 1 ? 's' : ''}`
              : 'Fonction Lister fermée'
          }
        />
        <StatCard
          label="Conteneurs accessibles"
          value={donnees.conteneurs_accessibles}
          icon={Boxes}
          hint="Créés par votre Administrateur Fonctionnel"
        />
      </div>

      <div className="grid gap-5 lg:grid-cols-2">
        <SectionCard
          title="Derniers dossiers"
          description="Fonction Lister"
          action={
            donnees.derniers_dossiers !== null ? (
              <Link
                href="/liste-dossiers"
                className="inline-flex shrink-0 items-center gap-1.5 text-xs font-semibold text-brand-600 transition-colors hover:text-brand-700"
              >
                Tout voir
                <ArrowRight className="h-3.5 w-3.5" />
              </Link>
            ) : undefined
          }
        >
          {donnees.derniers_dossiers === null ? (
            <FonctionFermee fonction="Lister" />
          ) : donnees.derniers_dossiers.length === 0 ? (
            <ListeVide message="Aucun dossier n’a encore été créé." />
          ) : (
            <ul className="-my-1 divide-y">
              {donnees.derniers_dossiers.map((dossier) => (
                <li
                  key={dossier.id_dossier}
                  className="flex items-center gap-3 py-2.5"
                >
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium">{dossier.nom}</p>
                    <p className="truncate text-xs text-muted-foreground">
                      {[
                        dossier.immatriculation,
                        dossier.type_demarche,
                        `${dossier.objets_numeriques_count} pièce${dossier.objets_numeriques_count > 1 ? 's' : ''}`,
                      ]
                        .filter(Boolean)
                        .join(' · ')}
                    </p>
                  </div>
                  <StatutDossierBadge dossier={{ statut: dossier.statut }} />
                </li>
              ))}
            </ul>
          )}
        </SectionCard>

        <SectionCard
          title="Derniers objets numériques"
          description="Fonction Lire Métadonnées Techniques"
        >
          {donnees.derniers_objets === null ? (
            <FonctionFermee fonction="Lire Métadonnées Techniques" />
          ) : donnees.derniers_objets.length === 0 ? (
            <ListeVide message="Aucune pièce n’a encore été déposée." />
          ) : (
            <ul className="-my-1 divide-y">
              {donnees.derniers_objets.map((objet, index) => (
                <li
                  key={objet.idu ?? `${objet.id_cont}-${index}`}
                  className="flex items-center gap-3 py-2.5"
                >
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium">
                      {objet.nom_fichier ?? objet.idu ?? 'Pièce sans nom'}
                    </p>
                    <p className="truncate text-xs text-muted-foreground">
                      {formatOctets(objet.taille_octets)} ·{' '}
                      {formatDateHeure(objet.scelle_le ?? objet.depose_le)}
                    </p>
                  </div>
                  <span
                    className={cn(
                      'shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium capitalize',
                      objet.statut === 'scelle'
                        ? 'bg-emerald-50 text-emerald-700'
                        : objet.statut === 'detruit' || objet.statut === 'echec'
                          ? 'bg-destructive/10 text-destructive'
                          : 'bg-muted text-muted-foreground',
                    )}
                  >
                    {objet.statut.replace('_', ' ')}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </SectionCard>
      </div>
    </div>
  );
}