// Shared UI primitives for Lumen app
// Uses LUMEN_TOKENS, LUMEN_FONTS, Icon from window

const useT = (dark) => (dark ? LUMEN_TOKENS.dark : LUMEN_TOKENS.light);

// ═══════════════════════════════════════════════════════════
// App shell — status bar + content + tab bar
// ═══════════════════════════════════════════════════════════
function AppShell({ dark, children, tab, setTab, hideTabBar = false }) {
  const t = useT(dark);
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative',
      background: t.bg, overflow: 'hidden',
      fontFamily: LUMEN_FONTS.sans, color: t.text,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* iOS status bar overlay */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 40 }}>
        <IOSStatusBar dark={dark} />
      </div>

      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>

      {!hideTabBar && <TabBar dark={dark} active={tab} onTab={setTab} />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// Tab bar
// ═══════════════════════════════════════════════════════════
function TabBar({ dark, active, onTab }) {
  const t = useT(dark);
  const tabs = [
    { id: 'home', label: 'Início', icon: 'home' },
    { id: 'exams', label: 'Exames', icon: 'calendar' },
    { id: 'results', label: 'Resultados', icon: 'doc' },
    { id: 'profile', label: 'Perfil', icon: 'user' },
  ];
  return (
    <div style={{
      position: 'relative', zIndex: 20,
      background: t.surface,
      borderTop: `0.5px solid ${t.border}`,
      paddingBottom: 30,
      display: 'flex', justifyContent: 'space-around',
      paddingTop: 10,
    }}>
      {tabs.map(tb => {
        const on = tb.id === active;
        return (
          <button key={tb.id} onClick={() => onTab(tb.id)} style={{
            background: 'transparent', border: 'none', padding: '6px 12px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            cursor: 'pointer', color: on ? t.accent : t.textSubtle,
            fontFamily: LUMEN_FONTS.sans,
          }}>
            <Icon name={tb.icon} size={24} strokeWidth={on ? 2 : 1.6} />
            <span style={{ fontSize: 10.5, fontWeight: on ? 600 : 500, letterSpacing: 0.1 }}>{tb.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// Screen container with scroll
// ═══════════════════════════════════════════════════════════
function Screen({ children, dark, pad = true, statusPad = true }) {
  const t = useT(dark);
  return (
    <div style={{
      height: '100%', overflowY: 'auto', overflowX: 'hidden',
      background: t.bg,
      paddingTop: statusPad ? 62 : 0,
      paddingLeft: pad ? 20 : 0, paddingRight: pad ? 20 : 0,
      paddingBottom: 24,
    }}>
      {children}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// Screen header (não-home)
// ═══════════════════════════════════════════════════════════
function ScreenHeader({ dark, title, onBack, trailing, subtitle }) {
  const t = useT(dark);
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        {onBack ? (
          <button onClick={onBack} style={{
            width: 38, height: 38, borderRadius: 99, border: 'none',
            background: t.surface, boxShadow: `0 1px 2px ${t.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            color: t.text,
          }}>
            <Icon name="chevron" size={18} />
            <span style={{ display: 'none' }}>Voltar</span>
            <div style={{ transform: 'rotate(180deg)', display: 'flex' }}></div>
          </button>
        ) : <div style={{ width: 38 }} />}
        <div style={{ flex: 1 }} />
        {trailing || <div style={{ width: 38 }} />}
      </div>
      <h1 style={{
        fontFamily: LUMEN_FONTS.serif, fontWeight: 400,
        fontSize: 38, lineHeight: 1.05, margin: 0, color: t.text,
        letterSpacing: -0.5,
      }}>{title}</h1>
      {subtitle && (
        <div style={{ marginTop: 8, color: t.textMuted, fontSize: 15, lineHeight: 1.4 }}>{subtitle}</div>
      )}
    </div>
  );
}

function BackButton({ dark, onClick }) {
  const t = useT(dark);
  return (
    <button onClick={onClick} style={{
      width: 38, height: 38, borderRadius: 99, border: 'none',
      background: t.surface, boxShadow: `0 1px 2px ${t.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
      color: t.text,
    }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M15 6l-6 6 6 6"/>
      </svg>
    </button>
  );
}

// ═══════════════════════════════════════════════════════════
// Button
// ═══════════════════════════════════════════════════════════
function Button({ dark, children, onClick, variant = 'primary', size = 'md', full = false, icon, disabled }) {
  const t = useT(dark);
  const variants = {
    primary: { bg: t.accent, color: '#FFF4E6', border: 'transparent' },
    secondary: { bg: t.surface, color: t.text, border: t.borderStrong },
    ghost: { bg: 'transparent', color: t.accent, border: 'transparent' },
    dark: { bg: t.queueBg, color: t.queueText, border: 'transparent' },
  };
  const v = variants[variant];
  const h = size === 'lg' ? 56 : size === 'sm' ? 36 : 48;
  return (
    <button onClick={onClick} disabled={disabled} style={{
      height: h, padding: size === 'sm' ? '0 16px' : '0 22px',
      borderRadius: 99,
      background: v.bg, color: v.color, border: `1px solid ${v.border}`,
      fontFamily: LUMEN_FONTS.sans, fontWeight: 500, fontSize: size === 'sm' ? 14 : 16,
      letterSpacing: -0.1, cursor: disabled ? 'not-allowed' : 'pointer',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      width: full ? '100%' : undefined,
      opacity: disabled ? 0.45 : 1,
      transition: 'transform 0.1s',
    }}>
      {icon && <Icon name={icon} size={size === 'sm' ? 16 : 18} />}
      {children}
    </button>
  );
}

// ═══════════════════════════════════════════════════════════
// Card
// ═══════════════════════════════════════════════════════════
function Card({ dark, children, onClick, padding = 18, style = {}, tone = 'default' }) {
  const t = useT(dark);
  const tones = {
    default: { bg: t.surface, border: t.border },
    sunken: { bg: t.surfaceAlt, border: t.border },
    accent: { bg: t.accentBg, border: 'transparent' },
    sage: { bg: t.sageBg, border: 'transparent' },
    dark: { bg: t.queueBg, border: 'transparent', color: t.queueText },
  };
  const tt = tones[tone];
  return (
    <div onClick={onClick} style={{
      background: tt.bg,
      border: `1px solid ${tt.border}`,
      borderRadius: 22,
      padding,
      cursor: onClick ? 'pointer' : 'default',
      color: tt.color,
      ...style,
    }}>
      {children}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// Exam-type circular badge
// ═══════════════════════════════════════════════════════════
function ExamBadge({ icon, dark, size = 44, tone = 'accent' }) {
  const t = useT(dark);
  const tones = {
    accent: { bg: t.accentBg, fg: t.accent },
    sage: { bg: t.sageBg, fg: t.sage },
    muted: { bg: t.surfaceAlt, fg: t.textMuted },
  };
  const tt = tones[tone];
  return (
    <div style={{
      width: size, height: size, borderRadius: size / 2,
      background: tt.bg, color: tt.fg,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <Icon name={icon} size={Math.round(size * 0.5)} strokeWidth={1.7} />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// Section label
// ═══════════════════════════════════════════════════════════
function SectionLabel({ dark, children, action }) {
  const t = useT(dark);
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      marginTop: 24, marginBottom: 10,
    }}>
      <h2 style={{
        margin: 0, fontSize: 13, fontWeight: 600, letterSpacing: 0.6,
        textTransform: 'uppercase', color: t.textMuted,
      }}>{children}</h2>
      {action && (
        <button onClick={action.onClick} style={{
          background: 'transparent', border: 'none', color: t.accent,
          fontSize: 14, fontWeight: 500, cursor: 'pointer', padding: 0,
          fontFamily: LUMEN_FONTS.sans,
        }}>{action.label}</button>
      )}
    </div>
  );
}

Object.assign(window, {
  useT, AppShell, TabBar, Screen, ScreenHeader, BackButton,
  Button, Card, ExamBadge, SectionLabel,
});