/* ============ DAR AYLA OPS V2 — SHELL (Sidebar + Topbar) ============ */
const { useState, useEffect, useMemo } = React;

function Sidebar({ current, onNav, kpis, lang }) {
  const t = (fr, en) => lang === 'EN' ? en : fr;
  const items = [
    { k:'today',     label: t('Aujourd’hui','Today'),         icon: I.home, badge: kpis.arrivals },
    { k:'inbox',     label: t('Messages','Inbox'),            icon: I.inbox, badge: 4 },
    { k:'calendar',  label: t('Calendrier','Calendar'),       icon: I.cal },
    { k:'reservations', label: t('Réservations','Bookings'),  icon: I.resa },
    { k:'suites',    label: t('Suites','Suites'),             icon: I.spark },
    { k:'cleaning',  label: t('Ménages','Housekeeping'),      icon: I.broom, badge: kpis.todoMng },
    { k:'requests',  label: t('Demandes','Guest requests'),   icon: I.bell,  badge: kpis.pendingReq },
    { k:'inventory', label: t('Inventaire','Inventory'),      icon: I.box,   badge: kpis.lowStock, badgeWarn: true },
    { k:'incidents', label: t('Maintenance','Maintenance'),   icon: I.wrench, badge: kpis.openIncidents },
  ];
  const second = [
    { k:'analytics', label: t('Analytics','Analytics'),       icon: I.chart },
    { k:'finance',   label: t('Finances','Finance'),          icon: I.euro },
    { k:'vendors',   label: t('Prestataires','Vendors'),      icon: I.users },
    { k:'portals',   label: t('Portails voyageurs','Guest portals'), icon: I.link },
  ];
  const Item = ({ it }) => (
    <li className={`nav-item ${current===it.k?'active':''}`} onClick={() => onNav(it.k)}>
      <it.icon className="nav-icon"/>
      <span>{it.label}</span>
      {it.badge ? <span className="nav-badge" style={it.badgeWarn?{background:'var(--warn-soft)',color:'var(--warn)'}:{}}>{it.badge}</span> : null}
    </li>
  );
  return (
    <aside className="sidebar app-side">
      <div className="brand">
        <div className="brand-mark">A</div>
        <div className="brand-text">
          <span className="brand-name">Dar Ayla</span>
          <span className="brand-sub">OPS · Marrakech</span>
        </div>
      </div>
      <ul className="nav">
        <li className="nav-section-label">{t('Opérations','Operations')}</li>
        {items.map(it => <Item key={it.k} it={it}/>)}
        <li className="nav-section-label">{t('Pilotage','Steering')}</li>
        {second.map(it => <Item key={it.k} it={it}/>)}
      </ul>
      <div className="sidebar-foot">
        <div className="user-avatar">L</div>
        <div className="user-meta">
          <div className="user-name">Larissa Benhamou</div>
          <div className="user-role">{t('Propriétaire','Owner')} · Dar Ayla</div>
        </div>
        <button className="user-pop" title={t('Compte','Account')}><I.more/></button>
      </div>
    </aside>
  );
}

function Topbar({ current, lang, setLang, theme, setTheme, onCmd }) {
  const t = (fr, en) => lang === 'EN' ? en : fr;
  const titles = {
    today: t('Aujourd’hui','Today'), inbox: t('Messages voyageurs','Guest inbox'),
    calendar: t('Calendrier','Calendar'), reservations: t('Réservations','Bookings'),
    suites: t('Suites','Suites'), cleaning: t('Ménages & turnover','Housekeeping & turnover'),
    requests: t('Demandes voyageurs','Guest requests'), inventory: t('Inventaire','Inventory'),
    incidents: t('Maintenance','Maintenance'), analytics: t('Analytics','Analytics'),
    finance: t('Finances','Finance'), vendors: t('Prestataires','Vendors'),
    portals: t('Portails voyageurs','Guest portals'), mobile: t('App équipe','Team app'),
  };
  const today = new Date().toLocaleDateString(lang==='EN'?'en-GB':'fr-FR', { weekday:'long', day:'numeric', month:'long' });
  return (
    <header className="topbar app-top">
      <div className="crumbs">
        <span>Dar Ayla</span>
        <span className="sep">/</span>
        <strong>{titles[current] || current}</strong>
      </div>
      <span className="lodgify-sync"><span className="ping"/>{t('Lodgify · sync live','Lodgify · live sync')}</span>
      <div className="top-search" onClick={onCmd}>
        <I.search/>
        <input placeholder={t('Rechercher voyageur, suite, tâche…','Search guest, suite, task…')} readOnly/>
        <kbd>⌘K</kbd>
      </div>
      <div className="top-actions">
        <div className="lang-toggle">
          <button className={lang==='FR'?'on':''} onClick={() => setLang('FR')}>FR</button>
          <button className={lang==='EN'?'on':''} onClick={() => setLang('EN')}>EN</button>
        </div>
        <button className="icon-btn" title={t('Thème','Theme')} onClick={() => setTheme(theme==='dark'?'light':'dark')}>
          {theme==='dark' ? <I.sun/> : <I.moon/>}
        </button>
        <button className="icon-btn" title={t('Notifications','Notifications')}>
          <I.bell/><span className="pulse-dot"/>
        </button>
      </div>
    </header>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;