// status.jsx — demo status registry + badges + welcome overlay + WIP watermark

const SCREEN_STATUS = {
  // READY — fully built, explore freely
  'home':           { status: 'ready' },
  'next-workout':   { status: 'ready' },
  'main-sets':      { status: 'ready', note: 'New circuit-centric design' },
  'pre-workout':    { status: 'ready' },
  'feedback':       { status: 'ready' },
  // WIP — visible but rough
  'section-warmup': { status: 'wip', note: 'Still exercise-list pattern. Will move to circuits.' },
  'section-cool':   { status: 'wip', note: 'Still exercise-list pattern. Will move to circuits.' },
  'section-post':   { status: 'wip', note: 'Still exercise-list pattern. Will move to circuits.' },
  'exercise':       { status: 'wip', note: 'Detail screen — secondary route. Most logging happens inline.' },
  'assessments':    { status: 'wip' },
  'workout-history':{ status: 'wip' },
  'health-history': { status: 'wip' },
  'goals':          { status: 'wip' },
  // STUB
  'pay':            { status: 'stub' },
  'calendar':       { status: 'stub' },
  'add':            { status: 'stub' },
};

const STATUS_META = {
  ready: { label: 'READY',  bg: '#2E7D32', fg: '#fff' },
  wip:   { label: 'WIP',    bg: '#E8830B', fg: '#fff' },
  stub:  { label: 'STUB',   bg: '#9CA3AF', fg: '#fff' },
};

function StatusBadge({ status, size = 'sm', style }) {
  if (!status) return null;
  const m = STATUS_META[status];
  if (!m) return null;
  const small = size === 'sm';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      padding: small ? '2px 6px' : '3px 8px',
      borderRadius: 4,
      background: m.bg, color: m.fg,
      fontFamily: 'JetBrains Mono, ui-monospace, monospace',
      fontSize: small ? 8 : 10, fontWeight: 700,
      letterSpacing: 0.6,
      lineHeight: 1,
      ...style,
    }}>{m.label}</span>
  );
}

function statusFor(routeName) {
  return SCREEN_STATUS[routeName]?.status || null;
}

// ─── Welcome overlay (one-time) ───────────────────────────────────────────
function WelcomeOverlay({ theme, onClose }) {
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 500,
      background: 'rgba(10,5,3,0.72)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
      backdropFilter: 'blur(4px)',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: theme.bg, color: theme.text,
        borderRadius: 16, padding: 24, maxWidth: 320,
        boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
        border: `1px solid ${theme.border}`,
      }}>
        <div style={{
          fontFamily: theme.displayFamily, fontSize: 22, fontWeight: 600,
          marginBottom: 6, lineHeight: 1.15,
        }}>Welcome, Mike 👋</div>
        <div style={{ fontFamily: theme.uiFamily, fontSize: 13, color: theme.muted, lineHeight: 1.5, marginBottom: 18 }}>
          This is a click-through prototype. Tap around — but expect rough edges. Look for these tags so you know what's real:
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
          <LegendRow status="ready" desc="Built — feedback welcome" theme={theme}/>
          <LegendRow status="wip"   desc="Rough — design in progress" theme={theme}/>
          <LegendRow status="stub"  desc="Placeholder — don't bother" theme={theme}/>
        </div>

        <div style={{
          fontFamily: theme.uiFamily, fontSize: 11, color: theme.muted,
          padding: 10, borderRadius: 8,
          background: theme.isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)',
          marginBottom: 16, lineHeight: 1.45,
        }}>
          <strong style={{ color: theme.text }}>Try this first:</strong> Today's Workout → Main Sets. The new circuit-grouped design is the headline. Toggle Basic/Detailed in the top-right.
        </div>

        <button onClick={onClose} style={{
          width: '100%', padding: '12px 16px', borderRadius: 10,
          background: theme.primary, color: theme.primaryInk,
          border: 'none', cursor: 'pointer',
          fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600,
        }}>Let's go</button>
      </div>
    </div>
  );
}

function LegendRow({ status, desc, theme }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <StatusBadge status={status}/>
      <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.text }}>{desc}</div>
    </div>
  );
}

// ─── WIP watermark (subtle stripe behind the screen) ──────────────────────
function WipWatermark({ status }) {
  if (status !== 'wip') return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
      backgroundImage: 'repeating-linear-gradient(45deg, rgba(232,131,11,0.045) 0 20px, transparent 20px 40px)',
    }}/>
  );
}

// ─── Stub "coming soon" sheet ─────────────────────────────────────────────
function StubSheet({ theme, label, onClose }) {
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 400,
      background: 'rgba(10,5,3,0.55)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', background: theme.bg,
        borderTopLeftRadius: 18, borderTopRightRadius: 18,
        padding: '20px 22px 28px',
        borderTop: `1px solid ${theme.border}`,
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 9999, background: theme.border, margin: '0 auto 16px' }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <StatusBadge status="stub" size="md"/>
          <div style={{ fontFamily: theme.uiFamily, fontSize: 11, color: theme.muted, textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Not built yet</div>
        </div>
        <div style={{ fontFamily: theme.displayFamily, fontSize: 20, fontWeight: 600, color: theme.text, marginBottom: 6 }}>
          {label}
        </div>
        <div style={{ fontFamily: theme.uiFamily, fontSize: 13, color: theme.muted, lineHeight: 1.5, marginBottom: 18 }}>
          This is a placeholder for the demo. We'll design it together once the core flow is locked in.
        </div>
        <button onClick={onClose} style={{
          width: '100%', padding: '11px 16px', borderRadius: 10,
          background: theme.primary, color: theme.primaryInk,
          border: 'none', cursor: 'pointer',
          fontFamily: theme.uiFamily, fontSize: 13, fontWeight: 600,
        }}>Got it</button>
      </div>
    </div>
  );
}

Object.assign(window, { SCREEN_STATUS, STATUS_META, StatusBadge, statusFor, WelcomeOverlay, WipWatermark, StubSheet });