// 画面: スタート / 質問 / 結果
const { useState, useEffect, useMemo, useRef } = React;

// ===== 共通ヘッダー =====
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, onStart }) {
  return (
    <main className="screen start">
      <div className="start-card">
        <div className="start-eyebrow">10問4択・約2分</div>
        <h1 className="start-title">
          あなたの<span className="title-accent">脳の中</span>、<br />
          のぞいてみませんか？
        </h1>
        <p className="start-lead">
          「愛されたい」「お金がほしい」「ただ寝たい」——<br />
          表に出してない本音を、漢字で散らかして見せます。
        </p>

        <div className="start-form">
          <label className="field">
            <span className="field-label">名前（ニックネーム可）</span>
            <input
              type="text"
              className="field-input"
              placeholder="例：ミカ"
              value={name}
              maxLength={12}
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && onStart()}
            />
            <span className="field-hint">空欄なら「あなた」になります</span>
          </label>

          <button className="btn-primary" onClick={onStart}>
            診断をはじめる
            <span className="btn-arrow">→</span>
          </button>
        </div>

        <ul className="start-meta">
          <li>所要時間 約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>あなたの中で動いている本音を、19文字の漢字セットから抜き出して並べます。</p>
            </div>
          </div>
          <div className="rule">
            <div className="rule-num">03</div>
            <div className="rule-body">
              <h3>ジョーク診断</h3>
              <p>当たるかもしれないし当たらないかもしれません。話のネタに使ってください。</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(false);

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

  const shareText = `${result.resultTitle} の結果は『${result.mainType}』。脳内: ${result.brainWords
    .map((b) => `${b.word}${b.ratio}%`)
    .join(" / ")} #脳内メーカー`;

  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">{result.resultTitle}</h1>

          <div className="brain-stage">
            <window.BrainView
              brainWords={result.brainWords}
              seedKey={result.mainCategory + "|" + result.brainWords.map((b) => b.word + b.ratio).join(",")}
            />
          </div>

          <div className="result-actions">
            <button className="btn-primary" onClick={onRetry}>
              もう一度診断する
            </button>
            <button
              className="btn-ghost"
              onClick={() => copy(shareText, "share")}
            >
              {copied === "share" ? "コピーしました ✓" : "結果テキストをコピー"}
            </button>
          </div>
        </section>

        {/* 右: 詳細 */}
        <section className="result-detail">
          <div className="type-card">
            <div className="type-eyebrow">あなたのタイプ</div>
            <h2 className="type-name">{result.mainType}</h2>
            <p className="type-comment">{result.shortDiagnosis}</p>
          </div>

          {/* 内訳 */}
          <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>
                  <span className="bd-role">{b.role === "main" ? "本命" : b.role === "sub" ? "脇役" : "端っこ"}</span>
                </li>
              ))}
            </ul>
            <div className="breakdown-note">
              合計 100%・表示漢字は事前指定の19文字セットからのみ
            </div>
          </div>

          {/* 表情指定 */}
          <div className="expression">
            <h3 className="section-h">表情のメモ</h3>
            <p>{result.expressionPrompt}</p>
          </div>

          {/* 画像生成プロンプト */}
          <div className="prompt-box">
            <button
              className="prompt-toggle"
              onClick={() => setShowPrompt((v) => !v)}
            >
              <span>画像生成用プロンプトを{showPrompt ? "閉じる" : "ひらく"}</span>
              <span>{showPrompt ? "−" : "+"}</span>
            </button>
            {showPrompt && (
              <div className="prompt-body">
                <pre className="prompt-pre">{result.finalPrompt}</pre>
                <button
                  className="btn-ghost"
                  onClick={() => copy(result.finalPrompt, "prompt")}
                >
                  {copied === "prompt" ? "コピーしました ✓" : "プロンプトをコピー"}
                </button>
              </div>
            )}
          </div>

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

      <footer className="result-foot">
        この診断はジョークです。本気にせず話のネタに。AIではなく事前に決めたロジックで毎回同じ結果を返します。
      </footer>
    </main>
  );
}

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