// ─────────────────────────────────────────────────────
// DASHBOARD
// ─────────────────────────────────────────────────────

const Dashboard = ({ onNav }) => {
  const { LEADS, COMPRAS, ORDENES_COMPRA, PARTES_LIVE } = window.DATA;
  const totalCartera = COMPRAS.reduce((s,c)=>s+c.importe,0);
  const totalLeads = LEADS.reduce((s,l)=>s+l.import,0);

  // bar chart data
  const ventas = [
    {m:'Oct', v: 78000}, {m:'Nov', v: 92000}, {m:'Dic', v: 64000},
    {m:'Ene', v: 110000}, {m:'Feb', v: 145000}, {m:'Mar', v: 168000},
  ];
  const maxV = Math.max(...ventas.map(v=>v.v));

  return (
    <>
      <div className="page-h">
        <div>
          <h1>Buenos días, Kurten</h1>
          <div className="sub">Resumen del taller · jueves 17 abril 2026</div>
        </div>
        <div className="page-h-actions">
          <button className="btn"><Icon name="calendar"/> Marzo 2026</button>
          <button className="btn primary"><Icon name="plus"/> Crear</button>
        </div>
      </div>

      <div className="kpi-grid" style={{gridTemplateColumns:'repeat(4,1fr)'}}>
        <div className="kpi">
          <div className="lbl">Cartera en producción</div>
          <div className="row">
            <div className="num">{window.fmtEur(totalCartera)}</div>
            <span className="delta up"><Icon name="arrow_up" size={10}/> 22%</span>
          </div>
          <Sparkline values={[60,65,70,68,75,80,82,85,90,92,95,100]} color="var(--carbon)"/>
        </div>
        <div className="kpi">
          <div className="lbl">Pipeline comercial</div>
          <div className="row">
            <div className="num">{window.fmtEur(totalLeads)}</div>
            <span className="sub">{LEADS.length} leads</span>
          </div>
          <Sparkline values={[40,45,42,48,52,50,55,58,60,62,65,68]} color="var(--glass)"/>
        </div>
        <div className="kpi">
          <div className="lbl"><span className="dot" style={{background:'var(--ok)'}}/> Instalaciones esta semana</div>
          <div className="row"><div className="num">7</div><span className="sub">de 9 plan.</span></div>
          <Sparkline values={[3,4,3,5,4,6,5,7,6,8,7,9]} color="var(--ok)"/>
        </div>
        <div className="kpi">
          <div className="lbl"><span className="dot" style={{background:'var(--warn)'}}/> Materiales pendientes</div>
          <div className="row"><div className="num">14</div><span className="sub">en 5 pedidos</span></div>
          <Sparkline values={[20,22,18,16,14,12,15,14,13,12,14,14]} color="var(--warn)"/>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:14,marginBottom:14}}>
        <div className="panel">
          <div className="panel-h">
            Volumen de presupuesto aceptado · últimos 6 meses
            <span className="badge">EUR</span>
            <span className="tb-spacer" style={{flex:1}}/>
            <button className="btn ghost sm"><Icon name="download" size={11}/></button>
          </div>
          <div className="panel-b">
            <div style={{display:'flex',alignItems:'flex-end',gap:14,height:160,padding:'10px 4px'}}>
              {ventas.map(v => {
                const h = (v.v / maxV) * 130;
                return (
                  <div key={v.m} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:6}}>
                    <div className="mono" style={{fontSize:10,color:'var(--ink-3)'}}>{(v.v/1000).toFixed(0)}k</div>
                    <div style={{
                      width:'100%',height:h,
                      background:`linear-gradient(180deg, var(--glass) 0%, var(--glass-2) 100%)`,
                      borderRadius:'4px 4px 0 0'
                    }}/>
                    <div style={{fontSize:11,color:'var(--ink-3)'}}>{v.m}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-h">
            Operarios en campo
            <span className="badge">{PARTES_LIVE.length} activos</span>
          </div>
          <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:10}}>
            {PARTES_LIVE.slice(0,4).map((p,i) => {
              const pct = Math.round((p.tareas_done / p.tareas_total) * 100);
              return (
                <div key={i} style={{display:'flex',alignItems:'center',gap:10}}>
                  <div className="avatar" style={{background:window.DATA.VENDEDORES[i%6].color, position:'relative'}}>
                    {p.op.split(' ').map(w=>w[0]).join('').slice(0,2)}
                    <span style={{position:'absolute',bottom:-1,right:-1,width:8,height:8,borderRadius:'50%',background:'var(--ok)',border:'2px solid var(--surface)'}}/>
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:12.5,fontWeight:600}}>{p.op}</div>
                    <div className="muted" style={{fontSize:11,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{p.cliente}</div>
                  </div>
                  <div style={{width:60,textAlign:'right'}}>
                    <span className={`pbar ${pct===100?'ok':''}`} style={{width:50}}><i style={{width:`${pct}%`}}/></span>
                    <div className="mono" style={{fontSize:10.5,color:'var(--ink-3)'}}>{p.tareas_done}/{p.tareas_total}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
        <div className="panel">
          <div className="panel-h">
            Próximas instalaciones
            <span className="tb-spacer" style={{flex:1}}/>
            <button className="btn ghost sm" onClick={()=>onNav('expedientes')}>Ver todo →</button>
          </div>
          <div className="panel-b" style={{padding:0}}>
            <table className="tbl">
              <tbody>
                {COMPRAS.filter(c=>c.f_inst).sort((a,b)=>a.f_inst.localeCompare(b.f_inst)).slice(0,5).map(c => (
                  <tr key={c.id}>
                    <td style={{width:60}} className="num strong">{window.fmtDate(c.f_inst)}</td>
                    <td className="strong">{c.cliente}</td>
                    <td><ProductIcons ids={c.productos.map(p=>p.p)}/></td>
                    <td className="num right muted">{window.fmtEur(c.importe)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="panel">
          <div className="panel-h">
            Actividad reciente
            <span className="tb-spacer" style={{flex:1}}/>
            <button className="btn ghost sm">Ver todo →</button>
          </div>
          <div className="panel-b">
            <div className="tl">
              <div className="tl-item">
                <div className="tl-dot ok"/>
                <div className="tl-content">
                  <div className="t">Pedido <span className="mono">C-2025-0146</span> completado por Antonio Cañete</div>
                  <time>hace 2 min</time>
                </div>
              </div>
              <div className="tl-item">
                <div className="tl-dot glass"/>
                <div className="tl-content">
                  <div className="t">Nuevo lead <span className="mono">25-3401</span> asignado a Kurten</div>
                  <div className="m">Marta Higueras Ruiz · Estepona · Pérgola bioclimática</div>
                  <time>hace 38 min</time>
                </div>
              </div>
              <div className="tl-item">
                <div className="tl-dot warn"/>
                <div className="tl-content">
                  <div className="t">Material <strong>Vidrio templado 8mm</strong> recibido parcial · OC-2025-0085</div>
                  <time>hace 1h</time>
                </div>
              </div>
              <div className="tl-item">
                <div className="tl-dot"/>
                <div className="tl-content">
                  <div className="t">Presupuesto enviado a <strong>Hotel Sol y Mar</strong></div>
                  <div className="m">67.400 € · Techos fijos + cortinas spa</div>
                  <time>hace 3h</time>
                </div>
              </div>
              <div className="tl-item">
                <div className="tl-dot ok"/>
                <div className="tl-content">
                  <div className="t">Familia Ruiz-Alarcón firmó presupuesto · 22.400 €</div>
                  <time>hace 5h</time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

window.Dashboard = Dashboard;