// ── APP PRINCIPAL v4 ─────────────────────────────────

function Dashboard({ tiendaId, setModulo }) {
  const tienda = TIENDAS.find(t=>t.id===tiendaId);
  const [prods, setProds] = React.useState([]);
  React.useEffect(()=>{ fetch('data/inventario_real.json').then(r=>r.json()).then(setProds).catch(()=>{}); },[]);
  const misProd   = prods.filter(p=>p.tienda===tiendaId);
  const ordenes   = lsGet('ordenes',[]);
  const ventas    = lsGet('ventas',[]);
  const misOT     = ordenes.filter(o=>o.tiendaOrigen===tiendaId&&o.estado!=='Entregado'&&o.estado!=='Cancelado');
  const urgentes  = ordenes.filter(o=>o.urgente&&o.estado!=='Entregado'&&o.estado!=='Cancelado');
  const ventasHoy = ventas.filter(v=>v.fecha?.slice(0,10)===hoy());
  const totalHoy  = ventasHoy.reduce((s,v)=>s+(v.total||0),0);
  const valorInv  = misProd.reduce((s,p)=>s+(p.precio||0)*(p.stock||0),0);
  const S=dashStyles;
  return (
    <div style={{overflowY:'auto',height:'100%',padding:'16px'}}>
      <div style={S.hero}>
        <div style={{position:'relative',zIndex:1}}>
          <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'25px',fontWeight:300,color:'var(--cream)',letterSpacing:'1px',marginBottom:'3px'}}>✦ {tienda?.nombre}</div>
          <div style={{color:'var(--cream-3)',fontSize:'12px'}}>{new Date().toLocaleDateString('es-CL',{weekday:'long',day:'numeric',month:'long',year:'numeric'})}</div>
        </div>
        <div style={{position:'absolute',top:'10px',right:'18px',color:'rgba(201,168,76,0.25)',fontSize:'34px',lineHeight:1}}>✦</div>
      </div>
      {urgentes.length>0&&<div style={S.alert('danger')} onClick={()=>setModulo('ordenes')}>🔴 {urgentes.length} OT urgente{urgentes.length>1?'s':''} — click para ver</div>}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'8px',margin:'12px 0'}}>
        {[
          {l:'Ventas hoy',   v:clp(totalHoy),    icon:'💰',c:'var(--gold)',  mod:'reportes'},
          {l:'Productos',    v:misProd.length,    icon:'📦',c:'var(--cream)', mod:'inventario'},
          {l:'OT activas',   v:misOT.length,      icon:'🔧',c:'#2980b9',     mod:'ordenes'},
          {l:'Valor inv.',   v:'$'+Math.round(valorInv/1000000).toFixed(1)+'M',icon:'💎',c:'var(--cream-2)',mod:'inventario'},
        ].map(k=>(
          <div key={k.l} onClick={()=>setModulo(k.mod)} style={{...S.kpiCard,cursor:'pointer'}}>
            <div style={{fontSize:'18px',marginBottom:'3px'}}>{k.icon}</div>
            <div style={{color:k.c,fontWeight:700,fontSize:'17px'}}>{k.v}</div>
            <div style={{color:'var(--cream-3)',fontSize:'10px',marginTop:'2px'}}>{k.l}</div>
          </div>
        ))}
      </div>
      <div style={S.card}>
        <div style={S.cardTitle}>Acceso Rápido</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:'5px'}}>
          {[{icon:'🛍️',l:'Vender',mod:'pos'},{icon:'📦',l:'Inventario',mod:'inventario'},{icon:'🔧',l:'OT/Taller',mod:'ordenes'},{icon:'💍',l:'Argollas',mod:'argollas'},{icon:'✨',l:'Grabado',mod:'grabado'},{icon:'⚒️',l:'Hechuras',mod:'hechuras'},{icon:'🎨',l:'Diseño 3D',mod:'diseno3d'},{icon:'👥',l:'Clientes',mod:'clientes'},{icon:'📐',l:'Calculadora',mod:'calculadora'},{icon:'📊',l:'Reportes',mod:'reportes'},{icon:'🎯',l:'Promociones',mod:'promociones'},{icon:'🖼',l:'AV Publicit.',mod:'av-publicitaria'},{icon:'⊞',l:'Vitrinas',mod:'vitrinas'},{icon:'💸',l:'Contabilidad',mod:'contabilidad'},{icon:'⚙️',l:'Ajustes',mod:'ajustes'}].map(a=>(
            <button key={a.l} onClick={()=>setModulo(a.mod)} style={S.quickBtn}>
              <span style={{fontSize:'15px'}}>{a.icon}</span>
              <span style={{fontSize:'9px',color:'var(--cream-2)'}}>{a.l}</span>
            </button>
          ))}
        </div>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px',marginTop:'10px'}}>
        <div style={S.card}>
          <div style={S.cardTitle}>OT Activas</div>
          {misOT.length===0
            ? <div style={{color:'var(--cream-3)',fontSize:'12px',textAlign:'center',padding:'14px'}}>Sin órdenes activas ✓</div>
            : misOT.slice(0,4).map(o=>(
              <div key={o.id} style={S.listaRow}>
                <div style={{flex:1,minWidth:0}}><div style={{color:'var(--cream)',fontSize:'12px',fontWeight:500}}>{o.clienteNombre}</div><div style={{color:'var(--cream-3)',fontSize:'10px'}}>{o.tipo}</div></div>
                <span style={estadoBadge(o.estado)}>{o.estado}</span>
              </div>
            ))
          }
        </div>
        <div style={S.card}>
          <div style={S.cardTitle}>Metales · Precio spot</div>
          {Object.entries(PRECIO_METALES).map(([m,info])=>(
            <div key={m} style={S.listaRow}>
              <div style={{display:'flex',alignItems:'center',gap:'7px'}}>
                <div style={{width:'7px',height:'7px',borderRadius:'50%',background:info.color}}/>
                <span style={{color:'var(--cream)',fontSize:'12px'}}>{m}</span>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{color:'var(--gold)',fontWeight:600,fontSize:'12px'}}>{clp(info.valor)}/g</div>
                <div style={{fontSize:'9px',color:info.variacion>=0?'#27ae60':'#c0392b'}}>{info.variacion>=0?'▲':'▼'}{Math.abs(info.variacion)}%</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const dashStyles = {
  hero:{ background:'linear-gradient(135deg,var(--surface) 0%,var(--bg-card) 100%)',border:'1px solid var(--border)',borderRadius:'13px',padding:'16px 20px',marginBottom:'0',position:'relative',overflow:'hidden' },
  alert:(t)=>({ padding:'8px 12px',borderRadius:'7px',fontSize:'12px',cursor:'pointer',fontWeight:500,marginTop:'10px',background:t==='danger'?'rgba(192,57,43,0.1)':'rgba(243,156,18,0.1)',border:`1px solid ${t==='danger'?'rgba(192,57,43,0.3)':'rgba(243,156,18,0.3)'}`,color:t==='danger'?'#e74c3c':'#f39c12' }),
  kpiCard:{ background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'11px',padding:'12px',textAlign:'center',transition:'border-color 0.15s' },
  card:{ background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'11px',padding:'13px' },
  cardTitle:{ fontFamily:'Cormorant Garamond,serif',fontSize:'14px',fontWeight:600,color:'var(--cream)',marginBottom:'9px',paddingBottom:'6px',borderBottom:'1px solid var(--border)' },
  listaRow:{ display:'flex',justifyContent:'space-between',alignItems:'center',padding:'5px 0',borderBottom:'1px solid var(--border)',gap:'8px' },
  quickBtn:{ display:'flex',flexDirection:'column',alignItems:'center',gap:'3px',padding:'7px 3px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'7px',cursor:'pointer',transition:'all 0.15s',fontFamily:'Inter,sans-serif' },
};

const NAV_GRUPOS = [
  {label:'Principal',items:[{id:'dashboard',icon:'⊹',label:'Dashboard'},{id:'pos',icon:'🛍',label:'Venta POS'},{id:'dia',icon:'🌅',label:'Inicio/Cierre'}]},
  {label:'Inventario',items:[{id:'inventario',icon:'📦',label:'Inventario'},{id:'vitrinas',icon:'⊞',label:'Vitrinas'},{id:'ventas-online',icon:'🌐',label:'Venta Online'}]},
  {label:'Taller',items:[{id:'ordenes',icon:'🔧',label:'OT / Taller'},{id:'argollas',icon:'💍',label:'Argollas'},{id:'hechuras',icon:'⚒',label:'Hechuras'},{id:'grabado',icon:'✨',label:'Grabado Láser'},{id:'diseno3d',icon:'🎨',label:'Diseño 3D'}]},
  {label:'Marketing',items:[{id:'promociones',icon:'🎯',label:'Promociones IA'},{id:'av-publicitaria',icon:'🎨',label:'AV Publicitaria'},{id:'pedidos-catalogo',icon:'🔍',label:'Pedidos Catálogo'}]},
  {label:'Gestión',items:[{id:'clientes',icon:'👥',label:'Clientes'},{id:'artesanos',icon:'🎨',label:'Artesanos'},{id:'metales',icon:'⚖',label:'Metales'},{id:'calculadora',icon:'📐',label:'Calculadora'},{id:'reportes',icon:'📊',label:'Reportes'},{id:'contabilidad',icon:'💸',label:'Contabilidad'}]},
  {label:'Servicios',items:[{id:'devoluciones',icon:'↩',label:'Devoluciones'},{id:'fidelizacion',icon:'🎁',label:'Fidelización'},{id:'insumos',icon:'🧰',label:'Insumos'}]},
  {label:'Sistema',items:[{id:'ajustes',icon:'⚙',label:'Ajustes'}]},
];
const NAV_FLAT = NAV_GRUPOS.flatMap(g=>g.items);

function Sidebar({ modulo, setModulo, tiendaId, setTiendaId }) {
  const ords=lsGet('ordenes',[]); const urg=ords.filter(o=>o.urgente&&o.estado!=='Entregado'&&o.estado!=='Cancelado').length;
  return (
    <div style={{width:'148px',display:'flex',flexDirection:'column',background:'var(--bg-sidebar)',borderRight:'1px solid var(--border)',flexShrink:0,overflow:'hidden'}}>
      <div style={{padding:'12px 10px 10px',display:'flex',flexDirection:'column',alignItems:'center',borderBottom:'1px solid var(--border)'}}>
        <div style={{color:'var(--gold)',fontSize:'13px',lineHeight:1,marginBottom:'4px'}}>✦</div>
        <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'14px',fontWeight:600,color:'var(--cream)',letterSpacing:'2px',lineHeight:1}}>NAVARRO</div>
        <div style={{fontSize:'8px',color:'var(--cream-3)',letterSpacing:'2px',marginTop:'2px'}}>JOYERÍA · ERP</div>
      </div>
      <div style={{display:'flex',gap:'3px',padding:'6px'}}>
        {TIENDAS.map(t=>(
          <button key={t.id} onClick={()=>setTiendaId(t.id)}
            style={{flex:1,padding:'5px 2px',background:tiendaId===t.id?'var(--surface-2)':'var(--surface)',border:`1px solid ${tiendaId===t.id?t.color:'var(--border)'}`,borderRadius:'5px',cursor:'pointer',fontFamily:'Inter,sans-serif',boxShadow:tiendaId===t.id?`0 0 0 1px ${t.color}22`:'none'}}>
            <div style={{display:'flex',alignItems:'center',gap:'3px',justifyContent:'center'}}>
              <div style={{width:'4px',height:'4px',borderRadius:'50%',background:tiendaId===t.id?t.color:'var(--cream-3)'}}/>
              <span style={{fontSize:'9px',fontWeight:600,color:tiendaId===t.id?t.color:'var(--cream-3)'}}>{t.sigla}</span>
            </div>
          </button>
        ))}
      </div>
      <div style={{fontSize:'9px',color:'var(--cream-3)',padding:'0 8px 6px',borderBottom:'1px solid var(--border)',marginBottom:'2px',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
        {TIENDAS.find(t=>t.id===tiendaId)?.nombre}
      </div>
      <nav style={{flex:1,padding:'3px 5px',display:'flex',flexDirection:'column',overflowY:'auto',scrollbarWidth:'none'}}>
        {NAV_GRUPOS.map(grupo=>(
          <div key={grupo.label}>
            <div style={{fontSize:'8px',color:'var(--cream-3)',fontWeight:600,letterSpacing:'0.8px',padding:'7px 5px 2px',textTransform:'uppercase'}}>{grupo.label}</div>
            {grupo.items.map(n=>{
              const badge=n.id==='ordenes'?urg:0;
              return (
                <button key={n.id} onClick={()=>setModulo(n.id)}
                  style={{display:'flex',alignItems:'center',gap:'5px',padding:'5px 6px',borderRadius:'5px',background:modulo===n.id?'var(--gold-dim)':'transparent',border:'none',color:modulo===n.id?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontFamily:'Inter,sans-serif',width:'100%',borderLeft:modulo===n.id?'2px solid var(--gold)':'2px solid transparent',transition:'all 0.1s'}}>
                  <span style={{fontSize:'11px',width:'14px',textAlign:'center'}}>{n.icon}</span>
                  <span style={{flex:1,textAlign:'left',fontSize:'10px'}}>{n.label}</span>
                  {badge>0&&<span style={{background:'#c0392b',color:'white',fontSize:'8px',fontWeight:700,padding:'1px 3px',borderRadius:'10px'}}>{badge}</span>}
                </button>
              );
            })}
          </div>
        ))}
      </nav>
      <div style={{padding:'7px',borderTop:'1px solid var(--border)'}}>
        <div style={{color:'var(--cream-3)',fontSize:'8px',textAlign:'center',lineHeight:'1.6',marginBottom:'4px'}}>
          <div>Colchagua</div><div style={{color:'var(--gold)',letterSpacing:'1px'}}>✦ v5.0</div>
        </div>
        <button onClick={()=>{lsSet('session',null);window.location.reload();}}
          style={{width:'100%',padding:'5px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'5px',color:'var(--cream-3)',cursor:'pointer',fontSize:'9px',fontFamily:'Inter,sans-serif'}}>
          ⬡ Cerrar sesión
        </button>
      </div>
    </div>
  );
}

function App() {
  const {useState,useEffect}=React;
  const saved=(()=>{try{return JSON.parse(localStorage.getItem('navarro-erp-v5')||'{}')}catch{return{}}})();
  const [session, setSession] = useState(()=>{
    // Siempre pedir login al abrir la app — limpiar cualquier sesión guardada
    try { localStorage.removeItem('navarro_session'); } catch {}
    return null;
  });
  // Renueva la marca de tiempo de la sesión — directo a localStorage, SIN subir a la nube
  // (la sesión es local de cada dispositivo, no se sincroniza)
  useEffect(()=>{
    if (!session) return;
    const renovar = () => {
      try {
        const raw = localStorage.getItem('navarro_session');
        const s = raw ? JSON.parse(raw) : null;
        if (s) localStorage.setItem('navarro_session', JSON.stringify({ ...s, loginTs: Date.now() }));
      } catch {}
    };
    const eventos = ['click','keydown'];
    eventos.forEach(ev=>window.addEventListener(ev, renovar));
    return ()=>eventos.forEach(ev=>window.removeEventListener(ev, renovar));
  },[session]);
  const [modulo,   setModulo]   = useState(saved.modulo||'dashboard');
  const [tiendaId, setTiendaId] = useState(saved.tienda||'navarro');
  const [tweaksOn, setTweaksOn] = useState(false);

  // ── Todos los hooks ANTES de cualquier early return ──
  useEffect(()=>{try{localStorage.setItem('navarro-erp-v5',JSON.stringify({modulo,tienda:tiendaId}))}catch{}},[modulo,tiendaId]);
  // Sincronización con la nube (Supabase): al abrir la app en cualquier dispositivo,
  // descarga los datos más recientes y recarga si hubo cambios para reflejarlos.
  useEffect(()=>{
    let cancel=false;
    sbPullAll().then(changed=>{ if(!cancel && changed) window.location.reload(); }).catch(()=>{});
    return ()=>{ cancel=true; };
  },[]);
  // Polling en vivo: cada 30 segundos revisa si hay cambios nuevos en la nube.
  // Si otro dispositivo guardó algo nuevo, esta app lo detecta y recarga automáticamente.
  useEffect(()=>{
    let lastTs = Date.now();
    const check = async () => {
      try {
        const res = await fetch(
          SB_URL+'/rest/v1/kv_store?select=updated_at&order=updated_at.desc&limit=1',
          { headers: SB_HEADERS }
        );
        if (!res.ok) return;
        const rows = await res.json();
        if (!rows.length) return;
        const remoteTs = new Date(rows[0].updated_at).getTime();
        if (remoteTs > lastTs) {
          lastTs = remoteTs;
          const changed = await sbPullAll();
          if (changed) window.location.reload();
        }
      } catch {}
    };
    const interval = setInterval(check, 30000); // cada 30 segundos
    return () => clearInterval(interval);
  },[]);
  useEffect(()=>{
    const h=e=>{if(e.data?.type==='__activate_edit_mode')setTweaksOn(true);if(e.data?.type==='__deactivate_edit_mode')setTweaksOn(false);};
    window.addEventListener('message',h);
    window.parent.postMessage({type:'__edit_mode_available'},'*');
    return()=>window.removeEventListener('message',h);
  },[]);

  const [syncStatus, setSyncStatus] = useState('ok'); // 'ok' | 'syncing' | 'error'
  // Exponer setSyncStatus globalmente para que sbPush pueda actualizarlo
  useEffect(()=>{
    window.__setSyncStatus = setSyncStatus;
    return ()=>{ delete window.__setSyncStatus; };
  },[setSyncStatus]);

  function handleLogin(user) { setSession(user); if(user.tienda) setTiendaId(user.tienda); }
  function handleLogout() { lsSet('session',null); setSession(null); }

  if(!session) return <Login onLogin={handleLogin}/>;

  const TWEAK_DEFAULTS=/*EDITMODE-BEGIN*/{"accentColor":"#c9a84c"}/*EDITMODE-END*/;
  const navItem=NAV_FLAT.find(n=>n.id===modulo);
  return (
    <>
      {tweaksOn&&(
        <div style={{position:'fixed',bottom:'18px',right:'18px',zIndex:200,background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'12px',padding:'14px',width:'185px',boxShadow:'0 8px 32px rgba(0,0,0,0.5)'}}>
          <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'14px',fontWeight:600,color:'var(--cream)',marginBottom:'9px',paddingBottom:'6px',borderBottom:'1px solid var(--border)'}}>✦ Tweaks</div>
          <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Color acento</div>
          <input type="color" defaultValue={TWEAK_DEFAULTS.accentColor} onChange={e=>{document.documentElement.style.setProperty('--gold',e.target.value);window.parent.postMessage({type:'__edit_mode_set_keys',edits:{accentColor:e.target.value}},'*');}} style={{width:'100%',height:'30px',borderRadius:'6px',border:'1px solid var(--border)',cursor:'pointer'}}/>
        </div>
      )}
      <Sidebar modulo={modulo} setModulo={setModulo} tiendaId={tiendaId} setTiendaId={setTiendaId}/>
      <div style={{flex:1,display:'flex',flexDirection:'column',overflow:'hidden',background:'var(--bg)'}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'6px 13px',borderBottom:'1px solid var(--border)',flexShrink:0,background:'var(--bg-card)'}}>
          <div style={{display:'flex',alignItems:'center',gap:'6px'}}>
            <span style={{color:'var(--cream-3)',fontSize:'13px'}}>{navItem?.icon}</span>
            <span style={{color:'var(--cream)',fontSize:'12px',fontWeight:500}}>{navItem?.label}</span>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:'7px'}}>
            <span style={{fontSize:'10px',color:'var(--cream-3)'}}>{new Date().toLocaleTimeString('es-CL',{hour:'2-digit',minute:'2-digit'})}</span>
            <span style={{padding:'2px 8px',borderRadius:'20px',fontSize:'9px',fontWeight:600,
              background: syncStatus==='ok'?'rgba(39,174,96,0.12)':syncStatus==='syncing'?'rgba(243,156,18,0.12)':'rgba(192,57,43,0.12)',
              color:       syncStatus==='ok'?'#27ae60'             :syncStatus==='syncing'?'#f39c12'             :'#c0392b',
              border:      syncStatus==='ok'?'1px solid rgba(39,174,96,0.3)':syncStatus==='syncing'?'1px solid rgba(243,156,18,0.3)':'1px solid rgba(192,57,43,0.3)'}}>
              {syncStatus==='ok'?'☁ Nube OK':syncStatus==='syncing'?'↑ Sincronizando…':'⚠ Sin conexión'}
            </span>
            <span style={{padding:'2px 8px',borderRadius:'20px',fontSize:'9px',fontWeight:600,background:'rgba(39,174,96,0.12)',color:'#27ae60',border:'1px solid rgba(39,174,96,0.3)'}}>● Activo</span>
          </div>
        </div>
        <div style={{flex:1,overflow:'hidden'}} className="fade-in" key={modulo+tiendaId}>
          {modulo==='dashboard'     && <Dashboard tiendaId={tiendaId} setModulo={setModulo}/>}
          {modulo==='pos'           && <POS tiendaId={tiendaId}/>}
          {modulo==='dia'           && <InicioCierreDia tiendaId={tiendaId} setModulo={setModulo}/>}
          {modulo==='inventario'    && <InventarioReal tiendaId={tiendaId}/>}
          {modulo==='vitrinas'       && <Vitrinas tiendaId={tiendaId}/>}
          {modulo==='ventas-online'  && <VentaOnline/>}
          {modulo==='promociones'    && <Promociones/>}
          {modulo==='av-publicitaria'&& <AVPublicitaria/>}
          {modulo==='pedidos-catalogo'&&<PedidosCatalogo/>}
          {modulo==='clientes'       && <Clientes/>}
          {modulo==='artesanos'      && <Artesanos/>}
          {modulo==='ordenes'       && <Ordenes tiendaId={tiendaId}/>}
          {modulo==='argollas'      && <Argollas/>}
          {modulo==='hechuras'      && <Hechuras/>}
          {modulo==='grabado'       && <GrabadoLaser/>}
          {modulo==='diseno3d'      && <Diseno3D/>}
          {modulo==='metales'       && <Metales/>}
          {modulo==='calculadora'   && <Calculadora/>}
          {modulo==='reportes'      && <Reportes/>}
          {modulo==='contabilidad'  && <Contabilidad/>}
          {modulo==='ajustes'       && <Ajustes tiendaId={tiendaId}/>}
          {modulo==='devoluciones'  && <Devoluciones tiendaId={tiendaId}/>}
          {modulo==='fidelizacion'  && <RegalosFidelizacion/>}
          {modulo==='insumos'       && <Insumos/>}
        </div>
      </div>
    </>
  );
}

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