// Stryke — router: phone frame, status bar, screen transitions, toast
const { useEffect: useER, useRef: useRR } = React;

const STATUS_DARK = { welcome: 1, recap: 1, kitScan: 1 };

function StatusBar({ screen }) {
  const S = window.STU;
  const dark = STATUS_DARK[screen];
  const fg = dark ? '#fff' : S.ink;
  const bg = dark ? S.ink : '#fff';
  return (
    <div style={{ height: 44, flexShrink: 0, background: bg, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 24px 6px' }}>
      <span className="stu-num" style={{ fontSize: 14, fontWeight: 600, color: fg }}>9:41</span>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <svg width="17" height="11" viewBox="0 0 17 11" fill="none"><rect x="0" y="6" width="3" height="5" rx="1" fill={fg}/><rect x="4.5" y="4" width="3" height="7" rx="1" fill={fg}/><rect x="9" y="2" width="3" height="9" rx="1" fill={fg}/><rect x="13.5" y="0" width="3" height="11" rx="1" fill={fg} opacity="0.4"/></svg>
        <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.6" y="0.6" width="18" height="9.8" rx="2.6" stroke={fg} strokeOpacity="0.5" strokeWidth="1"/><rect x="2" y="2" width="13.5" height="7" rx="1.5" fill={fg}/><rect x="20" y="3.4" width="1.6" height="4" rx="0.8" fill={fg} opacity="0.5"/></svg>
      </div>
    </div>
  );
}

function Toast({ msg }) {
  const S = window.STU;
  if (!msg) return null;
  return (
    <div style={{ position: 'absolute', bottom: 'calc(86px + env(safe-area-inset-bottom))', left: '50%', transform: 'translateX(-50%)', zIndex: 60, animation: 'stuRise .3s ease both' }}>
      <div style={{ background: S.ink, color: '#fff', padding: '11px 18px', borderRadius: 100, fontSize: 13.5, fontWeight: 600, boxShadow: '0 8px 24px rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: S.lime }}></span>{msg}
      </div>
    </div>
  );
}

function AppFrame() {
  const S = window.STU;
  const { screen, dir, toast } = window.useStryke();
  const Screen = window.SCREENS[screen] || window.SCREENS.welcome;
  return (
    <div className="stu-app" style={{ height: '100%', display: 'flex', flexDirection: 'column', background: STATUS_DARK[screen] ? S.ink : '#fff', position: 'relative', overflow: 'hidden' }}>
      <StatusBar screen={screen} />
      <div key={screen} className={dir === 'back' ? 'stu-in-back' : 'stu-in'} style={{ flex: 1, minHeight: 0 }}>
        <Screen />
      </div>
      <Toast msg={toast} />
    </div>
  );
}

function Root() {
  return (
    <div className="stu-frame-outer">
      <div className="stu-device">
        <window.StrykeProvider><AppFrame /></window.StrykeProvider>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);