/* Santos OS — Analítica (filtered sales analytics + focused metric charts) */
function Analitica({ onToast, focus, onClearFocus }) {
  const T = window.T;
  const [range, setRange] = React.useState('1m');
  const ranges = [['1w','1 sem'],['1m','1 mes'],['3m','3 meses'],['6m','6 meses']];
  const cats = [['Analgésicos',128400,'#0E4D43'],['Crónicos',96200,'#E8743A'],['Antibióticos',74100,'#4A7C72'],['Cuidado personal',58300,'#B8392F'],['Gastro',41900,'#D97706']];
  const max = 128400;
  const branches = [['Santa Rita',254000,'#0E4D43'],['Copán Ruinas',180000,'#4A7C72'],['CEDI (despachos)',420000,'#C9DFDB']];
  const bmax = 420000;
  const cfg = focus && window.CHART_CFG[focus];

  return (
    <div style={{flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:T.bg}}>
      <div style={{background:T.primary, paddingTop:52, paddingBottom:14, padding:'52px 16px 14px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <window.Wordmark size={20} sub="ANALÍTICA" />
        <button onClick={()=>onToast('12 filtros disponibles')} style={{background:'rgba(255,255,255,0.15)', border:'none', borderRadius:999, padding:'7px 13px', color:'#fff', fontSize:12, fontWeight:700, cursor:'pointer', fontFamily:T.font}}>Filtros</button>
      </div>
      <div style={{background:T.bg, borderRadius:'24px 24px 0 0', marginTop:-12, flex:1, overflowY:'auto', padding:'18px 16px 24px'}}>

        {/* Focused metric chart (deep-linked from a dashboard bubble) */}
        {cfg && (
          <div style={{background:T.surface, borderRadius:16, padding:16, boxShadow:'0 4px 16px rgba(8,54,47,0.12)', border:`1.5px solid ${T.primary}`, marginBottom:18}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:12}}>
              <div>
                <div style={{fontSize:16, fontWeight:800, color:T.fg1}}>{cfg.title}</div>
                <div style={{fontSize:12, color:T.fg3, marginTop:2}}>{cfg.sub}</div>
              </div>
              <button onClick={onClearFocus} style={{background:T.primaryLight, border:'none', borderRadius:999, padding:'5px 11px', color:T.primary, fontSize:11, fontWeight:700, cursor:'pointer', fontFamily:T.font}}>✕ Cerrar</button>
            </div>
            {cfg.render()}
          </div>
        )}

        <div style={{display:'flex', gap:8, marginBottom:16}}>
          {ranges.map(([k,l])=>(
            <button key={k} onClick={()=>setRange(k)} style={{flex:1, padding:'8px', borderRadius:10, border:`1px solid ${range===k?T.primary:T.border}`, background:range===k?T.primary:T.surface, color:range===k?'#fff':T.fg2, fontSize:12, fontWeight:700, cursor:'pointer', fontFamily:T.font}}>{l}</button>
          ))}
        </div>

        <div style={{display:'flex', gap:12, marginBottom:18}}>
          <div style={{flex:1, background:T.surface, borderRadius:14, padding:14, boxShadow:'0 2px 8px rgba(8,54,47,0.07)'}}>
            <div style={{fontSize:11, color:T.fg2, fontWeight:600, textTransform:'uppercase', letterSpacing:0.4}}>Ventas totales</div>
            <div style={{fontSize:24, fontWeight:800, color:T.fg1, fontFamily:T.font, marginTop:4}}>L. 434k</div>
            <div style={{fontSize:11, color:T.success, fontWeight:700, marginTop:2}}>▲ +9.4% vs anterior</div>
          </div>
          <div style={{flex:1, background:T.surface, borderRadius:14, padding:14, boxShadow:'0 2px 8px rgba(8,54,47,0.07)'}}>
            <div style={{fontSize:11, color:T.fg2, fontWeight:600, textTransform:'uppercase', letterSpacing:0.4}}>Transacciones</div>
            <div style={{fontSize:24, fontWeight:800, color:T.fg1, fontFamily:T.font, marginTop:4}}>1,098</div>
            <div style={{fontSize:11, color:T.fg3, marginTop:2}}>Ticket L. 395</div>
          </div>
        </div>

        <window.SectionLabel>Ventas por categoría</window.SectionLabel>
        <div style={{background:T.surface, borderRadius:14, padding:16, boxShadow:'0 2px 8px rgba(8,54,47,0.07)', marginBottom:18}}>
          {cats.map(([l,v,c])=><window.HBar key={l} label={l} value={v} max={max} color={c} note={`L.${(v/1000).toFixed(1)}k`} />)}
        </div>

        <window.SectionLabel>Ventas por sucursal</window.SectionLabel>
        <div style={{background:T.surface, borderRadius:14, padding:16, boxShadow:'0 2px 8px rgba(8,54,47,0.07)'}}>
          {branches.map(([l,v,c])=><window.HBar key={l} label={l} value={v} max={bmax} color={c} note={`L.${(v/1000).toFixed(0)}k`} />)}
        </div>
      </div>
    </div>
  );
}
window.Analitica = Analitica;