// 画面: スタート / 質問 / 結果
const { useState, useEffect, useMemo, useRef } = React;
const GPT_URL = "https://chatgpt.com/g/g-6a1f876f9f7c8191901b36b451c722db-noy-nei-zhen-duan";

// ===== 共通ヘッダー =====
function Header({ onHome }) {
  return (
    <header className="site-header">
      <button className="logo" onClick={onHome} aria-label="トップへ">
        <span className="logo-mark">脳</span>
        <span className="logo-text">
          <span className="logo-jp">脳内メーカー</span>
          <span className="logo-en">NOUNAI MAKER — your private brain peek</span>
        </span>
      </button>
      <div className="header-stamp">心理テスト・無料・10問</div>
    </header>
  );
}

// ===== スタート画面 =====
function StartScreen({ name, setName, nameError, onQuickStart, onFullStart }) {
  return (
    <main className="screen start">
      <div className="start-card">
        <div className="start-eyebrow">簡易診断あり・10問診断も選べます</div>
        <h1 className="start-title">
          あなたの<span className="title-accent">脳の中</span>、<br />
          のぞいてみませんか？
        </h1>
        <p className="start-lead">
          すぐ遊べるランダム簡易診断と、10問でじっくり見る診断。
        </p>

        <div className="start-form">
          <label className="field">
            <span className="field-label">ニックネームを入力 <em>必須</em></span>
            <input
              type="text"
              className="field-input"
              placeholder="例：ミカ"
              value={name}
              maxLength={12}
              required
              aria-invalid={!!nameError}
              aria-describedby="name-hint name-error"
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && onQuickStart()}
            />
            <span id="name-hint" className="field-hint">本名じゃなくてOK。診断画像のキャラ連想にも使います。</span>
            {nameError && <span id="name-error" className="field-error">{nameError}</span>}
          </label>
        </div>

        <div className="diagnosis-select" aria-label="診断モードを選ぶ">
          <button className="diagnosis-card diagnosis-card-primary" onClick={onQuickStart}>
            <span className="mode-badge">すぐ</span>
            <strong>すぐ診断する</strong>
            <span>名前だけでランダム診断。すぐに脳内バランスと画像生成プロンプトを出します。</span>
            <em>お試し向き / 約5秒</em>
          </button>
          <button className="diagnosis-card diagnosis-card-deep" onClick={onFullStart}>
            <span className="mode-badge">10問</span>
            <strong>じっくり診断する</strong>
            <span>10問4択の回答から傾向を計算。回答に合わせた脳内バランスとプロンプトを作ります。</span>
            <em>ちゃんと遊ぶ向き / 約2分</em>
          </button>
        </div>

        <ul className="start-meta">
          <li>簡易は約5秒</li>
          <li>10問診断は約2分</li>
          <li>10問4択</li>
          <li>結果はその場で表示</li>
          <li>個人情報は保存しません</li>
        </ul>
      </div>

      <section className="start-rules">
        <h2 className="rules-title">この診断について</h2>
        <div className="rules-grid">
          <div className="rule">
            <div className="rule-num">01</div>
            <div className="rule-body">
              <h3>まずは簡易診断</h3>
              <p>名前だけですぐに結果を見られます。気軽にあなたの脳内バランスをチェックできます。</p>
            </div>
          </div>
          <div className="rule">
            <div className="rule-num">02</div>
            <div className="rule-body">
              <h3>脳内バランスを漢字で表示</h3>
              <p>今の気分や傾向を、わかりやすい漢字とパーセンテージで表示します。</p>
            </div>
          </div>
          <div className="rule">
            <div className="rule-num">03</div>
            <div className="rule-body">
              <h3>10問診断も選べる</h3>
              <p>じっくり遊びたい時は、物語形式の10問診断でより詳しい結果を見られます。</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===== 質問画面 =====
function QuestionScreen({ index, question, answer, onAnswer, onBack, total }) {
  const progress = ((index + (answer ? 1 : 0)) / total) * 100;
  return (
    <main className="screen question">
      <div className="q-progress" role="progressbar" aria-valuenow={index + 1} aria-valuemin={1} aria-valuemax={total}>
        <div className="q-progress-track">
          <div className="q-progress-fill" style={{ width: `${progress}%` }} />
        </div>
        <div className="q-progress-label">
          <span className="q-current">Q{String(index + 1).padStart(2, "0")}</span>
          <span className="q-slash">/</span>
          <span className="q-total">{String(total).padStart(2, "0")}</span>
        </div>
      </div>

      <div className="q-card">
        <div className="q-tag">第{index + 1}問</div>
        <h2 className="q-prompt">{question.prompt}</h2>

        <ul className="q-choices">
          {["a", "b", "c", "d"].map((k) => (
            <li key={k}>
              <button
                className={`choice ${answer === k ? "is-selected" : ""}`}
                onClick={() => onAnswer(k)}
              >
                <span className="choice-key">{k.toUpperCase()}</span>
                <span className="choice-text">{question.choices[k]}</span>
                <span className="choice-arrow" aria-hidden="true">→</span>
              </button>
            </li>
          ))}
        </ul>

        <div className="q-nav">
          <button className="btn-ghost" onClick={onBack} disabled={index === 0}>
            ← もどる
          </button>
          <span className="q-hint">選ぶと自動で次の質問へ進みます</span>
        </div>
      </div>
    </main>
  );
}

// ===== 結果画面 =====
function ResultScreen({ result, onRetry, onEditName }) {
  const [copied, setCopied] = useState("");
  const [showPrompt, setShowPrompt] = useState(true);

  function copy(text, key) {
    navigator.clipboard?.writeText(text);
    setCopied(key);
    setTimeout(() => setCopied(""), 1600);
  }

  function copyAndOpenGpt() {
    copy(result.imagePrompt || result.finalPrompt, "prompt");
    window.open(GPT_URL, "_blank", "noopener,noreferrer");
  }

  return (
    <main className="screen result">
      <div className="result-grid">
        {/* 左: 脳内ビジュアル */}
        <section className="result-vis">
          <div className="result-eyebrow">
            <span className="dot" /> 診断結果
          </div>
          <h1 className="result-title">診断画像の作り方</h1>

          <div className="brain-stage howto-stage" aria-label="診断画像の作り方">
            <div className="howto-card">
              <div className="howto-badge">HOW TO</div>
              <div className="howto-art" aria-hidden="true" />
              <p className="howto-lead">あなたの診断画像を作る流れ</p>
              <ol className="howto-steps">
                <li>
                  <span>1</span>
                  <p>
                    <strong>画像がある人はアップロード</strong>
                    <small>自分のアイコンやキャラ画像を、画像生成AIに先に添付してください。</small>
                  </p>
                </li>
                <li>
                  <span>2</span>
                  <p>
                    <strong>画像がない人はそのままでOK</strong>
                    <small>プロンプトだけ貼れば、AIがアイコン風キャラも作ります。</small>
                  </p>
                </li>
                <li>
                  <span>3</span>
                  <p>
                    <strong>診断結果をコピーして作成</strong>
                    <small>下のボタンでコピーして、そのまま専用GPTを開けます。</small>
                  </p>
                </li>
              </ol>
              <p className="howto-note">画像あり・画像なし、どちらでも専用GPTで脳内メーカー風画像を作れます</p>
            </div>
          </div>

          <div className="result-actions">
            <button className="btn-primary" onClick={onRetry}>
              {result.mode === "quick" ? "もう一度ランダム診断" : "もう一度診断する"}
            </button>
          </div>
        </section>

        {/* 右: 詳細 */}
        <section className="result-detail">
          {/* 内訳 */}
          <div className="breakdown">
            <h3 className="section-h">脳内の内訳</h3>
            <ul className="breakdown-list">
              {result.brainWords.map((b, i) => (
                <li key={i} className={`bd-row role-${b.role}`}>
                  <span className="bd-word">{b.word}</span>
                  <div className="bd-bar">
                    <div className="bd-bar-fill" style={{ width: `${b.ratio}%` }} />
                  </div>
                  <span className="bd-ratio">{b.ratio}%</span>
                </li>
              ))}
            </ul>
            <div className="breakdown-note">
              今の気分バランスです。
            </div>
          </div>

          <div className="type-card type-card-secondary">
            <div className="type-eyebrow">あなたのタイプ</div>
            <h2 className="type-name">{result.mainType}</h2>
            <p className="type-comment">{result.shortDiagnosis}</p>
            <div className="word-meanings">
              <h3>脳内の漢字の意味</h3>
              <ul>
                {result.brainWords.map((b, i) => (
                  <li key={i}>
                    <span className="word-meaning-char">{b.word}</span>
                    <span className="word-meaning-text">{window.WORD_MEANINGS?.[b.word] || "今の脳内に混ざっている気持ち"}</span>
                  </li>
                ))}
              </ul>
            </div>
            {result.parameterSummary && (
              <div className="type-signals">
                {result.parameterSummary.slice(0, 3).map((p, i) => (
                  <span key={i}>{p.value}{p.score != null ? ` ${p.score}pt` : ""}</span>
                ))}
              </div>
            )}
          </div>

          {/* 診断結果生成プロンプト */}
          <div className="prompt-box prompt-feature">
            <button
              className="prompt-toggle"
              onClick={() => setShowPrompt((v) => !v)}
            >
              <span>診断結果生成プロンプト</span>
              <span>{showPrompt ? "−" : "+"}</span>
            </button>
            {showPrompt && (
              <div className="prompt-body">
                <pre className="prompt-pre">{result.imagePrompt || result.finalPrompt}</pre>
                <button
                  className="btn-primary prompt-copy"
                  onClick={() => copy(result.imagePrompt || result.finalPrompt, "prompt")}
                >
                  {copied === "prompt" ? "コピーしました ✓" : "診断結果をコピー"}
                </button>
                <button
                  className="btn-primary prompt-copy prompt-copy-gpt"
                  onClick={copyAndOpenGpt}
                >
                  ChatGPTで結果を生成
                </button>
                <div className="ad-slot" aria-label="広告枠">
                  <span className="ad-label">広告</span>
                  <p>広告掲載スペース</p>
                </div>
              </div>
            )}
          </div>

          <button className="result-edit" onClick={onEditName}>
            名前を変える →
          </button>
        </section>
      </div>

      <footer className="result-foot">
        この診断はジョークです。本気にせず話のネタに。簡易診断はランダム、10問診断は事前に決めたロジックで結果を返します。
      </footer>
    </main>
  );
}

window.Screens = { Header, StartScreen, QuestionScreen, ResultScreen };