// Subscribe — email capture for product updates
// SubscribeStrip: compact inline (results panel, below breakdown)
// SubscribeFooterBlock: standalone footer section
const { useState: subUseState } = React;

function useSubscribeForm(source) {
  const [email, setEmail] = subUseState("");
  const [status, setStatus] = subUseState("idle"); // idle | loading | done | error

  const submit = async (e) => {
    e && e.preventDefault();
    const trimmed = email.trim();
    if (!trimmed || !trimmed.includes("@")) return;
    setStatus("loading");
    try {
      await window.SupabaseClient.subscribe(trimmed, source);
      setStatus("done");
    } catch {
      setStatus("error");
      setTimeout(() => setStatus("idle"), 3500);
    }
  };

  return { email, setEmail, status, submit };
}

// ── Compact strip — goes at the bottom of the results panel ──────────────
function SubscribeStrip() {
  const { email, setEmail, status, submit } = useSubscribeForm("results-panel");

  if (status === "done") {
    return (
      <div className="sub-strip sub-strip--done">
        <span className="sub-strip__tick">✓</span>
        <span>You're in — we'll reach out when payslip upload goes live.</span>
      </div>
    );
  }

  return (
    <div className="sub-strip">
      <div className="sub-strip__copy">
        <div className="sub-strip__title">Payslip upload is coming.</div>
        <div className="sub-strip__hint">Drop your PDF → auto-fill in seconds. Get early access.</div>
      </div>
      <form className="sub-strip__form" onSubmit={submit}>
        <input
          type="email"
          className="sub-strip__input"
          placeholder="your@email.com"
          value={email}
          onChange={e => setEmail(e.target.value)}
          disabled={status === "loading"}
          autoComplete="email"
        />
        <button
          type="submit"
          className="sub-strip__btn"
          disabled={!email.includes("@") || status === "loading"}
        >
          {status === "loading" ? "…" : "Notify me"}
        </button>
      </form>
      {status === "error" && <div className="sub-strip__err">Something went wrong — try again.</div>}
    </div>
  );
}

// ── Footer block — standalone section below the main content ─────────────
function SubscribeFooterBlock() {
  const { email, setEmail, status, submit } = useSubscribeForm("footer");

  if (status === "done") {
    return (
      <div className="sub-footer sub-footer--done">
        <div className="sub-footer__tick">✓</div>
        <div className="sub-footer__title">You're subscribed.</div>
      </div>
    );
  }

  return (
    <div className="sub-footer">
      <div className="sub-footer__left">
        <div className="sub-footer__eyebrow">Stay ahead</div>
        <div className="sub-footer__title">India's salary intelligence, in your inbox.</div>
        <ul className="sub-footer__list">
          <li>📄 Early access to payslip &amp; offer letter upload</li>
          <li>📊 Monthly salary benchmarks by role &amp; city</li>
          <li>🔔 New features as we ship them</li>
        </ul>
        <div className="sub-footer__note">No spam. Unsubscribe any time.</div>
      </div>
      <form className="sub-footer__form" onSubmit={submit}>
        <input
          type="email"
          className="sub-footer__input"
          placeholder="your@email.com"
          value={email}
          onChange={e => setEmail(e.target.value)}
          disabled={status === "loading"}
          autoComplete="email"
        />
        <button
          type="submit"
          className="sub-footer__btn"
          disabled={!email.includes("@") || status === "loading"}
        >
          {status === "loading" ? "Subscribing…" : "Get early access →"}
        </button>
        {status === "error" && <div className="sub-footer__err">Something went wrong — try again.</div>}
      </form>
    </div>
  );
}

Object.assign(window, { SubscribeStrip, SubscribeFooterBlock });