/* Analysis Result + Conversation — 對齊 AnalysisResultPage.vue */

function AnalysisResultPage({ analysisId, navigate, onBack }) {
  const analysis = findAnalysis(analysisId) || SEED_ANALYSES[0];
  const toast = useToast();
  const [showFuri, setShowFuri] = React.useState(true);

  if (analysis.kind === "conversation") {
    return <ConversationPage analysis={analysis} navigate={navigate} onBack={onBack} />;
  }

  return (
    <div className="zen-page">
      <PageHeader title="解析結果" onBack={onBack || (() => navigate("/records"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <ZenCard>
            <CardHeader
              icon={<Icon name="sparkles" size={22} />}
              title="解析完成"
              subtitle="點選任一句子查看深度解析"
            />
            <div className="result-tools">
              <ZenButton variant="ghost" sm onClick={() => setShowFuri((v) => !v)}>
                {showFuri ? "隱藏振り仮名" : "顯示振り仮名"}
              </ZenButton>
              <ZenButton variant="ghost" sm onClick={() => toast.push("（Mock）朗讀全部", "success")}>
                <Icon name="volume" size={14} /> 朗讀全部
              </ZenButton>
            </div>
            {analysis.sentences.map((s) => (
              <div
                key={s.id}
                className="sentence-row"
                onClick={() => navigate(`/analysis/${analysis.id}/sentence/${s.id}`)}
              >
                <div className="sentence-body">
                  <div className="sentence-zh">{s.zh}</div>
                  <div className="sentence-jp">
                    {showFuri ? s.jp : s.jp.replace(/[ぁ-ん]/g, "") || s.jp}
                  </div>
                </div>
                <div className="sentence-actions">
                  <button
                    type="button"
                    className="icon-btn"
                    onClick={(e) => {
                      e.stopPropagation();
                      toast.push("（Mock）朗讀句子", "success");
                    }}
                  >
                    <Icon name="volume" size={18} />
                  </button>
                  <Icon name="chevronRight" size={18} />
                </div>
              </div>
            ))}
          </ZenCard>

          {analysis.translation ? (
            <ZenCard>
              <div className="card-title" style={{ marginBottom: 10 }}>全文翻譯</div>
              <div className="translation-box">{analysis.translation}</div>
            </ZenCard>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function ConversationPage({ analysis, navigate, onBack }) {
  const toast = useToast();
  return (
    <div className="zen-page">
      <PageHeader title="模擬對話" onBack={onBack || (() => navigate("/records"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <ZenCard>
            <CardHeader
              icon={<Icon name="chat" size={22} />}
              title="模擬對話"
              subtitle="點句子看解析，點喇叭聽該角色的聲音"
            />
            <div className="chat-list">
              {(analysis.turns || []).map((t) => (
                <div
                  key={t.id}
                  className={`chat-bubble ${t.side}`}
                  onClick={() => {
                    toast.push("（Mock）開啟句子解析", "success");
                    navigate("/analysis/a1/sentence/s1");
                  }}
                >
                  <div className="chat-speaker">{t.speaker}</div>
                  <div className="chat-text">{t.jp}</div>
                  <div className="chat-zh">{t.zh}</div>
                </div>
              ))}
            </div>
          </ZenCard>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AnalysisResultPage, ConversationPage });