// Normalize data + write main app router

// Enrich data with fields screens expect
(function(){
  // Listings: add bookings/status
  window.LISTINGS.forEach((l, i) => {
    if (l.bookings == null) l.bookings = [124, 380, 88, 56, 142, 201, 44][i % 7];
    if (!l.status) l.status = ['Published','Published','Published','Draft','Published','PendingModeration','Published'][i % 7];
  });

  // Reviews: listing name + flagged
  window.REVIEWS.forEach((r, i) => {
    if (!r.listing) r.listing = ['Gün batımı Boğaz turu','Kapadokya balonu','Bodrum Gulet','Topkapı rehberli tur'][i%4];
    if (r.flagged == null) r.flagged = i===3;
  });

  // Suppliers: enrich
  const cats = ['Tekne','Balon','Gastronomi','Dalış','Rehber','Macera'];
  const statuses = ['Onaylı','Onaylı','Onaylı','Beklemede','Onaylı','Reddedildi'];
  window.SUPPLIERS.forEach((s, i) => {
    if (!s.category) s.category = cats[i];
    if (!s.rating) s.rating = [4.9, 4.8, 4.6, 0, 4.7, 0][i];
    if (!s.revenue) s.revenue = [184320, 420840, 128400, 0, 62900, 0][i];
    if (!s.commission) s.commission = 10;
    if (!s.status) s.status = statuses[i];
  });

  // Users: enrich
  const roles = ['Gezgin','Gezgin','Tedarikçi','Admin','Gezgin','Gezgin'];
  window.USERS.forEach((u, i) => {
    if (!u.role) u.role = roles[i % roles.length];
    if (u.bookings == null) u.bookings = [3, 1, 24, 0, 8, 2][i % 6];
    if (u.spend == null) u.spend = [12600, 4800, 0, 0, 38400, 8200][i % 6];
    if (!u.status) u.status = ['Aktif','Aktif','Aktif','Aktif','Aktif','Askıda'][i % 6];
  });

  // Blog: views + description
  window.BLOGS.forEach((b, i) => {
    if (!b.views) b.views = [18420, 9820, 6240, 12800][i % 4];
    if (!b.readMins) b.readMins = [8, 6, 12, 5][i % 4];
  });

  // Icons fallback
  const existingIcons = ['home','search','heart','heart-fill','star','check','x','plus','minus','arrow','arrow-left','filter','grid','calendar','calendar-days','message','settings','bell','user','users','pin','clock','globe','shield','download','upload','edit','trash','more','eye','share','dollar','wallet','bar','tag','file','gift','paperclip','circle','sailboat','utensils','mountain','camera','palette','balloon','anchor','landmark','heart-pulse'];
})();

// ═══ ROUTER / APP ═══════════════════════════════════════════════
const App = () => {
  const [route, setRoute] = React.useState(() => {
    const h = window.location.hash.slice(1);
    return h || 'home';
  });
  const [routeParams, setRouteParams] = React.useState({});

  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "brandHue": 40,
    "brandChroma": 0.115,
    "heroVariant": "A",
    "cardVariant": "standard",
    "density": "comfy",
    "supplierDark": true,
    "adminDark": true,
    "supplierType": "activity"
  }/*EDITMODE-END*/);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--brand-hue', tweaks.brandHue);
    document.documentElement.style.setProperty('--brand-chroma', tweaks.brandChroma);
  }, [tweaks.brandHue, tweaks.brandChroma]);

  const nav = (r, p={}) => {
    setRoute(r); setRouteParams(p);
    window.scrollTo(0,0);
    window.history.replaceState(null, '', '#' + r);
  };

  React.useEffect(() => {
    const onHashChange = () => {
      const h = window.location.hash.slice(1);
      if (h && h !== route) { setRoute(h); setRouteParams({}); window.scrollTo(0,0); }
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, [route]);

  // Header state
  const [locale, setLocale] = React.useState('TR');
  const [currency, setCurrency] = React.useState('TRY');

  const publicRoutes = ['home','listings','listing-detail','booking','destinations','destination-detail','blog','category-detail',
    'hotels','hotel-detail','hotel-booking',
    'account-bookings','account-wishlist','account-reviews','account-messages','account-settings',
    'categories','about','contact','help'];
  const isPublic = publicRoutes.includes(route);
  const isSupplier = route.startsWith('supplier-') && route !== 'supplier-apply';
  const isAdmin = route.startsWith('admin-');
  const isAuth = route === 'login' || route === 'register' || route === 'supplier-apply';

  let content;
  if (route === 'home') content = <HomePage onNav={nav} heroVariant={tweaks.heroVariant} cardVariant={tweaks.cardVariant}/>;
  else if (route === 'listings') content = <ListingsIndexPage onNav={nav} cardVariant={tweaks.cardVariant} vertical={routeParams.vertical}/>;
  else if (route === 'hotels') content = <ListingsIndexPage onNav={nav} cardVariant={tweaks.cardVariant} vertical="Hotel"/>;
  else if (route === 'listing-detail') content = <ListingDetailPage slug={routeParams.slug} onNav={nav}/>;
  else if (route === 'hotel-detail') content = <HotelDetailPage slug={routeParams.slug || 'bodrum-marin-hotel-yalikavak'} onNav={nav}/>;
  else if (route === 'hotel-booking') content = <HotelBookingPage params={routeParams} onNav={nav}/>;
  else if (route === 'booking') content = <BookingFlowPage id={routeParams.id||1} onNav={nav}/>;
  else if (route === 'destinations') content = <DestinationsPage onNav={nav}/>;
  else if (route === 'destination-detail') content = <ListingsIndexPage onNav={nav} cardVariant={tweaks.cardVariant}/>;
  else if (route === 'category-detail') content = <ListingsIndexPage onNav={nav} cardVariant={tweaks.cardVariant}/>;
  else if (route === 'blog') content = <BlogIndexPage onNav={nav}/>;
  else if (route === 'categories') content = <CategoriesPage onNav={nav}/>;
  else if (route === 'about') content = <AboutPage onNav={nav}/>;
  else if (route === 'contact') content = <ContactPage onNav={nav}/>;
  else if (route === 'help') content = <HelpPage onNav={nav}/>;
  else if (route === 'design-system') content = <DesignSystemPage/>;
  else if (route === 'login') content = <LoginPage onNav={nav} mode="login"/>;
  else if (route === 'register') content = <LoginPage onNav={nav} mode="register"/>;
  else if (route.startsWith('account-')) {
    const sub = route.replace('account-','');
    content = <AccountPage onNav={nav} current={sub}/>;
  }
  else if (route === 'supplier-apply') content = <SupplierApplyPage onNav={nav}/>;
  else if (isSupplier) {
    const inner = (() => {
      if (route === 'supplier-dashboard') return <SupplierDashboard onNav={nav} supplierType={tweaks.supplierType}/>;
      if (route === 'supplier-listings') return <SupplierListings onNav={nav} supplierType={tweaks.supplierType}/>;
      if (route === 'supplier-new' || route === 'supplier-edit') return <SupplierListingForm onNav={nav} id={routeParams.id}/>;
      if (route === 'supplier-bookings') return <SupplierBookings/>;
      if (route === 'supplier-calendar') return <SupplierCalendar/>;
      if (route === 'supplier-rateplans') return <SupplierRatePlans onNav={nav}/>;
      if (route === 'supplier-rateplan-new' || route === 'supplier-rateplan-edit') return <SupplierRatePlanForm params={routeParams} onNav={nav}/>;
      if (route === 'supplier-rateplan-calendar') return <SupplierRatePlanCalendar params={routeParams} onNav={nav}/>;
      if (route === 'supplier-finance') return <SupplierFinance/>;
      if (route === 'supplier-stats') return <SupplierStats/>;
      if (route === 'supplier-reviews') return <SupplierReviews/>;
      if (route === 'supplier-messages') return <SupplierMessages/>;
      if (route === 'supplier-settings') return <SupplierSettings/>;
      return <SupplierDashboard onNav={nav} supplierType={tweaks.supplierType}/>;
    })();
    content = <SupplierLayout current={route} onNav={nav} density={tweaks.density} dark={tweaks.supplierDark} supplierType={tweaks.supplierType}>{inner}</SupplierLayout>;
  }
  else if (isAdmin) {
    const inner = (() => {
      if (route === 'admin-dashboard') return <AdminDashboard/>;
      if (route === 'admin-listings') return <AdminListings/>;
      if (route === 'admin-categories') return <AdminCategories/>;
      if (route === 'admin-filters') return <AdminFilters/>;
      if (route === 'admin-destinations') return <AdminDestinations/>;
      if (route === 'admin-bookings') return <AdminBookings/>;
      if (route === 'admin-transactions') return <AdminTransactions/>;
      if (route === 'admin-payouts') return <AdminPayouts/>;
      if (route === 'admin-users') return <AdminUsers/>;
      if (route === 'admin-suppliers') return <AdminSuppliers/>;
      if (route === 'admin-reviews') return <AdminReviews/>;
      if (route === 'admin-blogs') return <AdminBlogs/>;
      if (route === 'admin-blog-cats') return <AdminBlogCats/>;
      if (route === 'admin-promos') return <AdminPromos/>;
      if (route === 'admin-rateplans') return <AdminRatePlans/>;
      if (route === 'admin-rateplan-calendar') return <AdminRatePlanCalendar/>;
      if (route === 'admin-cancellation-policies') return <AdminCancellationPolicies/>;
      if (route === 'admin-hotels') return <AdminHotels/>;
      if (route === 'admin-room-types') return <AdminRoomTypes/>;
      if (route === 'admin-settings') return <AdminSettings/>;
      return <AdminDashboard/>;
    })();
    content = <AdminLayout current={route} onNav={nav} density={tweaks.density} dark={tweaks.adminDark}>{inner}</AdminLayout>;
  }
  else content = <HomePage onNav={nav}/>;

  // Route switcher (floating)
  const RouteSwitcher = () => <div style={{position:'fixed', bottom:20, left:20, zIndex:1000,
    background:'var(--color-dark-900)', color:'var(--color-on-dark)', padding:'8px 10px',
    borderRadius:'var(--r-pill)', display:'flex', gap:4, alignItems:'center', boxShadow:'0 10px 30px rgba(0,0,0,.3)', fontSize:12}}>
    <span style={{padding:'0 10px', fontWeight:700, fontSize:10, letterSpacing:'.1em', opacity:.6}}>VAGOONYA</span>
    {[
      ['home','Public'],
      ['hotel-detail','Hotel'],
      ['design-system','DS'],
      ['account-bookings','Traveler'],
      ['supplier-dashboard','Supplier'],
      ['admin-dashboard','Admin'],
      ['login','Login'],
      ['supplier-apply','Apply'],
    ].map(([r,l]) => {
      const active = (r==='home' && isPublic && !route.startsWith('account') && route!=='hotels' && route!=='hotel-detail' && route!=='hotel-booking') ||
        (r==='account-bookings' && route.startsWith('account')) ||
        (r==='hotel-detail' && (route==='hotels' || route==='hotel-detail' || route==='hotel-booking')) ||
        (r==='supplier-dashboard' && isSupplier) ||
        (r==='admin-dashboard' && isAdmin) ||
        (r==='login' && (route==='login'||route==='register')) ||
        (r==='supplier-apply' && route==='supplier-apply') ||
        r===route;
      return <button key={r} onClick={()=>nav(r)}
        style={{padding:'6px 12px', borderRadius:'var(--r-pill)', border:0, cursor:'default', fontSize:12, fontWeight:600,
          background: active ? 'var(--color-brand-500)' : 'transparent',
          color: active ? 'var(--color-on-brand)' : 'rgba(255,255,255,.7)'}}>{l}</button>;
    })}
  </div>;

  return <>
    {isPublic && <PublicHeader locale={locale} setLocale={setLocale} currency={currency} setCurrency={setCurrency} onNav={nav} current={route}/>}
    {content}
    {isPublic && <PublicFooter onNav={nav}/>}
    <RouteSwitcher/>
    <TweaksPanel title="Vagoonya Tweaks">
      <TweakSection title="Brand">
        <TweakSlider label="Hue" min={0} max={360} step={1} value={tweaks.brandHue} onChange={v=>setTweak('brandHue', v)} suffix="°"/>
        <TweakSlider label="Chroma" min={0.04} max={0.18} step={0.005} value={tweaks.brandChroma} onChange={v=>setTweak('brandChroma', v)}/>
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio label="Hero" options={[{value:'A',label:'Full-bleed'},{value:'B',label:'Split'},{value:'C',label:'Editorial'}]} value={tweaks.heroVariant} onChange={v=>setTweak('heroVariant', v)}/>
        <TweakRadio label="Card Style" options={[{value:'standard',label:'Standard'},{value:'overlay',label:'Overlay'},{value:'minimal',label:'Minimal'}]} value={tweaks.cardVariant} onChange={v=>setTweak('cardVariant', v)}/>
      </TweakSection>
      <TweakSection title="Admin / Supplier">
        <TweakRadio label="Density" options={[{value:'comfy',label:'Comfortable'},{value:'compact',label:'Compact'}]} value={tweaks.density} onChange={v=>setTweak('density', v)}/>
        <TweakRadio label="Supplier Type" options={[{value:'activity',label:'Tur / Aktivite'},{value:'hotel',label:'Otel'}]} value={tweaks.supplierType} onChange={v=>setTweak('supplierType', v)}/>
        <TweakToggle label="Supplier Dark Mode" value={tweaks.supplierDark} onChange={v=>setTweak('supplierDark', v)}/>
        <TweakToggle label="Admin Dark Mode" value={tweaks.adminDark} onChange={v=>setTweak('adminDark', v)}/>
      </TweakSection>
    </TweaksPanel>
  </>;
};

// Hash route listener
window.addEventListener('hashchange', () => {
  window.dispatchEvent(new Event('popstate'));
});

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