// Other tabs — control, queue, logs, patterns, prompts, settings (lighter weight)
const { useState: useState_O } = React;

function ControlTab({ onStart, onStop, running }) {
  const [mode, setMode] = useState_O("smart");
  const [count, setCount] = useState_O(3);
  const [seed, setSeed] = useState_O("");
  const [scrapeUrl, setScrapeUrl] = useState_O("");
  const [busy, setBusy] = useState_O(false);

  const start = async () => {
    setBusy(true);
    try { await (onStart || AS_API.controlStart)({ mode, count, seed: mode === 'seed' ? seed : undefined }); }
    catch (e) { alert('시작 실패: ' + (e.error || e.message || 'unknown')); }
    finally { setBusy(false); }
  };
  const stop = async () => {
    setBusy(true);
    try { await (onStop || AS_API.controlStop)(); }
    catch (e) { alert('중단 실패: ' + (e.error || e.message)); }
    finally { setBusy(false); }
  };
  const scrape = async () => {
    if (!scrapeUrl) return;
    setBusy(true);
    try { await AS_API.scrape1688(scrapeUrl); alert('1688 추출 시작됨 — 1688 갤러리 탭에서 진행 확인'); setScrapeUrl(""); }
    catch (e) { alert('실패: ' + (e.error || e.message)); }
    finally { setBusy(false); }
  };

  return (
    <div className="ctl-wrap">
      <div className="card">
        <SectionHeader icon="🎮" title="Autosourcing 제어" sub={running ? "● 실행 중" : "정지 상태"} right={<span className={"sb-live " + (running ? "live" : "")}>{running ? "RUNNING" : "STOPPED"}</span>}/>
        <div className="ctl-form">
          <div className="ctl-field">
            <label>모드</label>
            <div className="seg seg-lg">
              {[["smart","자동 (smart)"], ["seed","키워드 (seed)"], ["source","파일 (source)"]].map(([v, l]) => (
                <button key={v} className={"seg-btn " + (mode === v ? "active" : "")} onClick={() => setMode(v)}>{l}</button>
              ))}
            </div>
          </div>
          <div className="ctl-field">
            <label>키워드 개수</label>
            <div className="num-stepper">
              <button onClick={() => setCount(Math.max(1, count - 1))}>−</button>
              <input type="number" value={count} onChange={e => setCount(+e.target.value || 1)} min={1} max={10}/>
              <button onClick={() => setCount(Math.min(10, count + 1))}>+</button>
            </div>
          </div>
          {mode === "seed" && (
            <div className="ctl-field grow">
              <label>시드 키워드</label>
              <input className="ctl-input" placeholder="예: 캠핑 미니 가스등" value={seed} onChange={e => setSeed(e.target.value)}/>
            </div>
          )}
        </div>
        <div className="ctl-buttons">
          <button className="btn btn-primary" onClick={start} disabled={busy || running}>▶ 배치 시작</button>
          <button className="btn btn-danger" onClick={stop} disabled={busy || !running}>■ 중단</button>
        </div>
      </div>

      <div className="card">
        <SectionHeader icon="🇨🇳" title="1688 스크래핑 + 번역" sub="URL → 상세 이미지 + 중→한 자동 번역"/>
        <div className="ctl-1688">
          <input className="ctl-input" placeholder="https://detail.1688.com/offer/..." value={scrapeUrl} onChange={e => setScrapeUrl(e.target.value)}/>
          <button className="btn btn-primary" onClick={scrape} disabled={busy || !scrapeUrl}>🔍 추출 시작</button>
        </div>
      </div>
    </div>
  );
}

function QueueTab({ data }) {
  const [showAdd, setShowAdd] = useState_O(false);
  const [newKw, setNewKw] = useState_O('');
  const [newGrade, setNewGrade] = useState_O('A');
  const [newScore, setNewScore] = useState_O(80);
  const [busy, setBusy] = useState_O(false);

  const addManual = async () => {
    if (!newKw.trim()) return;
    setBusy(true);
    try {
      await AS_API.queueAdd({ keyword: newKw.trim(), grade: newGrade, score: parseInt(newScore) });
      setNewKw(''); setShowAdd(false);
      alert(`✅ "${newKw.trim()}" 큐에 추가됨 (template_worker가 2분 내 처리)`);
    } catch (e) { alert('추가 실패: ' + (e.error || e.message)); }
    finally { setBusy(false); }
  };

  const removeItem = async (filename, kw) => {
    if (!confirm(`"${kw}" 큐에서 삭제할까요?`)) return;
    try { await AS_API.queueDelete(filename); alert('삭제됨 — 새로고침'); }
    catch (e) { alert('삭제 실패: ' + (e.error || e.message)); }
  };

  const retryItem = async (filename, kw) => {
    try { await AS_API.queueRequeue(filename); alert(`"${kw}" 재큐잉 — 새로고침`); }
    catch (e) { alert('재시도 실패: ' + (e.error || e.message)); }
  };

  return (
    <div className="q-wrap">
      <div className="card">
        <SectionHeader icon="📦" title="Template Queue" sub="자동 추가됨 · 수동 가능" right={
          <button className="btn btn-ghost sm" onClick={() => setShowAdd(s => !s)}>{showAdd ? '✕ 닫기' : '+ 수동 추가'}</button>
        }/>
        {showAdd && (
          <div style={{display:'flex',gap:8,padding:'12px 16px',borderBottom:'1px solid var(--bd)',alignItems:'center',flexWrap:'wrap'}}>
            <input className="ctl-input" style={{flex:1,minWidth:200}} placeholder="키워드 (예: 미니선풍기)" value={newKw} onChange={e => setNewKw(e.target.value)} onKeyDown={e => e.key === 'Enter' && addManual()} autoFocus/>
            <select value={newGrade} onChange={e => setNewGrade(e.target.value)} style={{padding:'6px 10px'}}>
              <option value="S">S등급</option><option value="A">A등급</option><option value="B">B등급</option><option value="C">C등급</option>
            </select>
            <input type="number" min={0} max={100} value={newScore} onChange={e => setNewScore(e.target.value)} style={{width:80,padding:'6px 10px'}}/>
            <button className="btn btn-primary sm" onClick={addManual} disabled={busy || !newKw.trim()}>추가</button>
          </div>
        )}
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr><th>파일</th><th>키워드</th><th>등급</th><th>점수</th><th>등록</th><th></th></tr>
            </thead>
            <tbody>
              {data.QUEUE.length === 0 && (
                <tr><td colSpan={6} style={{textAlign:'center',padding:30,color:'var(--fg-3)'}}>큐가 비어있습니다</td></tr>
              )}
              {data.QUEUE.map((q, i) => (
                <tr key={i} className="tbl-row">
                  <td><code className="mono-sm">{q.file}</code></td>
                  <td className="cell-kw">{q.kw}</td>
                  <td><Grade g={q.grade}/></td>
                  <td><span className="score-num">{q.score}</span></td>
                  <td className="cell-muted">{q.time}</td>
                  <td><button className="btn btn-ghost xs" onClick={() => removeItem(q.file, q.kw)}>삭제</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <div className="card">
        <SectionHeader icon="🚨" title="Failed 큐" sub="5건 이상이면 로그 확인"/>
        <ul className="failed">
          {data.FAILED_QUEUE.length === 0 && (
            <li style={{padding:20,textAlign:'center',color:'var(--fg-3)'}}>실패한 항목 없음</li>
          )}
          {data.FAILED_QUEUE.map((f, i) => (
            <li key={i} className="failed-item">
              <span className="failed-icon">!</span>
              <div className="failed-body">
                <div className="failed-kw">{f.kw}</div>
                <div className="failed-reason">{f.reason}</div>
              </div>
              <span className="failed-time">{f.time}</span>
              <button className="btn btn-ghost xs" onClick={() => retryItem(f.file, f.kw)}>재시도</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function LogsTab() {
  const [file, setFile] = useState_O("daily_sourcing");
  const [lines, setLines] = useState_O([]);
  const [filter, setFilter] = useState_O("");
  const [errOnly, setErrOnly] = useState_O(false);
  const [autoScroll, setAutoScroll] = useState_O(true);
  const outRef = React.useRef(null);

  React.useEffect(() => {
    setLines([]);
    const close = AS_API.logStream(file, (data) => {
      setLines(prev => [...prev.slice(-499), data]);
    });
    return close;
  }, [file]);

  React.useEffect(() => {
    if (autoScroll && outRef.current) outRef.current.scrollTop = outRef.current.scrollHeight;
  }, [lines, autoScroll]);

  const parseLevel = (line) => {
    if (/error|access denied|fail/i.test(line)) return "E";
    if (/warn|skip|retry/i.test(line)) return "W";
    return "I";
  };
  const filtered = lines.filter(({ line }) => {
    if (errOnly && parseLevel(line) !== "E") return false;
    if (filter && !line.toLowerCase().includes(filter.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="logs-wrap">
      <div className="logs-bar">
        <div className="seg">
          {["daily_sourcing","template-worker"].map(f => (
            <button key={f} className={"seg-btn " + (file === f ? "active" : "")} onClick={() => setFile(f)}>{f}</button>
          ))}
        </div>
        <div className="logs-tools">
          <input className="logs-filter" placeholder="필터 (텍스트)" value={filter} onChange={e => setFilter(e.target.value)}/>
          <label className="logs-toggle"><input type="checkbox" checked={autoScroll} onChange={e => setAutoScroll(e.target.checked)}/>자동스크롤</label>
          <label className="logs-toggle"><input type="checkbox" checked={errOnly} onChange={e => setErrOnly(e.target.checked)}/>에러만</label>
          <button className="btn btn-ghost xs" onClick={() => setLines([])}>지우기</button>
        </div>
      </div>
      <div className="logs-out" ref={outRef}>
        {filtered.length === 0 && <div className="log-line lvl-I"><span className="log-msg">로그 대기 중…</span></div>}
        {filtered.map((ln, i) => {
          const lvl = parseLevel(ln.line);
          const t = (ln.timestamp || "").slice(11, 19);
          return (
            <div key={i} className={"log-line lvl-" + lvl}>
              <span className="log-time">{t}</span>
              <span className={"log-lvl lvl-" + lvl}>{lvl}</span>
              <span className="log-msg">{ln.line}</span>
            </div>
          );
        })}
        <div className="log-cursor"><span className="cursor-blink">▍</span></div>
      </div>
    </div>
  );
}

function PatternsTab({ data }) {
  return (
    <div className="patterns-wrap">
      <div className="card">
        <SectionHeader icon="🧠" title="DB 성공 패턴" sub="자동 학습된 공통점 (가중치 ↓)"/>
        <ul className="patterns lg">
          {data.PATTERNS.map((p, i) => (
            <li key={i} className="pat lg">
              <div className="pat-num">#{String(i + 1).padStart(2, "0")}</div>
              <div className="pat-main">
                <div className="pat-title-lg">{p.title}</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>
                  <span className="pat-trend" data-t={p.trend}>{p.trend === "up" ? "↑" : p.trend === "down" ? "↓" : "—"}</span>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div className="card">
        <SectionHeader icon="📚" title="규칙서 진화" sub="prompt_rules.md 자동 학습 (월 1회)"/>
        <div className="evol-grid">
          <div className="evol-item">
            <label>최소 샘플</label>
            <input className="ctl-input" type="number" defaultValue={5}/>
          </div>
          <div className="evol-actions">
            <button className="btn btn-primary">🧪 dry-run</button>
            <button className="btn btn-danger">⚡ 강제 진화</button>
            <button className="btn btn-ghost">↻ 실행 이력</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PromptsTab() {
  const [files, setFiles] = useState_O([]);
  const [active, setActive] = useState_O(null);
  const [content, setContent] = useState_O('');
  const [original, setOriginal] = useState_O('');
  const [history, setHistory] = useState_O([]);
  const [busy, setBusy] = useState_O(false);
  const [loading, setLoading] = useState_O(true);

  React.useEffect(() => {
    AS_API.promptFilesList().then(list => {
      setFiles(list || []);
      if (list && list.length > 0) loadFile(list[0].slug);
      setLoading(false);
    }).catch(e => { setLoading(false); console.error(e); });
  }, []);

  const loadFile = async (slug) => {
    setActive(slug);
    setBusy(true);
    try {
      const [f, h] = await Promise.all([
        AS_API.promptFileGet(slug),
        AS_API.promptHistory(slug).catch(() => ({ backups: [] })),
      ]);
      setContent(f.content || '');
      setOriginal(f.content || '');
      setHistory(h.backups || []);
    } catch (e) { alert('로드 실패: ' + (e.error || e.message)); }
    finally { setBusy(false); }
  };

  const save = async () => {
    if (!active) return;
    setBusy(true);
    try {
      const r = await AS_API.promptFileSave(active, content);
      setOriginal(content);
      alert(`✅ 저장 완료 (백업: ${r.backup || 'auto'})`);
      const h = await AS_API.promptHistory(active).catch(() => ({ backups: [] }));
      setHistory(h.backups || []);
    } catch (e) { alert('저장 실패: ' + (e.error || e.message)); }
    finally { setBusy(false); }
  };

  const reload = () => { if (active) loadFile(active); };

  const activeMeta = files.find(f => f.slug === active);
  const dirty = content !== original;

  return (
    <div className="prompts-wrap">
      <aside className="prompts-side card">
        <SectionHeader title="파일 목록"/>
        {loading && <div style={{padding:20,color:'var(--fg-3)'}}>불러오는 중…</div>}
        <ul className="file-list">
          {files.map(f => (
            <li key={f.slug} className={"file-item " + (active === f.slug ? "active" : "")} onClick={() => loadFile(f.slug)} style={{cursor:'pointer'}}>
              <span className="file-icon">📄</span>
              <span className="file-name" title={f.description}>{f.displayName}</span>
            </li>
          ))}
        </ul>
        <SectionHeader title="백업 이력"/>
        <ul className="backup-list">
          {history.length === 0 && <li style={{color:'var(--fg-3)'}}>백업 없음</li>}
          {history.slice(0, 8).map((b, i) => (
            <li key={i}>
              <span className="mono-sm" style={{fontSize:11}}>{(b.timestamp || b.filename || '').replace(/[TZ]/g, ' ').slice(0, 16)}</span>
              <span className="ago">{b.size ? Math.round(b.size/1024)+'KB' : ''}</span>
            </li>
          ))}
        </ul>
      </aside>
      <main className="prompts-main card">
        {!active && <div style={{padding:40,textAlign:'center',color:'var(--fg-3)'}}>파일을 선택하세요</div>}
        {active && (
          <>
            <div className="prompts-meta">
              <span className="mono-sm">{activeMeta?.displayName || active}</span>
              <span className="cell-muted">· {activeMeta ? (activeMeta.size/1024).toFixed(1) : 0} KB · {activeMeta?.modified ? new Date(activeMeta.modified).toLocaleString('ko-KR', { hour12: false }).slice(5, 16) : '-'}</span>
              {dirty && <span style={{marginLeft:8,color:'var(--accent)',fontSize:12}}>● 수정됨</span>}
            </div>
            {activeMeta?.description && (
              <div style={{padding:'8px 16px',fontSize:12,color:'var(--fg-3)',background:'var(--bg-2)',borderBottom:'1px solid var(--bd)'}}>{activeMeta.description}</div>
            )}
            <textarea
              className="code-area"
              value={content}
              onChange={e => setContent(e.target.value)}
              spellCheck={false}
              style={{minHeight:400,fontFamily:'ui-monospace,monospace',fontSize:13,padding:14,background:'var(--bg-2)',color:'var(--fg-1)',border:'none',width:'100%',resize:'vertical'}}
            />
            <div className="prompts-actions">
              <button className="btn btn-primary" onClick={save} disabled={busy || !dirty}>💾 저장 (자동 백업)</button>
              <button className="btn btn-ghost" onClick={reload} disabled={busy}>↻ 재로드</button>
              {dirty && <span style={{marginLeft:'auto',fontSize:12,color:'var(--fg-3)',alignSelf:'center'}}>저장하지 않은 변경사항 있음</span>}
            </div>
          </>
        )}
      </main>
    </div>
  );
}

function SettingsTab({ accent, setAccent, dark, setDark, density, setDensity }) {
  return (
    <div className="settings-wrap">
      <div className="card">
        <SectionHeader icon="🎨" title="외관" sub="액센트, 테마, 밀도"/>
        <div className="set-grid">
          <div className="set-item">
            <label>액센트 컬러</label>
            <div className="accent-swatches">
              {[
                {id: "violet", c: "oklch(0.65 0.18 295)"},
                {id: "blue",   c: "oklch(0.65 0.16 245)"},
                {id: "teal",   c: "oklch(0.7 0.14 180)"},
                {id: "lime",   c: "oklch(0.78 0.18 130)"},
                {id: "amber",  c: "oklch(0.78 0.16 70)"},
                {id: "rose",   c: "oklch(0.7 0.18 20)"},
              ].map(s => (
                <button
                  key={s.id}
                  className={"swatch " + (accent === s.id ? "active" : "")}
                  style={{ background: s.c }}
                  onClick={() => setAccent && setAccent(s.id)}
                  title={s.id}
                />
              ))}
            </div>
          </div>
          <div className="set-item">
            <label>테마</label>
            <div className="seg">
              <button className={"seg-btn " + (!dark ? "active" : "")} onClick={() => setDark && setDark(false)}>라이트</button>
              <button className={"seg-btn " + (dark ? "active" : "")} onClick={() => setDark && setDark(true)}>다크</button>
            </div>
          </div>
          <div className="set-item">
            <label>밀도</label>
            <div className="seg">
              {["compact", "cozy", "spacious"].map(d => (
                <button key={d} className={"seg-btn " + (density === d ? "active" : "")} onClick={() => setDensity && setDensity(d)}>
                  {d === "compact" ? "조밀" : d === "cozy" ? "보통" : "넉넉"}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="card">
        <SectionHeader icon="⚙" title="배치 설정"/>
        <div className="set-grid">
          <div className="set-item">
            <label>중복 체크 일수</label>
            <input className="ctl-input" type="number" defaultValue={90}/>
          </div>
          <div className="set-item">
            <label>배치 기본 count</label>
            <input className="ctl-input" type="number" defaultValue={3}/>
          </div>
          <div className="set-item">
            <label>새벽 스케줄</label>
            <div className="seg">
              <button className="seg-btn active">ON</button>
              <button className="seg-btn">OFF</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ControlTab, QueueTab, LogsTab, PatternsTab, PromptsTab, SettingsTab });