/* Brand Studio View — wizard + brand list + dedicated brand simulator */

const { useState: useBVState, useEffect: useBVEffect, useMemo: useBVMemo } = React;

function BrandStudioView({ brands, setBrands, onOpenBrandSim }) {
  const [mode, setMode] = useBVState('list'); // list | new
  const [draft, setDraft] = useBVState({ name: '', category: '', keywords: '', description: '', url: '' });
  const [analyzing, setAnalyzing] = useBVState(false);
  const [progress, setProgress] = useBVState({ phase: '', pct: 0 });
  const [analyzed, setAnalyzed] = useBVState(null);

  async function startAnalysis() {
    if (!draft.name.trim()) return;
    setAnalyzing(true);
    setAnalyzed(null);
    const phases = [
      { p: '브랜드 컨텍스트 파싱', pct: 12 },
      { p: '관련 카테고리 후보 도출', pct: 32 },
      { p: '인구통계 군집 추정', pct: 55 },
      { p: '페르소나 시뮬레이션 실행', pct: 78 },
      { p: '최적 조합 매칭', pct: 92 },
      { p: '완료', pct: 100 },
    ];
    for (const ph of phases) {
      setProgress(ph);
      await new Promise(r => setTimeout(r, 320 + Math.random() * 220));
    }
    const personas = window.generatePersonas(draft, window.TAXONOMY);
    const brand = {
      id: 'b' + Date.now(),
      ...draft,
      createdAt: new Date().toISOString().slice(0, 16).replace('T', ' '),
      personas,
    };
    setAnalyzed(brand);
    setAnalyzing(false);
  }

  function commitBrand() {
    const next = [analyzed, ...brands];
    setBrands(next);
    window.persistBrands(next);
    setAnalyzed(null);
    setDraft({ name: '', category: '', keywords: '', description: '', url: '' });
    setMode('list');
  }
  function deleteBrand(id) {
    const next = brands.filter(b => b.id !== id);
    setBrands(next);
    window.persistBrands(next);
  }

  if (mode === 'new' || analyzed) {
    return (
      <div className="bs-wrap" data-screen-label="07 Brand Studio">
        <BrandWizard
          draft={draft} setDraft={setDraft}
          analyzing={analyzing}
          progress={progress}
          analyzed={analyzed}
          onStart={startAnalysis}
          onCommit={commitBrand}
          onCancel={() => { setMode('list'); setAnalyzed(null); }}
        />
        <BrandStudioStyle />
      </div>
    );
  }

  return (
    <div className="bs-wrap" data-screen-label="07 Brand Studio">
      <section className="panel" style={{ marginBottom: 14 }}>
        <div className="panel-head">
          <h3>
            <span style={{ color: 'var(--signal)' }}>◆</span>
            브랜드 스튜디오
            <span className="tag">brand-specific simulator</span>
          </h3>
          <button className="btn" data-variant="primary" onClick={() => setMode('new')}>+ 새 브랜드 분석</button>
        </div>
        <div className="panel-body">
          <p style={{ fontSize: 13, color: 'var(--text-dim)', margin: 0, lineHeight: 1.7 }}>
            브랜드 정보를 입력하면 AI가 자동으로 <strong style={{ color: 'var(--text)' }}>4개의 전용 페르소나</strong>를 생성하고,
            각 페르소나에 대한 GFA 광고 시뮬레이션을 만들어 드립니다.
            한 브랜드를 분석하면 그 브랜드 전용 시뮬레이션 워크스페이스로 진입할 수 있습니다.
          </p>
        </div>
      </section>

      {brands.length === 0 ? (
        <div className="bs-empty">
          <div className="bs-empty-icon">◇◆◇</div>
          <div style={{ fontSize: 15, fontWeight: 600 }}>등록된 브랜드가 없습니다</div>
          <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 6 }}>
            「+ 새 브랜드 분석」 버튼을 눌러 첫 브랜드를 분석해 보세요.
          </div>
        </div>
      ) : (
        <div className="bs-grid">
          {brands.map(b => (
            <BrandCard key={b.id} brand={b} onOpen={() => onOpenBrandSim(b)} onDelete={() => deleteBrand(b.id)} />
          ))}
        </div>
      )}

      <BrandStudioStyle />
    </div>
  );
}

function BrandCard({ brand, onOpen, onDelete }) {
  const avgReach = brand.personas.reduce((s, p) => s + (p.result?.finalReach || 0), 0) / Math.max(1, brand.personas.length);
  const avgValid = brand.personas.reduce((s, p) => s + (p.result?.validity || 0), 0) / Math.max(1, brand.personas.length);

  return (
    <div className="brand-card">
      <div className="brand-card-head">
        <div>
          <div className="brand-card-name">{brand.name}</div>
          <div className="brand-card-meta">
            {brand.category || '카테고리 미정'} · 생성 {brand.createdAt}
          </div>
        </div>
        <button className="btn" data-size="sm" data-variant="ghost" onClick={onDelete}>✕</button>
      </div>
      <div className="brand-card-stats">
        <div><div className="lbl">페르소나</div><div className="val">{brand.personas.length}개</div></div>
        <div><div className="lbl">평균 도달</div><div className="val">{window.SimEngine.fmtN(Math.round(avgReach))}</div></div>
        <div><div className="lbl">평균 유효성</div><div className="val">{Math.round(avgValid)}점</div></div>
      </div>
      <div className="brand-card-personas">
        {brand.personas.map(p => (
          <div key={p.id} className="bp-row">
            <span style={{ flex: 1, fontSize: 11 }}>{p.name}</span>
            <span className="mono mute" style={{ fontSize: 10 }}>
              {p.result ? window.SimEngine.fmtN(p.result.finalReach) : '-'}
            </span>
          </div>
        ))}
      </div>
      <button className="btn" data-variant="primary" onClick={onOpen}
              style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}>
        전용 시뮬레이터 열기 →
      </button>
    </div>
  );
}

function BrandWizard({ draft, setDraft, analyzing, progress, analyzed, onStart, onCommit, onCancel }) {
  if (analyzed) {
    // Result view
    return (
      <div className="panel">
        <div className="panel-head">
          <h3>분석 완료<span className="tag">{analyzed.personas.length}개 페르소나 생성</span></h3>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn" onClick={onCancel}>취소</button>
            <button className="btn" data-variant="primary" onClick={onCommit}>등록 →</button>
          </div>
        </div>
        <div className="panel-body">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
            {analyzed.personas.map(p => (
              <div key={p.id} className="persona-preview">
                <div style={{ fontWeight: 700, fontSize: 13 }}>{p.name}</div>
                <div style={{ fontSize: 11, color: 'var(--cyan)', marginTop: 2 }}>{p.angle}</div>
                {p.result && (
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 4, marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                    <Stat l="도달" v={window.SimEngine.fmtN(p.result.finalReach)} />
                    <Stat l="유효성" v={p.result.validity + '점'} />
                    <Stat l="CTR" v={p.result.ctr + '%'} />
                    <Stat l="CPM" v={'₩' + window.SimEngine.fmtN(p.result.cpm)} />
                  </div>
                )}
                <div style={{ marginTop: 8, fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-mute)' }}>
                  {p.query.flatMap(g => g.leaves).slice(0, 3).map(l => '· ' + window.SimEngine.shortLabel(l)).join('\n')}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="panel">
      <div className="panel-head">
        <h3>새 브랜드 분석<span className="tag">5단계 자동 분석</span></h3>
        <button className="btn" onClick={onCancel}>닫기</button>
      </div>
      <div className="panel-body">
        {analyzing ? (
          <Analyzing progress={progress} />
        ) : (
          <BrandForm draft={draft} setDraft={setDraft} onStart={onStart} />
        )}
      </div>
    </div>
  );
}

function BrandForm({ draft, setDraft, onStart }) {
  function f(k, v) { setDraft({ ...draft, [k]: v }); }
  return (
    <div className="bs-form">
      <Field label="브랜드명 *" placeholder="예: 라네즈, 토스, 마켓컬리"
             value={draft.name} onChange={v => f('name', v)} />
      <Field label="카테고리" placeholder="예: 화장품 · 핀테크 · 신선식품"
             value={draft.category} onChange={v => f('category', v)} />
      <Field label="키워드 (쉼표 구분)" placeholder="예: 수분크림, 안티에이징, K뷰티"
             value={draft.keywords} onChange={v => f('keywords', v)} />
      <Field label="브랜드 설명" placeholder="200자 이내" multi
             value={draft.description} onChange={v => f('description', v)} />
      <Field label="공식 URL (선택)" placeholder="https://"
             value={draft.url} onChange={v => f('url', v)} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
        <button className="btn" data-variant="primary" onClick={onStart} disabled={!draft.name.trim()}>
          ★ AI 분석 시작
        </button>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, multi }) {
  return (
    <label className="bs-field">
      <span className="bs-field-label">{label}</span>
      {multi
        ? <textarea rows={3} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} />
        : <input type="text" value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} />}
    </label>
  );
}

function Analyzing({ progress }) {
  return (
    <div className="bs-analyzing">
      <div className="bs-analyzing-icon"><div className="spinner" /></div>
      <div className="bs-analyzing-phase">{progress.phase || '준비 중'}</div>
      <div className="bs-analyzing-bar">
        <div style={{ width: progress.pct + '%' }} />
      </div>
      <div className="mono mute" style={{ fontSize: 11 }}>{progress.pct}% 완료</div>
    </div>
  );
}

function Stat({ l, v }) {
  return (
    <div style={{ padding: '4px 6px', background: 'rgba(0,0,0,0.2)', borderLeft: '2px solid var(--border-strong)' }}>
      <div style={{ fontSize: 9, color: 'var(--text-mute)' }}>{l}</div>
      <div style={{ fontSize: 12, color: 'var(--text)' }}>{v}</div>
    </div>
  );
}

function BrandStudioStyle() {
  return <style>{`
    .bs-wrap { padding: 18px; display: flex; flex-direction: column; }
    .bs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 14px;
    }
    .brand-card {
      padding: 14px;
      background: oklch(0.13 0.015 240 / 0.55);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255,240,220,0.10);
      display: flex; flex-direction: column; gap: 10px;
      transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    }
    .brand-card:hover {
      transform: translateY(-2px);
      border-color: oklch(0.80 0.14 72 / 0.4);
      box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 24px oklch(0.80 0.14 72 / 0.12);
    }
    .brand-card-head {
      display: flex; justify-content: space-between; align-items: flex-start;
    }
    .brand-card-name {
      font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
    }
    .brand-card-meta {
      font-size: 11px; color: var(--text-mute); margin-top: 2px;
      font-family: var(--font-mono);
    }
    .brand-card-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .brand-card-stats > div {
      padding: 8px 10px;
      background: oklch(0.10 0.02 240 / 0.5);
    }
    .brand-card-stats .lbl { font-size: 9px; color: var(--text-mute); }
    .brand-card-stats .val { font-family: var(--font-mono); font-size: 14px; color: var(--text); }
    .brand-card-personas {
      padding: 6px 8px;
      background: rgba(0,0,0,0.2);
      max-height: 100px;
      overflow-y: auto;
    }
    .bp-row {
      display: flex; gap: 6px; align-items: center;
      padding: 2px 0;
      border-bottom: 1px dashed var(--border);
      color: var(--text-dim);
    }
    .bp-row:last-child { border-bottom: none; }

    .bs-empty {
      padding: 60px 20px;
      text-align: center;
      border: 1px dashed var(--border-strong);
      background: oklch(0.10 0.02 240 / 0.4);
    }
    .bs-empty-icon {
      font-size: 28px;
      color: var(--signal);
      letter-spacing: 0.4em;
      margin-bottom: 10px;
      opacity: 0.7;
    }

    .bs-form {
      display: flex; flex-direction: column; gap: 12px;
      max-width: 640px;
    }
    .bs-field {
      display: flex; flex-direction: column; gap: 5px;
    }
    .bs-field-label {
      font-size: 11px; font-weight: 600; color: var(--text-dim);
    }
    .bs-field input, .bs-field textarea {
      background: oklch(0.10 0.02 240 / 0.5);
      border: 1px solid rgba(255,240,220,0.12);
      color: var(--text);
      padding: 8px 10px;
      font-size: 13px;
      font-family: var(--font-sans);
      outline: none;
      resize: vertical;
    }
    .bs-field input:focus, .bs-field textarea:focus {
      border-color: var(--signal);
    }

    .bs-analyzing {
      padding: 32px 18px;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .bs-analyzing-icon { width: 56px; height: 56px; display: grid; place-items: center; }
    .bs-analyzing-icon .spinner {
      width: 40px; height: 40px;
      border: 2px solid var(--ink-300);
      border-top-color: var(--signal);
      border-radius: 50%;
      animation: bs-spin 0.8s linear infinite;
    }
    @keyframes bs-spin { to { transform: rotate(360deg); } }
    .bs-analyzing-phase {
      font-size: 14px; color: var(--text);
    }
    .bs-analyzing-bar {
      width: 320px; height: 4px;
      background: var(--ink-300);
      overflow: hidden;
    }
    .bs-analyzing-bar > div {
      height: 100%; background: var(--signal);
      transition: width 0.4s ease-out;
    }
    .persona-preview {
      padding: 12px;
      background: oklch(0.13 0.015 240 / 0.55);
      border: 1px solid rgba(255,240,220,0.10);
      border-left: 2px solid var(--cyan);
    }
  `}</style>;
}

Object.assign(window, { BrandStudioView });