/* Poise UI kit - device shell: iOS frame, status bar, bottom tab bar. */

const { IconActivity, IconTrend, IconPlay, IconSettings } = window;

function StatusBar({ dark = true }) {
  const fg = 'var(--text-primary)';
  return (
    <div style={{
      height: 54, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      padding: '0 28px 10px', flexShrink: 0, color: fg, fontFamily: 'var(--font-sans)',
    }}>
      <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: '0.02em' }}>11:08</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        {/* signal */}
        <svg width="18" height="12" viewBox="0 0 18 12" fill={fg} aria-hidden="true">
          <rect x="0" y="8" width="3" height="4" rx="1"></rect>
          <rect x="5" y="5.5" width="3" height="6.5" rx="1"></rect>
          <rect x="10" y="3" width="3" height="9" rx="1"></rect>
          <rect x="15" y="0.5" width="3" height="11.5" rx="1"></rect>
        </svg>
        {/* wifi */}
        <svg width="17" height="12" viewBox="0 0 17 12" fill="none" stroke={fg} strokeWidth="1.6" strokeLinecap="round" aria-hidden="true">
          <path d="M1 4.2a11 11 0 0 1 15 0" opacity="0.9"></path>
          <path d="M3.5 6.8a7 7 0 0 1 10 0" opacity="0.9"></path>
          <circle cx="8.5" cy="9.7" r="1.1" fill={fg} stroke="none"></circle>
        </svg>
        {/* battery */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <div style={{ width: 24, height: 12, borderRadius: 3, border: `1.4px solid ${fg}`, opacity: 0.5, padding: 1.5, boxSizing: 'border-box' }}>
            <div style={{ width: '80%', height: '100%', borderRadius: 1, background: fg }}></div>
          </div>
          <div style={{ width: 1.5, height: 4, background: fg, opacity: 0.5, borderRadius: 1 }}></div>
        </div>
      </div>
    </div>
  );
}

const TABS = [
  { id: 'home', label: 'Today', Icon: IconActivity },
  { id: 'trends', label: 'Trends', Icon: IconTrend },
  { id: 'session', label: 'Session', Icon: IconPlay },
  { id: 'settings', label: 'Settings', Icon: IconSettings },
];

function TabBar({ active, onChange }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      paddingBottom: 22, paddingTop: 10,
      background: 'rgba(2,0,3,0.72)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      borderTop: '1px solid var(--border-hairline)',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      fontFamily: 'var(--font-sans)',
    }}>
      {TABS.map(({ id, label, Icon }) => {
        const on = id === active;
        return (
          <button key={id} onClick={() => onChange(id)} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color: on ? 'var(--text-accent)' : 'var(--text-secondary)', padding: '2px 14px',
            transition: 'color var(--duration-fast) var(--ease-out)',
          }}>
            <Icon size={24} sw={on ? 2.2 : 1.9} />
            <span style={{ fontSize: 10, fontWeight: on ? 600 : 500, letterSpacing: '0.01em' }}>{label}</span>
          </button>
        );
      })}
    </div>
  );
}

function HomeIndicator() {
  return (
    <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none', zIndex: 5 }}>
      <div style={{ width: 134, height: 5, borderRadius: 3, background: 'var(--text-primary)', opacity: 0.85 }}></div>
    </div>
  );
}

function PhoneShell({ children, active, onChange, showTabBar = true, fullBleed = false, hideStatusBar = false, hideHomeIndicator = false }) {
  return (
    <div style={{
      width: fullBleed ? '100%' : 390, height: fullBleed ? '100%' : 844,
      borderRadius: fullBleed ? 0 : 52, background: 'var(--bg-canvas)',
      border: fullBleed ? 'none' : '10px solid #0b0a0c',
      boxShadow: fullBleed ? 'none' : '0 40px 100px rgba(0,0,0,0.6), inset 0 0 0 1.5px rgba(255,255,255,0.04)',
      position: 'relative', overflow: 'hidden', boxSizing: 'border-box',
      // Screens reserve --status-bar-inset at their top to clear the bar/
      // island rendered here. With neither rendered there's nothing to
      // clear, so collapse it to 0 - otherwise every screen leaves a dead
      // 54px gap where the bar used to be.
      ...(hideStatusBar ? { '--status-bar-inset': '0px' } : null),
    }}>
      {!hideStatusBar && (
        <React.Fragment>
          {/* status bar floats above content so full-bleed screens run underneath it */}
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20, pointerEvents: 'none' }}>
            <StatusBar />
          </div>
          {/* dynamic island */}
          <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)', width: 110, height: 32, borderRadius: 20, background: '#000', zIndex: 25 }}></div>
        </React.Fragment>
      )}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', borderRadius: fullBleed ? 0 : 42 }}>
        {children}
      </div>
      {showTabBar && <TabBar active={active} onChange={onChange} />}
      {!hideHomeIndicator && <HomeIndicator />}
    </div>
  );
}

Object.assign(window, { StatusBar, TabBar, HomeIndicator, PhoneShell });