// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/KaAssistant.tsx : « ✦ Demander à Ka » — bouton discret (bas droite,
//   au-dessus du CTA) qui remplace la grosse bulle KA Agent sur la fiche, et
//   bottom sheet de démarrage : contexte de la propriété, suggestions
//   prédéfinies, champ libre. L'envoi passe par le widget KA Agent existant
//   (ka-agent.js, backend api-ka inchangé) : on ouvre son panneau et on lui
//   transmet la question, enrichie du contexte de la fiche (adresse, ville,
//   prix, type, lien).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Listing, fmtPrice } from "../api";
import { Ico } from "../components/Icons";
import BottomSheet from "./BottomSheet";

const SUGGESTIONS = [
  "Est-ce un bon prix pour ce secteur ?",
  "Compare cette propriété au quartier",
  "Quels frais dois-je prévoir en plus du prix ?",
  "Quels sont les points de vigilance ?",
  "Explique l'estimation Vrai-Prix",
];

/** Ouvre le panneau KA Agent (widget partagé) et envoie la question. */
function envoyerAKa(question: string): boolean {
  const btn = document.querySelector<HTMLButtonElement>(".kaa-btn");
  const ta = document.querySelector<HTMLTextAreaElement>(".kaa-panel textarea");
  const send = document.querySelector<HTMLButtonElement>(".kaa-in button");
  if (!btn || !ta || !send) return false;
  btn.click();
  ta.value = question;
  setTimeout(() => send.click(), 60);
  return true;
}

export default function KaAssistant({ l, hidden }: { l: Listing; hidden?: boolean }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const [err, setErr] = useState(false);
  useEffect(() => {
    const on = () => setOpen(true);
    window.addEventListener("ik:askka", on);
    return () => window.removeEventListener("ik:askka", on);
  }, []);

  const contexte = () =>
    `(Propriété consultée sur Immo-Ka : ${l.address || l.title}${l.city ? `, ${l.city}` : ""}` +
    `${l.price != null ? ` — ${fmtPrice(l.price)}` : ""}${l.property_type ? ` — ${l.property_type}` : ""}` +
    ` — https://www.immo-ka.com/propriete/${encodeURIComponent(l.uid)})`;

  const poser = (question: string) => {
    const ok = envoyerAKa(`${question}\n\n${contexte()}`);
    if (ok) { setOpen(false); setQ(""); setErr(false); } else setErr(true);
  };

  return (
    <>
      <button type="button" className={`ik-ka-btn ${hidden ? "hide" : ""}`} onClick={() => setOpen(true)}
              aria-label="Demander à Ka, l'assistant Groupe KA">
        <Ico name="sparkles" size={16} /> Demander à Ka
      </button>
      <BottomSheet open={open} onClose={() => setOpen(false)} title="Demander à Ka" sub="Assistant Groupe KA · connaît cette fiche"
                   footer={
                     <form className="ik-ka-in" onSubmit={(e) => { e.preventDefault(); if (q.trim()) poser(q.trim()); }}>
                       <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Posez votre question sur cette propriété…" aria-label="Votre question" />
                       <button type="submit" aria-label="Envoyer" disabled={!q.trim()}><Ico name="chevright" size={20} /></button>
                     </form>
                   }>
        <div className="ik-ka-intro">
          <span className="ik-ka-avatar" aria-hidden="true"><Ico name="sparkles" size={18} /></span>
          <p>Je peux situer ce prix dans le quartier, expliquer les données de la fiche, estimer les frais et chercher dans les autres plateformes Groupe KA.</p>
        </div>
        <div className="ik-ka-ctx">
          {l.images?.[0] && <img src={l.images[0]} alt="" />}
          <span style={{ minWidth: 0 }}>
            <b>{l.address || l.title}</b>
            {[l.city, l.price != null ? fmtPrice(l.price) : null, l.property_type].filter(Boolean).join(" · ")}
          </span>
        </div>
        <div className="ik-ka-sugs">
          {SUGGESTIONS.map((s) => (
            <button type="button" className="ik-ka-sug" key={s} onClick={() => poser(s)}>
              {s} <Ico name="chevright" size={16} />
            </button>
          ))}
        </div>
        {err && <p className="ik-note warn">L'assistant n'est pas encore chargé — réessayez dans un instant.</p>}
      </BottomSheet>
    </>
  );
}