// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (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 du logement, 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 (titre, ville, prix, lien).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Listing, fmtPrice } from "../api";
import { IcoChevronRight, IcoSparkles } from "../components/Icons";
import BottomSheet from "./BottomSheet";

const SUGGESTIONS = [
  "Est-ce une bonne affaire ?",
  "Compare ce loyer au quartier",
  "Le secteur est-il bon sans voiture ?",
  "Quels sont les points négatifs ?",
  "Explique le registre des loyers",
];

/** 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();                       // ouvre le panneau (plein écran)
  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);
  // ouverture depuis un autre composant (bouton de l'aside desktop)
  useEffect(() => {
    const on = () => setOpen(true);
    window.addEventListener("lk:askka", on);
    return () => window.removeEventListener("lk:askka", on);
  }, []);

  const contexte = () =>
    `(Logement consulté sur Lou-Ka : ${l.title || l.address}${l.city ? `, ${l.city}` : ""}` +
    `${l.price != null ? ` — ${fmtPrice(l.price)}/mois` : ""}${l.unit_type ? ` — ${l.unit_type}` : ""}` +
    ` — https://www.lou-ka.com/logement/${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={`lk-ka-btn ${hidden ? "hide" : ""}`} onClick={() => setOpen(true)}
              aria-label="Demander à Ka, l'assistant Groupe KA">
        <IcoSparkles 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="lk-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 ce logement…" aria-label="Votre question" />
                       <button type="submit" aria-label="Envoyer" disabled={!q.trim()}><IcoChevronRight size={20} /></button>
                     </form>
                   }>
        <div className="lk-ka-intro">
          <span className="lk-ka-avatar" aria-hidden="true"><IcoSparkles size={18} /></span>
          <p>Je peux comparer ce loyer au quartier, expliquer les données de la fiche et chercher dans les autres plateformes Groupe KA.</p>
        </div>
        <div className="lk-ka-ctx">
          {l.images?.[0] && <img src={`/api/img?u=${encodeURIComponent(l.images[0])}&w=160`} alt="" />}
          <span style={{ minWidth: 0 }}>
            <b>{l.title || l.address}</b>
            {[l.city, l.price != null ? `${fmtPrice(l.price)}/mois` : null, l.unit_type].filter(Boolean).join(" · ")}
          </span>
        </div>
        <div className="lk-ka-sugs">
          {SUGGESTIONS.map((s) => (
            <button type="button" className="lk-ka-sug" key={s} onClick={() => poser(s)}>
              {s} <IcoChevronRight size={16} />
            </button>
          ))}
        </div>
        {err && <p className="lk-note warn">L'assistant n'est pas encore chargé — réessayez dans un instant.</p>}
      </BottomSheet>
    </>
  );
}