/* 制度活用ナビ — 結果・登録ゲート・完了 */
const { useState } = React;

/* ── 1件の制度カード ── */
function RankCard({ item, unlocked, idx, onOpenDetail }) {
  const p = item.program;
  const hue = window.NAVI_DATA.CAT_HUE[p.cat] || 248;
  return (
    <div
      className="rank-card rise"
      data-top={item.rank}
      style={{ animationDelay: Math.min(idx * 0.05, 0.4) + "s" }}
    >
      <div className="rc-top">
        <div className="rc-rank">{item.rank}</div>
        <div className="rc-main">
          <div className="rc-catrow">
            <span className="cat-chip" style={{ "--ch": hue }}>{p.cat}</span>
          </div>
          <div className="rc-name">{p.name}</div>
          <div className="rc-tag">{p.tag}</div>
          <div className="rc-benefit">{window.Ic.coin()} {p.benefit}</div>
        </div>
      </div>

      {unlocked && onOpenDetail ? (
        <button
          type="button"
          className="rc-open-detail"
          onClick={() => onOpenDetail(p.id)}
        >
          詳しく見る {window.Ic.arrow()}
        </button>
      ) : null}
    </div>
  );
}

/* ── メール登録ゲート(2段階認証コード方式) ── */
// localhost等の開発環境では画面にコードを表示するフォールバックを有効化
const DEV_MOCK_MODE = typeof window !== "undefined"
  && /^(localhost|127\.0\.0\.1|0\.0\.0\.0)$/.test(window.location.hostname);

function Gate({ onUnlock }) {
  // step: "email" (メアド入力) | "code" (認証コード入力)
  const [step, setStep] = useState("email");
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [agree, setAgree] = useState(false);
  const [sentCode, setSentCode] = useState("");
  const [enteredCode, setEnteredCode] = useState("");
  const [err, setErr] = useState("");
  const [sending, setSending] = useState(false);

  async function sendCode(e) {
    if (e && e.preventDefault) e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) { setErr("メールアドレスの形式をご確認ください"); return; }
    if (!agree) { setErr("受け取りへの同意が必要です"); return; }
    setErr("");
    setSending(true);

    // 6桁ランダムコード生成(フロント側生成→APIに送信)
    const generated = String(Math.floor(100000 + Math.random() * 900000));

    try {
      const res = await fetch("/api/send-code", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim(), code: generated }),
      });

      // 本番(seidonavi.com)で送信失敗したらエラー表示
      if (!res.ok) {
        if (DEV_MOCK_MODE) {
          // ローカル開発時はAPIなしでもコード表示で動くようフォールバック
          console.log("[開発モック] 認証コード:", generated, "→", email.trim());
        } else {
          const body = await res.json().catch(() => ({}));
          throw new Error(body.error || "送信に失敗しました");
        }
      }

      setSentCode(generated);
      setSending(false);
      setStep("code");
    } catch (err2) {
      setSending(false);
      // ローカルで /api/send-code が存在しない時(=404じゃなくfetch自体は通るがNGの時)もモック動作
      if (DEV_MOCK_MODE) {
        console.log("[開発モック] 認証コード:", generated, "→", email.trim());
        setSentCode(generated);
        setStep("code");
        return;
      }
      setErr(
        "認証コードの送信に失敗しました。お手数ですが時間をおいて再度お試しください。"
      );
    }
  }

  function verifyCode(e) {
    e.preventDefault();
    const input = enteredCode.replace(/\s/g, "");
    if (!/^\d{6}$/.test(input)) { setErr("6桁の数字を入力してください"); return; }
    if (input !== sentCode) { setErr("認証コードが違うようです。お送りしたコードをもう一度ご確認ください"); return; }
    setErr("");
    onUnlock({ email: email.trim(), name: name.trim() });
  }

  async function resendCode() {
    setEnteredCode("");
    setErr("");
    await sendCode({ preventDefault: () => {} });
  }

  function backToEmail() {
    setStep("email");
    setEnteredCode("");
    setSentCode("");
    setErr("");
  }

  return (
    <div className="gate rise" style={{ animationDelay: "0.15s" }}>
      {step === "email" ? (
        <React.Fragment>
          <span className="g-kicker">{window.Ic.lock()} あなたに使える制度Top10</span>
          <h3 className="g-title">メールアドレス1つで、<br />閲覧制限を解除します</h3>
          <p className="g-sub">
            あなたの回答から、申請するだけで貰える可能性のある制度が<b style={{color:'#fff'}}>10件</b>見つかりました。
          </p>
          <p className="g-warn">
            ⚠️ 制度には<b style={{color:'#fff'}}>申請期限</b>や<b style={{color:'#fff'}}>予算上限</b>があるものも。
            情報を押さえておかないと「知らない間に終わっていた」ということも起こります。
          </p>
          <div className="g-list">
            <div>{window.Ic.check()} Top10 <b style={{color:'#fff'}}>すべての制度</b>が今すぐ閲覧可能に</div>
            <div>{window.Ic.check()} 新しく<b style={{color:'#fff'}}>あなたに合った制度</b>が出たら即お知らせ</div>
            <div>{window.Ic.check()} <b style={{color:'#fff'}}>申請期限が迫る制度</b>の緊急アラート</div>
            <div>{window.Ic.check()} 元銀行員・安達からの月1-2回ニュースレター</div>
          </div>

          <form className="form" onSubmit={sendCode}>
            <div className="field">
              <label>お名前(任意)</label>
              <input type="text" value={name} placeholder="安達 拓郎" onChange={(e) => setName(e.target.value)} disabled={sending} />
            </div>
            <div className="field">
              <label>メールアドレス</label>
              <input type="email" value={email} placeholder="you@example.com" onChange={(e) => setEmail(e.target.value)} disabled={sending} />
              {err ? <div className="err">{err}</div> : null}
            </div>
            <label className="consent">
              <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} disabled={sending} />
              <span>制度解説メールの受け取りに同意します(いつでも解除できます)。<a href="https://seidonavi.com/privacy.html" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a></span>
            </label>
            <button type="submit" className="btn btn-unlock" disabled={sending}>
              {sending ? "送信中…" : <React.Fragment>認証コードを送る {window.Ic.arrow()}</React.Fragment>}
            </button>
          </form>
          <p className="gate-note">入力されたメールアドレスに6桁の認証コードを送信します。届いたコードを次の画面で入力してください。</p>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <span className="g-kicker">{window.Ic.lock()} STEP 2 / 認証コード入力</span>
          <h3 className="g-title">届いた6桁コードを<br />入力してください</h3>
          <p className="g-sub">
            <b style={{color:'#fff'}}>{email}</b> 宛に認証コードを送信しました。
            届いたコードを下に入力すると、閲覧制限が解除されます。
          </p>

          {DEV_MOCK_MODE && sentCode ? (
            <div className="dev-mock-banner">
              <div className="dmb-label">🛠 開発モック(本番では非表示)</div>
              <div className="dmb-code">テスト用コード: <b>{sentCode}</b></div>
              <div className="dmb-note">本実装後はメールに記載のコードを入力します</div>
            </div>
          ) : null}

          <form className="form" onSubmit={verifyCode}>
            <div className="field">
              <label>認証コード(6桁)</label>
              <input
                type="text"
                inputMode="numeric"
                autoComplete="one-time-code"
                maxLength={6}
                value={enteredCode}
                placeholder="123456"
                onChange={(e) => setEnteredCode(e.target.value.replace(/[^\d]/g, "").slice(0, 6))}
                className="code-input"
                autoFocus
              />
              {err ? <div className="err">{err}</div> : null}
            </div>
            <button type="submit" className="btn btn-unlock">認証して結果を見る {window.Ic.arrow()}</button>
          </form>

          <div className="gate-actions">
            <button type="button" className="gate-link" onClick={resendCode}>コードを再送する</button>
            <button type="button" className="gate-link" onClick={backToEmail}>メールアドレスを変更</button>
          </div>

          <p className="gate-note">届かない場合は迷惑メールフォルダもご確認ください。</p>
        </React.Fragment>
      )}
    </div>
  );
}

/* ── 解錠後の完了メッセージ ── */
function DoneBlock({ info, onRestart }) {
  return (
    <div className="done-card rise">
      <div className="ttl">安達からのメッセージ</div>
      <p className="done-msg">
        {info.name ? info.name + "さん、" : ""}診断おつかれさまでした。
        <br /><br />
        Top10の各カードをタップすると、制度ごとの詳しい解説ページに進めます。
        申請手順や必要書類は<b>パスワード入力で閲覧制限を解除</b>できます(パスワードはメールでお届けします)。
        <br /><br />
        制度は、申請して初めて「あなたのもの」になります。
        ひとりで抱え込まず、まずは一歩から。
      </p>
      <div className="done-sign">— 安達 拓郎</div>
      <button className="btn btn-ghost" style={{ marginTop: 16 }} onClick={onRestart}>もう一度診断する</button>
    </div>
  );
}

function Results({ ranked, unlocked, info, onUnlock, onRestart, onOpenDetail }) {
  return (
    <div className="scroll fade-in">
      <div className="result-head rise">
        <span className="kicker">診断結果</span>
        <h2 className="h-serif result-title">あなたが使える可能性のある<br />制度 <span className="num">Top10</span></h2>
        <p className="result-sub">
          {unlocked
            ? "気になる制度をタップすると、詳しい解説ページに進めます。"
            : "Top10件が見つかりました。メールアドレスを登録するとすべての結果を見られます。"}
        </p>
      </div>

      {unlocked ? (
        <div className="unlocked-banner rise">
          <span className="ic">{React.cloneElement(window.Ic.check({}), { width: 16, height: 16, style: { color: "#fff" } })}</span>
          <div>
            <div className="t">閲覧制限を解除しました</div>
            <div className="s">各カードをタップで詳しい解説ページへ。申請手順はパスワード入力で閲覧できます。</div>
          </div>
        </div>
      ) : null}

      {!unlocked ? (
        <React.Fragment>
          <div className="rc-blur-banner rise">
            ⚠️ 申請期限がある制度も含まれています。情報を押さえておかないと「知らない間に終わっていた」ということも。
          </div>
          <div className="rank-list rank-list-blur">
            {ranked.slice(0, 10).map((it, i) => (
              <div className="rank-card-blur-wrap" key={it.program.id}>
                <RankCard item={it} unlocked={false} idx={i} />
              </div>
            ))}
          </div>
          <Gate onUnlock={onUnlock} />
        </React.Fragment>
      ) : (
        <React.Fragment>
          <div className="rank-list">
            {ranked.slice(0, 10).map((it, i) => (
              <RankCard key={it.program.id} item={it} unlocked={true} idx={i} onOpenDetail={onOpenDetail} />
            ))}
          </div>
          <div style={{ padding: "4px 22px 8px" }}>
            <DoneBlock info={info} onRestart={onRestart} />
          </div>
        </React.Fragment>
      )}

      <div className="footnote">
        制度活用ナビ by 安達拓郎 ／ 本診断は一般的な制度情報の提供を目的としたもので、受給を保証するものではありません。<br />
        実際の支給可否・金額は、お住まいの自治体や各窓口の判断によります。
        <br />
        <a href="https://seidonavi.com/tokushoho.html" target="_blank" rel="noopener noreferrer">特定商取引法に基づく表記</a>
        ／
        <a href="https://seidonavi.com/privacy.html" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>
        ／
        お問い合わせ: <a href="mailto:info@seidonavi.com">info@seidonavi.com</a>
      </div>
    </div>
  );
}

Object.assign(window, { Results, RankCard, Gate });