"use client";

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

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

type CreatedDossierResult = {
  reference: string;
  portalUrl: string;
  driveFolderUrl: string;
  driveFolderName: string;
  mondayItemUrl: string;
};

type MissionKey = "ppr" | "re" | "resp" | "rga";
type ProjectKey = "Maison neuve" | "Extension" | "Autre";

const missions: Record<MissionKey, {
  label: string;
  code: string;
  icon: string;
  description: string;
  documents: number;
  photos: number;
  manual?: number;
}> = {
  ppr: {
    label: "DAACT Sismique",
    code: "PPR",
    icon: "/risks/sismique.jpg",
    description: "Contrôle parasismique de fin de chantier",
    documents: 18,
    photos: 7,
  },
  re: {
    label: "DAACT RE2020",
    code: "RE",
    icon: "/risks/re2020.jpg",
    description: "RE2020 complète avec suivi de visite",
    documents: 17,
    photos: 9,
    manual: 1,
  },
  resp: {
    label: "DAACT RE simplifiée",
    code: "RESP",
    icon: "/risks/re2020.jpg",
    description: "Checklist adaptée aux travaux concernés",
    documents: 7,
    photos: 8,
  },
  rga: {
    label: "DAACT RGA",
    code: "RGA",
    icon: "/risks/rga.jpg",
    description: "Retrait-gonflement des argiles",
    documents: 15,
    photos: 11,
  },
};

const sampleRows = [
  {
    initials: "CM",
    client: "Camille Martin",
    city: "Antibes",
    project: "Maison neuve · 128 m²",
    mission: "ppr" as MissionKey,
    status: "Pièces en cours",
    progress: 57,
    pieces: "14 / 25",
    deposit: "Payée",
    balance: "—",
    reminder: "28 juil.",
  },
  {
    initials: "CM",
    client: "Camille Martin",
    city: "Antibes",
    project: "Maison neuve · 128 m²",
    mission: "re" as MissionKey,
    status: "À compléter",
    progress: 38,
    pieces: "10 / 27",
    deposit: "Payée",
    balance: "—",
    reminder: "5 août",
  },
  {
    initials: "JL",
    client: "Julie Lefèvre",
    city: "Cagnes-sur-Mer",
    project: "Extension · 42 m²",
    mission: "rga" as MissionKey,
    status: "Analyse en cours",
    progress: 73,
    pieces: "19 / 26",
    deposit: "Payée",
    balance: "Envoyée",
    reminder: "2 août",
  },
  {
    initials: "TB",
    client: "Thomas Bernard",
    city: "Mougins",
    project: "Garage indépendant · 31 m²",
    mission: "resp" as MissionKey,
    status: "En attente acompte",
    progress: 24,
    pieces: "4 / 16",
    deposit: "Envoyée",
    balance: "—",
    reminder: "30 juil.",
  },
];

const activityEntries = [
  {
    kind: "Dépôt client",
    time: "18 juillet 2026 · 14:32",
    actor: "Camille Martin",
    tone: "green",
    title: "3 documents reçus depuis le portail",
    description: "Le lot a été conservé dans les dépôts originaux puis transmis à l’analyse documentaire.",
    files: ["facture_terrassement.pdf", "decennale_entreprise.pdf", "fondations_01.jpg"],
  },
  {
    kind: "Analyse automatique",
    time: "18 juillet 2026 · 14:34",
    actor: "Gemini OCR",
    tone: "petrol",
    title: "2 pièces classées · 1 pièce à vérifier",
    description: "Facture de terrassement et décennale reconnues. La photographie a été placée dans 99_A_VERIFIER avec une confiance de 56 %.",
    files: [],
  },
  {
    kind: "Relance client",
    time: "15 juillet 2026 · 09:12",
    actor: "Agent administratif",
    tone: "orange",
    title: "Demande de pièces manquantes envoyée",
    description: "Objet : poursuite de votre dossier DAACT Sismique. Prochaine relance laissée vide : aucun nouvel envoi automatique.",
    files: [],
  },
  {
    kind: "Création du suivi",
    time: "8 juillet 2026 · 11:07",
    actor: "Automatisation ENRGETIC",
    tone: "purple",
    title: "Dossier Drive et lien nominatif créés",
    description: "Checklist Sismique appliquée et ligne Monday initialisée dans le groupe Dossiers en cours.",
    files: [],
  },
];

function Icon({ name }: { name: string }) {
  const p = {
    width: 22,
    height: 22,
    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 === "plus") return <svg {...p}><path d="M12 5v14M5 12h14" /></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 === "search") return <svg {...p}><circle cx="10.5" cy="10.5" r="6.5" /><path d="m15.5 15.5 4 4" /></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 === "copy") return <svg {...p}><rect x="8" y="8" width="11" height="11" rx="2" /><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" /></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 === "settings") return <svg {...p}><circle cx="12" cy="12" r="3" /><path d="M19 13.5v-3l-2-.7-.6-1.5.9-1.9-2.1-2.1-1.9.9-1.5-.6-.7-2h-3l-.7 2-1.5.6-1.9-.9-2.1 2.1.9 1.9-.6 1.5-2 .7v3l2 .7.6 1.5-.9 1.9 2.1 2.1 1.9-.9 1.5.6.7 2h3l.7-2 1.5-.6 1.9.9 2.1-2.1-.9-1.9.6-1.5z" /></svg>;
  return <svg {...p}><path d="M5 3.5h14v17H5z" /><path d="M8 8h8M8 12h8M8 16h5" /></svg>;
}

function clean(value: string) {
  return value
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-zA-Z0-9]+/g, "_")
    .replace(/^_|_$/g, "")
    .toUpperCase();
}

export default function GestionPage() {
  const [wizardOpen, setWizardOpen] = useState(false);
  const [activityOpen, setActivityOpen] = useState<string | null>(null);
  const [step, setStep] = useState(1);
  const [created, setCreated] = useState(false);
  const [creationBlocked, setCreationBlocked] = useState(false);
  const [creationPending, setCreationPending] = useState(false);
  const [creationError, setCreationError] = useState<string | null>(null);
  const [createdDossier, setCreatedDossier] = useState<CreatedDossierResult | null>(null);
  const [copied, setCopied] = useState(false);
  const [activeGroup, setActiveGroup] = useState<"cours" | "termines" | "annules">("cours");
  const [mission, setMission] = useState<MissionKey>("ppr");
  const [projectType, setProjectType] = useState<ProjectKey>("Maison neuve");
  const [firstName, setFirstName] = useState("Camille");
  const [lastName, setLastName] = useState("Martin");
  const [city, setCity] = useState("Antibes");
  const [email, setEmail] = useState("camille.martin@example.fr");
  const [surface, setSurface] = useState("128");
  const [detail, setDetail] = useState("Maison individuelle en autoconstruction");
  const [quoteNumber, setQuoteNumber] = useState("D-2026-0412");
  const [quoteStatus, setQuoteStatus] = useState("Accepté");
  const [depositNumber, setDepositNumber] = useState("FA-2026-0188");
  const [depositStatus, setDepositStatus] = useState("Payée");
  const [balanceNumber, setBalanceNumber] = useState("");
  const [balanceStatus, setBalanceStatus] = useState("Envoyée");
  const [reminderType, setReminderType] = useState("Pièces manquantes");
  const [reminderDate, setReminderDate] = useState("2026-07-28");

  const reference = createdDossier?.reference ?? "Référence générée automatiquement";
  const missionData = missions[mission];
  const folderName = useMemo(
    () => `${reference}_${clean(lastName)}_${clean(firstName)}_${clean(city)}_${missionData.code}`,
    [reference, firstName, lastName, city, missionData.code],
  );
  const clientLink = createdDossier?.portalUrl ?? "";

  const resetWizard = () => {
    setWizardOpen(false);
    setCreated(false);
    setCreationBlocked(false);
    setCreationPending(false);
    setCreationError(null);
    setCreatedDossier(null);
    setCopied(false);
    setStep(1);
  };

  const handleCopy = async () => {
    if (!clientLink) return;
    try { await navigator.clipboard.writeText(clientLink); } catch { /* preview fallback */ }
    setCopied(true);
  };

  const handleCreateDossier = async () => {
    setCreationPending(true);
    setCreationBlocked(false);
    setCreationError(null);

    try {
      const response = await fetch("/api/dossiers", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          requestId: crypto.randomUUID(),
          firstName,
          lastName,
          email,
          city,
          projectType,
          projectDetail: detail,
          createdSurface: Number(surface),
          daactCode: missionData.code,
          quoteNumber,
          quoteStatus: quoteNumber ? quoteStatus : "",
          depositInvoiceNumber: depositNumber,
          depositInvoiceStatus: depositNumber ? depositStatus : "",
          balanceInvoiceNumber: balanceNumber,
          balanceInvoiceStatus: balanceNumber ? balanceStatus : "",
          reminderObject: reminderDate ? reminderType : "",
          reminderDate,
        }),
      });

      const payload = await response.json();
      if (!response.ok || !payload.ok) throw new Error(payload.error || "Création impossible.");

      setCreatedDossier(payload.data as CreatedDossierResult);
      setCreated(true);
    } catch (error) {
      setCreationError(error instanceof Error ? error.message : "Création impossible.");
      setCreationBlocked(true);
    } finally {
      setCreationPending(false);
    }
  };

  return (
    <main className="admin-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">
          <button className="active" type="button"><Icon name="folder" />Dossiers<span>12</span></button>
          <button type="button" onClick={() => setWizardOpen(true)}><Icon name="plus" />Nouveau dossier</button>
          <button type="button"><Icon name="bell" />Relances<span className="warning">3</span></button>
          <button type="button"><Icon name="document" />À vérifier<span>5</span></button>
        </nav>
        <div className="admin-spacer" />
        <Link className="sidebar-settings" href="/gestion/parametres"><Icon name="settings" />Paramètres</Link>
        <div className="admin-user"><span>AA</span><div><strong>Agent administratif</strong><small>Administration</small></div></div>
      </aside>

      <section className="admin-content">
        <header className="admin-topbar">
          <div><p className="admin-eyebrow">Pilotage documentaire</p><h1>Dossiers conformité</h1></div>
          <div className="admin-top-actions">
            <label className="search-box"><Icon name="search" /><input placeholder="Rechercher un client, une ville…" /></label>
            <button className="new-case-button" type="button" onClick={() => setWizardOpen(true)}><Icon name="plus" />Créer un dossier</button>
          </div>
        </header>

        <section className="admin-kpis" aria-label="Synthèse">
          <article><span className="kpi-icon petrol"><Icon name="folder" /></span><div><strong>12</strong><p>Dossiers en cours</p></div><em>+2 ce mois</em></article>
          <article><span className="kpi-icon green"><Icon name="check" /></span><div><strong>4</strong><p>Complets à traiter</p></div><em>Action interne</em></article>
          <article><span className="kpi-icon orange"><Icon name="bell" /></span><div><strong>3</strong><p>Relances prévues</p></div><em>Aucune automatique</em></article>
          <article><span className="kpi-icon purple">€</span><div><strong>2</strong><p>Paiements attendus</p></div><em>Dates choisies</em></article>
        </section>

        <section className="cases-panel">
          <div className="cases-toolbar">
            <div className="group-tabs">
              <button type="button" className={activeGroup === "cours" ? "active" : ""} onClick={() => setActiveGroup("cours")}>En cours <span>12</span></button>
              <button type="button" className={activeGroup === "termines" ? "active" : ""} onClick={() => setActiveGroup("termines")}>Terminés <span>24</span></button>
              <button type="button" className={activeGroup === "annules" ? "active" : ""} onClick={() => setActiveGroup("annules")}>Annulés <span>2</span></button>
            </div>
            <button className="filter-button" type="button">Tous les types <span>⌄</span></button>
          </div>

          {activeGroup === "cours" ? (
            <div className="cases-table-wrap">
              <table className="cases-table">
                <thead><tr><th>Client et projet</th><th>DAACT</th><th>Avancement</th><th>Pièces</th><th>Règlements</th><th>Prochaine relance</th><th><span className="sr-only-admin">Actions</span></th></tr></thead>
                <tbody>
                  {sampleRows.map((row, index) => {
                    const info = missions[row.mission];
                    return (
                      <tr key={`${row.client}-${row.mission}`}>
                        <td><Link className="client-cell client-row-link" href="/gestion/dossier"><span className={`avatar avatar-${index + 1}`}>{row.initials}</span><div><strong>{row.client}</strong><small>{row.city} · {row.project}</small></div></Link></td>
                        <td><div className="mission-cell"><img src={info.icon} alt="" /><div><strong>{info.label}</strong><small>{info.code}</small></div></div></td>
                        <td><span className={`case-status status-${index + 1}`}>{row.status}</span><div className="table-progress"><span style={{ width: `${row.progress}%` }} /></div></td>
                        <td><strong className="piece-count">{row.pieces}</strong><small className="cell-caption">reçues</small></td>
                        <td><div className="payment-lines"><span><i className={row.deposit === "Payée" ? "paid" : "sent"} />Acompte {row.deposit}</span><span><i className={row.balance === "Payée" ? "paid" : row.balance === "Envoyée" ? "sent" : "empty"} />Solde {row.balance}</span></div></td>
                        <td><span className="reminder-date"><Icon name="calendar" />{row.reminder}</span></td>
                        <td><button className="more-button" type="button" onClick={() => setActivityOpen(`${row.client} · ${info.label}`)} aria-label={`Voir les mises à jour de ${row.client}`}>+</button></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          ) : (
            <div className="empty-group"><span><Icon name={activeGroup === "termines" ? "check" : "folder"} /></span><h2>{activeGroup === "termines" ? "Dossiers terminés" : "Dossiers annulés"}</h2><p>Ce groupe reste séparé : aucune relance ne peut partir depuis cet état.</p></div>
          )}
        </section>

        <aside className="admin-note"><span>i</span><p><strong>Principe retenu :</strong> une ligne correspond à une DAACT. Un même client peut donc avoir plusieurs lignes, plusieurs liens et des calendriers d’avancement indépendants.</p></aside>
      </section>

      {wizardOpen && (
        <div className="wizard-backdrop" onMouseDown={resetWizard}>
          <section className="wizard-panel" role="dialog" aria-modal="true" aria-labelledby="wizard-title" onMouseDown={(event) => event.stopPropagation()}>
            <div className="wizard-header">
              <div><p className="admin-eyebrow">Nouveau suivi</p><h2 id="wizard-title">Créer un dossier DAACT</h2></div>
              <button type="button" onClick={resetWizard} aria-label="Fermer">×</button>
            </div>

            {!created ? (
              <>
                <div className="wizard-steps" aria-label="Étapes">
                  {[1, 2, 3].map((value) => <div key={value} className={step >= value ? "active" : ""}><span>{step > value ? "✓" : value}</span><small>{value === 1 ? "Client et projet" : value === 2 ? "Type de DAACT" : "Suivi et relances"}</small></div>)}
                </div>

                <div className="wizard-body">
                  {step === 1 && (
                    <div className="form-section">
                      <div className="form-heading"><h3>Identifier le chantier</h3><p>Ces informations nomment le dossier Drive et personnalisent l’espace client.</p></div>
                      <div className="form-grid two">
                        <label>Prénom<input value={firstName} onChange={(event) => setFirstName(event.target.value)} /></label>
                        <label>Nom<input value={lastName} onChange={(event) => setLastName(event.target.value)} /></label>
                        <label className="wide">E-mail client<input type="email" value={email} onChange={(event) => setEmail(event.target.value)} /></label>
                        <label>Ville du projet<input value={city} onChange={(event) => setCity(event.target.value)} /></label>
                        <label>Surface créée (m²)<input inputMode="decimal" value={surface} onChange={(event) => setSurface(event.target.value)} /></label>
                      </div>
                      <fieldset className="choice-field"><legend>Nature du projet</legend><div className="segmented">{(["Maison neuve", "Extension", "Autre"] as ProjectKey[]).map((type) => <button key={type} type="button" className={projectType === type ? "active" : ""} onClick={() => setProjectType(type)}>{type}</button>)}</div><small>{projectType === "Extension" ? "Comprend aussi un garage ou carport accolé." : projectType === "Autre" ? "Garage, carport ou autre annexe indépendante uniquement." : "Construction d’une maison individuelle neuve."}</small></fieldset>
                      <label className="detail-field">Précision projet<textarea value={detail} onChange={(event) => setDetail(event.target.value)} rows={3} /></label>
                    </div>
                  )}

                  {step === 2 && (
                    <div className="form-section">
                      <div className="form-heading"><h3>Choisir une seule mission</h3><p>Une mission crée une ligne Monday, un dossier Drive et un lien client dédiés.</p></div>
                      <div className="mission-choice-grid">
                        {(Object.keys(missions) as MissionKey[]).map((key) => {
                          const info = missions[key];
                          return <button key={key} type="button" className={mission === key ? "active" : ""} onClick={() => setMission(key)}><img src={info.icon} alt="" /><span><strong>{info.label}</strong><small>{info.description}</small></span><b>{info.code}</b></button>;
                        })}
                      </div>
                      <div className="checklist-preview">
                        <div><span className="preview-icon"><Icon name="document" /></span><p><strong>{missionData.documents}</strong><small>pièces documentaires</small></p></div>
                        <div><span className="preview-icon"><Icon name="folder" /></span><p><strong>{missionData.photos}</strong><small>catégories photo</small></p></div>
                        <p className="preview-note">Checklist issue du référentiel ENRGETIC V1 · Les éléments conditionnels seront adaptés au projet.</p>
                      </div>
                    </div>
                  )}

                  {step === 3 && (
                    <div className="form-section">
                      <div className="form-heading"><h3>Facturation et rythme des relances</h3><p>Les relances restent sous le contrôle de l’agent administratif : date choisie ou action manuelle.</p></div>
                      <div className="billing-grid">
                        <article><h4>Devis</h4><label>N° de devis<input value={quoteNumber} onChange={(event) => setQuoteNumber(event.target.value)} /></label><label>Statut<select value={quoteStatus} onChange={(event) => setQuoteStatus(event.target.value)}><option>Envoyé</option><option>Accepté</option></select></label></article>
                        <article><h4>Facture d’acompte</h4><label>N° de facture<input value={depositNumber} onChange={(event) => setDepositNumber(event.target.value)} /></label><label>Statut<select value={depositStatus} onChange={(event) => setDepositStatus(event.target.value)}><option>Envoyée</option><option>Payée</option></select></label></article>
                        <article><h4>Facture de solde</h4><label>N° de facture<input placeholder="À renseigner plus tard" value={balanceNumber} onChange={(event) => setBalanceNumber(event.target.value)} /></label><label>Statut<select value={balanceStatus} onChange={(event) => setBalanceStatus(event.target.value)}><option>Envoyée</option><option>Payée</option></select></label></article>
                      </div>
                      <div className="reminder-builder">
                        <span className="preview-icon"><Icon name="bell" /></span>
                        <div><strong>Première relance autorisée</strong><p>Aucun message avant cette date. L’agent administratif pourra aussi utiliser « Relancer maintenant ».</p></div>
                        <label>Objet<select value={reminderType} onChange={(event) => setReminderType(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>
                      </div>
                      <div className="generated-path"><span><Icon name="folder" /></span><div><small>Dossier créé dans DAACT PARTAGE / Dossiers en Cours</small><strong>La référence et le nom définitif seront générés à la validation.</strong></div></div>
                    </div>
                  )}
                </div>

                <footer className="wizard-footer">
                  <button type="button" className="wizard-secondary" onClick={step === 1 ? resetWizard : () => setStep(step - 1)}>{step === 1 ? "Annuler" : "Retour"}</button>
                  <button
                    type="button"
                    className="wizard-primary"
                    disabled={creationPending}
                    onClick={() => {
                      if (step < 3) setStep(step + 1);
                      else void handleCreateDossier();
                    }}
                  >
                    {step < 3 ? "Continuer" : creationPending ? "Création en cours…" : "Créer le dossier et le lien"}<span>→</span>
                  </button>
                </footer>
                {creationBlocked && (
                  <div className="settings-notice" role="status">
                    <span>i</span>
                    <p>{creationError || "La création n’a pas pu être finalisée. Aucun résultat incomplet n’est présenté comme réussi."}</p>
                    <button type="button" onClick={() => setCreationBlocked(false)} aria-label="Fermer">×</button>
                  </div>
                )}
              </>
            ) : (
              <div className="success-state">
                <span className="success-check"><Icon name="check" /></span>
                <p className="admin-eyebrow">Dossier prêt</p>
                <h3>{missionData.label} · {firstName} {lastName}</h3>
                <p>La checklist personnalisée est prête. Le lien reste accessible pendant toute la durée du chantier.</p>
                <div className="success-summary"><span><img src={missionData.icon} alt="" /></span><div><small>Dossier Drive créé</small><strong>{createdDossier?.driveFolderName ?? folderName}</strong><small>{projectType} · {surface} m² · {city}</small></div></div>
                <div className="link-box"><div><Icon name="link" /><span><small>Lien nominatif client</small><strong>{clientLink}</strong></span></div><button type="button" onClick={handleCopy}><Icon name="copy" />{copied ? "Copié" : "Copier"}</button></div>
                <div className="success-actions"><a className="wizard-secondary" href={createdDossier?.driveFolderUrl} target="_blank" rel="noreferrer">Ouvrir Drive</a><a className="wizard-secondary" href={createdDossier?.mondayItemUrl} target="_blank" rel="noreferrer">Ouvrir Monday</a></div>
                <div className="success-actions"><button className="wizard-secondary" type="button" onClick={resetWizard}>Fermer</button><button className="wizard-primary" type="button">Préparer l’e-mail client <span>→</span></button></div>
              </div>
            )}
          </section>
        </div>
      )}

      {activityOpen && (
        <div className="activity-backdrop" onMouseDown={() => setActivityOpen(null)}>
          <aside className="activity-panel" role="dialog" aria-modal="true" aria-labelledby="activity-title" onMouseDown={(event) => event.stopPropagation()}>
            <header>
              <div><p className="admin-eyebrow">Journal du dossier</p><h2 id="activity-title">Mises à jour</h2><span>{activityOpen}</span></div>
              <button type="button" onClick={() => setActivityOpen(null)} aria-label="Fermer">×</button>
            </header>
            <div className="activity-sync"><span><Icon name="check" /></span><p><strong>Synchronisé avec Monday</strong><br />Chaque événement métier crée une entrée datée dans les mises à jour de cette ligne.</p></div>
            <div className="activity-timeline">
              {activityEntries.map((entry) => (
                <article className="activity-entry" key={`${entry.kind}-${entry.time}`}>
                  <span className={`activity-dot ${entry.tone}`} />
                  <div className="activity-card">
                    <div className="activity-meta"><span className={`activity-kind ${entry.tone}`}>{entry.kind}</span><time>{entry.time}</time></div>
                    <h3>{entry.title}</h3>
                    <p>{entry.description}</p>
                    {entry.files.length > 0 && <div className="activity-files">{entry.files.map((file) => <span key={file}><Icon name="document" />{file}</span>)}</div>}
                    <footer><span>Par {entry.actor}</span><button type="button">Voir dans Monday ↗</button></footer>
                  </div>
                </article>
              ))}
            </div>
            <div className="activity-rule"><strong>Journal lisible, sans bruit technique</strong><p>Un dépôt de plusieurs pièces crée une seule mise à jour avec le détail des fichiers. Les erreurs ou documents douteux sont signalés séparément lorsqu’un agent administratif doit intervenir.</p></div>
          </aside>
        </div>
      )}
    </main>
  );
}