"use client"

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

const ACCENT = "#F59E0B"

type ChatMessage = {
  role: "user" | "assistant"
  text: string
  tool?: { icon: string; label: string }
}

const MESSAGES: ChatMessage[] = [
  {
    role: "user",
    text: "Résume le fil « Atelier Nord » et prépare une réponse pour décaler à jeudi.",
  },
  {
    role: "assistant",
    tool: { icon: "mdi:email-search-outline", label: "Recherche dans Ultimail" },
    text: "3 messages trouvés. Léa propose mardi 14h, Vincent a un conflit. En résumé : validation du devis OK, reste à caler la date.",
  },
  {
    role: "assistant",
    tool: { icon: "mdi:file-document-edit-outline", label: "Brouillon de réponse" },
    text: "Brouillon prêt : « Bonjour Léa, jeudi 14h vous conviendrait-il ? Je joins le lien UltiMeet. »",
  },
]

/** Aperçu statique du chat UltiAI avec appels d'outils et streaming. */
export function UltiaiChatDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="landing-glass-strong flex h-[22rem] flex-col overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)] sm:h-[26rem]">
        <div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
          <img
            src="/ultiai-mark.svg"
            alt=""
            className="size-6 object-contain"
            aria-hidden
          />
          <span className="text-sm font-semibold tracking-tight">UltiAI</span>
          <span
            className="ml-auto flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium"
            style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
          >
            <Icon icon="mdi:circle" className="size-2" aria-hidden />
            Contexte mail actif
          </span>
        </div>

        <div className="flex flex-1 flex-col gap-3 overflow-hidden p-4">
          {MESSAGES.map((message, index) => (
            <div
              key={index}
              className={cn(
                "flex flex-col gap-1.5",
                message.role === "user" ? "items-end" : "items-start"
              )}
            >
              {message.tool ? (
                <span className="flex items-center gap-1.5 rounded-full border border-[var(--landing-line)] bg-[var(--landing-chip)] px-2.5 py-1 text-[11px] font-medium text-[var(--landing-muted)]">
                  <Icon icon={message.tool.icon} className="size-3.5" style={{ color: ACCENT }} aria-hidden />
                  {message.tool.label}
                </span>
              ) : null}
              <div
                className={cn(
                  "max-w-[85%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
                  message.role === "user"
                    ? "rounded-br-md text-[#202124]"
                    : "rounded-bl-md bg-[var(--landing-chip)] text-[var(--landing-fg)]"
                )}
                style={message.role === "user" ? { backgroundColor: ACCENT } : undefined}
              >
                {message.text}
              </div>
            </div>
          ))}

          <div className="flex items-center gap-1.5 self-start rounded-2xl rounded-bl-md bg-[var(--landing-chip)] px-3.5 py-3">
            <span className="size-1.5 animate-pulse rounded-full bg-[var(--landing-muted)]" />
            <span className="size-1.5 animate-pulse rounded-full bg-[var(--landing-muted)] [animation-delay:120ms]" />
            <span className="size-1.5 animate-pulse rounded-full bg-[var(--landing-muted)] [animation-delay:240ms]" />
          </div>
        </div>

        <div className="border-t border-[var(--landing-line)] p-3">
          <div className="flex items-center gap-2 rounded-full border border-[var(--landing-line)] bg-[var(--landing-bg)] px-3.5 py-2">
            <span className="flex-1 truncate text-sm text-[var(--landing-muted)]">
              Demandez quelque chose à UltiAI…
            </span>
            <span
              className="flex size-7 items-center justify-center rounded-full text-[#202124]"
              style={{ backgroundColor: ACCENT }}
            >
              <Icon icon="mdi:arrow-up" className="size-4" aria-hidden />
            </span>
          </div>
        </div>
      </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 — l&apos;assistant lit le contexte et propose, rien n&apos;est envoyé.
      </p>
    </div>
  )
}