// Dashboard tab — HUD, current pipeline, S/A Top 10, charts, activity, patterns
const { useState: useState_D, useMemo: useMemo_D } = React;

function HudGrid({ items }) {
  return (
    <div className="hud-grid">
      {items.map((m, i) => (
        <div key={i} className={"hud-card" + (m.emphasis === "accent" ? " accent" : "")}>
          <div className="hud-label">{m.label}</div>
          <div className="hud-value-row">
            <span className="hud-value">{m.value}</span>
            <TrendArrow dir={m.trend} value={m.delta} />
          </div>
          <Sparkline
            data={m.spark || [3,5,4,6,5,7,6,8,7,9].map(v => v + i)}
            width={120} height={20}
            stroke={m.emphasis === "accent" ? "var(--accent)" : "var(--text-tertiary)"}
            fill={m.emphasis === "accent" ? "var(--accent-soft)" : "transparent"}
          />
        </div>
      ))}
    </div>
  );
}

function PipelineStrip({ steps }) {
  return (
    <div className="pipe">
      <div className="pipe-head">
        <div>
          <span className="pipe-title">현재 배치 #1287</span>
          <span className="pipe-sub">smart 모드 · 키워드 3건 · 시작 13:42:08</span>
        </div>
        <div className="pipe-actions">
          <button className="btn btn-ghost sm">로그 보기</button>
          <button className="btn btn-warn sm">일시정지</button>
          <button className="btn btn-danger sm">중단</button>
        </div>
      </div>
      <div className="pipe-rail">
        {steps.map((s, i) => (
          <div key={s.id} className={"pipe-step state-" + s.state}>
            <div className="pipe-node">
              <div className="pipe-num">{s.id}</div>
              {s.state === "active" && <span className="pipe-pulse"></span>}
              {s.state === "done" && (
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="4,12 10,18 20,6"/></svg>
              )}
            </div>
            <div className="pipe-meta">
              <div className="pipe-lbl">{s.label}</div>
              <div className="pipe-desc">{s.desc}</div>
            </div>
            {i < steps.length - 1 && <div className={"pipe-line " + (s.state === "done" ? "done" : "")}></div>}
          </div>
        ))}
      </div>
    </div>
  );
}

function SATopTable({ rows, onSelect }) {
  return (
    <div className="card">
      <SectionHeader
        icon="🏆"
        title="최근 S/A Top 10"
        sub="여기서 시작 — 행 클릭하면 상세, 숫자 버튼으로 워크플로우 진행"
        right={
          <div className="seg">
            <button className="seg-btn active">전체</button>
            <button className="seg-btn">S only</button>
            <button className="seg-btn">미입력</button>
          </div>
        }
      />
      {/* Mobile card list (shown < 700px) */}
      <div className="kw-table-mobile">
        {rows.map((r, i) => (
          <div key={r.kw} className="kw-card-m" onClick={() => onSelect && onSelect(r)}>
            <div className="kw-card-m-top">
              <span className="kw-rank">{String(i + 1).padStart(2, "0")}</span>
              <span className="kw-card-m-name">{r.kw}</span>
              <Grade g={r.grade}/>
              <span className="kw-card-m-score">{r.score}</span>
            </div>
            <div className="kw-card-m-meta">
              <span>🚀 {r.rocketPct}%</span>
              {r.outcome && <span>· {r.outcome === 'success' ? '✅ 성공' : r.outcome === 'fail' ? '❌ 실패' : '⏳ 진행중'}</span>}
              {r.revenue && <span>· {r.revenue}</span>}
            </div>
            {r.killer && <div className="kw-card-m-killer">{r.killer}</div>}
          </div>
        ))}
      </div>

      <div className="tbl-wrap kw-table">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: "32%"}}>키워드</th>
              <th>등급</th>
              <th>점수</th>
              <th>점수 추이</th>
              <th>로켓%</th>
              <th>킬러기능</th>
              <th>실전 결과</th>
              <th style={{width: 144}}>워크플로우</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => {
              const isS = r.grade === 'S';
              const queueTemplate = async (e) => {
                e.stopPropagation();
                try {
                  await AS_API.queueAdd({ keyword: r.kw, grade: r.grade, score: r.score });
                  alert(`✅ "${r.kw}" 기획서 큐에 추가됨 (template_worker가 2분 내 자동 실행)`);
                } catch (err) { alert('실패: ' + (err.error || err.message)); }
              };
              const generateImages = async (e) => {
                e.stopPropagation();
                if (!confirm(`"${r.kw}" 14컷 이미지 생성? (약 13분 소요, Gemini)`)) return;
                try {
                  await AS_API.generateImages(r.kw);
                  alert(`🎨 "${r.kw}" 이미지 생성 시작 — 컷 탭에서 진행 확인 가능`);
                } catch (err) { alert('실패: ' + (err.error || err.message)); }
              };
              const autoFull = async (e) => {
                e.stopPropagation();
                if (!confirm(`✨ 자동 진행: 기획서 큐 + 14컷 이미지를 순차 실행합니다.\n\n키워드: ${r.kw}\n예상 소요: 약 15~20분\n\n진행할까요?`)) return;
                try {
                  await AS_API.queueAdd({ keyword: r.kw, grade: r.grade, score: r.score });
                  await AS_API.generateImages(r.kw);
                  alert(`✨ "${r.kw}" 자동 진행 시작\n• 기획서 큐 추가됨\n• 이미지 생성 시작됨\n\n결과는 행 클릭 → 컷 탭에서 확인`);
                } catch (err) { alert('실패: ' + (err.error || err.message)); }
              };
              return (
              <tr key={r.kw} className={"tbl-row " + (isS ? "kw-row-s" : "")} onClick={() => onSelect && onSelect(r)} style={isS ? {background: 'linear-gradient(90deg, rgba(255,179,0,0.08) 0%, transparent 60%)'} : {}}>
                <td>
                  <div className="kw-cell">
                    <span className="kw-rank">{String(i + 1).padStart(2, "0")}</span>
                    <span className="kw-name">{r.kw}</span>
                    {isS && <span style={{marginLeft:8, fontSize:10, padding:'2px 6px', borderRadius:4, background:'oklch(0.78 0.16 70)', color:'#000', fontWeight:600}}>⭐ S 추천</span>}
                  </div>
                </td>
                <td><Grade g={r.grade}/></td>
                <td><span className="score-num">{r.score}</span></td>
                <td><Sparkline data={r.sparkline} width={72} height={20}/></td>
                <td>
                  <div className="rocket-cell">
                    <span>{r.rocketPct}%</span>
                    <Bar pct={r.rocketPct} max={100} color="var(--text-tertiary)"/>
                  </div>
                </td>
                <td className="cell-killer">{r.killer}</td>
                <td><Outcome value={r.outcome} revenue={r.revenue}/></td>
                <td>
                  <div className="flow-actions" onClick={e => e.stopPropagation()}>
                    {isS ? (
                      <button onClick={autoFull} title="기획서 + 14컷 이미지 자동 진행" style={{padding:'4px 10px', background:'oklch(0.78 0.16 70)', color:'#000', fontWeight:600, borderRadius:4, fontSize:11, border:'none', cursor:'pointer'}}>✨ 자동 진행</button>
                    ) : (
                      <>
                        <button className="flow-btn" title="상세 보기" onClick={(e) => { e.stopPropagation(); onSelect && onSelect(r); }}>1</button>
                        <span className="flow-arr">→</span>
                        <button className="flow-btn" title="기획서 큐 추가" onClick={queueTemplate}>2</button>
                        <span className="flow-arr">→</span>
                        <button className="flow-btn" title="14컷 이미지 생성" onClick={generateImages}>3</button>
                        <span className="flow-arr">→</span>
                        <button className="flow-btn" title="결과 확인" onClick={(e) => { e.stopPropagation(); onSelect && onSelect(r); }}>4</button>
                      </>
                    )}
                  </div>
                </td>
              </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function GradeDistChart({ data }) {
  return (
    <div className="card chart-card">
      <SectionHeader title="등급 분포" sub="총 284건 (오늘 +18)"/>
      <div className="grade-rows">
        {data.map(d => (
          <div key={d.grade} className="grade-row">
            <Grade g={d.grade}/>
            <div className="grade-bar-wrap">
              <Bar pct={d.pct} max={50} color={`var(--grade-${d.grade.toLowerCase()})`}/>
            </div>
            <span className="grade-pct">{d.pct.toFixed(1)}%</span>
            <span className="grade-cnt">{d.count}건</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function WeeklyChart({ data }) {
  const maxBatches = Math.max(...data.map(d => d.batches));
  const maxSA      = Math.max(...data.map(d => d.sa));
  return (
    <div className="card chart-card">
      <SectionHeader title="주간 학습 곡선" sub="배치 / S·A 통과 (지난 7일)"/>
      <div className="weekly-chart">
        {data.map((d, i) => (
          <div key={i} className="weekly-col">
            <div className="weekly-bars">
              <div className="weekly-bar batches" style={{ height: (d.batches / maxBatches * 100) + "%" }} title={`배치 ${d.batches}건`}></div>
              <div className="weekly-bar sa" style={{ height: (d.sa / maxSA * 100) + "%" }} title={`S/A ${d.sa}건`}></div>
            </div>
            <div className="weekly-day">{d.day}</div>
          </div>
        ))}
      </div>
      <div className="legend">
        <span><span className="lg-sw batches"></span>배치</span>
        <span><span className="lg-sw sa"></span>S/A 통과</span>
      </div>
    </div>
  );
}

function ActivityFeed({ items }) {
  return (
    <div className="card">
      <SectionHeader icon="⏱" title="활동 피드" sub="실시간"/>
      <ul className="activity">
        {items.map((a, i) => (
          <li key={i} className={"act state-" + a.state}>
            <span className="act-dot"></span>
            <span className="act-icon">{a.icon}</span>
            <div className="act-body">
              <div className="act-title">{a.title}</div>
              <div className="act-detail">{a.detail}</div>
            </div>
            <span className="act-time">{a.time}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function PatternsPanel({ items }) {
  return (
    <div className="card">
      <SectionHeader icon="🧠" title="DB 성공 패턴" sub="자동 학습된 공통점 (가중치 ↓)"/>
      <ul className="patterns">
        {items.map((p, i) => (
          <li key={i} className="pat">
            <div className="pat-head">
              <span className="pat-title">{p.title}</span>
              <span className="pat-trend" data-t={p.trend}>{p.trend === "up" ? "↑" : p.trend === "down" ? "↓" : "—"}</span>
            </div>
            <div className="pat-meta">
              <Bar pct={p.weight * 100} color="var(--accent)"/>
              <span className="pat-w">{(p.weight * 100).toFixed(0)}%</span>
              <span className="pat-s">{p.samples} samples</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function DashboardTab({ data, onSelectKw }) {
  return (
    <div className="dash-grid">
      <HudGrid items={data.HUD_METRICS}/>
      <PipelineStrip steps={data.STAGE_STEPS}/>
      <SATopTable rows={data.SA_TOP} onSelect={onSelectKw}/>
      <div className="row-2">
        <GradeDistChart data={data.GRADE_DIST}/>
        <WeeklyChart data={data.WEEKLY}/>
      </div>
      <div className="row-2">
        <ActivityFeed items={data.ACTIVITY}/>
        <PatternsPanel items={data.PATTERNS}/>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardTab, HudGrid, PipelineStrip, SATopTable, GradeDistChart, WeeklyChart, ActivityFeed, PatternsPanel });