// app.jsx — top-level router & state for the Kolhida prototype

const { useState: useS, useEffect: useE, useMemo: useM } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00B0F0",
  "startScreen": "login",
  "showFrame": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  '#00B0F0': { soft:'#E3F6FE', soft2:'#BFE9FC' }, // Kolhida brand cyan
  '#2D4EF5': { soft:'#EEF1FF', soft2:'#DBE2FF' }, // Wolt-ish blue
  '#0A0E1A': { soft:'#EFEFF2', soft2:'#DCDDE2' }, // Mono / executive black
  '#1BA37A': { soft:'#E6F6EF', soft2:'#C7EDDC' }, // Forest green
  '#E0464A': { soft:'#FCEAEB', soft2:'#F6CCCE' }, // Insurance red
};

function applyAccent(hex) {
  const presets = ACCENT_PRESETS[hex] || ACCENT_PRESETS['#2D4EF5'];
  const root = document.documentElement.style;
  root.setProperty('--accent', hex);
  root.setProperty('--accent-soft', presets.soft);
  root.setProperty('--accent-soft-2', presets.soft2);
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [authed, setAuthed] = useS(tweaks.startScreen !== 'login');
  const [route, setRoute] = useS(tweaks.startScreen === 'login' ? 'hub' : tweaks.startScreen); // 'hub' | 'car' | 'house' | 'person' | 'quote' | 'delivery' | 'tracking'
  const [settingsOpen, setSettings] = useS(false);
  const [notifOpen, setNotif] = useS(false);
  const [ordersOpen, setOrders] = useS(false);
  const [faqFrom, setFaqFrom] = useS('support');
  const [pwFrom, setPwFrom] = useS('profile');
  const [addCarOpen, setAddCar] = useS(false);
  const [toast, setToast] = useS('');
  const [successOpen, setSuccess] = useS(false);
  const [lang, setLang] = useS(window.getLang ? window.getLang() : 'bg');

  const changeLang = (l) => { window.setLangGlobal(l); setLang(l); };

  // Mutable session state
  const [user] = useS(window.KOLHIDA_DATA.user);
  const [cars, setCars] = useS(window.KOLHIDA_DATA.cars);
  const [policies] = useS(window.KOLHIDA_DATA.policies);
  const [currentCar, setCurrentCar] = useS(cars[0]);
  const [quoteKind, setQuoteKind] = useS('go');
  const [pickedOffer, setOffer] = useS(null);
  const [trackKind, setTrackKind] = useS('courier');
  const [deliveryMode, setDeliveryMode] = useS('office');

  useE(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);

  // Sync app to login screen when toggle changes
  useE(() => {
    if (tweaks.startScreen === 'login') { setAuthed(false); setRoute('hub'); }
    else { setAuthed(true); setRoute(tweaks.startScreen); }
  }, [tweaks.startScreen]);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(''), 2400);
  };

  // Handlers
  const onLogin = () => { setAuthed(true); setRoute('hub'); };
  const onLogout = () => { setSettings(false); setAuthed(false); };

  const onPickCategory = (k) => setRoute(k);
  const onBack = () => setRoute('hub');

  const onAddCar = () => setAddCar(true);
  const onAddCarSubmit = (f) => {
    const newCar = {
      id: 'c' + (cars.length + 1),
      make: f.make || 'Auto', model: f.model || '—',
      year: Number(f.year) || 2024,
      plate: f.plate || 'XX 0000 XX',
      vin: f.vin, color: 'избран',
      style: cars.length % 2 ? 'gray' : 'alt',
    };
    setCars([...cars, newCar]);
    setAddCar(false);
    showToast(t('carAdded'));
  };

  const onGetQuote = (kind, car) => {
    setQuoteKind(kind);
    setCurrentCar(car);
    setRoute('quote');
  };
  const onPickOffer = (offer, kind, car) => {
    setOffer({ ...offer, price: offer.bgn });
    setCurrentCar(car);
    setRoute('delivery');
  };
  const onConfirmDelivery = ({ mode }) => {
    setDeliveryMode(mode === 'office' ? 'office' : 'courier');
    setSuccess(true);
  };
  const onTrack = (kind) => {
    setTrackKind(kind);
    setRoute('tracking');
  };

  // Decide what to render in main slot
  let content;
  if (!authed) {
    content = <LoginScreen onLoggedIn={onLogin} lang={lang} onLang={changeLang}/>;
  } else if (route === 'hub') {
    content = <HubScreen user={user} onPickCategory={onPickCategory} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} lang={lang} onLang={changeLang}/>;
  } else if (route === 'car') {
    content = <CarDashboard
      user={user} cars={cars} policies={policies}
      onBack={onBack}
      onAvatar={() => setSettings(true)}
      onBell={() => setNotif(true)}
      onOrders={() => setOrders(true)}
      onAddCar={onAddCar}
      onGetQuote={onGetQuote}
      onTrack={onTrack}
      lang={lang} onLang={changeLang}
      onViewPolicy={() => showToast(t('policyDetailToast'))}
      onViewRoadworthy={(c) => { setCurrentCar(c); setRoute('roadworthy'); }}
      onViewVignette={(c) => { setCurrentCar(c); setRoute('vignette'); }}
      onViewKat={(c) => { setCurrentCar(c); setRoute('kat'); }}
    />;
  } else if (route === 'roadworthy') {
    content = <RoadworthyScreen car={currentCar} onBack={() => setRoute('car')}/>;
  } else if (route === 'vignette') {
    content = <VignetteScreen car={currentCar} onBack={() => setRoute('car')}/>;
  } else if (route === 'kat') {
    content = <KatScreen car={currentCar} onBack={() => setRoute('car')}/>;
  } else if (route === 'support') {
    content = <SupportScreen user={user} onBack={() => { setRoute('hub'); setSettings(true); }} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} onFaq={() => { setFaqFrom('support'); setRoute('faq'); }} lang={lang} onLang={changeLang}/>;
  } else if (route === 'faq') {
    content = <FaqScreen user={user} onBack={() => { if (faqFrom === 'settings') { setRoute('hub'); setSettings(true); } else { setRoute('support'); } }} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} lang={lang} onLang={changeLang}/>;
  } else if (route === 'profile') {
    content = <ProfileScreen user={user} onBack={() => { setRoute('hub'); setSettings(true); }} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} onChangePassword={() => { setPwFrom('profile'); setRoute('password'); }} lang={lang} onLang={changeLang}/>;
  } else if (route === 'password') {
    content = <ChangePasswordScreen user={user} onBack={() => { if (pwFrom === 'settings') { setRoute('hub'); setSettings(true); } else { setRoute('profile'); } }} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} lang={lang} onLang={changeLang}/>;
  } else if (route === 'notifsettings') {
    content = <NotifSettingsScreen user={user} onBack={() => { setRoute('hub'); setSettings(true); }} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} lang={lang} onLang={changeLang}/>;
  } else if (route === 'orders') {
    content = <OrdersScreen user={user} onAvatar={() => setSettings(true)} onTrack={onTrack} lang={lang} onLang={changeLang}/>;
  } else if (route === 'notif') {
    content = <NotifScreen user={user} onAvatar={() => setSettings(true)} lang={lang} onLang={changeLang}/>;
  } else if (route === 'house' || route === 'person') {
    content = <ComingSoon kind={route} onBack={onBack} user={user} onAvatar={() => setSettings(true)} onBell={() => setNotif(true)} onOrders={() => setOrders(true)} lang={lang} onLang={changeLang}/>;
  } else if (route === 'quote') {
    content = <QuoteScreen car={currentCar} kind={quoteKind} onBack={() => setRoute('car')} onPickOffer={onPickOffer}/>;
  } else if (route === 'delivery') {
    content = <DeliveryScreen offer={pickedOffer} car={currentCar} kind={quoteKind} onBack={() => setRoute('quote')} onConfirm={onConfirmDelivery}/>;
  } else if (route === 'tracking') {
    content = <TrackingScreen kind={trackKind} onBack={() => setRoute('car')}/>;
  }

  const appShell = (
    <div className={`app ${tweaks.showFrame ? 'has-statusbar' : ''}`} style={{ paddingTop: tweaks.showFrame ? 54 : 0 }}>
      {content}

      {authed && (route === 'hub' || route === 'car' || route === 'orders' || route === 'notif') && (
        <BottomNav
          activeTab={route === 'orders' ? 'orders' : route === 'notif' ? 'notif' : route === 'car' ? 'cars' : 'home'}
          onHome={() => setRoute('hub')}
          onCars={() => setRoute('car')}
          onOrders={() => setRoute('orders')}
          onBell={() => setRoute('notif')}
          showCars={route !== 'hub'}
        />
      )}

      {/* Overlays */}
      <div className={`scrim ${settingsOpen ? 'open' : ''}`}
           onClick={() => { setSettings(false); }} />
      <SettingsDrawer open={settingsOpen} onClose={() => setSettings(false)} user={user} onLogout={onLogout} onContact={() => { setSettings(false); setRoute('support'); }} onFaq={() => { setSettings(false); setFaqFrom('settings'); setRoute('faq'); }} onProfile={() => { setSettings(false); setRoute('profile'); }} onPassword={() => { setSettings(false); setPwFrom('settings'); setRoute('password'); }} onNotifSettings={() => { setSettings(false); setRoute('notifsettings'); }}/>

      <AddCarModal open={addCarOpen} onClose={() => setAddCar(false)} onAdd={onAddCarSubmit}/>
      <SuccessModal
        open={successOpen}
        onClose={() => { setSuccess(false); setRoute('car'); }}
        onTrack={() => { setSuccess(false); setTrackKind(deliveryMode === 'office' ? 'office' : 'courier'); setRoute('tracking'); }}
        deliveryMode={deliveryMode}
      />

      <Toast msg={toast} show={!!toast}/>
    </div>
  );

  // Frame wrapper — iOS bezel via IOSDevice
  const FrameView = () => {
    // Render the app inside the iOS frame "children" slot.
    // IOSDevice provides status bar + home indicator.
    return (
      <IOSDevice width={390} height={844}>
        <div style={{ position:'relative', width:'100%', height:'100%' }}>
          {appShell}
        </div>
      </IOSDevice>
    );
  };

  const Plain = () => (
    <div style={{
      width: 390, height: 844, position:'relative',
      borderRadius: 24, overflow:'hidden',
      boxShadow: '0 30px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06)',
      background: '#fff',
    }}>
      {appShell}
    </div>
  );

  return (
    <>
      <div className="frame-wrap">
        {tweaks.showFrame ? <FrameView/> : <Plain/>}
      </div>
      <TweakControls tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function TweakControls({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Аксент">
        <TweakColor
          label="Цвят на акцента"
          value={tweaks.accent}
          options={Object.keys(ACCENT_PRESETS)}
          onChange={v => setTweak('accent', v)}
        />
      </TweakSection>
      <TweakSection label="Изглед">
        <TweakRadio
          label="Стартов екран"
          value={tweaks.startScreen}
          options={[
            { value:'login', label:'Login' },
            { value:'hub',   label:'Hub' },
            { value:'car',   label:'Car app' },
          ]}
          onChange={v => setTweak('startScreen', v)}
        />
        <TweakToggle
          label="iOS рамка"
          value={tweaks.showFrame}
          onChange={v => setTweak('showFrame', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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