// shell.jsx — As It Happens shared components

// Custom status bar — overrides the iOS frame default to use navy/cream tone
function PaperStatusBar({ dark = false, time = '9:41' }) {
  const c = dark ? '#F5F1E8' : '#0A1B2E';
  return (
    <div style={{
      display: 'flex', gap: 154, alignItems: 'center', justifyContent: 'center',
      padding: '21px 24px 19px', boxSizing: 'border-box',
      position: 'relative', zIndex: 20, width: '100%',
    }}>
      <div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{
          fontFamily: '-apple-system, "SF Pro", system-ui', fontWeight: 600,
          fontSize: 17, lineHeight: '22px', color: c,
        }}>{time}</span>
      </div>
      <div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
        <svg width="19" height="12" viewBox="0 0 19 12">
          <rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={c}/>
          <rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={c}/>
          <rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={c}/>
          <rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={c}/>
        </svg>
        <svg width="17" height="12" viewBox="0 0 17 12">
          <path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={c}/>
          <path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={c}/>
          <circle cx="8.5" cy="10.5" r="1.5" fill={c}/>
        </svg>
        <svg width="27" height="13" viewBox="0 0 27 13">
          <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.4" fill="none"/>
          <rect x="2" y="2" width="20" height="9" rx="2" fill={c}/>
          <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={c} fillOpacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

// The phone frame — paper background, custom status bar, optional dark
function PhoneFrame({ children, dark = false, width = 393, height = 852 }) {
  const bg = dark ? '#0A1B2E' : '#F5F1E8';
  return (
    <div style={{
      width, height, borderRadius: 48, overflow: 'hidden',
      position: 'relative', background: bg,
      boxShadow: '0 30px 60px rgba(10,27,46,0.18), 0 0 0 1px rgba(10,27,46,0.18), 0 0 0 8px #1a1a1a',
      fontFamily: 'var(--sans)',
      WebkitFontSmoothing: 'antialiased',
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
      }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
        <PaperStatusBar dark={dark} />
      </div>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', position: 'relative', minHeight: 0 }}>
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
        height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
        paddingBottom: 8, pointerEvents: 'none',
      }}>
        <div style={{
          width: 139, height: 5, borderRadius: 100,
          background: dark ? 'rgba(245,241,232,0.7)' : 'rgba(10,27,46,0.32)',
        }} />
      </div>
    </div>
  );
}

// Top bar with back button and small title (used inside screens)
function TopBar({ left, right, title, subtitle, dark = false }) {
  const fg = dark ? '#F5F1E8' : '#0A1B2E';
  const sub = dark ? 'rgba(245,241,232,0.6)' : 'var(--slate-70)';
  return (
    <div style={{
      paddingTop: 56, paddingBottom: 14,
      paddingLeft: 20, paddingRight: 20,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{ width: 44, display: 'flex', justifyContent: 'flex-start' }}>
        {left}
      </div>
      <div style={{ flex: 1, textAlign: 'center', color: fg, lineHeight: 1.1 }}>
        {title && <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.1 }}>{title}</div>}
        {subtitle && <div className="mono" style={{ fontSize: 10, color: sub, marginTop: 2, letterSpacing: 0.05 }}>{subtitle}</div>}
      </div>
      <div style={{ width: 44, display: 'flex', justifyContent: 'flex-end' }}>
        {right}
      </div>
    </div>
  );
}

// Round icon button (back arrow etc.)
function IconBtn({ onClick, children, dark = false }) {
  return (
    <button onClick={onClick} className="press" style={{
      width: 36, height: 36, borderRadius: 18, border: 'none',
      background: dark ? 'rgba(245,241,232,0.08)' : 'rgba(10,27,46,0.05)',
      color: dark ? '#F5F1E8' : '#0A1B2E',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer',
    }}>{children}</button>
  );
}

// Bottom tab bar — five-screen nav across home/records/export/settings
function TabBar({ active, onNav }) {
  const tabs = [
    { id: 'home', icon: IconHouse, label: 'Home' },
    { id: 'records', icon: IconArchive, label: 'Records' },
    { id: 'export', icon: IconExport, label: 'Export' },
    { id: 'settings', icon: IconGear, label: 'Settings' },
  ];
  return (
    <div style={{
      borderTop: '1px solid var(--hairline)',
      background: 'rgba(245,241,232,0.92)',
      backdropFilter: 'blur(20px) saturate(140%)',
      WebkitBackdropFilter: 'blur(20px) saturate(140%)',
      paddingTop: 8, paddingBottom: 28,
      display: 'flex', justifyContent: 'space-around',
    }}>
      {tabs.map(t => {
        const Icon = t.icon;
        const isActive = active === t.id;
        const color = isActive ? 'var(--navy)' : 'var(--slate-70)';
        return (
          <button key={t.id} onClick={() => onNav && onNav(t.id)} className="press" style={{
            border: 'none', background: 'transparent',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            padding: '4px 12px', cursor: 'pointer', color,
            fontFamily: 'var(--sans)', fontSize: 10, fontWeight: 500, letterSpacing: 0.2,
          }}>
            <Icon size={22} color={color} />
            <span>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// Annotation pin — uses --show-annotations to toggle
function Anno({ children, top, left, right, bottom, side = 'tl' }) {
  return (
    <div className="anno" style={{
      position: 'absolute', top, left, right, bottom, zIndex: 90,
      display: 'var(--anno-display, none)',
    }}>
      <div className={`anno-pin ${side}`} style={{ position: 'static' }}>
        {children}
      </div>
    </div>
  );
}

// Tag chip
function Chip({ children, selected = false, onClick, mono = false, dark = false, color }) {
  const isAccent = color === 'teal';
  const baseBg = dark ? 'rgba(245,241,232,0.06)' : 'rgba(10,27,46,0.04)';
  const baseBorder = dark ? 'rgba(245,241,232,0.18)' : 'var(--navy-12)';
  const baseFg = dark ? 'rgba(245,241,232,0.85)' : 'var(--navy)';
  return (
    <button onClick={onClick} className="press" style={{
      border: `1px solid ${selected ? 'var(--teal)' : baseBorder}`,
      background: selected ? 'var(--teal-12)' : (isAccent ? 'var(--teal-08)' : baseBg),
      color: selected ? 'var(--teal)' : baseFg,
      borderRadius: 999,
      padding: '7px 12px',
      fontSize: 13,
      fontFamily: mono ? 'var(--mono)' : 'var(--sans)',
      fontWeight: selected ? 600 : 500,
      letterSpacing: -0.1,
      cursor: 'pointer',
      whiteSpace: 'nowrap',
    }}>{children}</button>
  );
}

// Static waveform — N bars, animation controlled by `playing`
function Waveform({ bars = 36, color = 'var(--teal)', height = 56, playing = true, seed = 1 }) {
  // pseudorandom heights based on seed for reproducibility
  const heights = React.useMemo(() => {
    const arr = [];
    let s = seed;
    for (let i = 0; i < bars; i++) {
      s = (s * 9301 + 49297) % 233280;
      const r = s / 233280;
      // give an envelope so middle bars are taller
      const env = 0.5 + 0.5 * Math.sin((i / bars) * Math.PI);
      arr.push(0.25 + r * 0.6 * env + 0.15 * env);
    }
    return arr;
  }, [bars, seed]);
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      gap: 3, height, width: '100%',
    }}>
      {heights.map((h, i) => (
        <div key={i} style={{
          width: 3, height: '100%',
          background: color,
          borderRadius: 2,
          transformOrigin: 'center',
          transform: `scaleY(${h})`,
          animation: playing ? `wave-pulse ${1.4 + (i % 5) * 0.18}s ease-in-out ${i * 0.04}s infinite` : 'none',
          opacity: playing ? 0.95 : 0.7,
        }} />
      ))}
    </div>
  );
}

// Type-icon used in record cards & rows. Documentary, not surveillance.
function TypeGlyph({ type, size = 18, color = 'var(--navy)' }) {
  switch (type) {
    case 'incident':  return <IconWarn size={size} color={color} />;
    case 'symptom':   return <IconWaveform size={size} color={color} />;
    case 'exposure':  return <IconLocation size={size} color={color} />;
    case 'reporting': return <IconDoc size={size} color={color} />;
    case 'trigger':   return <IconClock size={size} color={color} />;
    default:          return <IconDoc size={size} color={color} />;
  }
}

Object.assign(window, {
  PaperStatusBar, PhoneFrame, TopBar, IconBtn, TabBar, Anno, Chip, Waveform, TypeGlyph,
});