// Shell: sidebar, topbar, command palette, toasts
const { useState, useEffect, useRef, useMemo } = React;

const NAV = [
  { id:'dashboard', label:'Dashboard', icon:'BarChart' },
  { id:'inventory', label:'Inventario', icon:'Box', badge:42 },
  { id:'sales', label:'Ventas', icon:'Cart' },
  { id:'forecasts', label:'Pronósticos', icon:'Trend' },
  { id:'alerts', label:'Alertas', icon:'Bell', badge:7 },
  { id:'reports', label:'Reportes', icon:'Doc' },
  { id:'stores', label:'Tiendas', icon:'Store' },
  { id:'products', label:'Productos', icon:'Tag' },
  { id:'suppliers', label:'Proveedores', icon:'Truck' },
  { id:'users', label:'Usuarios', icon:'Users' },
  { id:'integrations', label:'Integraciones', icon:'Plug' },
  { id:'settings', label:'Configuración', icon:'Cog' },
];

function Sidebar({active, onNav, open, onClose}){
  const I = window.Icons;
  return (
    <>
    <div className={"sidebar-overlay" + (open ? " open" : "")} onClick={onClose} />
    <aside className={"sidebar" + (open ? " open" : "")}>
      <div className="brand">
        <div className="brand-mark">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 20V4h12"/><path d="M4 12h10"/><path d="M14 20l5-8 4 8z"/></svg>
        </div>
        FLUX
        <span style={{fontSize:'9px',fontWeight:700,letterSpacing:'.12em',color:'#c8a96e',marginLeft:4,alignSelf:'center'}}>by ZENITH</span>
      </div>

      <div className="nav-section">Sector retail<span className="nav-pill">PRO</span></div>

      {NAV.map(item=>{
        const Ic = I[item.icon];
        return (
          <button key={item.id} className={`nav-item ${active===item.id?'active':''}`} onClick={()=>onNav(item.id)}>
            <Ic className="nav-icon" />
            <span>{item.label}</span>
            {item.badge && <span className={`nav-badge ${active===item.id?'':'muted'}`}>{item.badge}</span>}
          </button>
        );
      })}

      <div className="sidebar-footer">
        <a href="https://zenithq.co" target="_blank" rel="noreferrer" style={{display:'flex',alignItems:'center',justifyContent:'center',gap:6,padding:'8px 12px',border:'1px solid #c8a96e',borderRadius:9,color:'#c8a96e',fontWeight:700,fontSize:11,letterSpacing:'.06em',textDecoration:'none',transition:'background .15s'}} onMouseEnter={e=>e.currentTarget.style.background='rgba(200,169,110,.1)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1L9 5L5 9" stroke="#c8a96e" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M1 5H9" stroke="#c8a96e" strokeWidth="1.5" strokeLinecap="round"/></svg>
          Desarrollado por ZENITH
        </a>
        <div className="plan-card">
          <div className="plan-row"><span className="plan-name">Plan Enterprise</span><span className="plan-active">Activo</span></div>
          <div className="plan-meta">Renovación: 12 jun 2026</div>
          <div className="plan-link">Ver detalles del plan</div>
        </div>
        <div className="user-row">
          <div className="avatar">MG</div>
          <div style={{minWidth:0}}>
            <div className="user-name">María González</div>
            <div className="user-role">Admin</div>
          </div>
          <I.ChevDown className="user-chev" size={14}/>
        </div>
      </div>
    </aside>
    </>
  );
}

function Topbar({active, onCmdK, onTheme, theme, onToggleCopilot, onAlerts, onMenuToggle}){
  const I = window.Icons;
  const labels = {
    dashboard:'Dashboard', inventory:'Inventario', sales:'Ventas', forecasts:'Pronósticos',
    alerts:'Alertas', reports:'Reportes', stores:'Tiendas', products:'Productos',
    suppliers:'Proveedores', users:'Usuarios', integrations:'Integraciones', settings:'Configuración'
  };
  return (
    <header className="topbar">
      <button className="hamburger" onClick={onMenuToggle} aria-label="Menú">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
      <div className="breadcrumbs">
        <span className="crumb">2026</span>
        <I.ChevRight size={12} className="sep"/>
        <span className="current">{labels[active] || active}</span>
      </div>
      <div className="topbar-spacer"></div>

      <div className="search-box" onClick={onCmdK}>
        <I.Search size={14}/>
        <span>Buscar productos, tiendas, SKUs...</span>
        <span className="kbd"><span className="kbd-key">⌘</span><span className="kbd-key">K</span></span>
      </div>

      <button className="btn"><I.Calendar/> 1 may. – 31 may. 2026 <I.ChevDown size={12}/></button>
      <button className="btn"><I.Filter/> Filtros</button>

      <button className="icon-btn" onClick={onTheme} title="Tema">
        {theme==='dark'? <I.Sun size={15}/> : <I.Moon size={15}/>}
      </button>

      <button className="icon-btn" onClick={onAlerts}>
        <I.Bell size={15}/>
        <span className="dot"></span>
      </button>

      <button className="btn primary"><I.Download/> Exportar reporte</button>
    </header>
  );
}

// Command palette (Cmd+K)
function CmdPalette({open, onClose, onNav, onAction}){
  const I = window.Icons;
  const [q, setQ] = useState('');
  const [sel, setSel] = useState(0);
  const inputRef = useRef(null);
  useEffect(()=>{
    if(open){ setQ(''); setSel(0); setTimeout(()=>inputRef.current?.focus(), 30); }
  }, [open]);

  const items = useMemo(()=>{
    const navItems = NAV.map(n=>({type:'nav',id:n.id,label:n.label,icon:n.icon,group:'Navegar'}));
    const skuItems = window.FLUXData.skus.slice(0,6).map(s=>({type:'sku',id:s.sku,label:`${s.sku} — ${s.name}`,sub:s.category,icon:'Tag',group:'Productos'}));
    const storeItems = window.FLUXData.stores.slice(0,5).map(s=>({type:'store',id:s.id,label:s.name,sub:s.city,icon:'Store',group:'Tiendas'}));
    const actions = [
      {type:'action',id:'export',label:'Exportar reporte mensual',icon:'Download',group:'Acciones'},
      {type:'action',id:'sync',label:'Forzar sincronización ahora',icon:'Sync',group:'Acciones'},
      {type:'action',id:'newsku',label:'Crear nuevo SKU',icon:'Plus',group:'Acciones'},
      {type:'action',id:'invite',label:'Invitar usuario',icon:'Users',group:'Acciones'},
      {type:'action',id:'copilot',label:'Abrir FLUX Copilot',icon:'Sparkles',group:'Acciones'},
    ];
    const all = [...navItems, ...actions, ...skuItems, ...storeItems];
    if(!q) return all;
    const ql = q.toLowerCase();
    return all.filter(i => i.label.toLowerCase().includes(ql) || (i.sub||'').toLowerCase().includes(ql));
  }, [q]);

  const grouped = useMemo(()=>{
    const m = {};
    items.forEach(i=>{ (m[i.group] = m[i.group] || []).push(i); });
    return m;
  }, [items]);

  useEffect(()=>{
    if(!open) return;
    const onKey = (e)=>{
      if(e.key==='Escape'){ onClose(); }
      else if(e.key==='ArrowDown'){ e.preventDefault(); setSel(s=>Math.min(s+1, items.length-1)); }
      else if(e.key==='ArrowUp'){ e.preventDefault(); setSel(s=>Math.max(s-1, 0)); }
      else if(e.key==='Enter'){
        const it = items[sel];
        if(!it) return;
        if(it.type==='nav') onNav(it.id);
        else onAction(it);
        onClose();
      }
    };
    window.addEventListener('keydown', onKey);
    return ()=> window.removeEventListener('keydown', onKey);
  },[open,items,sel]);

  if(!open) return null;
  let idx = -1;
  return (
    <div className="overlay" onClick={onClose} style={{alignItems:'flex-start',paddingTop:'12vh'}}>
      <div className="cmdk" onClick={e=>e.stopPropagation()}>
        <div className="cmdk-input">
          <I.Search size={16}/>
          <input ref={inputRef} value={q} onChange={e=>{setQ(e.target.value);setSel(0)}} placeholder="Buscar o ejecutar comando..." />
          <span className="kbd-key">esc</span>
        </div>
        <div className="cmdk-list">
          {Object.entries(grouped).map(([g,its])=>(
            <div key={g}>
              <div className="cmdk-group">{g}</div>
              {its.map((it)=>{
                idx++;
                const myIdx = idx;
                const Ic = I[it.icon] || I.Search;
                return (
                  <div key={it.type+it.id} className={`cmdk-item ${myIdx===sel?'sel':''}`} onMouseEnter={()=>setSel(myIdx)} onClick={()=>{
                    if(it.type==='nav') onNav(it.id);
                    else onAction(it);
                    onClose();
                  }}>
                    <span className="ic"><Ic/></span>
                    <span style={{display:'flex',flexDirection:'column'}}>
                      <span>{it.label}</span>
                      {it.sub && <span style={{fontSize:11,color:'var(--ink-3)'}}>{it.sub}</span>}
                    </span>
                    <span className="meta">{it.type==='nav'?'Ir a':it.type==='action'?'Ejecutar':'Abrir'}</span>
                  </div>
                );
              })}
            </div>
          ))}
          {items.length===0 && <div style={{padding:'24px',textAlign:'center',color:'var(--ink-3)',fontSize:13}}>Sin resultados</div>}
        </div>
      </div>
    </div>
  );
}

// Toast manager
function useToasts(){
  const [toasts, setToasts] = useState([]);
  const push = (msg) => {
    const id = Math.random();
    setToasts(t=>[...t,{id,msg}]);
    setTimeout(()=> setToasts(t=>t.filter(x=>x.id!==id)), 2800);
  };
  return { toasts, push };
}

function Toasts({toasts}){
  const I = window.Icons;
  return (
    <div className="toasts">
      {toasts.map(t=>(
        <div className="toast" key={t.id}>
          <span className="check"><I.Check/></span>
          <span>{t.msg}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, CmdPalette, Toasts, useToasts, NAV });