// History tab — fetches from /api/recent/history with server-side filtering
const { useState: useState_H, useEffect: useEffect_H, useMemo: useMemo_H, useCallback: useCallback_H } = React;

function HistoryTab({ data, onSelectKw }) {
  const [q, setQ] = useState_H("");
  const [grade, setGrade] = useState_H("");
  const [outcome, setOutcome] = useState_H("");
  const [days, setDays] = useState_H("365");
  const [sortBy, setSortBy] = useState_H("date");
  const [rows, setRows] = useState_H([]);
  const [total, setTotal] = useState_H(0);
  const [loading, setLoading] = useState_H(true);
  const [page, setPage] = useState_H(0);
  const PAGE_SIZE = 30;

  const fetchData = useCallback_H(async () => {
    setLoading(true);
    try {
      const res = await AS_API.recentHistory({
        keyword: q || undefined,
        grade: grade || undefined,
        days: days,
        limit: PAGE_SIZE,
        offset: page * PAGE_SIZE,
      });
      const adapted = (res.results || []).map(r => ({
        kw: r.keyword,
        grade: r.grade,
        score: r.score || 0,
        rocketPct: r.rocketRatio || 0,
        sellerRocketCount: r.sellerRocketCount || 0,
        killer: r.killerFeature || '',
        pain: r.commonPain || '',
        outcome: r.actualOutcome,
        revenue: r.actualRevenue,
        notes: r.notes || '',
        date: (r.createdAt || '').slice(0, 10),
        sparkline: Array.from({ length: 8 }, () => Math.max(0, (r.score || 50) + (Math.random() - 0.5) * 20)),
      }));
      setRows(adapted);
      setTotal(res.total || adapted.length);
    } catch {
      setRows([]);
      setTotal(0);
    }
    setLoading(false);
  }, [q, grade, days, page]);

  useEffect_H(() => { setPage(0); }, [q, grade, days]);
  useEffect_H(() => { fetchData(); }, [fetchData]);

  const sorted = useMemo_H(() => {
    let r = [...rows];
    if (outcome) {
      if (outcome === "none") r = r.filter(x => !x.outcome);
      else r = r.filter(x => x.outcome === outcome);
    }
    if (sortBy === "score") r.sort((a, b) => b.score - a.score);
    else if (sortBy === "rocket") r.sort((a, b) => a.rocketPct - b.rocketPct);
    return r;
  }, [rows, outcome, sortBy]);

  const stats = useMemo_H(() => {
    const sa = sorted.filter(r => r.grade === "S" || r.grade === "A").length;
    const success = sorted.filter(r => r.outcome === "success").length;
    const revenue = sorted.reduce((sum, r) => sum + (r.revenue || 0), 0);
    return { total, sa, success, revenue };
  }, [sorted, total]);

  const totalPages = Math.ceil(total / PAGE_SIZE);

  return (
    <div className="hist-wrap">
      <div className="hist-hero">
        <div className="hist-search-big">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
          <input placeholder="키워드, 킬러 기능 검색…" value={q} onChange={e => setQ(e.target.value)} autoFocus/>
          {q && <button className="hist-clear" onClick={() => setQ("")}>×</button>}
          <Kbd>/</Kbd>
        </div>
        <div className="hist-stats">
          <div className="hist-stat"><span className="num">{stats.total}</span><span className="lbl">결과</span></div>
          <div className="hist-stat"><span className="num">{stats.sa}</span><span className="lbl">S/A</span></div>
          <div className="hist-stat"><span className="num">{stats.success}</span><span className="lbl">성공</span></div>
          <div className="hist-stat"><span className="num">{(stats.revenue / 1_000_000).toFixed(1)}M</span><span className="lbl">총 매출</span></div>
        </div>
      </div>

      <div className="hist-filters">
        <div className="filt-grp">
          <span className="filt-lbl">등급</span>
          <div className="seg">
            {["", "S", "A", "B", "C"].map(g => (
              <button key={g||"all"} className={"seg-btn " + (grade === g ? "active" : "")} onClick={() => setGrade(g)}>{g || "전체"}</button>
            ))}
          </div>
        </div>
        <div className="filt-grp">
          <span className="filt-lbl">실전 결과</span>
          <div className="seg">
            {[["","전체"],["success","성공"],["fail","실패"],["pending","대기"],["sourcing","소싱"],["none","미입력"]].map(([v,l]) => (
              <button key={v||"all"} className={"seg-btn " + (outcome === v ? "active" : "")} onClick={() => setOutcome(v)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="filt-grp">
          <span className="filt-lbl">정렬</span>
          <div className="seg">
            {[["date","최신"],["score","점수"],["rocket","로켓낮음"]].map(([v,l]) => (
              <button key={v} className={"seg-btn " + (sortBy === v ? "active" : "")} onClick={() => setSortBy(v)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="filt-grp grow">
          <span className="filt-lbl">기간</span>
          <select className="filt-select" value={days} onChange={e => setDays(e.target.value)}>
            <option value="7">7일</option>
            <option value="30">30일</option>
            <option value="90">90일</option>
            <option value="365">1년</option>
            <option value="3650">전체</option>
          </select>
        </div>
      </div>

      {loading && <div style={{textAlign:'center',padding:40,color:'var(--fg-3)'}}>불러오는 중…</div>}

      <div className="hist-cards">
        {!loading && sorted.length === 0 && (
          <div className="empty-state">
            <div className="empty-glyph">⌕</div>
            <div className="empty-title">결과 없음</div>
            <div className="empty-sub">검색어나 필터를 조정해보세요</div>
          </div>
        )}
        {sorted.map((r, i) => (
          <div key={r.kw + i} className={"hist-card grade-bg-" + r.grade} style={{cursor:'pointer'}} onClick={() => onSelectKw && onSelectKw(r)}>
            <div className="hist-card-top">
              <Grade g={r.grade}/>
              <span className="hist-score">{r.score}</span>
              <span className="hist-date">{r.date}</span>
            </div>
            <div className="hist-card-kw">{r.kw}</div>
            <div className="hist-card-killer">{r.killer}</div>
            <div className="hist-card-meta">
              <div className="meta-row">
                <span className="meta-lbl">로켓%</span>
                <span className="meta-val">{r.rocketPct}%</span>
                <Bar pct={r.rocketPct} max={100} color="var(--text-tertiary)"/>
              </div>
            </div>
            <div className="hist-card-foot">
              <Outcome value={r.outcome} revenue={r.revenue}/>
              <Sparkline data={r.sparkline} width={60} height={18}/>
            </div>
          </div>
        ))}
      </div>

      {totalPages > 1 && (
        <div style={{display:'flex',justifyContent:'center',gap:8,padding:'16px 0'}}>
          <button className="btn btn-ghost sm" disabled={page === 0} onClick={() => setPage(p => p - 1)}>← 이전</button>
          <span style={{fontSize:12,color:'var(--fg-3)',alignSelf:'center'}}>{page + 1} / {totalPages}</span>
          <button className="btn btn-ghost sm" disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)}>다음 →</button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { HistoryTab });