// Main app — routes between screens, manages fix-all state, wraps in device frame

function ResumeAuraApp({ platform = 'ios', startScreen = 'score', score = 82, scoreVariant = 'orb', width, height }) {
  const [screen, setScreen] = React.useState(startScreen);
  const [activeIssue, setActiveIssue] = React.useState(null);
  const [fixedIds, setFixedIds] = React.useState(new Set());
  const [toast, setToast] = React.useState(null);
  const [prevFixed, setPrevFixed] = React.useState(null);

  // Reset state when switching start screens (from tweaks)
  React.useEffect(() => { setScreen(startScreen); }, [startScreen]);

  const handleIssueTap = (iss) => setActiveIssue(iss);
  const applyOne = (id) => {
    setFixedIds(prev => { const s = new Set(prev); s.add(id); return s; });
    setActiveIssue(null);
    setToast({ count: 1, prev: new Set(fixedIds) });
  };
  const applyAll = () => {
    setPrevFixed(new Set(fixedIds));
    const all = allIssues().map(i => i.id);
    const n = all.length - fixedIds.size;
    setFixedIds(new Set(all));
    setActiveIssue(null);
    setToast({ count: n });
  };
  const undo = () => {
    setFixedIds(prevFixed || new Set());
    setToast(null);
  };

  const screens = {
    onboarding: <OnboardingScreen platform={platform} score={score} onNext={() => setScreen('upload')}/>,
    upload:     <UploadScreen platform={platform} onNext={() => setScreen('scanning')}/>,
    scanning:   <ScanningScreen platform={platform} onDone={() => setScreen('score')}/>,
    score:      <ScoreRevealScreen platform={platform} score={score} variant={scoreVariant}
                  onEdit={() => setScreen('editor')} onShare={() => setScreen('export')} onExport={() => setScreen('export')}/>,
    editor:     <EditorScreen platform={platform} onBack={() => setScreen('score')}
                  onFix={applyAll} onIssueTap={handleIssueTap} onExport={() => setScreen('export')}
                  fixedIds={fixedIds} activeIssue={activeIssue}/>,
    export:     <ExportScreen platform={platform} onBack={() => setScreen('editor')}/>,
    history:    <HistoryScreen platform={platform} onBack={() => setScreen('score')} onOpen={() => setScreen('score')} onExport={() => setScreen('export')}/>,
    profile:    <ProfileScreen platform={platform} onBack={() => setScreen('score')} onExport={() => setScreen('export')}/>,
  };

  // Tab bar — overlay on screens that benefit
  const showTabs = ['score', 'history', 'profile'].includes(screen);
  const tabs = [
    { id: 'score', label: 'aura', icon: <path d="M12 2 l2.5 6 l6.5 0.5 l-5 4.5 l1.5 6.5 l-5.5 -3.5 l-5.5 3.5 l1.5 -6.5 l-5 -4.5 l6.5 -0.5 z" fill="currentColor"/> },
    { id: 'editor', label: 'edit', icon: <path d="M4 20h4l10-10-4-4L4 16v4z" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/> },
    { id: 'history', label: 'history', icon: <><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" fill="none"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/></> },
    { id: 'profile', label: 'me', icon: <><circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2" fill="none"/><path d="M4 20c2-4 6-5 8-5s6 1 8 5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/></> },
  ];

  const dark = ['onboarding', 'scanning'].includes(screen) || (screen === 'score');

  const content = (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      {screens[screen]}
      {showTabs && (
        <div style={{
          position: 'absolute', left: 12, right: 12, bottom: platform === 'ios' ? 30 : 24,
          height: 60, borderRadius: 100,
          background: dark ? 'rgba(26,13,46,0.85)' : '#fffdf7',
          backdropFilter: 'blur(20px) saturate(180%)',
          WebkitBackdropFilter: 'blur(20px) saturate(180%)',
          boxShadow: '0 10px 30px rgba(26,13,46,0.2), 0 0 0 1px rgba(255,255,255,0.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-around',
          zIndex: 50,
        }}>
          {tabs.map(t => {
            const active = t.id === screen;
            const c = active ? (dark ? '#fae14b' : '#1a0d2e') : (dark ? 'rgba(255,255,255,0.5)' : '#6b5e88');
            return (
              <button key={t.id} onClick={() => setScreen(t.id)} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
                color: c, padding: '6px 10px', fontFamily: 'Plus Jakarta Sans', fontSize: 10, fontWeight: 600,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" style={{ color: c }}>{t.icon}</svg>
                {t.label}
                {active && <div style={{ width: 4, height: 4, borderRadius: 100, background: c, marginTop: -1 }}/>}
              </button>
            );
          })}
        </div>
      )}
      <FixSheet platform={platform} issue={activeIssue} onClose={() => setActiveIssue(null)} onApply={applyOne} onApplyAll={applyAll}/>
      <UndoToast show={!!toast} count={toast?.count || 0} onUndo={undo} onDismiss={() => setToast(null)}/>
    </div>
  );

  if (platform === 'ios') {
    return <IOSDevice width={width || 390} height={height || 844}>{content}</IOSDevice>;
  }
  return <AndroidDevice width={width || 390} height={height || 844}>{content}</AndroidDevice>;
}

window.ResumeAuraApp = ResumeAuraApp;