/* ============================================================
   create-schema.jsx — 사용자 영역 "배너 만들기" 스키마 구동판 (상품배너 550)
   · window.SCHEMA_550 을 읽어 레이아웃 유형을 예시 썸네일 카드로 선택.
   · 누끼형 → 기존 모델/상품 세부 + NukkiCreate(작동 흐름 보존).
   · 그 외 레이아웃 → 스키마 옵션 패널(로고/이미지표기/부가정보 제약).
   · merged 앱의 기존 CSS 클래스(card/field/dropzone/seg/btn/type-card-v)를 그대로 사용.
   ============================================================ */
const { useState: useSC, useRef: useSCR } = React;

/* 레이아웃 유형별 예시 썸네일 — 업로드된 550 카테고리 자산 (단일 출처) */
function _g550(i) {const G = window.G550_IMG || [];return G.length ? G[i % G.length] : null;}
const _LAYOUT_THUMB = { nukki: 0, 'split-nukki': 1, split: 2, full: 7 };

/* 그 외 레이아웃용 스키마 옵션 패널 */
function SchemaOptionsPanel({ schema, layout, guide, onGenerate }) {
  const logoAxis = schema.axes.find((a) => a.id === 'logo');
  const markAxis = schema.axes.find((a) => a.id === 'imgmark');
  const extraAxis = schema.axes.find((a) => a.id === 'extra');
  const extraOK = extraAxis.appliesTo.includes(layout);
  const [img, setImg] = useSC(null);
  const [logoN, setLogoN] = useSC(1);
  const [marks, setMarks] = useSC([]);
  const [extra, setExtra] = useSC(null);
  const fileRef = useSCR(null);
  const onFile = (e) => {const f = e.target.files && e.target.files[0];if (!f) return;const r = new FileReader();r.onload = () => setImg(r.result);r.readAsDataURL(f);};

  return (
    <div className="card" style={{ padding: 22, borderStyle: 'none' }}>
      <div className="section-title">소재 업로드</div>
      <div className="field">
        <label className="field-label">메인 이미지 (화보)</label>
        <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={onFile} />
        <div className={`dropzone ${img ? 'has' : ''}`} onClick={() => fileRef.current && fileRef.current.click()}>
          {img ?
          <div className="dz-thumb"><img src={img} alt="업로드" /><button className="dz-remove" onClick={(e) => {e.stopPropagation();setImg(null);}}><S2Icon name="x" size={15} /></button></div> :
          <>
              <div className="dz-icon"><S2Icon name="upload" size={20} /></div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>이미지를 끌어다 놓거나 클릭해 업로드</div>
              <div style={{ fontSize: 12, color: 'var(--text-subtle)', marginTop: 4 }}>화보 이미지 권장 · 레이아웃에 맞춰 자동 배치</div>
            </>}
        </div>
      </div>

      <div className="field">
        <label className="field-label">로고 <span style={{ color: 'var(--text-faint)', fontWeight: 500 }}>· 우측 상단 · 최대 2</span></label>
        <div className="seg" style={{ width: 'auto' }}>
          {[0, 1, 2].map((n) => <button key={n} className={logoN === n ? 'on' : ''} onClick={() => setLogoN(n)} style={{ padding: '0 16px' }}>{n === 0 ? '없음' : n + '개'}</button>)}
        </div>
      </div>

      <div className="field">
        <label className="field-label">이미지 표기 <span style={{ color: 'var(--text-faint)', fontWeight: 500 }}>· 상품 사이</span></label>
        <div style={{ display: 'flex', gap: 8 }}>
          {markAxis.options.map((o) => {const on = marks.includes(o.id);return (
              <button key={o.id} className={`btn ${on ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setMarks(on ? marks.filter((x) => x !== o.id) : [...marks, o.id])}>{o.label}</button>);})}
        </div>
      </div>

      <div className="field">
        <label className="field-label">부가정보</label>
        {extraOK ?
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button className={`btn ${extra === null ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setExtra(null)}>없음</button>
            {extraAxis.options.map((o) => <button key={o.id} className={`btn ${extra === o.id ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setExtra(o.id)}>{o.label}</button>)}
          </div> :
        <div className="brand-hint">부가정보는 누끼형·풀이미지형에서만 사용할 수 있어요.</div>}
      </div>

      <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: 18, borderRadius: '6px' }} disabled={!img}
      onClick={() => onGenerate({ content: { head: guide.name, sub: '', cta: '' }, image: img, sty: { g: 'linear-gradient(120deg,#0E7A5F,#0b5e49)', accent: '#FFD84D', primary: '#0E7A5F' }, layout })}>
        <S2Icon name="sparkles" size={17} /> 배너 생성하기
      </button>
    </div>);
}

function Schema550Create({ guide, onBack, onGenerate }) {
  const schema = guide.category === '상품배너 H1' ? window.SCHEMA_H1 : window.SCHEMA_550;
  const layoutAxis = schema.axes.find((a) => a.id === 'layout');
  const _initLayout = (guide && guide.layoutId && layoutAxis.options.some((o) => o.id === guide.layoutId)) ? guide.layoutId : 'nukki';
  const [layout, setLayout] = useSC(_initLayout);
  const [splitSub, setSplitSub] = useSC((guide && guide.layoutSubId) || 's2');

  return (
    <>
      {/* 제목 옆 레이아웃 유형 드롭다운 (현재 유형 표시 · 가이드 기준) */}
      <CreateHead category={guide.category} onBack={onBack}>
        <TypeSelect value={layout} options={layoutAxis.options} onChange={setLayout} />
        {layout === 'split' &&
        <TypeSelect value={splitSub} options={layoutAxis.options.find((o) => o.id === 'split').options} onChange={setSplitSub} />}
      </CreateHead>

      {/* 모든 레이아웃 → 스키마 구동 UI (컨트롤 + 라이브 550 프리뷰 + 활성 노드) */}
      {window.Create550 &&
        <Create550 guide={guide} layout={layout} layoutSub={splitSub} schema={schema} onGenerate={onGenerate} />}
    </>);
}

Object.assign(window, { Schema550Create, SchemaOptionsPanel });