/* ThemisXModal.jsx — slide-in chat panel for the AI assistant.
 * - Opens with the brief-approved welcome message + disclaimer.
 * - Suggestions pre-populate common legal questions.
 * - User input goes to window.claude.complete with a system prompt that enforces tone & scope.
 * - Typing indicator animates while waiting on a response.
 */
function ThemisXModal({ open, onClose }) {
  const [messages, setMessages] = React.useState([]);
  const [input, setInput] = React.useState("");
  const [typing, setTyping] = React.useState(false);
  const bodyRef = React.useRef(null);

  const WELCOME = "Hola, soy ThemisX, tu asistente legal con inteligencia artificial. Muy pronto estaré disponible para ayudarte con tus consultas legales.";
  const FOLLOWUP = "Mientras tanto, nuestro equipo de especialistas puede atenderte directamente. Visita nuestra página de contacto para comunicarte con nosotros.";

  const SUGGESTIONS = [
    "¿Cómo apostillo un acta de nacimiento desde el extranjero?",
    "Quiero entender el proceso de divorcio en Honduras",
    "¿Qué necesito para constituir una empresa?",
    "Tengo un trámite migratorio pendiente",
  ];

  React.useEffect(() => {
    if (open && messages.length === 0) {
      setMessages([
        { role: "disclaimer", content: WELCOME },
        { role: "bot", content: FOLLOWUP },
      ]);
    }
  }, [open]);

  React.useEffect(() => {
    if (open && window.lucide) window.lucide.createIcons();
  }, [open, messages.length, typing]);

  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, typing]);

  if (!open) return null;

  const send = async (text) => {
    const trimmed = (text ?? input).trim();
    if (!trimmed || typing) return;
    setInput("");
    const next = [...messages, { role: "user", content: trimmed }];
    setMessages(next);
    setTyping(true);

    setTimeout(() => {
      setMessages(m => [...m, { role: "bot", content: "✦ ThemisX estará disponible muy pronto. Mientras tanto, nuestro equipo puede ayudarte personalmente." }, { role: "cta", content: "contacto" }]);
      setTyping(false);
    }, 1200);
  };

  const hasUserMessages = messages.some(m => m.role === "user");

  return (
    <div className="tx-scrim" onClick={(e) => { if (e.target.classList.contains("tx-scrim")) onClose(); }}>
      <div className="tx-panel" role="dialog" aria-modal="true" aria-labelledby="tx-title">
        <div className="tx-head">
          <div className="avatar" aria-hidden="true">✦</div>
          <div className="who">
            <div className="name" id="tx-title">ThemisX</div>
            <div className="role">Asistente legal · en línea</div>
          </div>
          <button className="close-btn" onClick={onClose} aria-label="Cerrar chat">
            <i data-lucide="x"></i>
          </button>
        </div>

        <div className="tx-body" ref={bodyRef}>
          {messages.map((m, i) => (
            m.role === "cta" ? (
              <div key={i} className="tx-msg bot" style={{ paddingTop: 0 }}>
                <a href="contacto.html" style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "10px 20px", borderRadius: 12, background: "var(--hl-blue-500)", color: "white", textDecoration: "none", fontWeight: 600, fontSize: 14, transition: "opacity 200ms" }}>
                  Ir a Contacto
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
              </div>
            ) : (
              <div key={i} className={"tx-msg " + m.role}>{m.content}</div>
            )
          ))}
          {typing && (
            <div className="tx-typing" aria-label="ThemisX está escribiendo">
              <span></span><span></span><span></span>
            </div>
          )}
          {!hasUserMessages && !typing && (
            <div className="tx-suggestions">
              {SUGGESTIONS.map(s => (
                <button key={s} onClick={() => send(s)}>{s}</button>
              ))}
            </div>
          )}
        </div>

        <div className="tx-foot">
          <div className="input-row">
            <input
              type="text"
              value={input}
              placeholder="Escribe tu consulta…"
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") send(); }}
              aria-label="Mensaje para ThemisX"
            />
            <button className="send-btn" onClick={() => send()} disabled={!input.trim() || typing} aria-label="Enviar">
              <i data-lucide="send"></i>
            </button>
          </div>
          <p className="legal-note">Las respuestas son orientativas y no constituyen asesoría legal formal.</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ThemisXModal });