/* global React, ReactDOM, TopBar, HomeScreen, BillingScreen, KitchenScreen, DistributionScreen, ForecastScreen, DevicesScreen, InventoryScreen, ShiftScreen, WasteScreen, TempScreen, KdsScreen, MrdScreen, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect */
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

const NAV_ITEMS = [
  { id:'home', icon:'home', label:'Home' },
  { id:'billing', icon:'receipt_long', label:'Billing' },
  { id:'kitchen', icon:'soup_kitchen', label:'Kitchen' },
  { id:'distribution', icon:'restaurant', label:'Distribution', navLabel:'Dist' },
  { id:'forecast', icon:'auto_graph', label:'Forecast' },
  { id:'inventory', icon:'inventory_2', label:'Inventory', navLabel:'Stock' },
  { id:'devices', icon:'router', label:'Devices' },
  { id:'shift', icon:'badge', label:'Shift' },
  { id:'waste', icon:'delete_sweep', label:'Waste' },
  { id:'temp', icon:'thermostat', label:'Temperature', navLabel:'Temp' },
  { id:'kds', icon:'desktop_windows', label:'KDS' },
  { id:'mrd', icon:'sell', label:'MRD' },
];

// Load persisted tweaks from localStorage
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/(function() {
  try {
    var saved = JSON.parse(localStorage.getItem('kfc_tweaks') || 'null');
    if (saved && typeof saved === 'object') {
      return Object.assign({ brand:'classic', density:'standard', lang:'balanced' }, saved);
    }
  } catch(e) {}
  return { brand:'classic', density:'standard', lang:'balanced' };
})()/*EDITMODE-END*/;

function App() {
  const [view, setView] = useStateApp('home');
  const [showBroadcast, setShowBroadcast] = useStateApp(true);
  const [navOpen, setNavOpen] = useStateApp(false);
  const navTimerRef = useRefApp(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const clearNavTimer = () => {
    if (navTimerRef.current) {
      clearTimeout(navTimerRef.current);
      navTimerRef.current = null;
    }
  };

  const scheduleNavHide = (delay = 2200) => {
    clearNavTimer();
    navTimerRef.current = setTimeout(() => setNavOpen(false), delay);
  };

  const revealNav = (delay = 2600) => {
    setNavOpen(true);
    if (delay) scheduleNavHide(delay);
    else clearNavTimer();
  };

  useEffectApp(() => () => clearNavTimer(), []);

  // Persist tweaks to localStorage
  useEffectApp(() => {
    try { localStorage.setItem('kfc_tweaks', JSON.stringify(t)); } catch(e) {}
  }, [t]);

  const handleScreenPointerMove = (e) => {
    if (t.density === 'cinematic') return;
    const nearBottom = window.innerHeight - e.clientY < 86;
    if (nearBottom) revealNav(2600);
    else if (navOpen && window.innerHeight - e.clientY > 180) scheduleNavHide(900);
  };

  const handleScreenWheel = (e) => {
    if (t.density === 'cinematic') return;
    if (e.deltaY < -8) revealNav(2200);
    if (e.deltaY > 12 && navOpen) scheduleNavHide(800);
  };

  const handleNavBlur = (e) => {
    if (!e.currentTarget.contains(e.relatedTarget)) scheduleNavHide(900);
  };

  const handleNavSelect = (id) => {
    setView(id);
    revealNav(1200);
  };


  const screens = {
    home: <HomeScreen onNav={setView} lowStock={6} deviceCount={9} onlineCount={8} ordersActive={6} alertsCount={3} mrdExpiring={2} />,
    billing: <BillingScreen onBack={()=>setView('home')} />,
    kitchen: <KitchenScreen onBack={()=>setView('home')} />,
    distribution: <DistributionScreen onBack={()=>setView('home')} />,
    forecast: <ForecastScreen onBack={()=>setView('home')} />,
    inventory: <InventoryScreen onBack={()=>setView('home')} />,
    devices: <DevicesScreen onBack={()=>setView('home')} />,
    shift: <ShiftScreen onBack={()=>setView('home')} />,
    waste: <WasteScreen onBack={()=>setView('home')} />,
    temp: <TempScreen onBack={()=>setView('home')} />,
    kds: <KdsScreen onBack={()=>setView('home')} />,
    mrd: <MrdScreen onBack={()=>setView('home')} />,
  };

  const openTweaks = () => window.postMessage({ type: '__activate_edit_mode' }, '*');

  // lang-en-only class applied when English-only mode is active
  const screenClass = 'screen' + (t.lang === 'english' ? ' lang-en-only' : '');

  return (
    <div className={screenClass}
      data-brand={t.brand}
      data-density={t.density}
      data-lang={t.lang}
      data-nav-open={navOpen ? 'true' : 'false'}
      data-screen-label={`KFC ArDh · ${view}`}
      onPointerMove={handleScreenPointerMove}
      onWheelCapture={handleScreenWheel}>
      <TopBar
        deviceCount={9} onlineCount={8}
        alerts={3} lowStock={6}
        onHome={()=>setView('home')}
        onDevices={()=>setView('devices')}
        onAlerts={()=>setView('shift')}
        onTweaks={openTweaks}
      />
      {showBroadcast && view !== 'kds' && t.density !== 'cinematic' && (
        <div className="broadcast">
          <div className="icon-tag"><span className="material-symbols-rounded" style={{fontSize:18}}>campaign</span></div>
          <div className="marquee">
            <span>
              📣 MANAGER BROADCAST
              <span className="hindi-text"> · प्रबंधक सूचना:</span>
              {' '}Dinner rush starts 19:00 — pre-stage Hot &amp; Crispy now ·
              <span className="hindi-text"> डिनर रश 7 बजे शुरू, हॉट एंड क्रिस्पी अभी तैयार करें · </span>
              {' '}Holding cabinet temp must hit 60°C ·
              <span className="hindi-text">  होल्डिंग कैबिनेट 60°C होना चाहिए ·  </span>
            </span>
          </div>
          <button className="dismiss" onClick={()=>setShowBroadcast(false)}>
            <span className="material-symbols-rounded" style={{fontSize:18}}>close</span>
          </button>
        </div>
      )}
      <div className="content">
        {view === 'home' && t.density === 'battle' && <BattleStrip />}
        {screens[view]}
      </div>
      {t.density !== 'cinematic' && (
        <div className={"appnav-shell" + (navOpen ? " nav-open" : "")}
          onPointerEnter={() => revealNav(0)}
          onPointerLeave={() => scheduleNavHide(900)}
          onFocusCapture={() => revealNav(0)}
          onBlurCapture={handleNavBlur}>
          <button className="appnav-handle" aria-label="Show navigation" onClick={() => revealNav(3600)}>
            <span></span>
          </button>
          <nav className="appnav" aria-label="Quick switch">
            {NAV_ITEMS.map(n => (
              <button key={n.id}
                className={view===n.id?'active':''}
                onClick={()=>handleNavSelect(n.id)}
                title={n.label}
                aria-label={n.label}
                aria-current={view===n.id ? 'page' : undefined}>
                <span className="material-symbols-rounded">{n.icon}</span>
                <span className="nav-label">{n.navLabel || n.label}</span>
              </button>
            ))}
          </nav>
        </div>
      )}

      <TweaksPanel title="Tweaks · KFC ArDh">
        <TweakSection label="Brand Mode" />
        <TweakRadio value={t.brand}
          options={[
            {value:'classic', label:'Classic'},
            {value:'stealth', label:'Stealth'},
            {value:'festival', label:'Festival'},
          ]}
          onChange={v=>setTweak('brand', v)} />
        <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', marginTop:-4, lineHeight:1.4}}>
          {t.brand==='classic' && '☼ Daytime KFC red on bone — the standard.'}
          {t.brand==='stealth' && '◑ Black-ops dark mode for night shift / KDS walls.'}
          {t.brand==='festival' && '✦ Diwali gold celebration — limited-time festive skin.'}
        </div>

        <TweakSection label="Information Density" />
        <TweakRadio value={t.density}
          options={[
            {value:'cinematic', label:'Cinema'},
            {value:'standard', label:'Standard'},
            {value:'battle', label:'Battle'},
          ]}
          onChange={v=>setTweak('density', v)} />
        <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', marginTop:-4, lineHeight:1.4}}>
          {t.density==='cinematic' && '◐ 3 huge tiles. Hero priorities only. Calm.'}
          {t.density==='standard' && '◑ 6 tiles + nav + footer. Default.'}
          {t.density==='battle' && '● Compact + live intel strip. Rush-hour mode.'}
        </div>

        <TweakSection label="Language" />
        <TweakRadio value={t.lang}
          options={[
            {value:'balanced', label:'Bilingual'},
            {value:'english', label:'EN Only'},
          ]}
          onChange={v=>setTweak('lang', v)} />
        <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', marginTop:-4, lineHeight:1.4}}>
          {t.lang==='english' && 'Hindi labels hidden — corporate / training mode.'}
          {t.lang==='balanced' && 'EN primary, Hindi secondary. Default.'}
        </div>
      </TweaksPanel>
    </div>
  );
}

// Battle-station live intel strip
function BattleStrip() {
  const cells = [
    { label:'QUEUE', value:'6', tone:'red', sub:'2 late' },
    { label:'OVERDUE', value:'2', tone:'red', sub:'expedite' },
    { label:'PREP AVG', value:'4:12', tone:'', sub:'target 4:30' },
    { label:'PACK', value:'7', tone:'', sub:'pass' },
    { label:'MRD EXP', value:'2', tone:'amber', sub:'18 min' },
    { label:'HOLD', value:'54°', tone:'red', sub:'low temp' },
    { label:'FRYER 1', value:'182°', tone:'green', sub:'ok' },
    { label:'FRYER 2', value:'178°', tone:'green', sub:'ok' },
    { label:'STOCK LOW', value:'6', tone:'amber', sub:'2 crit' },
    { label:'DEVICES', value:'8/9', tone:'', sub:'1 svc' },
    { label:'CREW', value:'6/8', tone:'green', sub:'ready' },
    { label:'RUSH ETA', value:'19:00', tone:'amber', sub:'+18%' },
    { label:'WASTE', value:'₹420', tone:'', sub:'today' },
    { label:'REVENUE', value:'₹84.2K', tone:'green', sub:'+12%' },
  ];
  return (
    <div className="battle-strip">
      {cells.map(c => (
        <div key={c.label} className={"b-cell" + (c.tone ? ` ${c.tone}` : '')}>
          <span className="lbl">{c.label}</span>
          <span className={"v" + (c.tone ? ` ${c.tone}` : '')}>{c.value}</span>
          <span className="sub">{c.sub}</span>
        </div>
      ))}
    </div>
  );
}

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