// ---------------------------------------------------------------------------
// Fabri-Ka — Agrégateur de produits fabriqués au Québec
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/Closing.tsx : « En bref », CTA sticky mobile, aside desktop et
//   « Demander à Ka » (widget KA Agent partagé) de la fiche produit.
// ---------------------------------------------------------------------------
import { useEffect, useState } from 'react'
import { ProductDetail, formatPrice } from '../api'
import { Ico, IcoHeart } from '../components/KaIcons'
import OriginBadge from '../components/OriginBadge'
import BottomSheet from './BottomSheet'
import { Constat, rabais } from './synthese'
import { SectionCard, SkeletonLines } from './ui'

export function BriefList({ items, compact = false }: { items: Constat[]; compact?: boolean }) {
  const glyph = (t: Constat['tone']) => (t === 'good' ? '✓' : t === 'bad' ? '✕' : t === 'warn' ? '!' : '○')
  return (
    <ul className="fb-brief">
      {items.map((c) => (
        <li key={c.cle}>
          <span className={`fb-brief-ico ${c.tone === 'info' ? 'neutral' : c.tone}`} aria-hidden="true">{glyph(c.tone)}</span>
          <div><div className="fb-brief-t">{c.titre}</div>{!compact && c.detail && <div className="fb-brief-d">{c.detail}</div>}</div>
        </li>
      ))}
    </ul>
  )
}

export function Summary({ items }: { items: Constat[] }) {
  return (
    <SectionCard id="resume" title="En bref">
      {items.length > 0 ? <BriefList items={items} /> : <SkeletonLines n={3} />}
    </SectionCard>
  )
}

export function usePastElement(watch: React.RefObject<HTMLElement>): boolean {
  const [past, setPast] = useState(false)
  useEffect(() => {
    const check = () => { const el = watch.current; if (el) setPast(el.getBoundingClientRect().bottom < 0) }
    check()
    window.addEventListener('scroll', check, { passive: true })
    window.addEventListener('resize', check)
    return () => { window.removeEventListener('scroll', check); window.removeEventListener('resize', check) }
  }, [watch])
  return past
}

const prixTxt = (p: ProductDetail) => (p.price != null ? formatPrice(p.price, p.currency) : p.price_on_request ? 'Sur devis' : 'Prix en boutique')

export function StickyCTA({ p, show }: { p: ProductDetail; show: boolean }) {
  const r = rabais(p)
  return (
    <div className={`fb-cta-bar ${show ? 'show' : ''}`} aria-hidden={!show}>
      <div className="fb-cta-txt">
        <div className="fb-cta-price">{prixTxt(p)}</div>
        <div className={`fb-cta-sub ${r ? 'good' : ''}`}>{r ? `Solde −${r.pct} %` : p.store_name}</div>
      </div>
      <a className="fb-btn fb-btn-primary" href={p.url} target="_blank" rel="noopener noreferrer" tabIndex={show ? 0 : -1}>Voir chez {p.store_name} <Ico name="external" size={15} /></a>
    </div>
  )
}

export function DesktopAside({ p, brief, fav, onFav, onShare }: {
  p: ProductDetail; brief: Constat[]; fav: boolean; onFav: () => void; onShare: () => void
}) {
  const r = rabais(p)
  return (
    <aside className="fb-aside" aria-label="Résumé et actions">
      <div className="fb-card fb-aside-card">
        <div>
          <div className="fb-price" style={p.price == null ? { fontSize: 20 } : undefined}>{prixTxt(p)}{r && <small style={{ textDecoration: 'line-through', opacity: 0.7 }}>{formatPrice(r.avant, p.currency)}</small>}</div>
          <div className="fb-price-row" style={{ marginTop: 8 }}><span className="fb-capsule fb-capsule-origin"><OriginBadge origin={p.origin_class} withLabel /></span>{r && <span className="fb-capsule sale"><b>−{r.pct} %</b></span>}</div>
        </div>
        <div className="fb-aside-addr">{p.title}<br />{[p.store_name, p.store_region].filter(Boolean).join(' · ')}</div>
        <a className="fb-btn fb-btn-primary" href={p.url} target="_blank" rel="noopener noreferrer">Voir chez {p.store_name} <Ico name="external" size={16} /></a>
        <div className="fb-actions">
          <button type="button" className={`fb-btn fb-btn-ghost ${fav ? 'on' : ''}`} style={{ flex: 1 }} aria-pressed={fav} onClick={onFav}><IcoHeart size={17} filled={fav} /> {fav ? 'Favori' : 'Favoris'}</button>
          <button type="button" className="fb-btn fb-btn-ghost" style={{ flex: 1 }} onClick={onShare}><Ico name="share" size={16} /> Partager</button>
        </div>
        <button type="button" className="fb-btn fb-btn-ghost fb-ka-inline" onClick={() => window.dispatchEvent(new Event('fb:askka'))}><Ico name="sparkles" size={16} /> Demander à Ka</button>
        {brief.length > 0 && <><hr className="fb-aside-sep" /><BriefList items={brief.slice(0, 4)} compact /></>}
        <div className="fb-aside-meta">Fiche synchronisée depuis {p.store_name}</div>
      </div>
    </aside>
  )
}

const SUGGESTIONS = ['Ce produit est-il fabriqué au Québec ?', 'Trouve des produits semblables d\'ici', 'Explique la classe d\'origine', 'Compare le prix à d\'autres boutiques', 'Idée cadeau dans la même catégorie']
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 function KaAssistant({ p, hidden }: { p: ProductDetail; hidden?: boolean }) {
  const [open, setOpen] = useState(false)
  const [q, setQ] = useState('')
  const [err, setErr] = useState(false)
  useEffect(() => { const on = () => setOpen(true); window.addEventListener('fb:askka', on); return () => window.removeEventListener('fb:askka', on) }, [])
  const contexte = () => `(Produit consulté sur Fabri-Ka : ${p.title} chez ${p.store_name}${p.price != null ? ` — ${formatPrice(p.price, p.currency)}` : ''} — https://www.fabri-ka.com/produits/${encodeURIComponent(p.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={`fb-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="fb-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 produit…" aria-label="Votre question" />
                     <button type="submit" aria-label="Envoyer" disabled={!q.trim()}><Ico name="chevright" size={20} /></button></form>}>
        <div className="fb-ka-intro"><span className="fb-ka-avatar" aria-hidden="true"><Ico name="sparkles" size={18} /></span>
          <p>Je peux expliquer l'origine du produit, trouver des alternatives fabriquées au Québec et comparer les boutiques d'ici.</p></div>
        <div className="fb-ka-ctx">{p.images?.[0] && <img src={p.images[0]} alt="" />}<span style={{ minWidth: 0 }}><b>{p.title}</b>{[p.store_name, p.price != null ? formatPrice(p.price, p.currency) : null].filter(Boolean).join(' · ')}</span></div>
        <div className="fb-ka-sugs">{SUGGESTIONS.map((s) => <button type="button" className="fb-ka-sug" key={s} onClick={() => poser(s)}>{s} <Ico name="chevright" size={16} /></button>)}</div>
        {err && <p className="fb-note warn">L'assistant n'est pas encore chargé — réessayez dans un instant.</p>}
      </BottomSheet>
    </>
  )
}