"use client"

import { Icon } from "@iconify/react"

const ACCENT = "#F59E0B"

type TriageItem = {
  sender: string
  subject: string
  label: string
  labelColor: string
  reason: string
}

const ITEMS: TriageItem[] = [
  {
    sender: "Stripe",
    subject: "Votre reçu de paiement — 149 €",
    label: "Comptabilité",
    labelColor: "#34A853",
    reason: "Reçu de paiement → archivé et étiqueté.",
  },
  {
    sender: "Léa Fontaine",
    subject: "Re: Atelier Nord — proposition de date",
    label: "À traiter",
    labelColor: "#EA4335",
    reason: "Demande de réponse → priorité haute.",
  },
  {
    sender: "Newsletter Produit",
    subject: "Les nouveautés de juin sont là",
    label: "Veille",
    labelColor: "#4285F4",
    reason: "Contenu informatif → boîte secondaire.",
  },
]

/** Aperçu statique du tri IA : règle LLM qui classe et explique son choix. */
export function UltiaiTriageDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
        <div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
          <Icon icon="mdi:creation-outline" className="size-5" style={{ color: ACCENT }} aria-hidden />
          <span className="text-sm font-semibold tracking-tight">Règle de tri IA</span>
        </div>

        <div className="border-b border-[var(--landing-line)] bg-[var(--landing-chip)]/30 px-4 py-3">
          <p className="text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
            Prompt de la règle
          </p>
          <p className="mt-1 text-sm leading-relaxed text-[var(--landing-fg)]">
            « Classe chaque mail entrant selon le contexte de mon activité : comptabilité,
            à traiter ou veille. »
          </p>
        </div>

        <ul className="flex flex-col divide-y divide-[var(--landing-line)]">
          {ITEMS.map((item) => (
            <li key={item.subject} className="flex items-start gap-3 px-4 py-3">
              <span
                className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
                style={{ backgroundColor: item.labelColor }}
                aria-hidden
              >
                {item.sender.charAt(0)}
              </span>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="truncate text-sm font-medium text-[var(--landing-fg)]">
                    {item.sender}
                  </span>
                  <span
                    className="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium"
                    style={{ backgroundColor: `${item.labelColor}1f`, color: item.labelColor }}
                  >
                    {item.label}
                  </span>
                </div>
                <p className="truncate text-sm text-[var(--landing-muted)]">{item.subject}</p>
                <p className="mt-1 flex items-center gap-1.5 text-xs text-[var(--landing-muted)]">
                  <Icon icon="mdi:robot-outline" className="size-3.5 shrink-0" style={{ color: ACCENT }} aria-hidden />
                  {item.reason}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
        <Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
        Aperçu statique — le LLM classe à la réception selon votre prompt.
      </p>
    </div>
  )
}