// ─── Contact page with quote simulator ──────────────────────────

const RECAPTCHA_SITE_KEY = "6Le_-8csAAAAAOKyOETYx1ho4k-xyMzMpkercLgB";
const RECAPTCHA_SCRIPT_ID = "recaptcha-enterprise";

function Contact({ go, initialTab }) {
  const [tab, setTab] = React.useState(initialTab || "simulator");
  const [simQuote, setSimQuote] = React.useState(null);

  React.useEffect(() => {
    if (!document.getElementById(RECAPTCHA_SCRIPT_ID)) {
      const s = document.createElement("script");
      s.id    = RECAPTCHA_SCRIPT_ID;
      s.src   = `https://www.google.com/recaptcha/enterprise.js?render=${RECAPTCHA_SITE_KEY}`;
      s.async = true;
      document.head.appendChild(s);
    }
    document.body.classList.add("recaptcha-active");
    return () => { document.body.classList.remove("recaptcha-active"); };
  }, []);

  const handleConsult = (quoteData) => {
    setSimQuote(quoteData);
    setTab("form");
  };

  return (
    <div className="page">
      <PageHeader
        eyebrow="CONTACT"
        num="→"
        title={<>まずは、<span style={{ color: "var(--accent-strong)" }}>お話から</span>。</>}
        lead="見積りシミュレーターで概算を把握しても、そのままフォームで具体相談にお進みいただいても。お客様のペースで進められます。"
      />

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="contact-tabs">
            {[
              { k: "simulator", l: "見積りシミュレーター", sub: "概算を把握したい" },
              { k: "form", l: "お問い合わせフォーム", sub: "じっくり相談したい" },
            ].map(t => (
              <button key={t.k} onClick={() => setTab(t.k)}
                className={`contact-tab ${tab === t.k ? "contact-tab--active" : "contact-tab--inactive"}`}>
                <div className="serif contact-tab__label">{t.l}</div>
                <div className="contact-tab__sub">{t.sub}</div>
              </button>
            ))}
          </div>

          {tab === "simulator" && <QuoteSimulator go={go} onConsult={handleConsult} />}
          {tab === "form" && <ContactForm simQuote={simQuote} />}
        </div>
      </section>
    </div>
  );
}

// ── Quote simulator ─────────────────────────────────────────
const SIM_SERVICES = [
  { k: "newsite", l: "新規サイト制作", base: 40000, perPage: 6000 },
  { k: "renewal", l: "既存サイトのリニューアル", base: 30000, perPage: 5000 },
  { k: "maint", l: "WordPress 保守", base: 35000, unit: "月額", plans: [["Standard", 35000], ["Business", 75000], ["Enterprise", 120000]] },
  { k: "system", l: "Webシステム開発", base: 80000, perPage: 8000 },
  { k: "seo", l: "SEO対策", base: 110000, unit: "月額" },
];

const SIM_OPTIONS = [
  { k: "design", l: "UIデザインを伴う", add: 10000 },
  { k: "cms", l: "CMS(WordPress)構築", add: 10000 },
  { k: "auth", l: "会員認証・マイページ", add: 80000 },
  { k: "payment", l: "決済 / サブスクリプション", add: 20000 },
  { k: "multilingual", l: "多言語対応", add: 180000 },
  { k: "migrate", l: "既存データ移行", add: 15000 },
];

const SIM_INTEREST_MAP = {
  newsite: "新規サイト制作",
  renewal: "既存サイトのリニューアル",
  maint:   "WordPress 保守・改修",
  system:  "Webシステム開発",
  seo:     "SEO対策",
};

function budgetFromAmount(n) {
  if (n < 500000)   return "〜 5万円";
  if (n < 2000000)  return "6〜50万円";
  if (n < 5000000)  return "51〜100万円";
  if (n < 10000000) return "101〜300万円";
  return "301万円以上";
}

function QuoteSimulator({ go, onConsult }) {
  const [service, setService] = React.useState("renewal");
  const [pages, setPages] = React.useState(12);
  const [opts, setOpts] = React.useState({});
  const [plan, setPlan] = React.useState("Business");
  const [timeline, setTimeline] = React.useState("3months");

  const svc = SIM_SERVICES.find(s => s.k === service);
  const isMonthly = svc.unit === "月額";

  const base = isMonthly
    ? (svc.plans ? svc.plans.find(p => p[0] === plan)[1] : svc.base)
    : svc.base + (svc.perPage || 0) * pages;

  const optsSum = Object.entries(opts).filter(([, v]) => v).reduce((sum, [k]) => sum + (SIM_OPTIONS.find(o => o.k === k)?.add || 0), 0);

  const total = isMonthly ? base : base + optsSum;
  const urgency = !isMonthly && timeline === "1month" ? 1.2 : 1;
  const final = Math.round(total * urgency);

  const fmt = (n) => "¥" + n.toLocaleString("ja-JP");

  const handleConsult = () => {
    const selectedOpts = Object.keys(opts).filter(k => opts[k])
      .map(k => SIM_OPTIONS.find(o => o.k === k)?.l).filter(Boolean);

    const timelineLabel = timeline === "1month" ? "1ヶ月以内"
      : timeline === "3months" ? "3ヶ月前後" : "相談して決める";

    let quoteText = `種別: ${svc.l}\n`;
    if (isMonthly && svc.plans) quoteText += `プラン: ${plan}\n`;
    if (!isMonthly)             quoteText += `ページ数: ${pages}ページ\n`;
    if (selectedOpts.length)    quoteText += `オプション: ${selectedOpts.join("、")}\n`;
    if (!isMonthly)             quoteText += `スケジュール: ${timelineLabel}\n`;
    quoteText += `概算: ${fmt(final)}${isMonthly ? "/月〜" : "〜"}`;

    onConsult({
      interest: SIM_INTEREST_MAP[service] || "",
      budget:   isMonthly ? "相談して決めたい" : budgetFromAmount(final),
      quoteText,
    });
  };

  return (
    <div className="stack-mobile sim-layout">
      <div className="sim-form">
        <SimBlock label="01  ご依頼種別" note="どのようなご相談ですか？">
          <div className="sim-service-grid">
            {SIM_SERVICES.map(s => (
              <button key={s.k} onClick={() => setService(s.k)}
                className={`sim-btn ${service === s.k ? "sim-btn--active" : "sim-btn--inactive"}`}>
                {s.l}
              </button>
            ))}
          </div>
        </SimBlock>

        {isMonthly && svc.plans && (
          <SimBlock label="02  プラン" note="想定されるサイト規模は？">
            <div className="sim-plan-grid">
              {svc.plans.map(([name, price]) => (
                <button key={name} onClick={() => setPlan(name)}
                  className={`sim-plan-btn ${plan === name ? "sim-plan-btn--active" : "sim-plan-btn--inactive"}`}>
                  <div className="serif sim-plan-btn__name">{name}</div>
                  <div className="sim-plan-btn__price">{fmt(price)} / 月</div>
                </button>
              ))}
            </div>
          </SimBlock>
        )}

        {!isMonthly && (
          <>
            <SimBlock label="02  想定ページ数" note={`現在: ${pages} ページ`}>
              <input type="range" min="3" max="80" value={pages} onChange={e => setPages(Number(e.target.value))}
                style={{ width: "100%", accentColor: "var(--accent)" }} />
              <div className="sim-range-labels">
                <span>3 pages</span><span>80 pages</span>
              </div>
            </SimBlock>

            <SimBlock label="03  オプション" note="必要なものを選んでください (複数可)">
              <div className="sim-opt-grid">
                {SIM_OPTIONS.map(o => {
                  const on = !!opts[o.k];
                  return (
                    <button key={o.k} onClick={() => setOpts({ ...opts, [o.k]: !on })}
                      className={`sim-opt-btn ${on ? "sim-opt-btn--on" : "sim-opt-btn--off"}`}>
                      <span className={`sim-opt-check ${on ? "sim-opt-check--on" : "sim-opt-check--off"}`}>
                        {on && <Check size={12} />}
                      </span>
                      <span className="sim-opt-name">{o.l}</span>
                      <span className="sim-opt-add">+{fmt(o.add)}</span>
                    </button>
                  );
                })}
              </div>
            </SimBlock>

            <SimBlock label="04  希望スケジュール" note="">
              <div className="sim-timeline-grid">
                {[["1month", "1ヶ月以内 (+20%)"], ["3months", "3ヶ月前後"], ["flex", "相談して決める"]].map(([k, l]) => (
                  <button key={k} onClick={() => setTimeline(k)}
                    className={`sim-timeline-btn ${timeline === k ? "sim-timeline-btn--active" : "sim-timeline-btn--inactive"}`}>
                    {l}
                  </button>
                ))}
              </div>
            </SimBlock>
          </>
        )}
      </div>

      <aside className="sim-aside sticky-unset">
        <div className="en sim-aside__eyebrow">ESTIMATED QUOTE</div>
        <div className="sim-aside__desc">
          {svc.l}{!isMonthly ? ` · ${pages}ページ` : ` · ${plan}`}
        </div>
        <div className="sim-aside__total-row">
          <span className="serif sim-aside__total">{fmt(final)}</span>
          <span className="sim-aside__unit">{isMonthly ? "/ 月〜" : "〜"}</span>
        </div>

        <div className="sim-aside__breakdown">
          <SimRow k="ベース" v={fmt(base)} />
          {!isMonthly && optsSum > 0 && <SimRow k="オプション" v={`+ ${fmt(optsSum)}`} />}
          {!isMonthly && urgency > 1 && <SimRow k="緊急対応" v="+ 20%" />}
        </div>

        <p className="sim-aside__note">
          ※ 上記は目安です。正式な御見積は要件ヒアリング後に算出します。
        </p>

        <button onClick={handleConsult} className="btn btn-accent sim-aside__cta">
          この内容で相談する <Arrow />
        </button>
      </aside>
    </div>
  );
}

function SimBlock({ label, note, children }) {
  return (
    <div>
      <div className="sim-block__header">
        <div className="en sim-block__label">{label}</div>
        {note && <div className="sim-block__note">{note}</div>}
      </div>
      {children}
    </div>
  );
}

function SimRow({ k, v }) {
  return (
    <div className="sim-aside__row">
      <span className="sim-aside__row-key">{k}</span>
      <span className="sim-aside__row-val">{v}</span>
    </div>
  );
}

// ── Contact form ─────────────────────────────────────────────
function ContactForm({ simQuote }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({
    company:  "",
    name:     "",
    email:    "",
    phone:    "",
    interest: simQuote?.interest || "",
    budget:   simQuote?.budget   || "",
    message:  simQuote ? `【シミュレーター概算】\n${simQuote.quoteText}\n\n` : "",
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const recaptchaToken = await new Promise((resolve, reject) => {
        const gr = window.grecaptcha?.enterprise;
        if (!gr) { reject(new Error("reCAPTCHA が読み込まれていません。ページを再読み込みしてください。")); return; }
        gr.ready(() => {
          gr.execute(RECAPTCHA_SITE_KEY, { action: "contact" })
            .then(resolve).catch(reject);
        });
      });

      const res = await fetch("/wp-json/uiarb/v1/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, quote: simQuote?.quoteText || "", recaptchaToken }),
      });
      const json = await res.json();
      if (!res.ok) throw new Error(json.message || "送信に失敗しました");
      setSubmitted(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setSending(false);
    }
  };

  if (submitted) {
    return (
      <div className="form-submitted">
        <div className="form-submitted__icon">✓</div>
        <h2 className="h2">ありがとうございました。</h2>
        <p className="lead form-submitted__lead">
          3営業日以内にご返信いたします。
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="stack-mobile form-layout">
      <div className="form-grid form-fields">
        <div className="field"><label>会社名 <span className="req">必須</span></label><input value={form.company} onChange={set("company")} placeholder="株式会社〇〇" required /></div>
        <div className="field"><label>お名前 <span className="req">必須</span></label><input value={form.name} onChange={set("name")} placeholder="山田 太郎" required /></div>
        <div className="field"><label>メールアドレス <span className="req">必須</span></label><input type="email" value={form.email} onChange={set("email")} placeholder="you@example.com" required /></div>
        <div className="field"><label>電話番号</label><input value={form.phone} onChange={set("phone")} placeholder="03-0000-0000" /></div>

        <div className="field form-full">
          <label>ご相談内容 <span className="req">必須</span></label>
          <select value={form.interest} onChange={set("interest")} required>
            <option value="">選択してください</option>
            <option>新規サイト制作</option>
            <option>既存サイトのリニューアル</option>
            <option>WordPress 保守・改修</option>
            <option>Webシステム開発</option>
            <option>SEO対策</option>
            <option>その他・まずは相談</option>
          </select>
        </div>

        <div className="field form-full">
          <label>ご予算の目安</label>
          <select value={form.budget} onChange={set("budget")}>
            <option value="">選択してください(任意)</option>
            <option>〜 50万円</option>
            <option>50〜200万円</option>
            <option>200〜500万円</option>
            <option>500〜1,000万円</option>
            <option>1,000万円以上</option>
            <option>相談して決めたい</option>
          </select>
        </div>

        <div className="field form-full">
          <label>お問い合わせ内容 <span className="req">必須</span></label>
          <textarea value={form.message} onChange={set("message")} placeholder="現状の課題、検討中の内容、参考サイトURLなどをお聞かせください。" required />
        </div>

        {error && (
          <div className="form-full" style={{ color: "var(--error, #c00)", fontSize: "0.9em", padding: "8px 0" }}>
            {error}
          </div>
        )}

        <div className="form-submit-row form-full">
          <button type="submit" className="btn btn-accent btn-lg" disabled={sending}>
            {sending ? "送信中…" : <>"送信する" <Arrow /></>}
          </button>
          <span className="form-privacy-note">個人情報の取り扱いについて同意のうえ送信します</span>
        </div>
      </div>

      <aside className="form-aside sticky-unset">
        <div className="en form-aside__eyebrow">WHAT TO EXPECT</div>
        <ol className="form-aside__steps">
          {[
            "3営業日以内に一次返信",
            "平日営業時間中に初回ヒアリング日程を調整",
            "30分の無料相談(オンライン)",
            "スコープに応じて要件定義書・見積り提示",
          ].map((s, i) => (
            <li key={i} className="form-aside__step">
              <span className="en form-aside__step-num">0{i + 1}</span>
              <span>{s}</span>
            </li>
          ))}
        </ol>

        <div className="form-aside__footer">
          <strong style={{ color: "var(--ink)" }}>営業・勧誘はしません。</strong><br />
          合わないと判断した場合は、信頼できる他社様をご紹介することもあります。
        </div>
      </aside>
    </form>
  );
}

Object.assign(window, { Contact });