function PageStores({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  const [view, setView] = React.useState('grid');
  const [selected, setSelected] = React.useState(null);

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Tiendas</h1>
        <p className="page-sub">{D.stores.length} puntos de venta activos en México. Visualización por mapa, grid o tabla.</p>
      </div>

      <div style={{display:'flex',gap:10,marginBottom:14,alignItems:'center'}}>
        <div className="seg">
          <button className={`seg-item ${view==='grid'?'active':''}`} onClick={()=>setView('grid')}>Grid</button>
          <button className={`seg-item ${view==='table'?'active':''}`} onClick={()=>setView('table')}>Tabla</button>
          <button className={`seg-item ${view==='map'?'active':''}`} onClick={()=>setView('map')}>Mapa</button>
        </div>
        <div style={{marginLeft:'auto',display:'flex',gap:8}}>
          <button className="btn sm"><I.Filter size={12}/> Filtrar</button>
          <button className="btn sm primary"><I.Plus size={12}/> Nueva tienda</button>
        </div>
      </div>

      {view==='grid' && (
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
          {D.stores.map(s=>(
            <div key={s.id} className="card" style={{cursor:'pointer'}} onClick={()=>setSelected(s)}>
              <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',marginBottom:12}}>
                <div>
                  <div style={{fontSize:15,fontWeight:700,color:'var(--ink)'}}>{s.name}</div>
                  <div style={{fontSize:12,color:'var(--ink-3)',marginTop:2}}>{s.city} · {s.manager}</div>
                </div>
                {s.alerts>0 ? <span className="chip amber">{s.alerts} alerta{s.alerts>1?'s':''}</span> : <span className="chip green"><span className="dot"/>OK</span>}
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:10}}>
                <div><div style={{fontSize:11,color:'var(--ink-3)'}}>Ventas</div><div className="mono" style={{fontSize:18,fontWeight:700}}>${(s.sales/1000).toFixed(0)}K</div><span className="delta up"><I.ArrowUp size={10}/> {s.salesDelta}%</span></div>
                <div><div style={{fontSize:11,color:'var(--ink-3)'}}>Quiebres</div><div className="mono" style={{fontSize:18,fontWeight:700}}>{s.breakages}%</div><span className="delta down"><I.ArrowDown size={10}/> {s.breakagesDelta}%</span></div>
              </div>
              <div style={{paddingTop:10,borderTop:'1px solid var(--line-2)',display:'flex',justifyContent:'space-between',fontSize:12,color:'var(--ink-3)'}}>
                <span>{s.inventory.toLocaleString()} u. inventario</span><span>Rotación {s.rotation}d</span>
              </div>
            </div>
          ))}
        </div>
      )}

      {view==='table' && (
        <div className="card flush">
          <table className="t">
            <thead><tr><th>Tienda</th><th>Ciudad</th><th>Manager</th><th>Ventas</th><th>Δ</th><th>Quiebres</th><th>Inventario</th><th>Rotación</th><th>Alertas</th></tr></thead>
            <tbody>
              {D.stores.map(s=>(
                <tr key={s.id} onClick={()=>setSelected(s)} style={{cursor:'pointer'}}>
                  <td style={{color:'var(--ink)',fontWeight:600}}>{s.name}</td>
                  <td>{s.city}</td>
                  <td>{s.manager}</td>
                  <td className="num mono">${s.sales.toLocaleString()}</td>
                  <td><span className="delta up"><I.ArrowUp size={11}/> {s.salesDelta}%</span></td>
                  <td className="num mono">{s.breakages}%</td>
                  <td className="num mono">{s.inventory.toLocaleString()}</td>
                  <td className="num mono">{s.rotation}d</td>
                  <td>{s.alerts>0?<span className="chip amber">{s.alerts}</span>:<span style={{color:'var(--ink-4)'}}>0</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {view==='map' && (
        <div className="card" style={{padding:0,position:'relative',overflow:'hidden',height:540}}>
          {/* Stylized Mexico map */}
          <svg viewBox="0 0 800 540" style={{width:'100%',height:'100%',display:'block',background:'var(--surface-2)'}}>
            <defs>
              <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
                <path d="M 32 0 L 0 0 0 32" fill="none" stroke="var(--line)" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="800" height="540" fill="url(#grid)"/>
            {/* simplified Mexico shape */}
            <path d="M 80 180 L 220 140 L 320 130 L 420 160 L 520 200 L 600 250 L 680 320 L 720 400 L 660 460 L 540 480 L 420 460 L 360 420 L 280 390 L 200 350 L 140 280 Z" fill="var(--surface)" stroke="var(--line)" strokeWidth="2"/>
            {/* Plot stores. Convert lat/lng to canvas coordinates roughly */}
            {D.stores.map(s=>{
              const x = ((s.lng + 118) / 32) * 700 + 60;
              const y = ((33 - s.lat) / 18) * 380 + 90;
              return (
                <g key={s.id} style={{cursor:'pointer'}} onClick={()=>setSelected(s)}>
                  <circle cx={x} cy={y} r="14" fill="#F5A524" opacity="0.18"/>
                  <circle cx={x} cy={y} r="7" fill="#F5A524" stroke="#fff" strokeWidth="2"/>
                  <text x={x+12} y={y+4} fontSize="11" fontWeight="600" fill="var(--ink)">{s.id}</text>
                  <text x={x+12} y={y+17} fontSize="10" fill="var(--ink-3)">${(s.sales/1000000).toFixed(1)}M</text>
                </g>
              );
            })}
          </svg>
          <div style={{position:'absolute',top:16,left:16,background:'var(--surface)',border:'1px solid var(--line)',borderRadius:10,padding:'10px 14px',fontSize:12,color:'var(--ink-2)'}}>
            <div style={{fontWeight:700,color:'var(--ink)',marginBottom:4}}>Cadena nacional</div>
            {D.stores.length} tiendas · {D.stores.reduce((a,s)=>a+s.inventory,0).toLocaleString()} u. inventario
          </div>
        </div>
      )}

      {selected && (
        <div className="overlay" onClick={()=>setSelected(null)}>
          <div className="modal" onClick={e=>e.stopPropagation()}>
            <div style={{padding:'18px 22px',borderBottom:'1px solid var(--line)'}}>
              <div style={{fontSize:18,fontWeight:700,color:'var(--ink)'}}>{selected.name}</div>
              <div style={{fontSize:12.5,color:'var(--ink-3)'}}>{selected.city} · Manager: {selected.manager}</div>
            </div>
            <div style={{padding:22,display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
              <div className="card" style={{padding:14}}><div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>Ventas</div><div className="mono" style={{fontSize:22,fontWeight:800}}>${selected.sales.toLocaleString()}</div><span className="delta up"><I.ArrowUp size={11}/> {selected.salesDelta}%</span></div>
              <div className="card" style={{padding:14}}><div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>Inventario</div><div className="mono" style={{fontSize:22,fontWeight:800}}>{selected.inventory.toLocaleString()}</div><span style={{fontSize:12,color:'var(--ink-3)'}}>{selected.rotation}d rotación</span></div>
              <div className="card" style={{padding:14}}><div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>Alertas</div><div className="mono" style={{fontSize:22,fontWeight:800,color:selected.alerts>0?'var(--amber-2)':'var(--green)'}}>{selected.alerts}</div></div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
window.PageStores = PageStores;