/* ============================================================
   url-review.jsx — URL-mode "분석 결과 확인 / 선택" step
   사이트 분석(Analysis) 직후 노출. 추출한 데이터(수집 배너·색상·
   타이포·사이즈)를 보여주고, 감지된 가이드 후보 중 사용자가
   생성할 항목을 고른 뒤 → 가이드 목록(dashboard)으로 넘어간다.
   ============================================================ */

// 가이드 spec 으로 미리보기 배너 데이터를 구성 (BannerMock 입력 형태)
function _shade(hex, amt) {
  const n = parseInt(hex.slice(1), 16);
  const clamp = (v) => Math.max(0, Math.min(255, v));
  const r = clamp((n >> 16) + amt);
  const g = clamp((n >> 8 & 255) + amt);
  const b = clamp((n & 255) + amt);
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
function _lum(hex) {
  const n = parseInt(hex.slice(1), 16);
  const r = (n >> 16) / 255, g = (n >> 8 & 255) / 255, b = (n & 255) / 255;
  return 0.299 * r + 0.587 * g + 0.114 * b;
}
function guidePreview(g) {
  const p = g.palette || [];
  const c0 = p[0] && p[0].hex || '#3B1D6E';
  const acc = p[1] && p[1].hex || '#FFD84D';
  const t = g.typo || [];
  const sp = g.spec || {};
  const light = _lum(c0) > 0.62;
  return {
    bg: `linear-gradient(120deg, ${_shade(c0, light ? 8 : 26)}, ${_shade(c0, light ? -10 : -22)})`,
    fg: light ? '#1e1e1e' : '#fff', accent: acc,
    head: t[0] && t[0].sample || g.name,
    sub: t[1] && t[1].sample || '',
    badge: g.bannerType || g.category || 'NEW',
    cta: (t[2] || t[1]) && (t[2] || t[1]).sample || '자세히',
    w: sp.w || 1920, h: sp.h || 600
  };
}

function UrlReview({ url, candidates = [], collected = [], onBack, onGenerate, onViewCollected }) {
  // 기본값: 모든 후보 선택
  const [picked, setPicked] = React.useState(() => candidates.map((c) => c.id));
  const toggle = (id) =>
  setPicked((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]);

  const cats = Array.from(new Set(collected.map((b) => b.cat)));
  const totalBanners = candidates.reduce((a, c) => a + (c.banners || 0), 0);
  const selected = candidates.filter((c) => picked.includes(c.id));

  const STATS = [
  { icon: 'image', label: '수집된 배너', value: totalBanners, unit: '개' },
  { icon: 'layers', label: '감지된 카테고리', value: cats.length, unit: '종' },
  { icon: 'sparkles', label: '디자인 패턴', value: candidates.length, unit: '개' }];


  return (
    <div className="content"><div className="content-pad" style={{ maxWidth: 1000 }}>
      <div className="page-head" style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <h1 className="page-title">분석 결과 확인</h1>
          <span className="pill green"><span className="pill-dot" /> 분석 완료</span>
        </div>
        <p className="page-sub" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <S2Icon name="globe" size={14} /> https://{url} 에서 디자인 규칙을 추출했어요. <b style={{ color: 'var(--text-2)' }}>만들 가이드를 선택</b>하세요.
        </p>
      </div>

      {/* 추출 데이터 요약 */}
      <div className="ur-stats">
        {STATS.map((s) =>
          <div key={s.label} className={`ur-stat${s.label === '수집된 배너' ? ' ur-stat-action' : ''}`} style={{ borderStyle: "none" }}
            role={s.label === '수집된 배너' ? 'button' : undefined}
            tabIndex={s.label === '수집된 배너' ? 0 : undefined}
            onClick={s.label === '수집된 배너' ? onViewCollected : undefined}
            onKeyDown={s.label === '수집된 배너' ? (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); onViewCollected && onViewCollected(); } } : undefined}>
            <div className="ur-stat-ic"><S2Icon name={s.icon} size={18} /></div>
            <div style={{ lineHeight: 1.15 }}>
              <div className="ur-stat-v">{s.value}<span className="ur-stat-u">{s.unit}</span></div>
              <div className="ur-stat-l">{s.label}</div>
            </div>
            {s.label === '수집된 배너' &&
              <span className="ur-stat-go" aria-hidden="true"><S2Icon name="arrowRight" size={16} /></span>}
          </div>
          )}
      </div>

      <div className="section-title" style={{ marginTop: 26, marginBottom: 4, justifyContent: 'space-between' }}>
        <span>감지된 가이드 후보 <b style={{ color: 'var(--accent-text)' }}>{candidates.length}</b></span>
        <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-subtle)' }}>
          선택 <b style={{ color: 'var(--accent-text)' }}>{selected.length}</b> / {candidates.length}
        </span>
      </div>
      <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: '0 0 16px' }}>
        카드를 눌러 만들 가이드를 켜고 끌 수 있어요. 선택한 후보만 가이드로 생성됩니다.
      </p>

      {/* 후보 카드 (선택 가능) */}
      <div className="ur-cards">
        {candidates.map((g, i) => {
            const on = picked.includes(g.id);
            const pv = guidePreview(g);
            const hasColor = (g.palette || []).length > 0;
            const hasFont = (g.typo || []).length > 0;
            return (
              <button key={g.id} type="button"
              className={`ur-card fade-up ${on ? 'on' : ''}`}
              style={{ animationDelay: `${i * 60}ms`, borderStyle: "none" }}
              onClick={() => toggle(g.id)}>
              <span className="ur-check">
                {on && <S2Icon name="check" size={13} strokeWidth={3} />}
              </span>
              <div className="ur-preview">
                <BannerMock d={pv} scale={0.5} />
              </div>
              <div className="ur-body">
                <div className="ur-row1">
                  <span className="ur-name">{g.name}</span>
                  <span className="pill accent" style={{ flexShrink: 0 }}>정확도 {g.confidence}%</span>
                </div>
                <div className="ur-meta">
                  <span className="ur-tag"><S2Icon name="layers" size={13} /> {g.bannerType || g.category}</span>
                  <span className="ur-dot" />
                  <span>배너 <b>{g.banners}</b>개 학습</span>
                </div>

                <div className="ur-secs">
                  {/* 1. 규격 — 배너 타입별 SIZE·배경·파일·FLAG */}
                  {g.spec &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="ruler" size={13} /> 규격</div>
                      <div className="ur-sec-body">
                        <div className="ur-chips">
                          <span className="ur-chip mono"><b>SIZE</b> {g.spec.size}</span>
                          <span className="ur-chip"><b>배경</b> {g.spec.bg}</span>
                          <span className="ur-chip"><b>파일</b> {g.spec.file}</span>
                          {g.spec.flag && g.spec.flag !== '—' &&
                            <span className="ur-chip"><b>FLAG</b> {g.spec.flag}</span>}
                        </div>
                      </div>
                    </div>}

                  {/* 2. 레이아웃 유형 — 타입별로 다른 핵심 구분값 */}
                  {(g.layoutTypes || []).length > 0 &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="layout" size={13} /> 레이아웃 유형</div>
                      <div className="ur-sec-body">
                        <div className="ur-chips">
                          {g.layoutTypes.map((l, k) =>
                          <span key={k} className="ur-chip ur-chip-accent">{l}</span>
                          )}
                        </div>
                      </div>
                    </div>}

                  {/* 3. 구성 요소 */}
                  {g.composition &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="grid" size={13} /> 구성</div>
                      <div className="ur-sec-body">
                        <div className="ur-chips">
                          {g.composition.base.map((c, k) =>
                          <span key={'b' + k} className="ur-chip"><b>기본</b> {c}</span>
                          )}
                          {g.composition.extra.map((c, k) =>
                          <span key={'e' + k} className="ur-chip">{c}</span>
                          )}
                        </div>
                      </div>
                    </div>}

                  {/* 4. 색상 (컬러칩) */}
                  {hasColor &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="palette" size={13} /> 색상</div>
                      <div className="ur-sec-body">
                        <div className="ur-colors">
                          {g.palette.map((c, k) =>
                          <span key={k} className="ur-color" title={c.role}>
                              <i className="ur-color-sw" style={{ background: c.hex, borderColor: c.hex.toUpperCase() === '#FFFFFF' ? 'var(--border-strong)' : 'transparent' }} />
                              <span className="ur-color-hex">{c.hex.toUpperCase()}</span>
                            </span>
                          )}
                        </div>
                      </div>
                    </div>}

                  {/* 5. 폰트 */}
                  {hasFont &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="type" size={13} /> 폰트</div>
                      <div className="ur-sec-body">
                        <div className="ur-chips">
                          {g.typo.map((t, k) =>
                          <span key={k} className="ur-chip"><b>{t.role}</b> {t.size}px · {t.weight}</span>
                          )}
                        </div>
                      </div>
                    </div>}

                  {/* 6. 로고 — 자사(필수) / 광고주(선택) */}
                  {g.logo &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="image" size={13} /> 로고</div>
                      <div className="ur-sec-body" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                        <span className="ur-logo-badge brand">자사 · 필수</span>
                        <span className="ur-logo-meta">{g.logo.brand}</span>
                        {g.logo.advertiser &&
                          <React.Fragment>
                            <span className="ur-logo-badge advertiser">광고주 · 선택</span>
                            <span className="ur-logo-meta">{g.logo.advertiser}</span>
                          </React.Fragment>}
                        <span className="ur-chip" style={{ marginLeft: 'auto' }}>{g.logo.position} · 최대 {g.logo.max}</span>
                      </div>
                    </div>}

                  {/* 7. 문구 규칙 */}
                  {(g.copyRule || []).length > 0 &&
                    <div className="ur-sec">
                      <div className="ur-sec-label"><S2Icon name="text" size={13} /> 문구 규칙</div>
                      <div className="ur-sec-body">
                        <div className="ur-chips">
                          {g.copyRule.map((c, k) =>
                          <span key={k} className="ur-chip">{c}</span>
                          )}
                        </div>
                      </div>
                    </div>}
                </div>
              </div>
            </button>);

          })}
      </div>

      {/* footer */}
      <div className="grp-foot">
        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>
          {selected.length > 0 ?
            `${selected.length}개의 편집 가능한 가이드가 만들어집니다.` :
            '하나 이상의 가이드를 선택해 주세요.'}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10 }}>
          <button className="btn btn-secondary" onClick={onBack} style={{ borderRadius: "6px" }}><S2Icon name="refresh" size={15} /> 다시 분석</button>
          <button className="btn btn-primary" disabled={selected.length === 0}
            onClick={() => onGenerate(selected)} style={{ borderRadius: "6px" }}>
            <S2Icon name="sparkles" size={16} /> 선택한 가이드 {selected.length}개 생성
          </button>
        </div>
      </div>
    </div></div>);

}

Object.assign(window, { UrlReview, guidePreview });