/* Sentence Detail — 對齊 SentenceDetailV2Page.vue */

function SentenceDetailPage({ analysisId, sentenceId, navigate, onBack }) {
  const analysis = findAnalysis(analysisId) || SEED_ANALYSES[0];
  const sentence = (analysis.sentences || []).find((s) => s.id === sentenceId) || analysis.sentences[0];
  const [mode, setMode] = React.useState("words");
  const toast = useToast();

  if (!sentence) {
    return (
      <div className="zen-page">
        <PageHeader title="句子深度解析" onBack={onBack} />
        <div className="zen-content"><div className="content-wrapper"><ZenCard>找不到句子</ZenCard></div></div>
      </div>
    );
  }

  return (
    <div className="zen-page">
      <PageHeader title="句子深度解析" onBack={onBack || (() => navigate(`/analysis/${analysis.id}`))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <ZenCard className="sticky-sentence">
            <div className="sentence-zh">{sentence.zh}</div>
            <div className="sentence-jp" style={{ fontSize: "var(--fs-20)", marginTop: 6 }}>{sentence.jp}</div>
            <div style={{ marginTop: 12 }}>
              <ZenButton variant="ghost" sm onClick={() => toast.push("（Mock）朗讀", "success")}>
                <Icon name="volume" size={14} /> 朗讀
              </ZenButton>
            </div>
          </ZenCard>

          <ModeTabs
            items={[
              { id: "words", label: "逐詞" },
              { id: "phrases", label: "片語" },
            ]}
            value={mode}
            onChange={setMode}
          />

          <div className="term-list">
            {(mode === "words" ? sentence.terms : sentence.terms.slice(0, 3)).map((t) => (
              <div
                key={t.term}
                className="term-card"
                onClick={() => navigate(`/analysis/${analysis.id}/deep-dive/${encodeURIComponent(t.term)}`)}
              >
                <div className="term-head">
                  <div className="term-word">{t.term}</div>
                  {t.jlpt && t.jlpt !== "—" ? <span className="jlpt-badge">{t.jlpt}</span> : null}
                </div>
                <div className="term-meaning">{t.meaning}</div>
                <div className="term-meta">{t.reading} · {t.pos}</div>
                <div className="term-actions">
                  <ZenButton
                    variant="ghost"
                    sm
                    onClick={(e) => {
                      e.stopPropagation();
                      toast.push(`（Mock）朗讀 ${t.term}`, "success");
                    }}
                  >
                    <Icon name="volume" size={14} /> 朗讀
                  </ZenButton>
                  <ZenButton
                    variant="ghost"
                    sm
                    onClick={(e) => {
                      e.stopPropagation();
                      toast.push("（Mock）已加入單字本", "success");
                    }}
                  >
                    加入單字
                  </ZenButton>
                  <ZenButton variant="outline" sm>
                    延伸學習
                  </ZenButton>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SentenceDetailPage });