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

// ============================================================================
// LessonHigh · Teacher (강사) screens + edge cases
// ============================================================================

// ─── S9 · Teacher login (at {slug}.lessonhigh.com/login) ──────────────────
function S9_TeacherLogin() {
  const { go } = useFlow();
  return (
    <BrowserChrome url="https://songyui.lessonhigh.com/login">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center', position: 'relative' }}>
        <div style={{
          width: 440,
          background: 'var(--bg-surface)',
          border: '1px solid var(--border-default)',
          borderRadius: 14,
          padding: '36px 36px 32px',
          boxShadow: 'var(--shadow-sm)',
        }}>
          {/* Workspace brand at top — establishes "this is your studio" */}
          <div style={{ paddingBottom: 24, marginBottom: 24, borderBottom: '1px solid var(--border-default)' }}>
            <WorkspaceBrand name="송유이 보컬발성클래스" slug="songyui" />
          </div>

          <h1 style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.014em', margin: '0 0 6px' }}>
            로그인
          </h1>
          <p style={{ fontSize: 13, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
            원장이 보낸 초대 문자에서 받은 정보로 들어오세요.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="field">
              <label className="field__label">휴대폰 번호</label>
              <input className="input is-lg" style={{ height: 44, fontFamily: 'var(--font-mono)', fontSize: 14.5 }} placeholder="010-0000-0000" defaultValue="010-2341-5678" />
            </div>
            <div className="field">
              <label className="field__label" style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>비밀번호</span>
                <a style={{ color: 'var(--accent-default)', fontWeight: 500, fontSize: 12 }} onClick={() => go('teacher-reset')}>비밀번호 재설정</a>
              </label>
              <input className="input is-lg" type="password" style={{ height: 44, fontSize: 14.5 }} defaultValue="••••••••" />
            </div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--text-secondary)', userSelect: 'none', cursor: 'pointer' }}>
              <input type="checkbox" defaultChecked style={{ accentColor: 'var(--accent-default)', width: 16, height: 16 }}/>
              30일 동안 로그인 유지
            </label>
            <button className="btn is-primary is-lg is-block" style={{ marginTop: 4 }} onClick={() => go('app')}>로그인</button>
          </div>
        </div>

        <p style={{ position: 'absolute', bottom: 24, fontSize: 12, color: 'var(--text-tertiary)' }}>
          여기는 <strong style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-mono)' }}>songyui.lessonhigh.com</strong> · 다른 학원이라면 그쪽 주소로 접속해주세요.
        </p>
      </div>
    </BrowserChrome>
  );
}

// ─── S10 · SMS invite (mobile) ────────────────────────────────────────────
function S10_SmsInvite() {
  return (
    <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center', padding: 24 }}>
      <PhoneFrame>
        {/* Messages app header */}
        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-surface)' }}>
          <span style={{ fontSize: 18, color: 'var(--accent-default)' }}>‹</span>
          <div style={{ width: 32, height: 32, background: 'var(--accent-default)', color: 'var(--text-on-accent)', borderRadius: 99, display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13 }}>L</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>LessonHigh</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-tertiary)' }}>010-9001-2345 · LMS</div>
          </div>
        </div>

        {/* Messages thread */}
        <div style={{ flex: 1, padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 12, background: 'var(--bg-canvas)' }}>
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--text-tertiary)' }}>
            오늘 오후 2:14
          </div>

          {/* SMS bubble */}
          <div style={{
            maxWidth: '88%',
            background: 'var(--bg-surface)',
            border: '1px solid var(--border-default)',
            borderRadius: '14px 14px 14px 4px',
            padding: '14px 16px',
            fontSize: 13.5, lineHeight: 1.6,
            color: 'var(--text-primary)',
            boxShadow: 'var(--shadow-xs)',
          }}>
            <strong style={{ display: 'block', marginBottom: 6, fontSize: 13, color: 'var(--accent-default)' }}>
              [송유이 보컬발성클래스]
            </strong>
            박재현님, 강사로 초대합니다.
            <br/><br/>
            아래 링크에서 비밀번호를 정한 뒤 로그인하세요. (24시간 유효)
            <br/><br/>
            <a style={{
              display: 'block',
              fontFamily: 'var(--font-mono)',
              fontSize: 12, color: 'var(--accent-default)',
              wordBreak: 'break-all', textDecoration: 'underline',
            }}>
              songyui.lessonhigh.com/invite/Xa9kQ7vB
            </a>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border-default)', fontSize: 11.5, color: 'var(--text-tertiary)' }}>
              발신자가 의심되면 학원에 직접 확인 후 클릭하세요.
            </div>
          </div>

          <div style={{ marginTop: 'auto', textAlign: 'center', padding: 12, fontSize: 11, color: 'var(--text-tertiary)' }}>
            ↑ 이 링크를 누르면 학원 사이트로 이동합니다
          </div>
        </div>
      </PhoneFrame>
    </div>
  );
}

// ─── S11 · Teacher accepts invite & sets password (mobile) ───────────────
function S11_InviteAccept() {
  const { go } = useFlow();
  return (
    <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center', padding: 24 }}>
      <PhoneFrame>
        {/* Browser bar */}
        <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border-default)', background: 'var(--bg-canvas)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ opacity: 0.5, fontSize: 10 }}>🔒</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            songyui.lessonhigh.com/invite/Xa9kQ7vB
          </span>
        </div>

        {/* Content */}
        <div style={{ flex: 1, padding: '24px 22px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
          <div style={{ marginBottom: 18 }}>
            <WorkspaceBrand name="송유이 보컬발성클래스" slug="songyui" />
          </div>

          <div style={{
            background: 'var(--accent-subtle-bg)',
            borderRadius: 10, padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24,
          }}>
            <div style={{ width: 32, height: 32, borderRadius: 99, background: 'var(--accent-default)', color: 'var(--text-on-accent)', display: 'grid', placeItems: 'center', fontSize: 16 }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.2">
                <path d="M3 7l3 3 5-6"/>
              </svg>
            </div>
            <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.5, color: 'var(--accent-default)' }}>
              <strong>초대 확인됨</strong><br/>
              <span style={{ fontWeight: 500, opacity: 0.85 }}>박재현님, 강사로 초대받았습니다.</span>
            </div>
          </div>

          <h1 style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.014em', margin: '0 0 6px' }}>
            비밀번호를 정해주세요
          </h1>
          <p style={{ fontSize: 12.5, color: 'var(--text-secondary)', margin: '0 0 18px', lineHeight: 1.55 }}>
            앞으로 이 휴대폰 번호와 비밀번호로 로그인합니다.
          </p>

          <div className="field" style={{ marginBottom: 12 }}>
            <label className="field__label">휴대폰 번호</label>
            <input className="input" disabled style={{ fontFamily: 'var(--font-mono)', background: 'var(--bg-subtle)', color: 'var(--text-secondary)', height: 42, fontSize: 14 }} defaultValue="010-2341-5678" />
          </div>
          <div className="field" style={{ marginBottom: 12 }}>
            <label className="field__label">비밀번호</label>
            <input className="input" type="password" style={{ height: 42, fontSize: 14 }} placeholder="8자 이상" />
          </div>
          <div className="field" style={{ marginBottom: 20 }}>
            <label className="field__label">비밀번호 확인</label>
            <input className="input" type="password" style={{ height: 42, fontSize: 14 }} placeholder="한 번 더" />
          </div>

          {/* Password rule chips */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 20 }}>
            {[
              { ok: true,  t: '8자 이상' },
              { ok: true,  t: '영문 포함' },
              { ok: false, t: '숫자 포함' },
              { ok: false, t: '특수문자 권장' },
            ].map((r, i) => (
              <span key={i} style={{
                fontSize: 11, fontWeight: 600,
                padding: '3px 9px', borderRadius: 99,
                background: r.ok ? 'var(--status-success-bg)' : 'var(--bg-subtle)',
                color: r.ok ? 'var(--status-success)' : 'var(--text-tertiary)',
                fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                {r.ok ? '✓' : '·'} {r.t}
              </span>
            ))}
          </div>

          <button className="btn is-primary is-lg is-block" style={{ height: 46, fontSize: 14.5 }} onClick={() => go('app')}>
            가입 완료하고 시작하기
          </button>
          <p style={{ marginTop: 14, fontSize: 11, color: 'var(--text-tertiary)', textAlign: 'center', lineHeight: 1.5 }}>
            계속 진행하면 학원의 이용약관에 동의합니다.<br/>
            이 링크는 받은 지 24시간이 지나면 만료됩니다.
          </p>
        </div>
      </PhoneFrame>
    </div>
  );
}

// ─── S12 · Teacher password reset via SMS code (mobile) ──────────────────
function S12_TeacherReset() {
  const { go } = useFlow();
  return (
    <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center', padding: 24 }}>
      <PhoneFrame>
        <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border-default)', background: 'var(--bg-canvas)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ opacity: 0.5, fontSize: 10 }}>🔒</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-secondary)' }}>
            songyui.lessonhigh.com/forgot
          </span>
        </div>

        <div style={{ flex: 1, padding: '24px 22px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
          <div style={{ marginBottom: 20 }}>
            <WorkspaceBrand name="송유이 보컬발성클래스" slug="songyui" />
          </div>

          <h1 style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.014em', margin: '0 0 8px' }}>
            비밀번호 재설정
          </h1>
          <p style={{ fontSize: 13, color: 'var(--text-secondary)', margin: '0 0 22px', lineHeight: 1.55 }}>
            가입할 때 등록한 휴대폰 번호로 인증번호를 보내드려요.
          </p>

          <div className="field" style={{ marginBottom: 14 }}>
            <label className="field__label">휴대폰 번호</label>
            <div style={{ display: 'flex', gap: 8 }}>
              <input className="input" style={{ flex: 1, fontFamily: 'var(--font-mono)', height: 44, fontSize: 14 }} defaultValue="010-2341-5678" />
              <button className="btn is-secondary" style={{ height: 44, whiteSpace: 'nowrap' }}>인증번호 받기</button>
            </div>
          </div>

          {/* Active code input state */}
          <div className="field" style={{ marginBottom: 6 }}>
            <label className="field__label" style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span>인증번호</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--status-warning)' }}>2:43 남음</span>
            </label>
            <div style={{ display: 'flex', gap: 6 }}>
              {['4', '7', '2', '1', '', ''].map((d, i) => (
                <input key={i} className="input" defaultValue={d} maxLength={1} style={{
                  flex: 1, textAlign: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 600,
                  height: 52, padding: 0,
                  borderColor: d ? 'var(--accent-default)' : 'var(--border-default)',
                }}/>
              ))}
            </div>
          </div>
          <button className="btn is-ghost is-sm" style={{ alignSelf: 'flex-start', marginBottom: 18, fontSize: 12 }}>
            인증번호 재발송
          </button>

          <button className="btn is-primary is-lg is-block" style={{ height: 46, fontSize: 14.5 }} onClick={() => go('teacher-login')}>
            확인하고 비밀번호 변경
          </button>

          <p style={{ marginTop: 18, fontSize: 11.5, color: 'var(--text-tertiary)', textAlign: 'center', lineHeight: 1.5 }}>
            번호를 잊으셨다면 학원 원장께 직접 문의해주세요.<br/>
            보안을 위해 SMS 채널 외에는 변경할 수 없어요.
          </p>
        </div>
      </PhoneFrame>
    </div>
  );
}

// ─── S13 · Workspace not found (404 for unknown slug) ────────────────────
function S13_WorkspaceNotFound() {
  const { go } = useFlow();
  return (
    <BrowserChrome url="https://unknown-studio.lessonhigh.com">
      <div style={{ height: '100%', background: 'var(--bg-canvas)', display: 'grid', placeItems: 'center', padding: 24 }}>
        <div style={{ width: 480, textAlign: 'center' }}>
          <div style={{
            width: 56, height: 56, margin: '0 auto 20px',
            background: 'var(--bg-subtle)', borderRadius: 99,
            display: 'grid', placeItems: 'center',
            color: 'var(--text-tertiary)',
          }}>
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="currentColor" strokeWidth="1.8">
              <circle cx="13" cy="13" r="10"/>
              <path d="M9 13h8M13 9v8"/>
            </svg>
          </div>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--text-tertiary)', margin: '0 0 8px' }}>
            404 · WORKSPACE NOT FOUND
          </p>
          <h1 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.018em', margin: '0 0 12px' }}>
            이 주소의 학원을 찾을 수 없어요
          </h1>
          <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '0 0 28px', lineHeight: 1.6 }}>
            <span style={{ fontFamily: 'var(--font-mono)', background: 'var(--bg-subtle)', padding: '2px 8px', borderRadius: 4, color: 'var(--text-primary)' }}>unknown-studio.lessonhigh.com</span>{' '}
            는 등록된 워크스페이스가 아닙니다.<br/>
            오타가 있는지, 또는 학원 측에서 주소를 바꿨는지 확인해주세요.
          </p>

          <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
            <button className="btn is-primary is-lg" style={{ minWidth: 160 }} onClick={() => go('landing')}>LessonHigh로 가기</button>
            <button className="btn is-lg" style={{ minWidth: 160 }}>원장에게 문의</button>
          </div>

          <div style={{
            marginTop: 40, padding: '14px 18px',
            background: 'var(--bg-surface)', border: '1px solid var(--border-default)', borderRadius: 8,
            fontSize: 12.5, color: 'var(--text-secondary)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
          }}>
            <span>원장이신가요? 슬러그를 잊으셨다면 가입했던 이메일로 찾을 수 있어요.</span>
            <a style={{ color: 'var(--accent-default)', fontWeight: 600, whiteSpace: 'nowrap' }}>워크스페이스 찾기 →</a>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

Object.assign(window, { S9_TeacherLogin, S10_SmsInvite, S11_InviteAccept, S12_TeacherReset, S13_WorkspaceNotFound });