/* Home / Analyze — 對齊 HomeV2Page.vue */

function HomePage({ navigate, tweaks }) {
  const [mode, setMode] = React.useState("image");
  const [subMode, setSubMode] = React.useState("free");
  const [text, setText] = React.useState("");
  const [prompt, setPrompt] = React.useState("");
  const [generated, setGenerated] = React.useState("");
  const [youtube, setYoutube] = React.useState("");
  const [selectedPhoto, setSelectedPhoto] = React.useState(null);
  const [topic, setTopic] = React.useState(TOPIC_PRESETS[0].name);
  const toast = useToast();

  const modes = [
    { id: "image", label: "圖片", icon: "camera" },
    { id: "text", label: "貼上文字", icon: "reader" },
    { id: "generate", label: "想學什麼？", icon: "sparkles" },
    { id: "youtube", label: "YouTube", icon: "youtube" },
  ];

  const modeIcon = mode === "text" ? "reader" : mode === "generate" ? "sparkles" : mode === "youtube" ? "youtube" : "camera";

  const start = () => {
    toast.push("（Mock）開始解析", "success");
    navigate("/analysis/a1");
  };

  return (
    <div className="zen-page">
      <PageHeader title="學日文" />
      <div className="zen-content">
        <div className="content-wrapper content-wrapper--tab">
          <ZenCard className="upload-card">
            <CardHeader
              icon={<Icon name={modeIcon} size={22} />}
              title="解析日文"
              subtitle="圖片掃描或直接貼上文字"
            />
            <ModeTabs items={modes} value={mode} onChange={setMode} />

            {mode === "image" && (
              <>
                {!selectedPhoto && (
                  <div className="photos-grid">
                    <div className="photos-header">
                      <Icon name="images" size={14} />
                      <span>最近的照片</span>
                    </div>
                    <div className="photos-list">
                      {MOCK_PHOTOS.map((bg, i) => (
                        <div
                          key={i}
                          className="photo-item"
                          style={{ background: bg }}
                          onClick={() => setSelectedPhoto(bg)}
                        />
                      ))}
                    </div>
                    <div className="photos-divider"><span>或</span></div>
                  </div>
                )}
                <div className="upload-actions">
                  <ZenButton variant="primary" onClick={() => setSelectedPhoto(MOCK_PHOTOS[0])}>
                    <Icon name="camera" size={18} />
                    使用相機
                  </ZenButton>
                  <ZenButton variant="outline" onClick={() => setSelectedPhoto(MOCK_PHOTOS[2])}>
                    <Icon name="images" size={18} />
                    選擇照片
                  </ZenButton>
                </div>
                {selectedPhoto && (
                  <div className="preview-section">
                    <div className="preview-image-wrapper">
                      <div className="preview-image" style={{ background: selectedPhoto, height: 180 }} />
                    </div>
                    <div className="preview-actions">
                      <ZenButton variant="ghost" sm onClick={() => setSelectedPhoto(null)}>
                        <Icon name="refresh" size={14} /> 重新選取
                      </ZenButton>
                    </div>
                    <ZenButton variant="accent" className="analysis-btn" onClick={start}>
                      <Icon name="sparkles" size={18} /> 開始解析
                    </ZenButton>
                  </div>
                )}
              </>
            )}

            {mode === "text" && (
              <div>
                <textarea
                  className="text-input"
                  rows={8}
                  placeholder="在此貼上日文文字..."
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                />
                <div className="text-input-actions">
                  {text ? (
                    <ZenButton variant="ghost" sm onClick={() => setText("")}>清除</ZenButton>
                  ) : null}
                  <ZenButton variant="accent" disabled={!text.trim()} onClick={start}>
                    <Icon name="sparkles" size={16} /> 解析文字
                  </ZenButton>
                </div>
              </div>
            )}

            {mode === "generate" && (
              <div>
                <ModeTabs
                  items={[
                    { id: "free", label: "任意", icon: "bulb" },
                    { id: "conversation", label: "模擬對話", icon: "chat" },
                  ]}
                  value={subMode}
                  onChange={setSubMode}
                />
                {subMode === "free" ? (
                  <>
                    <textarea
                      className="text-input"
                      rows={4}
                      placeholder="例如：我想學在咖啡廳點餐的對話、旅行時問路、上班自我介紹"
                      value={prompt}
                      onChange={(e) => setPrompt(e.target.value)}
                    />
                    <div className="text-input-actions">
                      <ZenButton
                        variant="outline"
                        disabled={!prompt.trim()}
                        onClick={() => {
                          setGenerated("今日はカフェで友達と会って、おいしいケーキを食べました。");
                          toast.push("（Mock）已生成日文內容", "success");
                        }}
                      >
                        <Icon name="sparkles" size={16} /> 生成日文內容
                      </ZenButton>
                    </div>
                    <label className="section-label">AI 生成的日文內容</label>
                    <textarea
                      className="text-input"
                      rows={5}
                      placeholder="AI 會先幫你生成一段日文文章或對話，之後你可以直接拿去解析。"
                      value={generated}
                      onChange={(e) => setGenerated(e.target.value)}
                    />
                    <ZenButton
                      variant="accent"
                      className="analysis-btn"
                      disabled={!generated.trim()}
                      onClick={start}
                    >
                      <Icon name="sparkles" size={16} /> 解析這段內容
                    </ZenButton>
                  </>
                ) : (
                  <>
                    <textarea
                      className="text-input"
                      rows={3}
                      placeholder="輸入想練習的對話主題，或從下方主題選一個"
                      value={prompt}
                      onChange={(e) => setPrompt(e.target.value)}
                    />
                    <label className="section-label">預設主題</label>
                    <div className="topic-chips">
                      {TOPIC_PRESETS.map((t) => (
                        <button
                          key={t.name}
                          type="button"
                          className={`topic-chip${topic === t.name ? " selected" : ""}`}
                          onClick={() => {
                            setTopic(t.name);
                            setPrompt(t.prompt);
                          }}
                        >
                          {t.name}
                        </button>
                      ))}
                    </div>
                    <ZenButton
                      variant="accent"
                      className="analysis-btn"
                      style={{ marginTop: 14 }}
                      onClick={() => {
                        toast.push("（Mock）生成對話", "success");
                        navigate("/analysis/c1");
                      }}
                    >
                      <Icon name="chat" size={16} /> 生成對話
                    </ZenButton>
                  </>
                )}
              </div>
            )}

            {mode === "youtube" && (
              <div>
                <input
                  className="text-input"
                  placeholder="貼上 YouTube 影片連結，例如：https://www.youtube.com/watch?v=..."
                  value={youtube}
                  onChange={(e) => setYoutube(e.target.value)}
                />
                <p className="card-subtitle" style={{ marginTop: 10 }}>
                  會先抓日文字幕或自動日文字幕，再直接送進既有的文字解析流程。
                </p>
                <ZenButton
                  variant="accent"
                  className="analysis-btn"
                  disabled={!youtube.trim()}
                  onClick={start}
                >
                  <Icon name="youtube" size={16} /> 抓字幕並解析
                </ZenButton>
              </div>
            )}
          </ZenCard>

          {tweaks.showRecent && (
            <ZenCard>
              <div className="card-title" style={{ marginBottom: 14 }}>最近解析</div>
              <div className="recent-list">
                {SEED_ANALYSES.filter((a) => a.status === "completed").slice(0, 3).map((a) => (
                  <div
                    key={a.id}
                    className="recent-item"
                    onClick={() => navigate(`/analysis/${a.id}`)}
                  >
                    <div className={`recent-thumb`}>
                      <div className={`thumbnail-placeholder${a.kind === "conversation" ? " is-conversation" : ""}`}>
                        <Icon name={a.kind === "conversation" ? "chat" : a.kind === "image" ? "images" : "reader"} size={22} />
                      </div>
                    </div>
                    <div className="analysis-content">
                      <div className="analysis-text">{a.originalText}</div>
                      <div className="analysis-meta">
                        <span className="meta-date">{formatRelativeDate(a.createdAt)}</span>
                      </div>
                    </div>
                    <Icon name="chevronRight" size={18} className="analysis-arrow" />
                  </div>
                ))}
              </div>
            </ZenCard>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage });