/* global React, WizardStepper, SlugStatus, BrowserChrome, WorkspaceBrand, useFlow */

// ============================================================================
// LessonHigh · Workspace creation wizard (3 steps + done)
// ============================================================================

const WIZ_STEPS = ['학원 정보', '카테고리', '강사 초대', '완료'];

// ─── S4 · Step 1: workspace name + slug ───────────────────────────────────
function S4_WizardSlug() {
  const { go } = useFlow();
  const { useState } = React;
  const [name, setName] = useState('송유이 보컬발성클래스');
  const [slug, setSlug] = useState('songyui');
  const sanitized = slug.toLowerCase().replace(/[^a-z0-9-]/g, '').replace(/^-+|-+$/g, '').replace(/--+/g, '-');
  const ok = sanitized.length >= 3 && sanitized.length <= 30 && sanitized === slug;
  const initial = name.trim().slice(0, 1) || '슠';
  return (
    <BrowserChrome url="https://app.lessonhigh.com/new">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'flex', flexDirection: 'column' }}>
        <header style={{ padding: '20px 56px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 24, background: 'var(--bg-surface)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 22, height: 22, background: 'var(--accent-default)', color: 'var(--text-on-accent)', display: 'grid', placeItems: 'center', borderRadius: 5, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700 }}>L</div>
            <span style={{ fontWeight: 600, letterSpacing: '-0.012em' }}>LessonHigh</span>
          </div>
          <div style={{ flex: 1 }}><WizardStepper steps={WIZ_STEPS} current={0} /></div>
          <button className="btn is-ghost is-sm" onClick={() => go('app')}>나중에 하기</button>
        </header>

        <div style={{ flex: 1, display: 'grid', placeItems: 'start center', padding: '56px 24px', overflow: 'auto' }}>
          <div style={{ width: 560 }}>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--text-tertiary)', margin: 0 }}>
              STEP 1 / 4
            </p>
            <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: '8px 0 8px' }}>
              학원의 이름과 주소를 정해주세요
            </h1>
            <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', margin: '0 0 36px', lineHeight: 1.55 }}>
              이 주소는 강사·회원에게 공유되는 워크스페이스 URL이 됩니다. 나중에 90일에 한 번 바꿀 수 있어요.
            </p>

            <div className="field" style={{ marginBottom: 24 }}>
              <label className="field__label">학원 이름</label>
              <input className="input is-lg" style={{ height: 44, fontSize: 15 }} value={name} onChange={(e) => setName(e.target.value)} />
              <span className="field__hint">간판 그대로. 모든 화면에서 이렇게 표시됩니다.</span>
            </div>

            <div className="field" style={{ marginBottom: 12 }}>
              <label className="field__label" style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>워크스페이스 주소</span>
                <SlugStatus kind={ok ? 'ok' : 'err'} text={ok ? '사용 가능' : '귀칙 위반'} />
              </label>
              <div style={{ display: 'flex', alignItems: 'stretch', border: `1px solid ${ok ? 'var(--accent-default)' : 'var(--status-danger)'}`, borderRadius: 8, boxShadow: ok ? '0 0 0 3px rgba(31,77,58,0.08)' : '0 0 0 3px rgba(178,58,58,0.08)', background: 'var(--bg-surface)', overflow: 'hidden' }}>
                <input className="input" style={{ height: 44, fontSize: 15, border: 'none', boxShadow: 'none', padding: '0 14px', flex: 1, fontFamily: 'var(--font-mono)', fontWeight: 600 }} value={slug} onChange={(e) => setSlug(e.target.value)} />
                <span style={{ display: 'grid', placeItems: 'center', padding: '0 16px', background: 'var(--bg-subtle)', fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-secondary)', borderLeft: '1px solid var(--border-default)' }}>
                  .lessonhigh.com
                </span>
              </div>
              <span className="field__hint">소문자 영문·숫자·하이픈, 3–30자. 한번 정한 뒤에도 변경 가능.</span>
            </div>

            {/* Live preview */}
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-default)', borderRadius: 8, padding: '16px 18px', marginTop: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 36, height: 36, background: 'var(--accent-subtle-bg)', color: 'var(--accent-default)', display: 'grid', placeItems: 'center', borderRadius: 8, fontWeight: 700, fontSize: 15 }}>{initial}</div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={{ fontSize: 13.5, fontWeight: 600 }}>{name}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: ok ? 'var(--accent-default)' : 'var(--text-tertiary)' }}>https://{sanitized || '—'}.lessonhigh.com</span>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', color: 'var(--text-tertiary)', textTransform: 'uppercase' }}>미리보기</span>
            </div>

            {/* Suggestions */}
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border-default)' }}>
              <p style={{ fontSize: 12.5, color: 'var(--text-tertiary)', margin: '0 0 10px', fontFamily: 'var(--font-mono)', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                추천 후보
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['songyui-vocal', 'songyui-class', 'syvocal', 'songyui-studio'].map(s => (
                  <button key={s} className="btn is-sm" style={{ fontFamily: 'var(--font-mono)' }} onClick={() => setSlug(s)}>{s}</button>
                ))}
              </div>
            </div>

            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 40, gap: 8 }}>
              <button className="btn is-lg" style={{ minWidth: 110 }} onClick={() => go('admin-signup')}>이전</button>
              <button className="btn is-primary is-lg" style={{ minWidth: 140 }} onClick={() => go('wizard-category')} disabled={!ok}>다음 →</button>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

// ─── S5 · Step 2: category ────────────────────────────────────────────────
function S5_WizardCategory() {
  const { go } = useFlow();
  const cats = [
    { id: 'vocal', label: '보컬·실용음악', room: '연습실', sub: '음역대 · 다룬 곡 양식 자동' },
    { id: 'piano', label: '피아노·악기', room: '연습실', sub: '곡 진도 · 다룬 부분 양식' },
    { id: 'art',   label: '미술',         room: '작업실', sub: '매체 · 다룬 기법 양식' },
    { id: 'dance', label: '댄스·발레',    room: '스튜디오', sub: '루틴 · 안무 양식' },
    { id: 'academic', label: '1:1 어학·코딩', room: '교실', sub: '주제 · 다음 과제 양식' },
    { id: 'other', label: '기타',         room: '연습실', sub: '기본 양식, 나중에 직접 편집' },
  ];

  return (
    <BrowserChrome url="https://app.lessonhigh.com/new">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'flex', flexDirection: 'column' }}>
        <header style={{ padding: '20px 56px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 24, background: 'var(--bg-surface)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 22, height: 22, background: 'var(--accent-default)', color: 'var(--text-on-accent)', display: 'grid', placeItems: 'center', borderRadius: 5, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700 }}>L</div>
            <span style={{ fontWeight: 600 }}>LessonHigh</span>
          </div>
          <div style={{ flex: 1 }}><WizardStepper steps={WIZ_STEPS} current={1} /></div>
          <button className="btn is-ghost is-sm" onClick={() => go('app')}>건너뛰기</button>
        </header>

        <div style={{ flex: 1, display: 'grid', placeItems: 'start center', padding: '56px 24px', overflow: 'auto' }}>
          <div style={{ width: 720 }}>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--text-tertiary)', margin: 0 }}>
              STEP 2 / 4
            </p>
            <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: '8px 0 8px' }}>
              어떤 학원이세요?
            </h1>
            <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', margin: '0 0 32px', lineHeight: 1.55 }}>
              선택에 따라 공간 라벨(연습실/작업실/…)과 상담일지·수업일지 양식이 자동으로 깔립니다.
              나중에 설정에서 모두 바꿀 수 있어요.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {cats.map((c, i) => {
                const selected = i === 0;
                return (
                  <button key={c.id} style={{
                    appearance: 'none', textAlign: 'left',
                    background: selected ? 'var(--accent-subtle-bg)' : 'var(--bg-surface)',
                    border: `1.5px solid ${selected ? 'var(--accent-default)' : 'var(--border-default)'}`,
                    borderRadius: 10, padding: '18px 20px',
                    cursor: 'pointer', fontFamily: 'inherit',
                    display: 'flex', flexDirection: 'column', gap: 6,
                    minHeight: 110,
                  }}>
                    <span style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--text-primary)' }}>{c.label}</span>
                    <span style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: selected ? 'var(--accent-default)' : 'var(--text-tertiary)' }}>
                      공간 = {c.room}
                    </span>
                    <span style={{ fontSize: 12.5, color: 'var(--text-secondary)', marginTop: 'auto', lineHeight: 1.4 }}>{c.sub}</span>
                  </button>
                );
              })}
            </div>

            <div style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-default)', borderRadius: 8, padding: '14px 18px', marginTop: 24, fontSize: 13, lineHeight: 1.55, color: 'var(--text-primary)' }}>
              <strong style={{ fontWeight: 600 }}>선택: 보컬·실용음악</strong>
              <span style={{ color: 'var(--text-secondary)' }}>
                {' '}— 공간을 <code style={{ fontFamily: 'var(--font-mono)', background: 'var(--bg-surface)', padding: '1px 6px', borderRadius: 3 }}>연습실</code>로,
                수업일지에 <em style={{ fontStyle: 'normal', color: 'var(--text-primary)', fontWeight: 500 }}>음역대 · 다룬 곡 · 다음 과제</em> 필드를 미리 깔아둡니다.
              </span>
            </div>

            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 36, gap: 8 }}>
              <button className="btn is-lg" onClick={() => go('wizard-slug')}>이전</button>
              <button className="btn is-primary is-lg" style={{ minWidth: 140 }} onClick={() => go('wizard-invite')}>다음 →</button>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

Object.assign(window, { S4_WizardSlug, S5_WizardCategory });