/* ============================================================
   guide-detail.jsx — screen 4 detail: extracted spec + correction panel
   ============================================================ */

const PRIMARY_OPTS = [
{ c: '#3B1D6E', g: 'linear-gradient(120deg,#1f1147,#3b1d6e)', name: '딥 퍼플' },
{ c: '#13345c', g: 'linear-gradient(120deg,#0b1d33,#13345c)', name: '네이비' },
{ c: '#1a7a4c', g: 'linear-gradient(120deg,#0f5132,#1a7a4c)', name: '그린' },
{ c: '#6b4226', g: 'linear-gradient(120deg,#3a2618,#6b4226)', name: '브라운' },
{ c: '#18181b', g: 'linear-gradient(120deg,#000,#27272a)', name: '잉크' }];

const ACCENT_OPTS = ['#FFD84D', '#E5487F', '#4CC9F0', '#FFB347', '#7C6DF0'];

function GuideDetail({ guide, onBack, onUse, onDuplicate, onUpdate }) {
  const [primary, setPrimary] = useState(PRIMARY_OPTS[0]);
  const [accent, setAccent] = useState(ACCENT_OPTS[0]);
  const [margin, setMargin] = useState(48);
  const [align, setAlign] = useState('left');
  const [headSize, setHeadSize] = useState(64);
  const [dirty, setDirty] = useState(false);
  const touch = (fn) => (v) => {fn(v);setDirty(true);};

  return (
    <div className="content"><div className="content-pad">
      {/* header */}
      <button className="btn btn-ghost btn-sm" style={{ marginBottom: 16, marginLeft: -8 }} onClick={onBack}>
        <S2Icon name="arrowLeft" size={15} /> 가이드 목록
      </button>
      <div className="page-head" style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, marginBottom: 24 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <h1 className="page-title">{guide.name}</h1>
            <span className="pill green"><span className="pill-dot" /> 분석 완료</span>
            <span className="pill accent">신뢰도 {guide.confidence}%</span>
          </div>
          <p className="page-sub" style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap' }}><S2Icon name={guide.via === 'image' ? 'images' : 'globe'} size={14} /> {guide.source}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap' }}><S2Icon name="image" size={14} /> {guide.via === 'image' ? `이미지 ${guide.banners}장 학습` : `배너 ${guide.banners}개 학습`}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap' }}><S2Icon name="calendar" size={14} /> {guide.date}</span>
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
          <button className="btn btn-secondary" onClick={() => onDuplicate && onDuplicate(guide)} style={{ borderRadius: "6px" }}><S2Icon name="copy" size={15} /> 복제</button>
          <button className="btn btn-secondary" onClick={() => {
              try {window.postMessage({ type: 'bannerly-open-editor', name: guide.name, guideId: guide.id }, '*');} catch (e) {}
            }} style={{ borderRadius: "6px" }}>
            <S2Icon name="sliders" size={15} /> 가이드 편집
          </button>
          <button className="btn btn-primary" onClick={() => onUse(guide)} style={{ borderRadius: "6px" }}>
            <S2Icon name="wand" size={16} /> 배너 만들기
          </button>
        </div>
      </div>

      <div className="gd-grid">
        {/* ---------- left: spec ---------- */}
        <div>
          {/* slot template preview */}
          <div className="spec-card fade-up" style={{ borderStyle: "none" }}>
            <div className="spec-head">
              <div className="ic"><S2Icon name="layout" size={17} /></div>
              <div>
                <h3>슬롯 템플릿</h3>
                <div className="sub">재구성된 레이어 구조 · 슬롯에 콘텐츠가 채워집니다</div>
              </div>
            </div>
            <SlotTemplate primary={primary} accent={accent} margin={margin} align={align} headSize={headSize} />
          </div>

          {/* sizes */}
          <div className="spec-card fade-up" style={{ animationDelay: '40ms', borderStyle: "none" }}>
            <div className="spec-head">
              <div className="ic"><S2Icon name="ruler" size={17} /></div>
              <div><h3>추출된 규격</h3><div className="sub">자주 쓰이는 배너 사이즈 {guide.sizes.length}종</div></div>
            </div>
            <div className="size-row head">
              <span>이름</span><span>크기 (px)</span><span>비율</span><span>용도</span>
            </div>
            {guide.sizes.map((s) =>
              <div key={s.name} className="size-row">
                <span className="nm">{s.name}</span>
                <span className="dim">{s.w} × {s.h}</span>
                <span className="rt">{s.ratio}</span>
                <span className="us">{s.usage}</span>
              </div>
              )}
          </div>

          {/* palette */}
          <div className="spec-card fade-up" style={{ animationDelay: '80ms', borderStyle: "none" }}>
            <div className="spec-head">
              <div className="ic"><S2Icon name="palette" size={17} /></div>
              <div><h3>컬러 팔레트</h3><div className="sub">배너에서 추출한 핵심 색상</div></div>
            </div>
            <div className="pal-grid">
              {guide.palette.map((c) =>
                <div key={c.role} className="swatch">
                  <div className="chip-color" style={{ background: c.hex, borderBottom: c.hex === '#FFFFFF' ? '1px solid var(--border)' : 'none' }} />
                  <div className="chip-meta">
                    <div className="role">{c.role} · {c.name}</div>
                    <div className="hex">{c.hex}</div>
                  </div>
                </div>
                )}
            </div>
          </div>

          {/* typography */}
          <div className="spec-card fade-up" style={{ animationDelay: '120ms', borderStyle: "none" }}>
            <div className="spec-head">
              <div className="ic"><S2Icon name="type" size={17} /></div>
              <div><h3>타이포 스케일</h3><div className="sub">역할별 폰트 크기·굵기</div></div>
            </div>
            {guide.typo.map((t) =>
              <div key={t.role} className="typo-row">
                <div className="typo-meta">
                  <div className="r">{t.role}</div>
                  <div className="spec">{t.size}px · {t.weight} · LH {t.lh}</div>
                </div>
                <div className="typo-sample" style={{ fontSize: Math.min(t.size, 34), fontWeight: t.weight, lineHeight: 1.1, letterSpacing: t.ls }}>
                  {t.sample}
                </div>
              </div>
              )}
          </div>

          {/* layout rules */}
          <div className="spec-card fade-up" style={{ animationDelay: '160ms', borderStyle: "none" }}>
            <div className="spec-head">
              <div className="ic"><S2Icon name="grid" size={17} /></div>
              <div><h3>레이아웃 규칙</h3><div className="sub">요소 배치 가이드라인</div></div>
            </div>
            <div className="lo-grid">
              {guide.layout.map((l) =>
                <div key={l.label} className="lo-item">
                  <div className="ic"><S2Icon name={l.icon} size={16} /></div>
                  <div><div className="lab">{l.label}</div><div className="val">{l.value}</div></div>
                </div>
                )}
            </div>
          </div>

          {/* effects */}
          <div className="spec-card fade-up" style={{ animationDelay: '200ms', borderStyle: "none" }}>
            <div className="spec-head">
              <div className="ic"><S2Icon name="sparkles" size={17} /></div>
              <div><h3>효과</h3><div className="sub">그림자·그라데이션 등 스타일</div></div>
            </div>
            <div className="lo-grid">
              {guide.effects.map((e) =>
                <div key={e.name} className="lo-item">
                  <div className="ic"><S2Icon name={e.icon} size={16} /></div>
                  <div style={{ minWidth: 0 }}>
                    <div className="val" style={{ marginTop: 0 }}>{e.name}</div>
                    <div className="lab" style={{ marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.desc}</div>
                  </div>
                </div>
                )}
            </div>
          </div>
        </div>

        {/* ---------- right: correction panel ---------- */}
        <div className="cpanel">
          <div className="cpanel-inner fade-up" style={{ animationDelay: '60ms', borderStyle: "none" }}>
            <div className="cpanel-head">
              <div className="ic"><S2Icon name="sliders" size={18} /></div>
              <div>
                <h3>보정 패널</h3>
                <div className="sub">추출 값을 직접 다듬어 보세요</div>
              </div>
            </div>
            <div className="cpanel-body">
              <div className="ctrl">
                <div className="ctrl-label"><span>포인트 컬러</span></div>
                <div className="swatch-row">
                  {ACCENT_OPTS.map((c) =>
                    <button key={c} className={`sw-btn ${accent === c ? 'on' : ''}`} style={{ background: c }}
                    onClick={() => touch(setAccent)(c)} aria-label={c} />
                    )}
                </div>
              </div>

              <div className="ctrl">
                <div className="ctrl-label"><span>메인 컬러</span><span className="v">{primary.name}</span></div>
                <div className="swatch-row">
                  {PRIMARY_OPTS.map((p) =>
                    <button key={p.c} className={`sw-btn ${primary.c === p.c ? 'on' : ''}`} style={{ background: p.g }}
                    onClick={() => touch(setPrimary)(p)} aria-label={p.name} />
                    )}
                </div>
              </div>

              <div className="ctrl">
                <div className="ctrl-label"><span>텍스트 정렬</span></div>
                <div className="seg">
                  <button className={align === 'left' ? 'on' : ''} onClick={() => touch(setAlign)('left')}>좌측</button>
                  <button className={align === 'center' ? 'on' : ''} onClick={() => touch(setAlign)('center')}>가운데</button>
                </div>
              </div>

              <div className="ctrl">
                <div className="ctrl-label"><span>안전 여백</span><span className="v">{margin}px</span></div>
                <input className="range" type="range" min="24" max="80" step="4" value={margin}
                  onChange={(e) => touch(setMargin)(+e.target.value)} />
              </div>

              <div className="ctrl">
                <div className="ctrl-label"><span>메인 카피 크기</span><span className="v">{headSize}px</span></div>
                <input className="range" type="range" min="40" max="84" step="2" value={headSize}
                  onChange={(e) => touch(setHeadSize)(+e.target.value)} />
              </div>

              <hr className="divider" style={{ margin: '18px 0 16px' }} />
              <button className="btn btn-secondary btn-block btn-sm" disabled={!dirty}
                onClick={() => { if (onUpdate) onUpdate({ ...guide, theme: { primary, accent, margin, align, headSize }, updatedAt: new Date().toISOString() }); setDirty(false); }}>
                <S2Icon name="check" size={14} /> {dirty ? '변경사항 저장' : '저장됨'}
              </button>
              {dirty && <p style={{ fontSize: 11.5, color: 'var(--text-subtle)', textAlign: 'center', margin: '10px 0 0' }}>미저장 변경사항이 있어요</p>}
            </div>
          </div>
        </div>
      </div>
    </div></div>);

}

/* slot template visual */
function SlotTemplate({ primary, accent, margin, align, headSize }) {
  const inset = margin * 0.62; // visual scale for preview frame (~700px wide)
  const centered = align === 'center';
  return (
    <div className="tpl-wrap">
      <div className="tpl-frame" style={{ width: '100%', aspectRatio: '1920 / 600', background: primary.g }}>
        {/* logo slot */}
        <div className="slot" style={{ position: 'absolute', left: inset, top: inset, width: 96, height: 30 }}>
          로고
          <span className="slot-tag">LOGO</span>
        </div>
        {/* badge slot */}
        <div className="slot" style={{ position: 'absolute', right: inset, top: inset, width: 60, height: 60, borderRadius: 8, background: accent + '33', borderColor: accent }}>
          <span style={{ color: '#fff', fontWeight: 800 }}>%</span>
          <span className="slot-tag" style={{ background: accent, color: '#1a1530' }}>배지</span>
        </div>
        {/* product slot */}
        {!centered &&
        <div className="slot" style={{ position: 'absolute', right: inset, top: '50%', transform: 'translateY(-50%)', width: '24%', aspectRatio: '1', borderRadius: '50%' }}>
            상품 이미지
            <span className="slot-tag">IMAGE</span>
          </div>
        }
        {/* text group */}
        <div style={{
          position: 'absolute', top: '50%', transform: 'translateY(-50%)',
          left: centered ? '50%' : inset, ...(centered ? { transform: 'translate(-50%,-50%)', textAlign: 'center' } : {}),
          width: centered ? 'auto' : '52%', display: 'flex', flexDirection: 'column',
          alignItems: centered ? 'center' : 'flex-start', gap: 9
        }}>
          <div className="slot" style={{ width: centered ? 360 : '100%', height: Math.round(headSize * 0.62), position: 'relative' }}>
            메인 문구
            <span className="slot-tag">H1 · {headSize}px</span>
          </div>
          <div className="slot" style={{ width: centered ? 280 : '78%', height: 26, position: 'relative' }}>
            서브 문구
            <span className="slot-tag">SUB</span>
          </div>
          <div className="slot" style={{ width: 132, height: 38, borderRadius: 99, background: accent, borderStyle: 'solid', borderColor: accent, color: '#1a1530', marginTop: 4, position: 'relative' }}>
            <span style={{ fontWeight: 700 }}>CTA</span>
            <span className="slot-tag">CTA</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, fontSize: 12, color: 'var(--text-muted)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <S2Icon name="ruler" size={13} /> 1920 × 600 · 메인 히어로 기준
        </span>
        <span className="pill"><span className="pill-dot" style={{ background: accent }} /> {align === 'left' ? '좌측 정렬' : '가운데 정렬'} · 여백 {margin}px</span>
      </div>
    </div>);

}

Object.assign(window, { GuideDetail, SlotTemplate });