// Atlas · Upgrade / report-limit modal
const { useState: useUpgradeState } = React;

function UpgradeModal({ user, onClose }) {
  const [submitted, setSubmitted] = useUpgradeState(false);
  const [submitting, setSubmitting] = useUpgradeState(false);
  const [form, setForm] = useUpgradeState({
    firstName: "",
    lastName: "",
    company: "",
    teamSize: "",
    useCase: "",
  });

  const email = user?.email || "";

  function set(field, val) {
    setForm(prev => ({ ...prev, [field]: val }));
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setSubmitting(true);
    try {
      await fetch("/api/inquire", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: (form.firstName + " " + form.lastName).trim(),
          company: form.company,
          email,
          teamSize: form.teamSize,
          useCase: form.useCase,
          source: "report-limit-gate",
        }),
      });
      setSubmitted(true);
    } catch (_) {
      // best-effort
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 480 }}>
        <div className="modal-header">
          <h2>Get full access</h2>
          <button className="modal-close" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="modal-body">
          {submitted ? (
            <div style={{ textAlign: "center", padding: "24px 0" }}>
              <p style={{ fontWeight: 500, marginBottom: 8 }}>You're on the list.</p>
              <p style={{ color: "var(--ink-4)", fontSize: 14 }}>
                Thanks for reaching out. Someone from the Atlas team will contact you at {email} within one business day.
              </p>
            </div>
          ) : (
            <>
              <p style={{ color: "var(--ink-4)", fontSize: 14, marginBottom: 20 }}>
                You've used both of your trial reports. Tell us a bit about your work and we'll be in touch about a full subscription.
              </p>
              <form onSubmit={handleSubmit}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}>
                  <div>
                    <label className="lbl">First name</label>
                    <input
                      className="select"
                      type="text"
                      required
                      placeholder="Jane"
                      value={form.firstName}
                      onChange={e => set("firstName", e.target.value)}
                    />
                  </div>
                  <div>
                    <label className="lbl">Last name</label>
                    <input
                      className="select"
                      type="text"
                      required
                      placeholder="Smith"
                      value={form.lastName}
                      onChange={e => set("lastName", e.target.value)}
                    />
                  </div>
                </div>
                <div style={{ marginBottom: 12 }}>
                  <label className="lbl">Work email</label>
                  <input
                    className="select"
                    type="email"
                    value={email}
                    readOnly
                    style={{ opacity: 0.6, cursor: "default" }}
                  />
                </div>
                <div style={{ marginBottom: 12 }}>
                  <label className="lbl">Company / institution</label>
                  <input
                    className="select"
                    type="text"
                    required
                    placeholder="Acme Bio"
                    value={form.company}
                    onChange={e => set("company", e.target.value)}
                  />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 20 }}>
                  <div>
                    <label className="lbl">Team size</label>
                    <select
                      className="select"
                      value={form.teamSize}
                      onChange={e => set("teamSize", e.target.value)}
                    >
                      <option value="">Select…</option>
                      <option value="Just me">Just me</option>
                      <option value="2–5">2–5</option>
                      <option value="6–20">6–20</option>
                      <option value="21–100">21–100</option>
                      <option value="100+">100+</option>
                    </select>
                  </div>
                  <div>
                    <label className="lbl">Primary use case</label>
                    <select
                      className="select"
                      value={form.useCase}
                      onChange={e => set("useCase", e.target.value)}
                    >
                      <option value="">Select…</option>
                      <option value="Internal R&D">Internal R&amp;D</option>
                      <option value="Business development">Business development</option>
                      <option value="Competitive intelligence">Competitive intelligence</option>
                      <option value="Clinical / regulatory">Clinical / regulatory</option>
                      <option value="Consulting / advisory">Consulting / advisory</option>
                      <option value="Other">Other</option>
                    </select>
                  </div>
                </div>
                <button
                  type="submit"
                  className="btn primary lg"
                  disabled={submitting}
                  style={{ width: "100%" }}
                >
                  {submitting ? "Sending…" : "Request a conversation"}
                </button>
              </form>
            </>
          )}
        </div>
        {submitted && (
          <div className="modal-footer" style={{ justifyContent: "flex-end" }}>
            <button className="btn ghost" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.UpgradeModal = UpgradeModal;