/* ============================================================
   nukki.jsx — A 누끼형 제작 플로우
   · 텍스트 입력 없음 → 상품 이미지(여러장) + 사은품 딱지(선택) + 로고(최대 2)
   · 배경 처리 옵션 → A안/B안 레이아웃 시뮬레이션 선택
   ============================================================ */
const { useState: useNk, useRef: useNkR } = React;

/* 행 구성 helper: 업로드 수 n을 엔진 방식대로 행으로 분배 */
function rowsLadder(n) {
  if (n <= 0) return [2, 4, 4];
  const r = [];
  let left = n;
  const top = Math.min(2, left);r.push(top);left -= top;
  while (left > 0) {const t = Math.min(4, left);r.push(t);left -= t;}
  return r;
}
function rowsBox(n) {
  if (n <= 0) return [2, 3, 5];
  const r = [];let left = n;
  while (left > 0) {const t = Math.min(3, left);r.push(t);left -= t;}
  return r;
}

const NK_ENGINES = [
{ key: 'A', tag: 'core_engine', tagBg: '#4E4CDB', placement: '안정적인 사다리꼴', density: 70.9, ratio: '—', rowsFn: rowsLadder, ok: false },
{ key: 'B', tag: 'Qfit_engine', tagBg: '#0E9F6E', placement: '균일한 박스형', density: 63.9, ratio: '1.03', rowsFn: rowsBox, ok: true }];


/* 캔버스 안에 모델 + 상품 타일 + 로고(최대2) + 사은품 딱지를 배치 */
function NkCanvas({ images, logos, gift, subtext, sub, rows, w, h }) {
  const showModel = sub ? sub.model : true;
  const showProduct = sub ? sub.product : true;
  const lg = logos || [];
  const tiles = [];
  let idx = 0;
  rows.forEach((count, ri) => {
    const cells = [];
    for (let i = 0; i < count; i++) {
      const src = images.length ? images[idx % images.length] : null;
      cells.push(
        <div key={i} className="nk-tile">
          {src ? <img src={src} alt="" /> : <div className="nk-tile-ph" />}
        </div>);
      idx++;
    }
    tiles.push(<div className="nk-row" key={ri}>{cells}</div>);
  });

  return (
    <div className="nk-canvas" style={{ aspectRatio: `${w} / ${h}` }}>
      <div className="nk-safe" />
      {lg[0] && <img className="nk-logo" src={lg[0]} alt="logo" />}
      {lg[1] && <img className="nk-logo nk-logo-2" src={lg[1]} alt="logo" />}
      {showModel &&
      <div className="nk-model">
          <div className="nk-model-fig" />
          <div className="nk-model-fig sm" />
        </div>}
      {showProduct &&
      <div className="nk-products" style={{ justifyContent: showModel ? 'flex-end' : 'center' }}>
          {tiles}
        </div>}
      {gift && <img className="nk-gift" src={gift} alt="사은품" />}
      {subtext && <div className="nk-subtext-badge" style={{ top: (logos && logos.length ? '20cqh' : '6cqw') }}>{subtext}</div>}
    </div>);
}

function NkMetric({ label, value, dot }) {
  return (
    <div className="nk-metric">
      <span className="nk-metric-l">{label}</span>
      <span className="nk-metric-v">
        {dot && <i className="nk-dot" style={{ background: dot }} />}{value}
      </span>
    </div>);
}

function NkCandidate({ eng, images, logos, gift, subtext, sub, canvas, selected, onSelect, onSave }) {
  const rows = eng.rowsFn(images.length);
  const safeW = canvas.safeW || Math.round(canvas.w * 0.86);
  const safeH = canvas.safeH || Math.round(canvas.h * 0.86);
  const mxPct = Math.round((canvas.w - safeW) / 2 / canvas.w * 100);
  const myPct = Math.round((canvas.h - safeH) / 2 / canvas.h * 100);
  const marginTxt = mxPct === myPct ? `${mxPct}% 마진` : `좌우 ${mxPct}% · 상하 ${myPct}%`;
  const rowText = rows.map((c, i) => `${i + 1}행: ${c}개`).join(', ');
  const okColor = eng.ok ? 'var(--green)' : 'var(--amber)';

  return (
    <div className={`nk-cand ${selected ? 'sel' : ''}`} onClick={onSelect}>
      <div className="nk-cand-head">
        <span className="nk-engine-tag" style={{ background: eng.tagBg }}>{eng.tag}</span>
        {selected && <span className="nk-cand-pick"><S2Icon name="check" size={13} /> 선택됨</span>}
      </div>
      <div className="nk-cand-title">
        <b>{eng.key}안</b> · {canvas.label} · 제품 {images.length || 0}개
      </div>
      <NkCanvas images={images} logos={logos} gift={gift} subtext={subtext} sub={sub} rows={rows} w={canvas.w} h={canvas.h} />
      <div className="nk-metrics">
        <NkMetric label="캔버스 크기" value={`${canvas.w} × ${canvas.h}px`} />
        <NkMetric label="세이프 영역" value={`${safeW} × ${safeH}px (${marginTxt})`} />
        <NkMetric label="배치 유형" value={eng.placement} />
        <NkMetric label="밀도" value={`${eng.density}%`} dot={okColor} />
        <NkMetric label="행 구성" value={rowText} />
      </div>
      <div className="nk-cand-actions">
        <button className="btn nk-btn-save" onClick={(e) => {e.stopPropagation();onSave('원본');}}>원본저장</button>
        <button className="btn nk-btn-adjust" onClick={(e) => {e.stopPropagation();onSave('조정');}}>조정저장</button>
      </div>
    </div>);
}

/* 공통 업로드 썸네일 영역 */
function NkUploader({ items, onAdd, onRemove, icon, hint, fileRef }) {
  return (
    <>
      {items.length === 0 ?
      <div className="nk-drop" onClick={() => fileRef.current && fileRef.current.click()}>
          <div className="dz-icon"><S2Icon name={icon} size={18} /></div>
          <div className="nk-drop-t">클릭해 업로드</div>
          <div className="nk-drop-h">{hint}</div>
        </div> :
      <div className="nk-thumbs">
          {items.map((src, i) =>
        <div className="nk-thumb" key={i}>
              <img src={src} alt="" />
              <button className="nk-thumb-x" onClick={() => onRemove(i)}><S2Icon name="x" size={12} /></button>
            </div>)}
          <button className="nk-thumb-add" onClick={() => fileRef.current && fileRef.current.click()}>
            <S2Icon name="plus" size={16} /><span>추가</span>
          </button>
        </div>}
    </>);
}

function NukkiCreate({ guide, sub, onGenerate }) {
  const [images, setImages] = useNk([]);   // 상품 (필수)
  const [gifts, setGifts] = useNk([]);     // 사은품 딱지 (선택)
  const [logos, setLogos] = useNk([]);     // 로고 (최대 2)
  const [subtext, setSubtext] = useNk(''); // 부가 텍스트 (선택, 최대 1)
  const [bgMode, setBgMode] = useNk('png');
  const [canvases, setCanvases] = useNk({ '550': true, 'h1': false });
  const [pick, setPick] = useNk(null);
  const imgRef = useNkR(null);
  const giftRef = useNkR(null);
  const logoRef = useNkR(null);
  const logoSlot = useNkR(0);

  const appendFiles = (e, setter, max) => {
    const files = Array.from(e.target.files || []);
    files.forEach((f) => {
      const r = new FileReader();
      r.onload = () => setter((arr) => max && arr.length >= max ? arr : [...arr, r.result]);
      r.readAsDataURL(f);
    });
    e.target.value = '';
  };
  const onLogo = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    const slot = logoSlot.current;
    const r = new FileReader();
    r.onload = () => setLogos((arr) => {const n = [...arr];n[slot] = r.result;return n;});
    r.readAsDataURL(f);
    e.target.value = '';
  };
  const removeAt = (setter) => (i) => setter((arr) => arr.filter((_, k) => k !== i));
  const removeLogo = (i) => setLogos((arr) => {const n = [...arr];n[i] = null;return n;});

  const H1 = window.GUIDE_A && window.GUIDE_A.spec || { w: 776, h: 388 };
  const CANVAS_DEFS = [
  { id: '550', label: '550×550', w: 550, h: 550, safeW: 450, safeH: 470, name: '상품배너 550' },
  { id: 'h1', label: `${H1.w}×${H1.h}`, w: H1.w, h: H1.h, name: '상품배너 H1' }];

  const activeCanvases = CANVAS_DEFS.filter((c) => canvases[c.id]);

  const BG_OPTS = [
  { id: 'remove', label: '배경 제거 진행' },
  { id: 'keep', label: '배경 그대로 진행' },
  { id: 'png', label: '투명 PNG 진행' }];


  return (
    <div className="nk-wrap">
      {/* ── 1단계: 소재 업로드 (각 항목 분기) ── */}
      <input ref={imgRef} type="file" accept="image/*" multiple style={{ display: 'none' }} onChange={(e) => appendFiles(e, setImages)} />
      <input ref={giftRef} type="file" accept="image/*" multiple style={{ display: 'none' }} onChange={(e) => appendFiles(e, setGifts)} />
      <input ref={logoRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={onLogo} />

      {/* 상품 이미지 (필수) */}
      <div className="card nk-sec-card">
        <div className="nk-up-head">
          <span className="nk-step">1</span>
          <span className="section-title" style={{ margin: 0 }}>상품 이미지</span>
          <span className="nk-badge-req">필수</span>
          <span className="nk-up-count">{images.length}장</span>
        </div>
        <NkUploader items={images} onAdd={setImages} onRemove={removeAt(setImages)} icon="images" hint="여러 장 동시 업로드 · 누끼 권장" fileRef={imgRef} />
      </div>

      {/* 사은품 딱지 · 로고 · 부가 텍스트 (3단) */}
      <div className="nk-sec-row three">
        <div className="card nk-sec-card">
          <div className="nk-up-head">
            <span className="nk-step">2</span>
            <span className="section-title" style={{ margin: 0 }}>사은품 딱지</span>
            <span className="nk-badge-opt">선택</span>
            <span className="nk-up-count">{gifts.length}개</span>
          </div>
          <NkUploader items={gifts} onAdd={setGifts} onRemove={removeAt(setGifts)} icon="star" hint="증정·혜택 딱지 (PNG 권장)" fileRef={giftRef} />
        </div>

        <div className="card nk-sec-card">
          <div className="nk-up-head">
            <span className="nk-step">3</span>
            <span className="section-title" style={{ margin: 0 }}>로고</span>
            <span className="nk-badge-opt">최대 2개</span>
          </div>
          <div className="nk-logo-slots">
            {[0, 1].map((i) =>
            <div key={i} className={`nk-logo-slot ${logos[i] ? 'has' : ''}`}
              onClick={() => {logoSlot.current = i;logoRef.current && logoRef.current.click();}}>
                {logos[i] ?
              <><img src={logos[i]} alt="logo" /><button className="nk-thumb-x" onClick={(e) => {e.stopPropagation();removeLogo(i);}}><S2Icon name="x" size={11} /></button></> :
              <span className="nk-logo-add"><S2Icon name="plus" size={16} /><span>{i === 0 ? '브랜드' : '광고주'}</span></span>}
              </div>)}
          </div>
          <div className="nk-logo-note">우측 상단부터 배치 · PNG 투명 권장</div>
        </div>

        <div className="card nk-sec-card">
          <div className="nk-up-head">
            <span className="nk-step">4</span>
            <span className="section-title" style={{ margin: 0 }}>부가 텍스트</span>
            <span className="nk-badge-opt">선택</span>
          </div>
          <input className="input" value={subtext} maxLength={16}
            placeholder="예: 1+1 · SET · 52주분"
            onChange={(e) => setSubtext(e.target.value)} />
          <div className="nk-preset-chips">
            {['SET', '1+1', '×30', '싱글+더블', '52주분', '렌탈비 면제'].map((p) =>
            <button key={p} className={`nk-preset-chip ${subtext === p ? 'on' : ''}`} onClick={() => setSubtext((v) => v === p ? '' : p)}>{p}</button>)}
          </div>
          <div className="nk-logo-note">로고 아래 배치 · 최대 1개 · 3줄 / 8자 이하</div>
        </div>
      </div>

      {/* 배경 처리 옵션 */}
      <div className="card nk-sec-card" style={{ marginBottom: 30 }}>
        <div className="nk-up-head">
          <span className="nk-step">5</span>
          <span className="section-title" style={{ margin: 0 }}>배경 처리 옵션</span>
        </div>
        <div className="nk-radio-list horizontal">
          {BG_OPTS.map((o, i) =>
          <button key={o.id} className={`nk-radio ${bgMode === o.id ? 'on' : ''}`} onClick={() => setBgMode(o.id)}>
              <span className="nk-radio-dot" />
              <span>{i + 1}. {o.label}</span>
            </button>)}
        </div>
      </div>

      {/* ── 2단계: 레이아웃 시뮬레이션 ── */}
      <div className="nk-sim-head">
        <div className="section-title" style={{ margin: 0, fontSize: 14, color: 'var(--text)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <S2Icon name="layout" size={16} /> 레이아웃 시뮬레이션
        </div>
        <div className="nk-canvas-pick">
          <span style={{ fontSize: 12.5, color: 'var(--text-muted)', fontWeight: 600 }}>캔버스 크기</span>
          {CANVAS_DEFS.map((c) =>
          <button key={c.id} className={`nk-check ${canvases[c.id] ? 'on' : ''}`} onClick={() => setCanvases((s) => ({ ...s, [c.id]: !s[c.id] }))}>
              <span className="nk-check-box">{canvases[c.id] && <S2Icon name="check" size={12} />}</span>{c.label}
            </button>)}
        </div>
      </div>

      {activeCanvases.length === 0 &&
      <div className="nk-empty">캔버스 크기를 1개 이상 선택하세요.</div>}

      {activeCanvases.map((canvas) =>
      <div className="nk-canvas-block" key={canvas.id}>
          <div className="nk-canvas-label">캔버스 {canvas.label}</div>
          <div className="nk-cands">
            {NK_ENGINES.map((eng) => {
            const id = eng.key + canvas.id;
            return (
              <NkCandidate
                key={id} eng={eng} images={images} logos={logos} gift={gifts[0]} subtext={subtext} sub={sub} canvas={canvas}
                selected={pick === id}
                onSelect={() => setPick(id)}
                onSave={(mode) => onGenerate && onGenerate({ engine: eng.key, canvas: canvas.id, mode, images, gifts, logos, subtext, sub })} />);
          })}
          </div>
        </div>)}

      <p className="nk-foot">캔버스에서 제품을 클릭하여 선택하고, 마음에 드는 안을 저장하세요.</p>
    </div>);
}

Object.assign(window, { NukkiCreate });