"use client"

import { Icon } from "@iconify/react"
import { cn } from "@/lib/utils"

const ACCENT = "#4285F4"

type DiscoveredProfile = {
  name: string
  email: string
  messages: number
  enriched: string
  status: "suggested" | "filtered"
  reason: string
}

const PROFILES: DiscoveredProfile[] = [
  {
    name: "Léa Fontaine",
    email: "lea.fontaine@atelier-nord.fr",
    messages: 18,
    enriched: "Directrice · Atelier Nord",
    status: "suggested",
    reason: "Société & poste extraits de la signature",
  },
  {
    name: "Vincent Morel",
    email: "vincent.morel@gmail.com",
    messages: 7,
    enriched: "+33 6 12 34 56 78",
    status: "suggested",
    reason: "Téléphone détecté dans les échanges",
  },
  {
    name: "Newsletter Produit",
    email: "news@produit.io",
    messages: 42,
    enriched: "Liste de diffusion",
    status: "filtered",
    reason: "Écarté automatiquement (mailing-list)",
  },
]

/** Aperçu statique de la découverte de contacts depuis le mail + enrichissement IA. */
export function UlticardsDiscoveryDemo() {
  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:account-search-outline" className="size-5" style={{ color: ACCENT }} aria-hidden />
          <span className="text-sm font-semibold tracking-tight">Découverte de contacts</span>
          <span className="ml-auto flex items-center gap-1.5 text-[11px] font-medium text-[var(--landing-muted)]">
            <Icon icon="mdi:email-sync-outline" className="size-3.5" aria-hidden />
            3 comptes scannés
          </span>
        </div>

        <div className="border-b border-[var(--landing-line)] bg-[var(--landing-chip)]/30 px-4 py-2.5">
          <div className="flex items-center justify-between text-[11px] font-medium text-[var(--landing-muted)]">
            <span className="flex items-center gap-1.5">
              <Icon icon="mdi:radar" className="size-3.5" style={{ color: ACCENT }} aria-hidden />
              Analyse des messages
            </span>
            <span className="tabular-nums">1 248 / 1 248</span>
          </div>
          <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-[var(--landing-line)]">
            <span className="block h-full w-full rounded-full" style={{ backgroundColor: ACCENT }} />
          </div>
        </div>

        <ul className="flex flex-col divide-y divide-[var(--landing-line)]">
          {PROFILES.map((profile) => {
            const filtered = profile.status === "filtered"
            return (
              <li
                key={profile.email}
                className={cn("flex items-start gap-3 px-4 py-3", filtered && "opacity-60")}
              >
                <span
                  className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
                  style={{ backgroundColor: filtered ? "var(--landing-muted)" : ACCENT }}
                  aria-hidden
                >
                  {profile.name.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)]">
                      {profile.name}
                    </span>
                    <span className="ml-auto shrink-0 text-[11px] tabular-nums text-[var(--landing-muted)]">
                      {profile.messages} messages
                    </span>
                  </div>
                  <p className="truncate text-xs text-[var(--landing-muted)]">{profile.email}</p>
                  <p className="mt-1 flex items-center gap-1.5 text-xs text-[var(--landing-muted)]">
                    <Icon
                      icon={filtered ? "mdi:filter-remove-outline" : "mdi:auto-fix"}
                      className="size-3.5 shrink-0"
                      style={{ color: filtered ? "var(--landing-muted)" : ACCENT }}
                      aria-hidden
                    />
                    <span className="font-medium text-[var(--landing-fg)]">{profile.enriched}</span>
                    <span aria-hidden>·</span>
                    {profile.reason}
                  </p>
                </div>
                {filtered ? (
                  <Icon
                    icon="mdi:close-circle-outline"
                    className="mt-1 size-5 shrink-0 text-[var(--landing-muted)]"
                    aria-hidden
                  />
                ) : (
                  <span
                    className="mt-0.5 flex h-7 shrink-0 items-center gap-1 rounded-full px-2.5 text-[11px] font-semibold text-white"
                    style={{ backgroundColor: ACCENT }}
                  >
                    <Icon icon="mdi:plus" className="size-3.5" aria-hidden />
                    Ajouter
                  </span>
                )}
              </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 — la découverte tourne sur votre infrastructure, rien n&apos;est partagé.
      </p>
    </div>
  )
}