"use client";

/* eslint-disable @next/next/no-img-element */

import Link from "next/link";
import { useMemo, useState } from "react";
import "../gestion.css";
import "./dossier.css";

type TabKey = "documents" | "photos" | "paiements" | "historique";
type FilterKey = "tous" | "manquants" | "verification" | "valides";
type PieceStatus = "valid" | "missing" | "review" | "partial" | "optional";

type Piece = {
  id: string;
  category: string;
  label: string;
  rule: string;
  status: PieceStatus;
  statusLabel: string;
  discharge?: boolean;
  file?: string;
};

const documents: Piece[] = [
  { id: "pc", category: "Administratif", label: "Arrêté accordant le permis de construire", rule: "Obligatoire · 1 document", status: "valid", statusLabel: "Validé", file: "arrete_PC.pdf" },
  { id: "plans", category: "Administratif", label: "Plans du dossier de permis", rule: "Obligatoire · 1 jeu complet", status: "valid", statusLabel: "Validé", file: "plans_PC_complets.pdf" },
  { id: "doc", category: "Administratif", label: "Déclaration d’ouverture de chantier (DOC)", rule: "Facultatif", status: "optional", statusLabel: "Non transmise" },
  { id: "g2", category: "Études techniques", label: "Étude géotechnique de type G2 AVP", rule: "Obligatoire hors extension < 50 m²", status: "valid", statusLabel: "Validé", discharge: true, file: "etude_G2_AVP.pdf" },
  { id: "structure", category: "Études techniques", label: "Étude structure ou note de calcul", rule: "Conditionnel · autoconstruction", status: "missing", statusLabel: "Manquant", discharge: true },
  { id: "terrassement", category: "Factures et assurances", label: "Facture de terrassement", rule: "Obligatoire · 1 document", status: "review", statusLabel: "À vérifier", discharge: true, file: "facture_terrassement.pdf" },
  { id: "maconnerie", category: "Factures et assurances", label: "Facture de maçonnerie ou de gros œuvre", rule: "Obligatoire · 1 document", status: "missing", statusLabel: "Manquant", discharge: true },
  { id: "toiture", category: "Factures et assurances", label: "Facture de charpente ou de toiture", rule: "Obligatoire · 1 document", status: "missing", statusLabel: "Manquant", discharge: true },
  { id: "decennale_terr", category: "Factures et assurances", label: "Décennale de l’entreprise de terrassement", rule: "Obligatoire · activité et période concordantes", status: "valid", statusLabel: "Validé", discharge: true, file: "decennale_terrassement.pdf" },
  { id: "decennale_mac", category: "Factures et assurances", label: "Décennale de l’entreprise de maçonnerie", rule: "Obligatoire · activité et période concordantes", status: "review", statusLabel: "À vérifier", discharge: true, file: "decennale_maconnerie.pdf" },
  { id: "sm1", category: "Attestations chantier", label: "Attestation ENRGETIC SM1 — terrassement et fondations", rule: "Obligatoire · signée et rattachée au projet", status: "missing", statusLabel: "Manquant", discharge: true },
  { id: "sm2", category: "Attestations chantier", label: "Attestation ENRGETIC SM2 — élévations et maçonnerie", rule: "Obligatoire · signée et rattachée au projet", status: "partial", statusLabel: "Incomplète", discharge: true, file: "SM2_non_signee.pdf" },
  { id: "sm3", category: "Attestations chantier", label: "Attestation ENRGETIC SM3 — charpente et toiture", rule: "Obligatoire · signée et rattachée au projet", status: "missing", statusLabel: "Manquant", discharge: true },
  { id: "smfin", category: "Attestations chantier", label: "Attestation ENRGETIC SMFIN — contrôle final", rule: "Obligatoire · fin de chantier", status: "missing", statusLabel: "Manquant", discharge: true },
];

const photos: Piece[] = [
  { id: "ext", category: "Bâtiment achevé", label: "Vues extérieures du bâtiment achevé", rule: "Obligatoire · 2 vues différentes", status: "valid", statusLabel: "2 sur 2" },
  { id: "earth", category: "Terrassement", label: "Terrassement avant ferraillage", rule: "Obligatoire · 2 photographies", status: "valid", statusLabel: "2 sur 2", discharge: true },
  { id: "found_before", category: "Fondations", label: "Fondations avant coulage", rule: "Obligatoire · 4 photographies", status: "partial", statusLabel: "2 sur 4", discharge: true },
  { id: "found_after", category: "Fondations", label: "Fondations après coulage", rule: "Obligatoire · 4 photographies", status: "missing", statusLabel: "0 sur 4", discharge: true },
  { id: "masonry", category: "Maçonnerie", label: "Maçonnerie, élévations et chaînages", rule: "Obligatoire · 4 photographies", status: "review", statusLabel: "4 à vérifier", discharge: true },
  { id: "roof", category: "Charpente", label: "Charpente et toiture", rule: "Obligatoire · 2 photographies", status: "missing", statusLabel: "0 sur 2", discharge: true },
  { id: "floors", category: "Planchers", label: "Planchers", rule: "Facultatif", status: "optional", statusLabel: "Non transmis" },
];

const history = [
  { date: "18 juil. · 14:34", tone: "petrol", title: "Analyse du dernier dépôt terminée", text: "2 pièces classées et 1 photographie orientée vers 99_A_VERIFIER." },
  { date: "18 juil. · 14:32", tone: "green", title: "3 fichiers reçus depuis le portail", text: "Facture terrassement, décennale entreprise et photo fondations." },
  { date: "15 juil. · 09:12", tone: "orange", title: "Relance pièces manquantes envoyée", text: "Prochaine relance fixée au 28 juillet par l’agent administratif." },
  { date: "8 juil. · 11:07", tone: "purple", title: "Dossier et ligne Monday créés", text: "Checklist Sismique V1 appliquée au projet." },
];

function DIcon({ name }: { name: string }) {
  const p = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, "aria-hidden": true };
  if (name === "folder") return <svg {...p}><path d="M3.5 6.5h6l2 2h9v10h-17z" /><path d="M3.5 9h17" /></svg>;
  if (name === "link") return <svg {...p}><path d="M10 13.5a4 4 0 0 0 5.7 0l2.5-2.5a4 4 0 0 0-5.7-5.7L11 6.8" /><path d="M14 10.5a4 4 0 0 0-5.7 0L5.8 13a4 4 0 0 0 5.7 5.7l1.5-1.5" /></svg>;
  if (name === "bell") return <svg {...p}><path d="M6.5 10a5.5 5.5 0 0 1 11 0c0 6 2.5 6 2.5 6H4s2.5 0 2.5-6Z" /><path d="M10 19h4" /></svg>;
  if (name === "check") return <svg {...p}><path d="m5 12 4 4L19 6" /></svg>;
  if (name === "lock") return <svg {...p}><rect x="5" y="10" width="14" height="11" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3" /></svg>;
  if (name === "calendar") return <svg {...p}><rect x="3.5" y="5.5" width="17" height="15" rx="2" /><path d="M7 3v5M17 3v5M3.5 10h17" /></svg>;
  if (name === "external") return <svg {...p}><path d="M14 5h5v5M19 5l-8 8" /><path d="M18 13v6H5V6h6" /></svg>;
  if (name === "mail") return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m4 7 8 6 8-6" /></svg>;
  return <svg {...p}><path d="M6 3.5h8l4 4V20H6z" /><path d="M14 3.5V8h4M9 12h6M9 16h6" /></svg>;
}

function statusSymbol(status: PieceStatus) {
  if (status === "valid") return "✓";
  if (status === "review") return "…";
  if (status === "optional") return "–";
  return "!";
}

export default function DossierPage() {
  const [tab, setTab] = useState<TabKey>("documents");
  const [filter, setFilter] = useState<FilterKey>("tous");
  const [selected, setSelected] = useState<string[]>([]);
  const [notice, setNotice] = useState<string | null>(null);
  const [reminderOpen, setReminderOpen] = useState(false);
  const [reminderDate, setReminderDate] = useState("2026-07-28");
  const [reminderObject, setReminderObject] = useState("Pièces manquantes");
  const [depositStatus, setDepositStatus] = useState("Payée");
  const [balanceStatus, setBalanceStatus] = useState("Non émise");

  const activePieces = tab === "photos" ? photos : documents;
  const filteredPieces = useMemo(() => {
    if (filter === "tous") return activePieces;
    if (filter === "manquants") return activePieces.filter((item) => item.status === "missing" || item.status === "partial");
    if (filter === "verification") return activePieces.filter((item) => item.status === "review");
    return activePieces.filter((item) => item.status === "valid");
  }, [activePieces, filter]);

  const toggle = (id: string) => setSelected((current) => current.includes(id) ? current.filter((value) => value !== id) : [...current, id]);
  const allVisibleSelected = filteredPieces.length > 0 && filteredPieces.every((item) => selected.includes(item.id));
  const toggleAll = () => setSelected((current) => allVisibleSelected ? current.filter((id) => !filteredPieces.some((item) => item.id === id)) : Array.from(new Set([...current, ...filteredPieces.map((item) => item.id)])));
  const applyBulk = (label: string) => { setNotice(`${label} appliqué à ${selected.length} élément${selected.length > 1 ? "s" : ""}. Une mise à jour sera ajoutée dans Monday.`); setSelected([]); };

  return (
    <main className="admin-shell dossier-shell">
      <aside className="admin-sidebar">
        <Link className="admin-brand" href="/" aria-label="Portail ENRGETIC"><img src="/brand/enrgetic-logo.png" alt="ENRGETIC" /></Link>
        <div className="admin-label">Gestion DAACT</div>
        <nav className="admin-nav" aria-label="Navigation administration">
          <Link className="detail-nav-link active" href="/gestion"><DIcon name="folder" />Dossiers<span>12</span></Link>
          <button type="button"><DIcon name="bell" />Relances<span className="warning">3</span></button>
          <button type="button"><DIcon name="document" />À vérifier<span>5</span></button>
        </nav>
        <div className="admin-spacer" />
        <div className="admin-user"><span>AA</span><div><strong>Agent administratif</strong><small>Administration</small></div></div>
      </aside>

      <section className="dossier-content">
        <nav className="detail-breadcrumb"><Link href="/gestion">Dossiers conformité</Link><span>›</span><strong>ENR-2026-0123</strong></nav>
        <header className="dossier-header">
          <div className="dossier-identity">
            <img src="/risks/sismique.jpg" alt="Pictogramme Sismique" />
            <div><p className="admin-eyebrow">DAACT Sismique · PPR</p><h1>Camille Martin</h1><span>Antibes · Maison neuve · 128 m² · Autoconstruction</span></div>
          </div>
          <div className="dossier-actions">
            <button className="outline-action" type="button"><DIcon name="folder" />Ouvrir Drive</button>
            <button className="outline-action" type="button" onClick={() => setNotice("Lien nominatif copié : portail.enrgetic.fr/d/enr20260123-martin")}><DIcon name="link" />Lien client</button>
            <button className="remind-action" type="button" onClick={() => setReminderOpen(true)}><DIcon name="mail" />Relancer maintenant</button>
          </div>
        </header>

        {notice && <div className="detail-notice" role="status"><span><DIcon name="check" /></span><p>{notice}</p><button type="button" onClick={() => setNotice(null)} aria-label="Fermer">×</button></div>}

        <section className="dossier-summary">
          <article className="progress-summary"><div className="summary-ring"><strong>57%</strong></div><div><small>Complétude documentaire</small><strong>14 pièces reçues sur 25</strong><div className="summary-progress"><span style={{ width: "57%" }} /></div><p>6 éléments obligatoires restent manquants.</p></div></article>
          <article><span className="summary-icon paid"><DIcon name="check" /></span><div><small>Acompte</small><strong>Facture payée</strong><p>FA-2026-0188</p></div></article>
          <article><span className="summary-icon calendar"><DIcon name="calendar" /></span><div><small>Prochaine relance</small><strong>28 juillet 2026</strong><p>Pièces manquantes</p></div></article>
          <article className="locked-summary"><span className="summary-icon locked"><DIcon name="lock" /></span><div><small>Attestation finale</small><strong>Production bloquée</strong><p>Pièces et règlement total requis</p></div></article>
        </section>

        <section className="detail-layout">
          <div className="detail-main-panel">
            <div className="detail-tabs" role="tablist" aria-label="Sections du dossier">
              <button type="button" role="tab" aria-selected={tab === "documents"} onClick={() => { setTab("documents"); setFilter("tous"); setSelected([]); }}>Documents <span>18</span></button>
              <button type="button" role="tab" aria-selected={tab === "photos"} onClick={() => { setTab("photos"); setFilter("tous"); setSelected([]); }}>Photos <span>7</span></button>
              <button type="button" role="tab" aria-selected={tab === "paiements"} onClick={() => { setTab("paiements"); setSelected([]); }}>Suivi et paiements</button>
              <button type="button" role="tab" aria-selected={tab === "historique"} onClick={() => { setTab("historique"); setSelected([]); }}>Historique</button>
            </div>

            {(tab === "documents" || tab === "photos") && (
              <>
                <div className="piece-toolbar">
                  <div className="piece-filters">{([['tous','Tous'],['manquants','Manquants'],['verification','À vérifier'],['valides','Validés']] as [FilterKey,string][]).map(([key,label]) => <button key={key} type="button" className={filter === key ? "active" : ""} onClick={() => setFilter(key)}>{label}</button>)}</div>
                  <span>{filteredPieces.length} éléments affichés</span>
                </div>

                {selected.length > 0 && <div className="bulk-bar"><strong>{selected.length} sélectionné{selected.length > 1 ? "s" : ""}</strong><button type="button" onClick={() => applyBulk("Ignorer après vérification")}>Ignorer après vérification</button><button type="button" onClick={() => applyBulk("Marquer non applicable")}>Non applicable</button><button type="button" onClick={() => setSelected([])}>Annuler</button></div>}

                <div className="piece-table">
                  <div className="piece-table-head"><label><input type="checkbox" checked={allVisibleSelected} onChange={toggleAll} /><span className="sr-only-detail">Tout sélectionner</span></label><span>Élément attendu</span><span>Fichier reçu</span><span>Statut</span><span>Action</span></div>
                  {filteredPieces.map((piece) => (
                    <article className={`piece-row piece-${piece.status}`} key={piece.id}>
                      <label className="piece-check"><input type="checkbox" checked={selected.includes(piece.id)} onChange={() => toggle(piece.id)} /><span className="sr-only-detail">Sélectionner {piece.label}</span></label>
                      <div className="piece-name"><span className={`piece-symbol ${piece.status}`}>{statusSymbol(piece.status)}</span><div><small>{piece.category}</small><h3>{piece.label}</h3><p>{piece.rule}{piece.discharge ? " · Décharge possible" : ""}</p></div></div>
                      <div className="piece-file">{piece.file ? <><DIcon name="document" /><span>{piece.file}</span></> : <span className="no-file">Aucun fichier</span>}</div>
                      <span className={`detail-status ${piece.status}`}>{piece.statusLabel}</span>
                      <button className="piece-action" type="button" onClick={() => setNotice(`${piece.label} : panneau d’examen ouvert.`)}>{piece.status === "missing" ? "Demander" : piece.status === "optional" ? "—" : "Examiner"}</button>
                    </article>
                  ))}
                </div>
              </>
            )}

            {tab === "paiements" && (
              <div className="payments-view">
                <div className="payments-heading"><h2>Suivi commercial et règlements</h2><p>Les statuts sont renseignés manuellement. Aucun changement ne demande de date supplémentaire.</p></div>
                <div className="payment-card-grid">
                  <article><span>01</span><h3>Devis</h3><label>Numéro<input value="D-2026-0412" readOnly /></label><label>Statut<select defaultValue="Accepté"><option>Envoyé</option><option>Accepté</option></select></label></article>
                  <article><span>02</span><h3>Facture d’acompte</h3><label>Numéro<input value="FA-2026-0188" readOnly /></label><label>Statut<select value={depositStatus} onChange={(event) => setDepositStatus(event.target.value)}><option>Envoyée</option><option>Payée</option></select></label></article>
                  <article><span>03</span><h3>Facture de solde</h3><label>Numéro<input placeholder="À renseigner" /></label><label>Statut<select value={balanceStatus} onChange={(event) => setBalanceStatus(event.target.value)}><option>Non émise</option><option>Envoyée</option><option>Payée</option></select></label></article>
                </div>
                <div className="payment-gate"><span><DIcon name="lock" /></span><div><h3>Condition de production de l’attestation finale</h3><p>Checklist complète et règlement total confirmé. Si le solde est payé en totalité, l’absence d’acompte payé ne bloque pas le dossier.</p></div><strong>Bloquée</strong></div>
                <div className="reminder-settings"><div><h3>Relance programmée</h3><p>Aucun envoi automatique avant la date choisie.</p></div><label>Objet<select value={reminderObject} onChange={(event) => setReminderObject(event.target.value)}><option>Pièces manquantes</option><option>Acompte non payé</option><option>Dossier complet — solde attendu</option></select></label><label>Date<input type="date" value={reminderDate} onChange={(event) => setReminderDate(event.target.value)} /></label><button type="button" onClick={() => setNotice("Paramètres de relance enregistrés. Une mise à jour Monday sera créée.")}>Enregistrer</button></div>
              </div>
            )}

            {tab === "historique" && (
              <div className="history-view"><div className="payments-heading"><h2>Historique du dossier</h2><p>Cette chronologie sera répliquée dans les mises à jour de la ligne Monday.</p></div><div className="history-list">{history.map((entry) => <article key={entry.date}><span className={`history-dot ${entry.tone}`} /><time>{entry.date}</time><div><h3>{entry.title}</h3><p>{entry.text}</p></div><button type="button">Voir dans Monday ↗</button></article>)}</div></div>
            )}
          </div>

          <aside className="detail-side-panel">
            <section><div className="side-heading"><h2>Informations projet</h2><button type="button">Modifier</button></div><dl><div><dt>Référence</dt><dd>ENR-2026-0123</dd></div><div><dt>Type</dt><dd>Maison neuve</dd></div><div><dt>Surface créée</dt><dd>128 m²</dd></div><div><dt>Ville</dt><dd>Antibes</dd></div><div><dt>Précision</dt><dd>Autoconstruction</dd></div></dl></section>
            <section><div className="side-heading"><h2>Accès rapides</h2></div><a href="#drive"><DIcon name="folder" /><span><strong>Dossier Google Drive</strong><small>ENR-2026-0123_MARTIN_CAMILLE_ANTIBES_PPR</small></span><DIcon name="external" /></a><a href="#client"><DIcon name="link" /><span><strong>Portail du client</strong><small>Lien nominatif actif</small></span><DIcon name="external" /></a><a href="#monday"><DIcon name="external" /><span><strong>Ligne Monday</strong><small>Dossiers en cours</small></span><DIcon name="external" /></a></section>
            <section className="internal-alert"><div className="side-heading"><h2>Points internes</h2><span>2</span></div><p><strong>Condition à confirmer</strong>Autoconstruction détectée dans les pièces.</p><p><strong>Photo à vérifier</strong>Confiance de classement Gemini : 56 %.</p></section>
          </aside>
        </section>
      </section>

      {reminderOpen && <div className="detail-modal-backdrop" onMouseDown={() => setReminderOpen(false)}><section className="reminder-modal" role="dialog" aria-modal="true" aria-labelledby="reminder-title" onMouseDown={(event) => event.stopPropagation()}><button className="reminder-close" type="button" onClick={() => setReminderOpen(false)} aria-label="Fermer">×</button><p className="admin-eyebrow">Action manuelle</p><h2 id="reminder-title">Préparer une relance</h2><p>Le message reprendra uniquement les éléments applicables manquants ou non concordants.</p><label>Objet<select value={reminderObject} onChange={(event) => setReminderObject(event.target.value)}><option>Pièces manquantes</option><option>Acompte non payé</option><option>Dossier complet — solde attendu</option></select></label><div className="mail-preview"><small>À : camille.martin@example.fr</small><strong>Votre dossier DAACT Sismique — éléments à compléter</strong><p>Bonjour,<br /><br />Afin de poursuivre l’analyse de votre dossier, il nous manque encore plusieurs éléments, notamment l’étude structure, les factures de maçonnerie et toiture ainsi que les attestations SM attendues.<br /><br />Vous pouvez les déposer directement depuis votre espace sécurisé.</p></div><footer><button type="button" onClick={() => setReminderOpen(false)}>Annuler</button><button type="button" onClick={() => { setReminderOpen(false); setNotice("Relance préparée. L’envoi réel et l’écriture Monday seront activés lors de la connexion."); }}><DIcon name="mail" />Valider la relance</button></footer></section></div>}
    </main>
  );
}