// chatbot.jsx — Assistant d'orientation IA + Newsletter modal

function Chatbot() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: "assistant", text: "Bonjour 👋 Je suis l'assistant de l'Ordre des Pharmaciens. Je peux vous orienter vers la bonne pharmacie, la bonne information ou le bon service. Posez-moi votre question." },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const scrollRef = useRef(null);

  const suggestions = [
    "Où trouver une pharmacie de garde ?",
    "Comment vérifier qu'un pharmacien est inscrit ?",
    "Quelles démarches pour ouvrir une officine ?",
    "Comment signaler un médicament suspect ?",
  ];

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, open]);

  const send = async (text) => {
    const userMsg = text || input;
    if (!userMsg.trim()) return;
    setInput("");
    setMessages((m) => [...m, { role: "user", text: userMsg }]);
    setLoading(true);
    try {
      const systemPrompt = `Tu es l'assistant d'orientation du site officiel de l'Ordre des Pharmaciens du Niger. Tu réponds BRIÈVEMENT et chaleureusement en français, et tu orientes vers la bonne page du site :
- "Annuaire / Pharmacies de garde" pour trouver un pharmacien ou une pharmacie ouverte
- "Vérifier" pour confirmer l'inscription d'un pharmacien
- "Réglementation" pour les textes légaux
- "Signaler" pour un manquement ou un médicament suspect
- "Alertes sanitaires" pour les médicaments falsifiés et rappels de lots
- "Inscription" pour s'inscrire au tableau de l'Ordre
- "Formations" pour le DPC et événements
- "Contact" pour joindre le secrétariat
- "Guides santé" pour les conseils grand public
Pour les urgences vitales, oriente vers le 15. Réponds en 3 phrases maximum.`;
      const reply = await window.claude.complete({
        messages: [
          { role: "user", content: `${systemPrompt}\n\nQuestion de l'utilisateur : ${userMsg}` },
        ],
      });
      setMessages((m) => [...m, { role: "assistant", text: reply }]);
    } catch (e) {
      setMessages((m) => [...m, { role: "assistant", text: "Désolé, je n'arrive pas à répondre. Vous pouvez joindre notre secrétariat au +227 20 00 00 00 (lun–ven, 8h–16h)." }]);
    }
    setLoading(false);
  };

  return (
    <>
      <button className={`chatbot-fab ${open ? "active" : ""}`} onClick={() => setOpen(!open)} aria-label="Assistant">
        {open ? (
          <Icon.X size={20} />
        ) : (
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M21 12c0 4.4-4 8-9 8-1.4 0-2.7-.3-3.9-.8L3 21l1.3-4.5C3.5 15.3 3 13.7 3 12c0-4.4 4-8 9-8s9 3.6 9 8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
            <circle cx="8.5" cy="12" r="1" fill="currentColor"/>
            <circle cx="12" cy="12" r="1" fill="currentColor"/>
            <circle cx="15.5" cy="12" r="1" fill="currentColor"/>
          </svg>
        )}
      </button>

      {open && (
        <div className="chatbot-window">
          <div className="chatbot-head">
            <div className="chatbot-avatar">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M12 2L5 5v6c0 4.5 3 8.5 7 9 4-.5 7-4.5 7-9V5l-7-3z" fill="var(--c-accent)" stroke="#fff" strokeWidth="1.2"/>
                <path d="M9 11h6M12 8v6" stroke="var(--green-900)" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </div>
            <div>
              <div style={{ color: "#fff", fontFamily: "var(--ff-serif)", fontSize: 17 }}>Assistant OPN</div>
              <div style={{ color: "rgba(255,255,255,0.65)", fontSize: 12 }}>
                <span style={{ width: 6, height: 6, background: "#62D478", borderRadius: 99, display: "inline-block", marginRight: 6 }}></span>
                En ligne · IA
              </div>
            </div>
            <button className="chatbot-close" onClick={() => setOpen(false)} aria-label="Fermer"><Icon.X /></button>
          </div>

          <div className="chatbot-body" ref={scrollRef}>
            {messages.map((m, i) => (
              <div key={i} className={`chatbot-msg ${m.role}`}>
                {m.text}
              </div>
            ))}
            {loading && (
              <div className="chatbot-msg assistant typing">
                <span></span><span></span><span></span>
              </div>
            )}
            {messages.length === 1 && (
              <div className="chatbot-suggestions">
                {suggestions.map((s) => (
                  <button key={s} onClick={() => send(s)}>{s}</button>
                ))}
              </div>
            )}
          </div>

          <form className="chatbot-input" onSubmit={(e) => { e.preventDefault(); send(); }}>
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Écrivez votre question…"
              disabled={loading}
            />
            <button type="submit" disabled={loading || !input.trim()}>
              <Icon.ArrowRight size={16} />
            </button>
          </form>
          <div className="chatbot-foot">
            <span>Assistant IA · Ne remplace pas un avis pharmaceutique. Urgences : 15</span>
          </div>
        </div>
      )}
    </>
  );
}
window.Chatbot = Chatbot;


// ─── ACCESSIBILITY TOOLBAR ─────────────────────────────────
function A11yTools({ tweaks, setTweak }) {
  const [open, setOpen] = useState(false);
  const fontSize = tweaks.fontSize || 100;
  const contrast = tweaks.contrast || false;

  useEffect(() => {
    document.documentElement.style.fontSize = `${fontSize}%`;
    document.body.setAttribute("data-contrast", contrast ? "high" : "normal");
  }, [fontSize, contrast]);

  return (
    <div className="a11y-tools">
      <button className="a11y-trigger" onClick={() => setOpen(!open)} aria-label="Accessibilité" title="Accessibilité">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="12" cy="7.5" r="1.3" fill="currentColor"/>
          <path d="M8 11l4 1 4-1M12 12v6M9.5 17l2.5-4 2.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {open && (
        <div className="a11y-panel">
          <div className="a11y-row">
            <span>Taille du texte</span>
            <div className="a11y-btns">
              <button onClick={() => setTweak("fontSize", Math.max(80, fontSize - 10))}>A−</button>
              <span className="mono">{fontSize} %</span>
              <button onClick={() => setTweak("fontSize", Math.min(150, fontSize + 10))}>A+</button>
            </div>
          </div>
          <div className="a11y-row">
            <span>Contraste élevé</span>
            <button className={`a11y-toggle ${contrast ? "on" : ""}`} onClick={() => setTweak("contrast", !contrast)}>
              {contrast ? "Activé" : "Désactivé"}
            </button>
          </div>
          <div className="a11y-row">
            <span>Réinitialiser</span>
            <button className="a11y-toggle" onClick={() => { setTweak("fontSize", 100); setTweak("contrast", false); }}>Réinit.</button>
          </div>
        </div>
      )}
    </div>
  );
}
window.A11yTools = A11yTools;


// ─── LANGUAGE SWITCHER ─────────────────────────────────────
function LangSwitcher({ tweaks, setTweak }) {
  const lang = tweaks.lang || "fr";
  const langs = [
    { c: "fr", l: "Français" },
    { c: "ha", l: "Haoussa" },
    { c: "zg", l: "Zarma" },
  ];
  const [open, setOpen] = useState(false);

  return (
    <div className="lang-switch">
      <button className="lang-trigger" onClick={() => setOpen(!open)}>
        <span className="lang-code">{lang.toUpperCase()}</span>
        <Icon.Chevron size={10} />
      </button>
      {open && (
        <div className="lang-menu">
          {langs.map((L) => (
            <button key={L.c} className={lang === L.c ? "active" : ""} onClick={() => { setTweak("lang", L.c); setOpen(false); }}>
              <span className="mono">{L.c.toUpperCase()}</span>
              <span>{L.l}</span>
              {lang === L.c && <Icon.Check size={12} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
window.LangSwitcher = LangSwitcher;


// ─── ALERT BANNER (haut de page) ───────────────────────────
function AlertBanner({ navigate, dismissed, onDismiss }) {
  const [alerte, setAlerte] = useState(null);

  useEffect(() => {
    if (dismissed) return;
    window.SB.from('alertes')
      .select('ref,titre,niveau')
      .eq('active', true)
      .order('date_pub', { ascending: false })
      .then(({ data: rows }) => {
        if (!rows || rows.length === 0) return;
        const critique = rows.find(r => r.niveau === 'critique');
        setAlerte(critique || rows[0]);
      });
  }, [dismissed]);

  if (dismissed || !alerte) return null;
  return (
    <div className="alert-banner">
      <div className="alert-banner-inner">
        <div className="alert-banner-pulse"></div>
        <div className="alert-banner-text">
          <span className="alert-banner-tag">ALERTE EN COURS</span>
          <span>{alerte.titre}</span>
          <span className="mono">{alerte.ref}</span>
        </div>
        <button className="alert-banner-link" onClick={() => navigate("alertes")}>
          Voir les alertes <Icon.ArrowRight size={12} />
        </button>
        <button className="alert-banner-close" onClick={onDismiss} aria-label="Fermer"><Icon.X size={14} /></button>
      </div>
    </div>
  );
}
window.AlertBanner = AlertBanner;


// ─── NEWSLETTER MODAL ──────────────────────────────────────
function NewsletterForm({ inline }) {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const submit = (e) => { e.preventDefault(); setDone(true); setTimeout(() => setDone(false), 4000); setEmail(""); };

  if (inline) {
    return (
      <form className="news-form" onSubmit={submit}>
        <input type="email" required placeholder="votre@email.ne" value={email} onChange={(e) => setEmail(e.target.value)} />
        <button type="submit" className="btn btn-accent btn-sm">{done ? <><Icon.Check /> Inscrit</> : <>S'abonner</>}</button>
      </form>
    );
  }
  return null;
}
window.NewsletterForm = NewsletterForm;