/* Records — 對齊 AnalysisResultListPage.vue */

function RecordsPage({ navigate, tweaks }) {
  const list = tweaks.recordsEmpty ? [] : SEED_ANALYSES;
  const statusLabel = { completed: "已完成", processing: "處理中", failed: "失敗" };

  return (
    <div className="zen-page">
      <PageHeader title="解析歷史" />
      <div className="zen-content">
        <div className="content-wrapper content-wrapper--tab">
          {list.length === 0 ? (
            <ZenCard className="empty-state">
              <div className="empty-icon"><Icon name="images" size={40} /></div>
              <p className="empty-title">還沒有解析紀錄</p>
              <p className="empty-hint">先拍一張日文照片或貼上文字開始學習</p>
              <ZenButton variant="primary" onClick={() => navigate("/home")}>
                <Icon name="camera" size={16} /> 解析日文
              </ZenButton>
            </ZenCard>
          ) : (
            <div className="analyses-list" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {list.map((a) => (
                <ZenCard
                  key={a.id}
                  className="analysis-item"
                  onClick={() => a.status === "completed" && navigate(`/analysis/${a.id}`)}
                  style={{ cursor: a.status === "completed" ? "pointer" : "default" }}
                >
                  <div className="analysis-thumbnail">
                    <div className={`thumbnail-placeholder${a.kind === "conversation" ? " is-conversation" : ""}`}>
                      <Icon
                        name={a.kind === "conversation" ? "chat" : a.kind === "image" ? "images" : "reader"}
                        size={26}
                      />
                    </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>
                      <StatusPill status={a.status}>{statusLabel[a.status]}</StatusPill>
                    </div>
                  </div>
                  <div className="analysis-arrow"><Icon name="chevronRight" size={18} /></div>
                </ZenCard>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RecordsPage });