// 1688 Scraping Gallery — wired to /api/1688/* endpoints
const { useState: useState_S, useEffect: useEffect_S, useMemo: useMemo_S } = React;

function Scrape1688Tab() {
  const [url, setUrl] = useState_S("");
  const [running, setRunning] = useState_S(false);
  const [progress, setProgress] = useState_S(0);
  const [progressLog, setProgressLog] = useState_S([]);
  const [filter, setFilter] = useState_S("");
  const [view, setView] = useState_S("grid");
  const [selected, setSelected] = useState_S(null);
  const [results, setResults] = useState_S([]);
  const [loadingList, setLoadingList] = useState_S(true);

  useEffect_S(() => {
    AS_API.scrape1688List().then(data => {
      setResults(data.items || []);
      setLoadingList(false);
    }).catch(() => setLoadingList(false));
  }, []);

  const filtered = useMemo_S(() => {
    if (!filter) return results;
    const f = filter.toLowerCase();
    return results.filter(r =>
      (r.titleKo || r.title || '').toLowerCase().includes(f) ||
      (r.id || '').includes(f)
    );
  }, [filter, results]);

  const start = async () => {
    if (!url) return;
    setRunning(true);
    setProgress(0);
    setProgressLog([]);
    try {
      const res = await AS_API.scrape1688(url);
      const productId = res.productId || res.id;
      if (!productId) { setRunning(false); return; }
      const poll = setInterval(async () => {
        try {
          const st = await AS_API.scrape1688Status(productId);
          const pct = st.progress || 0;
          setProgress(pct);
          if (st.log) setProgressLog(prev => [...prev.slice(-9), { t: new Date().toLocaleTimeString(), m: st.log }]);
          if (pct >= 100 || st.done) {
            clearInterval(poll);
            setRunning(false);
            setUrl("");
            const fresh = await AS_API.scrape1688List();
            setResults(fresh.items || []);
          }
        } catch { clearInterval(poll); setRunning(false); }
      }, 2000);
    } catch (e) {
      alert('실패: ' + (e.error || e.message));
      setRunning(false);
    }
  };

  const totalImages = results.reduce((s, r) => s + (r.images || 0), 0);

  return (
    <div className="sc-wrap">
      <div className="sc-hero">
        <div className="sc-hero-left">
          <h1 className="sc-hero-title">
            <span className="sc-flag">🇨🇳</span>
            1688 스크래핑 + 자동 번역
          </h1>
          <p className="sc-hero-sub">URL 붙여넣기 → 상세 이미지 추출 → 중→한 자동 번역 → 합성 PNG 생성</p>
        </div>
        <div className="sc-stats-mini">
          <div><span className="num">{results.length}</span><span className="lbl">총 추출</span></div>
          <div><span className="num">{totalImages}</span><span className="lbl">번역 이미지</span></div>
        </div>
      </div>

      <div className="sc-input-bar">
        <div className="sc-input-wrap">
          <span className="sc-input-icon">🔗</span>
          <input className="sc-input" placeholder="https://detail.1688.com/offer/...html" value={url} onChange={e => setUrl(e.target.value)} onKeyDown={e => e.key === "Enter" && start()} disabled={running}/>
          {url && !running && <button className="sc-input-clear" onClick={() => setUrl("")}>×</button>}
        </div>
        <button className={"btn btn-primary lg " + (running ? "running" : "")} onClick={start} disabled={running || !url}>
          {running ? <><Spinner size={14}/> 추출 중…</> : "🔍 추출 시작"}
        </button>
      </div>

      {(running || progressLog.length > 0) && (
        <div className="sc-progress card">
          <div className="sc-progress-head">
            <span className="sc-progress-title">{running ? "진행 중" : "완료"}</span>
            <span className="sc-progress-pct">{progress.toFixed(0)}%</span>
          </div>
          <div className="sc-progress-bar"><div className="sc-progress-bar-fill" style={{ width: progress + "%" }}/></div>
          <div className="sc-progress-log">
            {progressLog.slice(-4).map((l, i) => (
              <div key={i} className="sc-progress-line"><span className="t">{l.t}</span><span className="m">{l.m}</span></div>
            ))}
          </div>
        </div>
      )}

      <div className="sc-toolbar">
        <div className="sc-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input placeholder="제목, productId 검색…" value={filter} onChange={e => setFilter(e.target.value)}/>
        </div>
        <div className="seg">
          <button className={"seg-btn " + (view === "grid" ? "active" : "")} onClick={() => setView("grid")}>그리드</button>
          <button className={"seg-btn " + (view === "list" ? "active" : "")} onClick={() => setView("list")}>리스트</button>
        </div>
        <span className="sc-toolbar-meta">{filtered.length}개 결과</span>
      </div>

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

      {!loadingList && filtered.length === 0 && (
        <div className="empty-state" style={{padding:40}}>
          <div className="empty-glyph">📦</div>
          <div className="empty-title">스크래핑 결과 없음</div>
          <div className="empty-sub">위에서 1688 URL을 입력해서 시작하세요</div>
        </div>
      )}

      {view === "grid" ? (
        <div className="sc-grid">
          {filtered.map(r => (
            <ScrapeCard key={r.id} item={r} onOpen={() => setSelected(r)}/>
          ))}
        </div>
      ) : (
        <div className="sc-list card">
          <table className="tbl">
            <thead>
              <tr><th>productId</th><th>제목</th><th>이미지</th><th>날짜</th><th></th></tr>
            </thead>
            <tbody>
              {filtered.map(r => (
                <tr key={r.id} className="tbl-row" onClick={() => setSelected(r)}>
                  <td><code className="mono-sm">{r.id}</code></td>
                  <td>{r.titleKo || r.title || r.id}</td>
                  <td><span className="mono-sm">{r.images || 0}장</span></td>
                  <td className="cell-muted">{r.date || '-'}</td>
                  <td><button className="btn btn-ghost xs">갤러리</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {selected && <ScrapeDetail item={selected} onClose={() => setSelected(null)}/>}
    </div>
  );
}

function ScrapeCard({ item, onOpen }) {
  const coverUrl = item.cover || (item.id ? `/1688-results/${item.id}/cover.jpg` : null);
  const color = item.color || '#7c5cff';
  return (
    <button className="sc-card" onClick={onOpen}>
      <div className="sc-cover" style={{ background: `linear-gradient(135deg, ${color}33, ${color}11)` }}>
        {coverUrl && !item.cover?.startsWith('#') ? (
          <img src={coverUrl} alt="" style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'var(--r) var(--r) 0 0'}} onError={e => { e.target.style.display='none'; }}/>
        ) : (
          <span className="sc-cover-emoji">{item.cover || '📦'}</span>
        )}
        <span className="sc-cover-count">{item.images || 0}장</span>
      </div>
      <div className="sc-card-body">
        <div className="sc-card-ko">{item.titleKo || item.title || item.id}</div>
        <div className="sc-card-meta">
          <span className="sc-card-id">#{(item.id || '').slice(-6)}</span>
          <span className="sc-card-date">{(item.date || '').split(' ')[0]}</span>
        </div>
      </div>
    </button>
  );
}

function ScrapeDetail({ item, onClose }) {
  const [tab, setTab] = useState_S("translated");
  const [lightbox, setLightbox] = useState_S(null);
  const [detail, setDetail] = useState_S(null);

  useEffect_S(() => {
    if (item.id) {
      AS_API.scrape1688Detail(item.id).then(setDetail).catch(() => {});
    }
    const onKey = e => { if (e.key === "Escape") { lightbox !== null ? setLightbox(null) : onClose(); } };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [item.id, lightbox, onClose]);

  const translated = detail ? detail.translated || [] : [];
  const original = detail ? detail.original || [] : [];
  const activeUrls = tab === "translated" ? translated : original;

  const downloadOne = (url, idx) => {
    const a = document.createElement('a');
    a.href = url;
    a.download = `${item.id}_${tab}_${String(idx + 1).padStart(2, '0')}${url.match(/\.\w+$/)?.[0] || '.png'}`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  const downloadAll = async () => {
    for (let i = 0; i < activeUrls.length; i++) {
      downloadOne(activeUrls[i], i);
      await new Promise(r => setTimeout(r, 300));
    }
  };

  return (
    <div className="dm-bg" onClick={onClose}>
      <div className="dm sc-detail" onClick={e => e.stopPropagation()}>
        <header className="dm-head">
          <div className="dm-title-block">
            <div className="dm-crumb">
              <span>1688 스크래핑</span><span className="sep">›</span>
              <code className="mono-sm">{item.id}</code>
            </div>
            <div className="dm-title-row">
              <span className="sc-flag-lg">🇨🇳</span>
              <h2 className="dm-title">{item.titleKo || item.title || item.id}</h2>
            </div>
          </div>
          <div className="dm-head-actions">
            <button className="dm-close" onClick={onClose}>×</button>
          </div>
        </header>

        <nav className="dm-tabs">
          <button className={"dm-tab " + (tab === "translated" ? "active" : "")} onClick={() => setTab("translated")}>
            <span className="dm-tab-ico">🔄</span>텍스트 제거
            <span className="dm-tab-badge">{translated.length}</span>
          </button>
          <button className={"dm-tab " + (tab === "original" ? "active" : "")} onClick={() => setTab("original")}>
            <span className="dm-tab-ico">📷</span>원본
            <span className="dm-tab-badge">{original.length}</span>
          </button>
          <div className="dm-tab-spacer"/>
          {activeUrls.length > 0 && (
            <button className="btn btn-primary sm" onClick={downloadAll} style={{marginRight:8}}>
              전체 다운로드 ({activeUrls.length}장)
            </button>
          )}
          <span className="dm-kbd-hint"><Kbd>Esc</Kbd> 닫기</span>
        </nav>

        <div className="sc-detail-body">
          {!detail && <div style={{textAlign:'center',padding:40,color:'var(--fg-3)'}}>불러오는 중…</div>}
          {detail && activeUrls.length === 0 && (
            <div className="empty-state" style={{padding:40}}>
              <div className="empty-glyph">{tab === "translated" ? "🔄" : "📷"}</div>
              <div className="empty-title">{tab === "translated" ? "텍스트 제거 이미지 없음" : "원본 이미지 없음"}</div>
            </div>
          )}
          <div className="sc-grid-tight">
            {activeUrls.map((url, i) => {
              const num = String(i + 1).padStart(2, '0');
              const txt = detail?.imageTexts?.[num];
              return (
                <div key={i} className="sc-grid-cell" style={{position:'relative',display:'flex',flexDirection:'column'}}>
                  <div style={{position:'relative',flex:1}}>
                    <img src={url} alt={`이미지 ${i+1}`} style={{width:'100%',height:'100%',objectFit:'cover',cursor:'pointer'}} onClick={() => setLightbox(i)} onError={e => { e.target.style.display='none'; }}/>
                    <div className="sc-grid-cell-num">{num}</div>
                    <button className="btn btn-ghost xs" style={{position:'absolute',top:4,right:4,background:'rgba(0,0,0,0.6)',color:'#fff',borderRadius:4,padding:'2px 6px',fontSize:11}} onClick={(e) => { e.stopPropagation(); downloadOne(url, i); }}>⬇</button>
                  </div>
                  {txt && (txt.korean_translation || txt.original_chinese) && (
                    <div style={{padding:'6px 8px',background:'rgba(124,92,255,0.08)',borderTop:'1px solid var(--bd)',fontSize:11,lineHeight:1.4}}>
                      {txt.korean_translation && <div style={{color:'var(--accent)',fontWeight:500,marginBottom:2,display:'-webkit-box',WebkitLineClamp:2,WebkitBoxOrient:'vertical',overflow:'hidden'}} title={txt.korean_translation}>🇰🇷 {txt.korean_translation}</div>}
                      {txt.original_chinese && <div style={{color:'var(--fg-3)',fontSize:10,display:'-webkit-box',WebkitLineClamp:1,WebkitBoxOrient:'vertical',overflow:'hidden'}} title={txt.original_chinese}>🇨🇳 {txt.original_chinese}</div>}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        <footer className="dm-foot">
          <div className="dm-foot-left">
            <span className="dm-foot-meta"><code className="mono-sm">{item.id}</code> · 추출 {item.date || '-'} · {tab === "translated" ? "텍스트 제거" : "원본"} {activeUrls.length}장</span>
          </div>
        </footer>

        {lightbox !== null && (
          <div className="dm-zoom" onClick={() => setLightbox(null)}>
            <div className="dm-zoom-card lg" onClick={e => e.stopPropagation()}>
              <div className="dm-zoom-head">
                <span>{tab === "translated" ? "텍스트 제거" : "원본"} {String(lightbox + 1).padStart(2, "0")} / {activeUrls.length}</span>
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  <button className="btn btn-ghost sm" onClick={(e) => { e.stopPropagation(); downloadOne(activeUrls[lightbox], lightbox); }}>⬇ 다운로드</button>
                  <button className="dm-close" onClick={() => setLightbox(null)}>×</button>
                </div>
              </div>
              <div className="dm-zoom-img tall">
                <img src={activeUrls[lightbox]} alt="" style={{maxWidth:'100%',maxHeight:'60vh',objectFit:'contain'}}/>
              </div>
              <div className="dm-zoom-actions">
                <button className="btn btn-ghost sm" onClick={() => setLightbox(l => Math.max(0, l - 1))}>← 이전</button>
                <button className="btn btn-ghost sm" onClick={() => setLightbox(l => Math.min(activeUrls.length - 1, l + 1))}>다음 →</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Scrape1688Tab });