/* global React */

// ============================================================================
// LessonHigh · Auth & Onboarding — shared components
// All artboards share the Warm Admin design tokens from styles.css
// ============================================================================

// ─── Wordmark ──────────────────────────────────────────────────────────────
function Wordmark({ size = 22 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <div style={{
        width: size, height: size,
        background: 'var(--accent-default)',
        color: 'var(--text-on-accent)',
        display: 'grid', placeItems: 'center',
        borderRadius: 5,
        fontFamily: 'var(--font-mono)', fontSize: size * 0.55, fontWeight: 700,
      }}>L</div>
      <span style={{ fontWeight: 600, letterSpacing: '-0.012em', fontSize: size * 0.72 }}>
        LessonHigh
      </span>
    </div>
  );
}

// ─── Workspace brand row (for tenant pages) ────────────────────────────────
function WorkspaceBrand({ name = '송유이보컬발성클래스', slug = 'songyui' }) {
  // Deterministic monogram from name
  const initial = name.slice(0, 1);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: 44, height: 44,
        background: 'var(--accent-subtle-bg)',
        color: 'var(--accent-default)',
        display: 'grid', placeItems: 'center',
        borderRadius: 10,
        fontWeight: 700, fontSize: 18, letterSpacing: '-0.02em',
      }}>{initial}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{ fontWeight: 600, fontSize: 16, letterSpacing: '-0.012em' }}>{name}</span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: 'var(--text-tertiary)', letterSpacing: '0.01em',
        }}>{slug}.lessonhigh.com</span>
      </div>
    </div>
  );
}

// ─── Browser chrome — for showing the URL context ──────────────────────────
function BrowserChrome({ url, children, dark = false }) {
  return (
    <div style={{
      borderRadius: 10,
      border: '1px solid var(--border-default)',
      background: 'var(--bg-surface)',
      overflow: 'hidden',
      height: '100%',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        height: 36, flexShrink: 0,
        background: dark ? '#1C1B19' : 'var(--bg-canvas)',
        borderBottom: '1px solid var(--border-default)',
        display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 99, background: dark ? '#3a3934' : '#E5E1D8' }} />
          <div style={{ width: 10, height: 10, borderRadius: 99, background: dark ? '#3a3934' : '#E5E1D8' }} />
          <div style={{ width: 10, height: 10, borderRadius: 99, background: dark ? '#3a3934' : '#E5E1D8' }} />
        </div>
        <div style={{
          flex: 1,
          height: 22,
          background: dark ? '#2a2925' : 'var(--bg-surface)',
          borderRadius: 5,
          display: 'flex', alignItems: 'center', padding: '0 10px',
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: dark ? '#8A8780' : 'var(--text-secondary)',
          letterSpacing: '0.01em',
        }}>
          <span style={{ opacity: 0.6, marginRight: 4 }}>🔒</span>
          {url}
        </div>
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>{children}</div>
    </div>
  );
}

// ─── Phone frame — for mobile mockups ─────────────────────────────────────
function PhoneFrame({ children, statusBarText = '9:41' }) {
  return (
    <div style={{
      width: 380, height: 760,
      borderRadius: 36,
      border: '8px solid #1C1B19',
      background: '#000',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      boxShadow: 'var(--shadow-lg)',
    }}>
      {/* Status bar */}
      <div style={{
        height: 36, flexShrink: 0,
        background: 'var(--bg-canvas)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '0 20px',
        fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
        position: 'relative', zIndex: 2,
      }}>
        <span style={{ fontVariantNumeric: 'tabular-nums' }}>{statusBarText}</span>
        <div style={{
          position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
          width: 110, height: 26, background: '#000', borderRadius: '0 0 14px 14px',
        }} />
        <div style={{ display: 'flex', gap: 5, alignItems: 'center', fontSize: 12 }}>
          <span style={{ fontSize: 10 }}>●●●●</span>
          <span style={{
            display: 'inline-block', width: 22, height: 11,
            border: '1.5px solid currentColor', borderRadius: 3,
            position: 'relative',
          }}>
            <span style={{
              position: 'absolute', inset: 1, width: '85%',
              background: 'currentColor', borderRadius: 1,
            }} />
          </span>
        </div>
      </div>
      <div style={{
        flex: 1, background: 'var(--bg-canvas)',
        overflow: 'hidden', display: 'flex', flexDirection: 'column',
      }}>
        {children}
      </div>
    </div>
  );
}

// ─── IdP buttons (Google / Kakao) ──────────────────────────────────────────
function IdPButton({ provider, onClick }) {
  if (provider === 'google') {
    return (
      <button className="btn is-block is-lg" style={{
        background: 'var(--bg-surface)',
        border: '1px solid var(--border-default)',
        color: 'var(--text-primary)',
        height: 48,
        gap: 12,
        fontSize: 15, fontWeight: 600,
      }} onClick={onClick}>
        {/* simplified G mark; real product swaps for official asset */}
        <span style={{
          width: 20, height: 20, borderRadius: 4,
          background: 'conic-gradient(from 0deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg)',
          display: 'grid', placeItems: 'center',
          color: '#fff', fontWeight: 700, fontSize: 12,
          fontFamily: 'var(--font-sans)',
        }}>G</span>
        Google로 계속하기
      </button>
    );
  }
  if (provider === 'kakao') {
    return (
      <button className="btn is-block is-lg" style={{
        background: '#FEE500',
        border: '1px solid #FEE500',
        color: '#191919',
        height: 48,
        gap: 12,
        fontSize: 15, fontWeight: 600,
      }} onClick={onClick}>
        <span style={{
          width: 20, height: 16, borderRadius: '50%/55%',
          background: '#191919',
          display: 'grid', placeItems: 'center',
          color: '#FEE500', fontSize: 11, fontWeight: 800,
          letterSpacing: '-0.02em',
        }}>K</span>
        카카오로 계속하기
      </button>
    );
  }
  if (provider === 'email') {
    return (
      <button className="btn is-block is-lg" style={{
        background: 'transparent',
        border: '1px solid var(--border-default)',
        color: 'var(--text-primary)',
        height: 48,
        gap: 12,
        fontSize: 15, fontWeight: 600,
      }} onClick={onClick}>
        <span style={{
          width: 20, height: 20, display: 'grid', placeItems: 'center',
          color: 'var(--text-secondary)',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <rect x="3" y="5" width="18" height="14" rx="2"/>
            <path d="M3 7l9 6 9-6"/>
          </svg>
        </span>
        이메일로 계속하기
      </button>
    );
  }
  return null;
}

// ─── Image-style placeholder strip ─────────────────────────────────────────
function PlaceholderStrip({ label, height = 80, color = 'var(--bg-subtle)' }) {
  return (
    <div style={{
      height,
      background: `repeating-linear-gradient(45deg, ${color}, ${color} 12px, transparent 12px, transparent 22px)`,
      border: '1px dashed var(--border-strong)',
      borderRadius: 6,
      display: 'grid', placeItems: 'center',
      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em',
      color: 'var(--text-tertiary)',
    }}>
      {label}
    </div>
  );
}

// ─── Wizard stepper ────────────────────────────────────────────────────────
function WizardStepper({ steps, current }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {steps.map((s, i) => {
        const done = i < current;
        const active = i === current;
        return (
          <React.Fragment key={i}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 22, height: 22, borderRadius: 99,
                background: done ? 'var(--accent-default)' : active ? 'var(--bg-surface)' : 'var(--bg-subtle)',
                border: active ? '1.5px solid var(--accent-default)' : 'none',
                color: done ? 'var(--text-on-accent)' : active ? 'var(--accent-default)' : 'var(--text-tertiary)',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
              }}>
                {done ? (
                  <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.2">
                    <path d="M2.5 6.5l2.5 2.5 4.5-5"/>
                  </svg>
                ) : (i + 1)}
              </div>
              <span style={{
                fontSize: 13, fontWeight: active ? 600 : 500,
                color: active ? 'var(--text-primary)' : done ? 'var(--text-secondary)' : 'var(--text-tertiary)',
                letterSpacing: '-0.005em',
              }}>{s}</span>
            </div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: 1, minWidth: 24,
                background: done ? 'var(--accent-default)' : 'var(--border-default)',
              }} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ─── Slug status pill ──────────────────────────────────────────────────────
function SlugStatus({ kind, text }) {
  const palette = {
    ok:      { bg: 'var(--status-success-bg)', fg: 'var(--status-success)' },
    warn:    { bg: 'var(--status-warning-bg)', fg: 'var(--status-warning)' },
    err:     { bg: 'var(--status-danger-bg)',  fg: 'var(--status-danger)' },
    check:   { bg: 'var(--bg-subtle)',         fg: 'var(--text-secondary)' },
  }[kind] || { bg: 'var(--bg-subtle)', fg: 'var(--text-tertiary)' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontSize: 12, fontWeight: 600,
      padding: '4px 10px', borderRadius: 99,
      background: palette.bg, color: palette.fg,
      fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 99, background: palette.fg,
      }} />
      {text}
    </span>
  );
}

Object.assign(window, {
  Wordmark, WorkspaceBrand, BrowserChrome, PhoneFrame,
  IdPButton, PlaceholderStrip, WizardStepper, SlugStatus,
});

// ─── Flow context — wires CTAs to a navigation function ───────────────────
// In the live prototype (index.html), an AuthGate wraps everything and
// provides a real `go(name)` function. In the design canvas (Auth & Onboarding.html)
// there is no provider, so calls fall back to a no-op and screens render statically.
const FlowContext = React.createContext(null);
function useFlow() {
  return React.useContext(FlowContext) || {
    go: () => {}, back: () => {}, reset: () => {},
    state: {}, setState: () => {},
  };
}
Object.assign(window, { FlowContext, useFlow });