// Main app — wires router + screens + sheets + FAB nav + tweaks.
// Hosts the single-phone iPhone frame, centered and auto-scaled.

const AppCtx = React.createContext(null);
function useApp() { return React.useContext(AppCtx); }
window.AppCtx = AppCtx;
window.useApp = useApp;

const TAB_TO_ROOT = { home: 'home', drive: 'vehicle', service: 'service', you: 'profile' };
const SCREEN_TO_TAB = { home: 'home', notifications: 'home', find: 'home',
                        vehicle: 'drive', remote: 'drive', trip: 'drive',
                        service: 'service', dealer: 'service',
                        profile: 'you', profileInfo: 'you', settings: 'you',
                        documents: 'you', payment: 'you',
                        manual: 'you', pair: 'you' };
const PRE_APP = new Set(['splash', 'login', 'onboarding1', 'onboarding2', 'onboarding3', 'pair']);

const SCREEN_MAP = {
  splash: SplashScreen,
  login: LoginScreen,
  onboarding1: Onboarding1,
  onboarding2: Onboarding2,
  onboarding3: Onboarding3,
  pair: PairScreen,

  home: HomeScreen,
  vehicle: VehicleScreen,
  remote: RemoteScreen,
  find: FindScreen,
  service: ServiceScreen,
  notifications: NotificationsScreen,
  profile: ProfileScreen,

  trip: TripScreen,
  dealer: DealerScreen,
  manual: ManualScreen,

  profileInfo: ProfileInfoScreen,
  settings: SettingsScreen,
  documents: DocumentsScreen,
  payment: PaymentScreen,
};

const SHEET_MAP = {
  lockConfirm: LockConfirmSheet,
  climatePresets: ClimatePresetsSheet,
  serviceSuccess: ServiceSuccessSheet,
  hornFeedback: HornFeedbackOverlay,
  flashFeedback: FlashFeedbackOverlay,
  logoutConfirm: LogoutConfirmSheet,
  engineStart: EngineStartSheet,
  sos: SOSSheet,
  navigate: NavigateSheet,
  editProfile: EditProfileSheet,
  about: AboutSheet,
  terms: TermsSheet,
  forgotPwd: ForgotPwdSheet,
  signUp: SignUpSheet,
  downloadPDF: DownloadPDFSheet,
  notifDetail: NotificationDetailSheet,
  mx5Reserve: MX5ReserveSheet,
  windowsControl: WindowsControlSheet,
  trunkControl: TrunkControlSheet,
  hoodControl: HoodControlSheet,
};

function ScreenStack() {
  const nav = useRouter();
  const cur = nav.current;
  const Screen = SCREEN_MAP[cur] || HomeScreen;
  // Keying on the route key triggers a remount per navigation; the per-screen
  // c-stagger reveal supplies the transition. Avoiding a wrapper-level CSS
  // animation here also dodges a "pending" animation when React re-renders
  // the wrapper repeatedly from context updates (useTween value tweens).
  const key = `${cur}-${nav.route.transitionKey}`;
  return (
    <div key={key} style={{ position: 'absolute', inset: 0 }}>
      <Screen/>
    </div>
  );
}

function SheetLayer() {
  const nav = useRouter();
  if (!nav.route.sheet) return null;
  const Sheet = SHEET_MAP[nav.route.sheet];
  if (!Sheet) return null;
  return <Sheet {...(nav.route.sheetProps || {})}/>;
}

function FabNav() {
  const nav = useRouter();
  const { tw } = useApp();
  const L = STRINGS[tw.lang];

  if (PRE_APP.has(nav.current) || tw.hideNav) return null;

  // Compute active tab from current screen
  const activeTab = SCREEN_TO_TAB[nav.current] || nav.route.tab || 'home';

  const items = [
    { id: 'home',    icon: 'car',    label: L.home },
    { id: 'drive',   icon: 'signal', label: T(tw.lang, 'Drive', 'Lái xe') },
    { id: 'service', icon: 'wrench', label: L.service },
    { id: 'you',     icon: 'user',   label: T(tw.lang, 'You', 'Bạn') },
  ];

  return (
    <div style={{ position: 'absolute', left: '50%', bottom: 'calc(16px + env(safe-area-inset-bottom, 14px))', transform: 'translateX(-50%)', display: 'flex', gap: 6,
                  padding: 6, background: 'rgba(10,15,20,0.78)', backdropFilter: 'blur(28px) saturate(180%)',
                  WebkitBackdropFilter: 'blur(28px) saturate(180%)',
                  borderRadius: 36, border: '1px solid rgba(255,255,255,0.08)',
                  boxShadow: '0 12px 36px rgba(0,0,0,0.5)', zIndex: 100 }}>
      {items.map((it) => {
        const I = Icons[it.icon];
        const active = it.id === activeTab;
        return (
          <div key={it.id} onClick={() => nav.tab(it.id)}
               style={{
            minWidth: active ? 110 : 48, height: 48, borderRadius: 24,
            padding: active ? '0 16px' : 0,
            background: active ? THEMES.c.accent : 'transparent',
            color: active ? THEMES.c.accentInk : THEMES.c.textDim,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer',
            transition: 'all .3s cubic-bezier(.4,0,.2,1)',
          }}>
            <I size={20} stroke={active ? 2 : 1.5}/>
            {active && <span style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', animation: 'c-fade-in .25s' }}>{it.label}</span>}
          </div>
        );
      })}
    </div>
  );
}

// Inject screen transition keyframes
if (!document.getElementById('c-screen-anim')) {
  const s = document.createElement('style');
  s.id = 'c-screen-anim';
  s.textContent = `
    @keyframes c-screen-fade { from { transform: scale(0.99); } to { transform: none; } }
    @keyframes c-screen-push { from { transform: translateX(40px); } to { transform: none; } }
    @keyframes c-screen-pop  { from { transform: translateX(-30px); } to { transform: none; } }
    [style*="c-screen-"] { animation-fill-mode: forwards !important; }
  `;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// Fullscreen stage (no device frame)
// ─────────────────────────────────────────────────────────────
function PhoneStage({ children }) {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <PhoneInner>{children}</PhoneInner>
    </div>
  );
}

function PhoneInner({ children }) {
  const { tw } = useApp();
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: THEMES.c.bg, color: THEMES.c.text,
      fontFamily: THEMES.c.font,
    }}>
      <Aurora intensity={tw.aurora}/>
      <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
        {children}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Top-level App
// ─────────────────────────────────────────────────────────────
function App() {
  const [tw, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "lang": "vi",
    "model": "cx30",
    "locked": true,
    "fuel": 72,
    "glass": 1,
    "aurora": 1,
    "showWeather": true,
    "showFuelPrice": true,
    "hideNav": false,
    "showLoading": false,
    "offline": false,
    "emptyInbox": false,
    "startScreen": "splash"
  }/*EDITMODE-END*/);

  // Start at the configured screen instead of always splash, so the user
  // can land directly on home/etc when iterating.
  const initialScreen = tw.startScreen || 'home';

  return (
    <AppCtx.Provider value={{ tw, setTweak }}>
      <RouterProvider initial={initialScreen}>
        <ToastProvider>
        <PhoneStage>
          <RouterBootstrap initialScreen={initialScreen}/>
          <ScreenStack/>
          <FabNav/>
          <SheetLayer/>
        </PhoneStage>

        <TweaksPanel title="Tweaks">
          <TweakSection label="Start at"/>
          <TweakSelect label="Screen" value={tw.startScreen}
            options={[
              {label: 'Splash', value: 'splash'},
              {label: 'Login', value: 'login'},
              {label: 'Onboarding · 1', value: 'onboarding1'},
              {label: 'Onboarding · 2', value: 'onboarding2'},
              {label: 'Onboarding · 3', value: 'onboarding3'},
              {label: 'Pair vehicle', value: 'pair'},
              {label: 'Home', value: 'home'},
              {label: 'Vehicle status', value: 'vehicle'},
              {label: 'Remote', value: 'remote'},
              {label: 'Find my car', value: 'find'},
              {label: 'Service booking', value: 'service'},
              {label: 'Trip history', value: 'trip'},
              {label: 'Dealer locator', value: 'dealer'},
              {label: 'Owner\u2019s manual', value: 'manual'},
              {label: 'Notifications', value: 'notifications'},
              {label: 'Profile', value: 'profile'},
              {label: 'Profile info', value: 'profileInfo'},
              {label: 'Settings', value: 'settings'},
              {label: 'Documents', value: 'documents'},
              {label: 'Payment', value: 'payment'},
            ]}
            onChange={(v) => setTweak('startScreen', v)}/>

          <TweakSection label="Language"/>
          <TweakRadio label="UI" value={tw.lang}
            options={[{label: 'EN', value: 'en'}, {label: 'Tiếng Việt', value: 'vi'}]}
            onChange={(v) => setTweak('lang', v)}/>

          <TweakSection label="Vehicle"/>
          <TweakSelect label="Model" value={tw.model}
            options={[
              {label: 'Mazda CX-5 Premium Exclusive', value: 'cx5'},
              {label: 'Mazda CX-30 Premium', value: 'cx30'},
              {label: 'Mazda3 Sport Signature Premium', value: 'mazda3'},
            ]}
            onChange={(v) => setTweak('model', v)}/>
          <TweakToggle label="Doors locked" value={tw.locked}
            onChange={(v) => setTweak('locked', v)}/>
          <TweakSlider label="Fuel" value={Math.round(tw.fuel)} min={5} max={100} step={1} unit="%"
            onChange={(v) => setTweak('fuel', v)}/>

          <TweakSection label="Visual"/>
          <TweakSlider label="Glass intensity" value={Math.round(tw.glass * 100)} min={0} max={150} step={5} unit="%"
            onChange={(v) => setTweak('glass', v / 100)}/>
          <TweakSlider label="Aurora intensity" value={Math.round(tw.aurora * 100)} min={0} max={150} step={5} unit="%"
            onChange={(v) => setTweak('aurora', v / 100)}/>

          <TweakSection label="Widgets"/>
          <TweakToggle label="Show weather widget" value={tw.showWeather}
            onChange={(v) => setTweak('showWeather', v)}/>
          <TweakToggle label="Show fuel-price widget" value={tw.showFuelPrice}
            onChange={(v) => setTweak('showFuelPrice', v)}/>
          <TweakToggle label="Hide nav for screenshots" value={tw.hideNav}
            onChange={(v) => setTweak('hideNav', v)}/>

          <TweakSection label="Demo states"/>
          <TweakToggle label="Loading skeleton on Home" value={tw.showLoading}
            onChange={(v) => setTweak('showLoading', v)}/>
          <TweakToggle label="Offline banner" value={tw.offline}
            onChange={(v) => setTweak('offline', v)}/>
          <TweakToggle label="Empty inbox" value={tw.emptyInbox}
            onChange={(v) => setTweak('emptyInbox', v)}/>
        </TweaksPanel>
        </ToastProvider>
      </RouterProvider>
    </AppCtx.Provider>
  );
}

// Re-navigates when the user changes startScreen tweak after the app has mounted.
function RouterBootstrap({ initialScreen }) {
  const nav = useRouter();
  const last = React.useRef(initialScreen);
  React.useEffect(() => {
    if (last.current !== initialScreen) {
      last.current = initialScreen;
      const tab = SCREEN_TO_TAB[initialScreen] || null;
      nav.replace(initialScreen, tab);
    }
  }, [initialScreen]);
  return null;
}

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