// Landing-page demo. Real lead-gen flow:
//   1. Visitor enters email + brand → POST /api/demo/run
//   2. Backend runs ONE prompt across THREE models, scores each, stores lead
//   3. UI shows 3 result cards
//   4. Dual CTA: "Email me the full audit" or "Schedule a call"
// All driven by /api/demo (rate-limited inside the router).

const { useState, useEffect } = React;

const t = (k) => (window.__t ? window.__t(k) : k);
const lang = () => (window.__lang ? window.__lang() : "es");

const MODEL_LABELS = {
  gpt:     { name: "ChatGPT",   sub: "GPT-4o · Bing"     },
  claude:  { name: "Claude",    sub: "Sonnet 4.5 · Brave" },
  gemini:  { name: "Gemini",    sub: "2.5 Pro · Google"  },
  perplex: { name: "Perplexity", sub: "Sonar Pro"          },
};

const STATUS_KIND = {
  feat:    { label_es: "DESTACADA",   label_en: "FEATURED",  cls: "good" },
  mention: { label_es: "MENCIONADA",  label_en: "MENTIONED", cls: "neutral" },
  partial: { label_es: "PARCIAL",     label_en: "PARTIAL",   cls: "neutral" },
  miss:    { label_es: "SIN MENCIÓN", label_en: "NOT FOUND", cls: "bad" },
};

function LeadForm({ onSubmit, error, submitting, l }) {
  const [email, setEmail] = useState("");
  const [brand, setBrand] = useState("");
  const [website_url, setWebsiteUrl] = useState(""); // honeypot — keep empty
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email) && brand.trim().length >= 2;

  const submit = (e) => {
    e.preventDefault();
    if (!valid || submitting) return;
    onSubmit({ email: email.trim(), brand: brand.trim(), website_url });
  };

  return (
    <form onSubmit={submit}>
      <div className="demo-input-row">
        <label htmlFor="demo-brand">{t("demo.f.brand")}</label>
        <input
          id="demo-brand"
          className="demo-input"
          value={brand}
          onChange={(e) => setBrand(e.target.value)}
          placeholder={t("demo.f.brand.ph")}
          autoComplete="off"
        />
      </div>
      <div className="demo-input-row" style={{ paddingTop: 0 }}>
        <label htmlFor="demo-email">{t("demo.f.email")}</label>
        <input
          id="demo-email"
          className="demo-input"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder={t("demo.f.email.ph")}
          autoComplete="email"
        />
        <button type="submit" className="btn btn-primary" disabled={!valid || submitting}>
          {submitting ? t("demo.running") : t("demo.f.submit")}
        </button>
      </div>
      {/* Honeypot — hidden from real users via CSS, bots fill it */}
      <input
        type="text"
        name="website_url"
        tabIndex="-1"
        autoComplete="off"
        value={website_url}
        onChange={(e) => setWebsiteUrl(e.target.value)}
        style={{ position: "absolute", left: "-9999px", opacity: 0, height: 0, width: 0 }}
        aria-hidden="true"
      />
      <div style={{ padding: "10px 20px 18px", fontSize: 12, color: "var(--ink-mute)" }}>
        {t("demo.f.privacy")}
      </div>
      {error && (
        <div style={{ padding: "10px 20px 18px", color: "var(--accent)", fontSize: 13 }}>
          {error}
        </div>
      )}
    </form>
  );
}

function ResultCard({ result, l }) {
  const meta = MODEL_LABELS[result.model] || { name: result.model, sub: "" };
  if (result.error) {
    return (
      <div className="demo-col">
        <div className="demo-col-head">
          <div>
            <div className="model-name">{meta.name}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
              {meta.sub}
            </div>
          </div>
          <span className="model-badge bad">ERR</span>
        </div>
        <div className="demo-response" style={{ color: "var(--ink-mute)", fontStyle: "italic" }}>
          {t("demo.r.err")}
        </div>
      </div>
    );
  }
  const sk = STATUS_KIND[result.status] || STATUS_KIND.miss;
  const label = l === "en" ? sk.label_en : sk.label_es;
  return (
    <div className="demo-col">
      <div className="demo-col-head">
        <div>
          <div className="model-name">{meta.name}</div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            {meta.sub}
          </div>
        </div>
        <span className={`model-badge ${sk.cls}`}>{label}</span>
      </div>
      <div className="demo-response">{result.excerpt}</div>
      <div className="demo-meta">
        <div>{t("demo.r.sources")} · <b>{(result.sources || []).length}</b></div>
        <div>{t("demo.r.sentiment")} · <b>{result.sentiment >= 0 ? "+" : ""}{(result.sentiment || 0).toFixed(2)}</b></div>
      </div>
    </div>
  );
}

function ContactCard({ leadId, calendarUrl, l, onDone }) {
  const [busy, setBusy] = useState(null); // 'email' | 'call' | null
  const [done, setDone] = useState(null);
  const [error, setError] = useState("");

  const choose = async (kind) => {
    if (busy) return;
    setBusy(kind);
    setError("");
    try {
      const res = await fetch("/api/demo/follow-up", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ leadId, kind }),
      });
      if (!res.ok) throw new Error((await res.json()).error || `HTTP ${res.status}`);
      const j = await res.json();
      if (kind === "call" && j.calendarUrl) {
        window.open(j.calendarUrl, "_blank", "noopener");
      }
      setDone(kind);
      onDone && onDone(kind);
    } catch (e) {
      setError(e.message);
    } finally {
      setBusy(null);
    }
  };

  if (done === "email") {
    return (
      <div className="demo-cta">
        <div className="demo-cta-text">{t("demo.cta.thanks.email")}</div>
      </div>
    );
  }
  if (done === "call") {
    return (
      <div className="demo-cta">
        <div className="demo-cta-text">
          {t("demo.cta.thanks.call")}{" "}
          {calendarUrl && (
            <a href={calendarUrl} target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>{t("demo.cta.calendar.link")}</a>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="demo-cta" style={{ flexDirection: "column", alignItems: "stretch", gap: 14 }}>
      <div className="demo-cta-text" style={{ marginBottom: 0 }}>
        <strong>{t("demo.cta.headline")}</strong>{" "}{t("demo.cta.body")}
      </div>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        <button
          className="btn btn-primary"
          onClick={() => choose("email")}
          disabled={!!busy}
          style={{ flex: "1 1 200px" }}
        >
          {busy === "email" ? t("demo.cta.email.sending") : t("demo.cta.email")}
        </button>
        <button
          className="btn btn-accent"
          onClick={() => choose("call")}
          disabled={!!busy || !calendarUrl}
          style={{ flex: "1 1 200px" }}
          title={!calendarUrl ? t("demo.cta.call.disabled") : ""}
        >
          {busy === "call" ? t("demo.cta.call.opening") : t("demo.cta.call")}
        </button>
      </div>
      {error && <div style={{ color: "var(--accent)", fontSize: 13 }}>{error}</div>}
    </div>
  );
}

function Demo() {
  const [l, setL] = useState(lang());
  const [step, setStep] = useState("form");        // form | running | results
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [data, setData] = useState(null);          // {brand, prompt, results, leadId, calendarUrl}

  useEffect(() => {
    if (window.__onLangChange) window.__onLangChange(setL);
  }, []);

  async function submit({ email, brand, website_url }) {
    setSubmitting(true);
    setError("");
    setStep("running");
    try {
      const res = await fetch("/api/demo/run", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, brand, website_url }),
      });
      const j = await res.json();
      if (!res.ok) {
        setError(j.message || j.error || `HTTP ${res.status}`);
        setStep("form");
      } else {
        setData(j);
        setStep("results");
      }
    } catch (e) {
      setError(e.message);
      setStep("form");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="demo-wrap">
      <div className="demo-bar">
        <span className="dot"></span><span className="dot"></span><span className="dot"></span>
        <span className="crumb">{t("demo.crumb")}</span>
      </div>

      {step === "form" && <LeadForm onSubmit={submit} error={error} submitting={submitting} l={l} />}

      {step === "running" && (
        <div style={{ padding: "60px 20px", textAlign: "center" }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 14 }}>
            {t("demo.running.label")}
          </div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", color: "var(--ink-soft)", maxWidth: 540, margin: "0 auto" }}>
            {t("demo.running.sub")}
          </div>
          <div style={{ marginTop: 22, fontSize: 12, color: "var(--ink-mute)" }}>
            {t("demo.running.eta")}
          </div>
        </div>
      )}

      {step === "results" && data && (
        <>
          <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--rule)", display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
            <span className="label">{t("demo.r.brand")}</span>
            <strong style={{ fontFamily: "var(--serif)", fontSize: 22 }}>{data.brand}</strong>
            <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase", marginLeft: "auto" }}>
              {t("demo.r.tested")}
            </span>
          </div>

          <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--rule)", background: "var(--bg)", fontFamily: "var(--serif)", fontSize: 17, fontStyle: "italic", color: "var(--ink-soft)" }}>
            “{data.prompt}”
          </div>

          <div className="demo-body">
            {data.results.map((r) => (
              <ResultCard key={r.model} result={r} l={l} />
            ))}
          </div>

          <ContactCard leadId={data.leadId} calendarUrl={data.calendarUrl} l={l} />
        </>
      )}
    </div>
  );
}

const demoMount = document.getElementById("demo-mount");
if (demoMount) {
  const mountDemo = () => ReactDOM.createRoot(demoMount).render(<Demo />);
  if (window.__t) mountDemo();
  else window.addEventListener("DOMContentLoaded", mountDemo);
}