/* ===== App shell — sidebar nav + screen router ===== */
const NAV = [
  { sec: 'Workspace', items: [
    { id: 'home',             label: 'Home',             icon: 'home' },
    { id: 'dashboard',        label: 'Dashboard',        icon: 'history',  count: '42' },
    { id: 'sku',              label: 'SKU library',      icon: 'sku',      count: '2.1k' },
  ]},
  { sec: 'Modules', items: [
    { id: 'cartonization',    label: 'Cartonization',    icon: 'carton' },
    { id: 'palletization',    label: 'Palletization',    icon: 'pallet' },
    { id: 'containerization', label: 'Containerization', icon: 'container', count: '●' },
  ]},
  { sec: 'Outputs', items: [
    { id: 'reports',          label: 'Reports',          icon: 'report' },
    { id: 'settings',         label: 'Rules & settings', icon: 'settings' },
  ]},
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showStopOption": true
}/*EDITMODE-END*/;

const App = () => {
  const [screen, setScreen] = React.useState('home');
  const [excelOpen, setExcelOpen] = React.useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const navigate = (s) => setScreen(s);

  let screenEl = null;
  switch (screen) {
    case 'home':             screenEl = <HomeScreen onNavigate={navigate}/>; break;
    case 'dashboard':        screenEl = <DashboardScreen onNavigate={navigate}/>; break;
    case 'sku':              screenEl = <SkuLibraryScreen onOpenExcel={() => setExcelOpen(true)}/>; break;
    case 'cartonization':    screenEl = <CartonizationScreen onNavigate={navigate}/>; break;
    case 'palletization':    screenEl = <PalletizationScreen onNavigate={navigate}/>; break;
    case 'containerization': screenEl = <ContainerizationScreen onOpenExcel={() => setExcelOpen(true)} showStopOption={t.showStopOption}/>; break;
    case 'reports':          screenEl = <ReportsScreen/>; break;
    case 'settings':         screenEl = <RulesScreen onOpenExcel={() => setExcelOpen(true)}/>; break;
    default: screenEl = <HomeScreen onNavigate={navigate}/>;
  }

  const screenLabel = (() => {
    for (const sec of NAV) for (const it of sec.items) if (it.id === screen) return it.label;
    return '—';
  })();

  return (
    <div className="app">
      {/* Brand block (top-left) */}
      <div className="app__brand">
        <div className="app__brand-mark">
          <BrandIcon/>
        </div>
        <span className="app__brand-name">MOJRO</span>
        <span style={{ marginLeft:'auto', fontSize:10, color:'var(--ink-on-dark-3)', textTransform:'uppercase', letterSpacing:'0.12em' }}>v2.4</span>
      </div>

      {/* Top bar */}
      <div className="app__topbar">
        <div className="app__crumbs">
          <span>Load builder</span>
          <span className="sep">/</span>
          <b>{screenLabel}</b>
        </div>
        <div className="app__topbar-actions">
          <div style={{ position:'relative' }}>
            <Icon name="search" size={13} style={{ position:'absolute', left:10, top:8, color:'var(--ink-on-dark-3)' }}/>
            <input placeholder="Search plans, SKUs, rules…"
              style={{ width:280, padding:'6px 10px 6px 28px', background:'var(--bg-chrome-2)', border:'1px solid var(--line-on-dark-2)', borderRadius:6, color:'var(--ink-on-dark)', fontSize:12.5, outline:'none' }}/>
            <span className="mono" style={{ position:'absolute', right:8, top:5, fontSize:10, color:'var(--ink-on-dark-3)', padding:'2px 4px', border:'1px solid var(--line-on-dark-2)', borderRadius:3 }}>⌘K</span>
          </div>
          <button className="btn btn--icon btn--dark" title="Notifications"><Icon name="bell" size={14}/></button>
          <button className="btn btn--dark" style={{ paddingLeft:8 }}>
            <span style={{ width:22, height:22, borderRadius:'50%', background:'linear-gradient(135deg,#E8893C,#C13333)', color:'#fff', display:'grid', placeItems:'center', fontSize:10, fontWeight:700, marginRight:6 }}>PR</span>
            Priya R.
          </button>
        </div>
      </div>

      {/* Sidebar */}
      <nav className="app__sidebar">
        {NAV.map(sec => (
          <div key={sec.sec}>
            <div className="nav-section">{sec.sec}</div>
            {sec.items.map(it => (
              <div key={it.id}
                className={"nav-item" + (it.id === screen ? ' nav-item--active' : '')}
                onClick={() => navigate(it.id)}>
                <Icon name={it.icon} size={15}/>
                <span>{it.label}</span>
                {it.count && <span className="count">{it.count}</span>}
              </div>
            ))}
          </div>
        ))}
        <div style={{ flex:1 }}/>
        <div style={{ padding:'12px 10px', borderTop:'1px solid var(--line-on-dark)', color:'var(--ink-on-dark-3)', fontSize:11 }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:6 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--ok)' }}/>
            <span>Optimizer · online</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between' }}>
            <span>Quota</span>
            <span className="mono">2.18k / 10k</span>
          </div>
          <div style={{ height:3, background:'var(--bg-chrome-3)', borderRadius:2, marginTop:4, overflow:'hidden' }}>
            <div style={{ width:'22%', height:'100%', background:'var(--mojro-red)' }}/>
          </div>
        </div>
      </nav>

      {/* Main */}
      <main className="app__main">
        {screenEl}
      </main>

      {/* Excel modal */}
      <ExcelUploadModal open={excelOpen} onClose={() => setExcelOpen(false)} onConfirm={() => setExcelOpen(false)}/>

      {/* Tweaks panel */}
      <TweaksPanel>
        <TweakSection label="Containerization toolbar"/>
        <TweakToggle
          label="Show ‘Stop’ colour mode"
          value={t.showStopOption}
          onChange={(v) => setTweak('showStopOption', v)}
        />
      </TweaksPanel>
    </div>
  );
};

const BrandIcon = () => (
  /* Stylised stack of cubes — nods to Mojro logo */
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
    <polygon points="12,2 22,7 12,12 2,7" fill="#F0B830"/>
    <polygon points="2,7 12,12 12,22 2,17" fill="#C13333"/>
    <polygon points="22,7 12,12 12,22 22,17" fill="#E8893C"/>
  </svg>
);

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