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

// ============================================================================
// LessonHigh · Wizard step 3 (invite) + done + workspace switcher
// ============================================================================

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

// ─── S6 · Step 3: invite teachers via SMS ─────────────────────────────────
function S6_WizardInvite() {
  const { go } = useFlow();
  const teachers = [
    { name: '박재현', phone: '010-2341-5678', role: '강사', state: 'pending' },
    { name: '이수정', phone: '010-9988-1122', role: '강사', state: 'pending' },
    { name: '김태호', phone: '010-3456-7890', role: '강사', state: 'sent' },
  ];

  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_STEPS2} current={2} /></div>
          <button className="btn is-ghost is-sm" onClick={() => go('app')}>나중에 초대</button>
        </header>

        <div style={{ flex: 1, display: 'grid', placeItems: 'start center', padding: '48px 24px', overflow: 'auto' }}>
          <div style={{ width: 620 }}>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--text-tertiary)', margin: 0 }}>
              STEP 3 / 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>

            {/* Add row */}
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-default)', borderRadius: 10, padding: 20 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr 110px', gap: 10, alignItems: 'end' }}>
                <div className="field">
                  <label className="field__label">이름</label>
                  <input className="input" placeholder="예: 박재현" />
                </div>
                <div className="field">
                  <label className="field__label">휴대폰 번호</label>
                  <input className="input" placeholder="010-0000-0000" style={{ fontFamily: 'var(--font-mono)' }} />
                </div>
                <button className="btn is-primary" style={{ height: 36 }}>+ 초대 추가</button>
              </div>

              {/* Invite list */}
              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column' }}>
                {teachers.map((t, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '1fr 1.3fr 110px', gap: 10,
                    padding: '10px 4px',
                    borderTop: i === 0 ? '1px solid var(--border-default)' : '1px solid var(--bg-subtle)',
                    alignItems: 'center', fontSize: 13.5,
                  }}>
                    <span style={{ fontWeight: 600 }}>{t.name}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)' }}>{t.phone}</span>
                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6, alignItems: 'center' }}>
                      {t.state === 'sent' ? (
                        <span style={{
                          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                          padding: '3px 8px', borderRadius: 99,
                          background: 'var(--status-success-bg)', color: 'var(--status-success)',
                          letterSpacing: '0.04em',
                        }}>SENT</span>
                      ) : (
                        <span style={{
                          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                          padding: '3px 8px', borderRadius: 99,
                          background: 'var(--bg-subtle)', color: 'var(--text-tertiary)',
                          letterSpacing: '0.04em',
                        }}>PENDING</span>
                      )}
                      <button className="btn is-ghost is-sm is-icon" title="삭제">×</button>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--border-default)' }}>
                <span style={{ fontSize: 12.5, color: 'var(--text-tertiary)' }}>
                  발송될 문자 미리보기 →
                </span>
                <span style={{ fontSize: 12.5, color: 'var(--text-secondary)', fontFamily: 'var(--font-mono)' }}>
                  3명 · 2명 대기 · 1명 전송됨
                </span>
              </div>

              {/* SMS preview */}
              <div style={{ marginTop: 12, background: 'var(--bg-canvas)', border: '1px dashed var(--border-strong)', borderRadius: 8, padding: '14px 16px', fontSize: 12.5, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
                <strong style={{ color: 'var(--text-primary)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', fontFamily: 'var(--font-mono)' }}>LMS · 발신: 010-XXXX-XXXX</strong><br/>
                [송유이 보컬발성클래스] 박재현님, 강사로 초대합니다.<br/>
                아래 링크에서 비밀번호를 정한 뒤 로그인하세요. (24시간 유효)<br/>
                <span style={{ color: 'var(--accent-default)', fontFamily: 'var(--font-mono)' }}>https://songyui.lessonhigh.com/invite/Xa9kQ</span>
              </div>
            </div>

            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 32, gap: 8 }}>
              <button className="btn is-lg" onClick={() => go('wizard-category')}>이전</button>
              <button className="btn is-primary is-lg" style={{ minWidth: 180 }} onClick={() => go('wizard-done')}>3명에게 초대 발송 →</button>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

// ─── S7 · Wizard done ─────────────────────────────────────────────────────
function S7_WizardDone() {
  const { go } = useFlow();
  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_STEPS2} current={3} /></div>
          <span />
        </header>

        <div style={{ flex: 1, display: 'grid', placeItems: 'start center', padding: '48px 24px', overflow: 'auto' }}>
          <div style={{ width: 620 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--text-tertiary)', margin: 0 }}>
                STEP 4 / 4
              </p>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 600,
                padding: '2px 8px', borderRadius: 99,
                background: 'var(--status-success-bg)', color: 'var(--status-success)',
                letterSpacing: '0.06em',
              }}>READY</span>
            </div>
            <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={{ background: 'var(--bg-surface)', border: '1px solid var(--border-default)', borderRadius: 10, padding: 20, marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>
                  내 워크스페이스
                </span>
                <button className="btn is-sm is-ghost" style={{ fontSize: 12 }}>주소 복사</button>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, background: 'var(--accent-subtle-bg)', color: 'var(--accent-default)', display: 'grid', placeItems: 'center', borderRadius: 8, fontWeight: 700, fontSize: 16 }}>송</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>송유이 보컬발성클래스</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--accent-default)' }}>songyui.lessonhigh.com</div>
                </div>
              </div>
            </div>

            {/* Summary of completed setup */}
            <div style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-default)', borderRadius: 8, padding: '14px 18px', fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
              <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="var(--accent-default)" strokeWidth="2" style={{ marginTop: 2, flexShrink: 0 }}>
                  <path d="M3 8.2l3 3L13 4.5"/>
                </svg>
                <span>
                  <strong style={{ color: 'var(--text-primary)', fontWeight: 600 }}>보컬·실용음악</strong> 카테고리로 공간이 <code style={{ fontFamily: 'var(--font-mono)', background: 'var(--bg-surface)', padding: '1px 6px', borderRadius: 3 }}>연습실</code>로 설정됐고,
                  강사 <strong style={{ color: 'var(--text-primary)', fontWeight: 600 }}>3명</strong>에게 초대 문자가 발송됐어요.
                </span>
              </div>
            </div>

            <p style={{ marginTop: 24, fontSize: 12.5, color: 'var(--text-tertiary)' }}>
              앞으로는 <strong style={{ color: 'var(--text-primary)' }}>songyui.lessonhigh.com</strong> 주소로 바로 들어오세요.
            </p>

            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 32, gap: 8 }}>
              <button className="btn is-lg" onClick={() => go('wizard-invite')}>이전</button>
              <button className="btn is-primary is-lg" style={{ minWidth: 180 }} onClick={() => go('app')}>대시보드 입장하기 →</button>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

// ─── S8 · Workspace switcher (admin with multiple workspaces) ─────────────
function S8_Switcher() {
  const { go, reset } = useFlow();
  const workspaces = [
    { name: '송유이 보컬발성클래스', slug: 'songyui', role: '원장', members: 32, last: '오늘', accent: '송' },
    { name: '문복 보컬 아카데미',    slug: 'moonbok', role: '원장', members: 18, last: '어제', accent: '문' },
    { name: '아트라운지 미술학원',   slug: 'art-lounge', role: '강사', members: 24, last: '3일 전', accent: '아' },
  ];

  return (
    <BrowserChrome url="https://app.lessonhigh.com">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'flex', flexDirection: 'column' }}>
        <header style={{ padding: '20px 56px', borderBottom: '1px solid var(--border-default)', background: 'var(--bg-surface)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Wordmark />
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 13 }}>
            <span style={{ color: 'var(--text-secondary)' }}>songyui@studio.kr</span>
            <button className="btn is-ghost is-sm" onClick={() => reset()}>로그아웃</button>
          </div>
        </header>

        <div style={{ flex: 1, display: 'grid', placeItems: 'start center', padding: '64px 24px', overflow: 'auto' }}>
          <div style={{ width: 580 }}>
            <h1 style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.018em', margin: '0 0 8px' }}>
              들어갈 워크스페이스를 골라주세요
            </h1>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '0 0 28px', lineHeight: 1.55 }}>
              계정 <strong style={{ color: 'var(--text-primary)' }}>songyui@studio.kr</strong>이 속한 학원 목록입니다.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {workspaces.map((w, i) => (
                <button key={i} onClick={() => go('app')} style={{
                  appearance: 'none', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
                  background: 'var(--bg-surface)',
                  border: '1px solid var(--border-default)',
                  borderRadius: 10,
                  padding: '16px 20px',
                  display: 'flex', alignItems: 'center', gap: 14,
                }}>
                  <div style={{ width: 40, height: 40, background: 'var(--accent-subtle-bg)', color: 'var(--accent-default)', display: 'grid', placeItems: 'center', borderRadius: 8, fontWeight: 700, fontSize: 16 }}>
                    {w.accent}
                  </div>
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ fontSize: 15, fontWeight: 600 }}>{w.name}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: w.role === '원장' ? 'var(--accent-subtle-bg)' : 'var(--bg-subtle)', color: w.role === '원장' ? 'var(--accent-default)' : 'var(--text-secondary)', letterSpacing: '0.04em' }}>{w.role}</span>
                    </div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>
                      {w.slug}.lessonhigh.com · 회원 {w.members}명 · 마지막 접속 {w.last}
                    </span>
                  </div>
                  <span style={{ fontSize: 18, color: 'var(--text-tertiary)' }}>→</span>
                </button>
              ))}

              <button onClick={() => go('wizard-slug')} style={{
                appearance: 'none', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
                background: 'transparent',
                border: '1.5px dashed var(--border-strong)',
                borderRadius: 10,
                padding: '16px 20px',
                display: 'flex', alignItems: 'center', gap: 14,
                color: 'var(--text-secondary)',
              }}>
                <div style={{ width: 40, height: 40, background: 'var(--bg-subtle)', display: 'grid', placeItems: 'center', borderRadius: 8, fontWeight: 600, fontSize: 22, color: 'var(--text-tertiary)' }}>+</div>
                <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>새 학원 만들기</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

Object.assign(window, { S6_WizardInvite, S7_WizardDone, S8_Switcher });