/* BookingModal — quick "agendar conversa" form in a centred popup.
   Opens via window event 'or-open-booking' (any "Agendar conversa" button posts it). */

function BookingModal({ t, lang }) {
  const [open, setOpen] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [data, setData] = React.useState({
    name: "",
    email: "",
    phone: "",
    channel: "whatsapp",
    topic: t.contact.topics[0],
    message: "",
  });

  // Re-sync topic default when language changes
  React.useEffect(() => {
    setData(d => ({ ...d, topic: t.contact.topics[0] }));
  }, [lang]);

  // Listen for global open event
  React.useEffect(() => {
    const onOpen = () => { setOpen(true); setSubmitted(false); };
    window.addEventListener("or-open-booking", onOpen);
    return () => window.removeEventListener("or-open-booking", onOpen);
  }, []);

  // Close on ESC
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  // Lock body scroll
  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  const b = t.booking;
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const canSubmit = data.name.trim() && /\S+@\S+\.\S+/.test(data.email);

  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!canSubmit || sending) return;
    setSending(true);
    setError(null);
    try {
      const channelLabel = b.channels.find(c => c.id === data.channel)?.label || data.channel;
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: "af5963d4-45e2-47b9-8566-205df3906fb0",
          subject: `[OR · Agendar conversa] ${data.name}`,
          from_name: "OR — Site (Agendar conversa)",
          name: data.name,
          email: data.email,
          phone: data.phone,
          topic: data.topic,
          channel: channelLabel,
          message: data.message,
          language: lang,
        }),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.success === false) {
        throw new Error(json.message || "Network error");
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || "Erro");
    } finally {
      setSending(false);
    }
  };

  const close = () => setOpen(false);

  if (!open) return null;

  return (
    <div className="bm-overlay" onClick={close} role="dialog" aria-modal="true" aria-label={b.title}>
      <div className="bm-shell" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="bm-close" onClick={close} aria-label={b.close}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
            <path d="M6 6l12 12M6 18L18 6"/>
          </svg>
        </button>

        {!submitted ? (
          <form onSubmit={onSubmit} className="bm-body" autoComplete="off">
            <header className="bm-head">
              <div className="eyebrow">OR · Contabilidade e Consultoria Fiscal</div>
              <h2>{b.title}</h2>
            </header>

            <div className="bm-row">
              <div className="bm-field">
                <label htmlFor="bm-name">{b.name}</label>
                <input
                  id="bm-name" type="text" required
                  autoComplete="off"
                  placeholder={b.namePh}
                  value={data.name}
                  onChange={(e) => set("name", e.target.value)}
                />
              </div>
              <div className="bm-field">
                <label htmlFor="bm-email">{b.email}</label>
                <input
                  id="bm-email" type="email" required
                  autoComplete="off"
                  placeholder={b.emailPh}
                  value={data.email}
                  onChange={(e) => set("email", e.target.value)}
                />
              </div>
            </div>

            <div className="bm-row">
              <div className="bm-field">
                <label htmlFor="bm-phone">{b.phone}</label>
                <input
                  id="bm-phone" type="tel"
                  autoComplete="off"
                  placeholder={b.phonePh}
                  value={data.phone}
                  onChange={(e) => set("phone", e.target.value)}
                />
              </div>
              <div className="bm-field">
                <label htmlFor="bm-topic">{b.topic}</label>
                <select
                  id="bm-topic"
                  value={data.topic}
                  onChange={(e) => set("topic", e.target.value)}
                >
                  {t.contact.topics.map(top => <option key={top}>{top}</option>)}
                </select>
              </div>
            </div>

            <div className="bm-field">
              <label className="bm-label">{b.channel}</label>
              <div className="bm-chips">
                {b.channels.map(ch => (
                  <button
                    key={ch.id}
                    type="button"
                    className={`bm-chip${data.channel === ch.id ? " active" : ""}`}
                    onClick={() => set("channel", ch.id)}
                    aria-pressed={data.channel === ch.id}
                  >
                    {ch.label}
                  </button>
                ))}
              </div>
            </div>

            <div className="bm-field">
              <label htmlFor="bm-msg">{b.message}</label>
              <textarea
                id="bm-msg"
                style={{ resize: "none", height: "90px" }}
                value={data.message}
                onChange={(e) => set("message", e.target.value)}
              />
            </div>

            <footer className="bm-foot">
              <span className="bm-hint">
                {error ? <span style={{ color: "oklch(0.55 0.18 28)" }}>{error}</span> : b.hint}
              </span>
              <div className="bm-actions">
                <button
                  type="submit"
                  className="btn solid"
                  disabled={!canSubmit || sending}
                  style={{ opacity: (!canSubmit || sending) ? 0.4 : 1, cursor: (!canSubmit || sending) ? "not-allowed" : "pointer" }}
                >
                  {sending ? "…" : b.submit} <span className="arrow">→</span>
                </button>
              </div>
            </footer>
          </form>
        ) : (
          <div className="bm-body bm-success">
            <div className="bm-success-mark">✓</div>
            <h2>{b.successTitle}</h2>
            <p>{b.successBody}</p>
            <div className="bm-summary">
              <div><span className="k">{b.name}</span><span className="v">{data.name}</span></div>
              <div><span className="k">{b.email}</span><span className="v">{data.email}</span></div>
              {data.phone && <div><span className="k">{b.phone}</span><span className="v">{data.phone}</span></div>}
              <div><span className="k">{b.channel}</span><span className="v">{b.channels.find(c => c.id === data.channel)?.label}</span></div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
              <button type="button" className="btn solid" onClick={close}>{b.close}</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.BookingModal = BookingModal;

/* Helper for any button: window.openBooking() */
window.openBooking = function () {
  window.dispatchEvent(new Event("or-open-booking"));
};