"use client";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import type { ListingCard } from "@/lib/types";
import { ListingCardView } from "@/components/listing-card";
import { IconSpark } from "@/components/icons";
import { Notice } from "@/components/ui";
type Msg = { role: "user" | "assistant"; content: string; citations?: string[]; cards?: ListingCard[] };
const STARTERS = ["Quels sont les meilleurs quartiers familiaux à Québec ?", "Montre-moi des condos à louer à Montréal sous 1 800 $", "Combien vaut le 1234 rue des Érables à Québec ?", "Quel est le prix médian des maisons en Montérégie ?", "Versement mensuel pour 500 000 $ avec 10 % de mise de fonds à 4,9 %"];
export function AssistantView({ uid, compact = false }: { uid?: string; compact?: boolean }) {
  const [msgs, setMsgs] = useState<Msg[]>([]); const [q, setQ] = useState(""); const [busy, setBusy] = useState(false); const end = useRef<HTMLDivElement>(null);
  useEffect(() => { end.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }); }, [msgs, busy]);
  const send = async (text: string) => {
    if (!text.trim() || busy) return;
    const next: Msg[] = [...msgs, { role: "user", content: text.trim() }]; setMsgs(next); setQ(""); setBusy(true);
    const r = await fetch("/api/assistant", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ messages: next.map(({ role, content }) => ({ role, content })), context: uid ? { uid } : undefined }) });
    const d = await r.json(); let cards: ListingCard[] = [];
    if (r.ok && d.citations?.length) { const c = await fetch(`/api/listings?uids=${encodeURIComponent(d.citations.slice(0, 6).join(","))}`).then((r) => r.json()).catch(() => null); cards = c?.items ?? []; }
    setMsgs([...next, { role: "assistant", content: r.ok ? d.text : (d.error ?? "Erreur"), citations: d.citations, cards }]); setBusy(false);
  };
  return (
    <div className={`flex flex-col ${compact ? "h-[520px]" : "min-h-[70dvh]"}`}>
      {!compact && <div className="mb-4"><h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-2"><span className="p-2 rounded-full bg-brand-soft text-brand-dark"><IconSpark /></span> Assistant Toveli</h1><p className="text-ink-2 mt-1">Il interroge les données Toveli (annonces, marché, rôle, ventes) et cite les fiches qu'il utilise. Il ne devine pas de prix.</p></div>}
      <div className="flex-1 overflow-auto space-y-4 pr-1">
        {msgs.length === 0 && <div className="flex flex-wrap gap-2">{STARTERS.map((s) => <button key={s} type="button" onClick={() => send(s)} className="tv-chip text-left whitespace-normal">{s}</button>)}</div>}
        {msgs.map((m, i) => (
          <div key={i} className={`flex ${m.role === "user" ? "justify-end" : "justify-start"}`}>
            <div className={`max-w-[88%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${m.role === "user" ? "bg-brand text-white rounded-br-sm" : "bg-surface-2 text-ink rounded-bl-sm"}`}>
              {m.content}
              {m.cards && m.cards.length > 0 && <div className="mt-3 grid gap-2">{m.cards.map((c) => <ListingCardView key={c.uid} c={c} compact />)}</div>}
            </div>
          </div>
        ))}
        {busy && <div className="flex"><div className="bg-surface-2 rounded-2xl px-4 py-2.5 text-sm text-ink-3">Je consulte les données…</div></div>}
        <div ref={end} />
      </div>
      <form onSubmit={(e) => { e.preventDefault(); send(q); }} className="mt-3 flex gap-2">
        <input value={q} onChange={(e) => setQ(e.target.value)} className="tv-input !pl-4 flex-1" placeholder="Posez votre question…" aria-label="Votre question" disabled={busy} />
        <button type="submit" className="tv-btn tv-btn-primary" disabled={busy || !q.trim()}>Envoyer</button>
      </form>
      <div className="mt-2"><Notice>Réponses générées par un modèle de langage à partir des données Toveli ; vérifiez sur la fiche d'origine. Pas de conseil financier, juridique ou d'évaluation agréée. <Link href="/confidentialite" className="underline">Vos messages ne sont pas conservés</Link>.</Notice></div>
    </div>
  );
}