// ===== Dashboard =====
function Dashboard({ orders, user, users = [], onOpen, onNav }){
  const open = orders.filter(o => STATUSES[o.status].stage !== "salida");
  const entrada = orders.filter(o => STATUSES[o.status].stage === "entrada");
  const reparacion = orders.filter(o => STATUSES[o.status].stage === "reparacion" && o.status !== "listo");
  const listo = orders.filter(o => o.status === "listo");
  const entregadoMes = orders.filter(o => o.status === "entregado");
  const ingresos = orders.reduce((s,o)=> s + orderPaid(o), 0);
  const tech = getTech(user.techId);

  const stats = [
    { label:"Órdenes abiertas", value:open.length, icon:"orders", hue:256, sub:`${entrada.length} en entrada`, route:"orders" },
    { label:"En reparación", value:reparacion.length, icon:"tools", hue:256, sub:"en banco de trabajo" },
    { label:"Listas para entrega", value:listo.length, icon:"box", hue:155, sub:"esperan al cliente", emph:true },
    { label:"Ingresos cobrados", value:fmtMoney(ingresos), icon:"chart", hue:70, sub:"acumulado", money:true },
  ];

  const recent = [...orders].sort((a,b)=> new Date(b.createdAt)-new Date(a.createdAt)).slice(0,5);

  return (
    <div style={{ display:"flex", flexDirection:"column", gap:20, animation:"fadeUp .35s ease" }}>
      {/* greeting */}
      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:14 }}>
        <div>
          <h2 style={{ fontSize:23, fontWeight:800, margin:0, letterSpacing:"-0.02em" }}>
            Hola, {user.name.split(" ")[0]} 👋
          </h2>
          <p style={{ fontSize:14.5, color:"var(--muted)", margin:"4px 0 0" }}>
            Tienes <strong style={{ color:"var(--ink)" }}>{entrada.length} equipos</strong> esperando diagnóstico y <strong style={{ color:"var(--st-listo)" }}>{listo.length} listos</strong> para entregar.
          </p>
        </div>
        <Btn icon="plus" size="md" onClick={()=>onNav("new")}>Nueva orden</Btn>
      </div>

      {/* stat cards */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:16 }}>
        {stats.map(s=>(
          <Card key={s.label} pad={18} style={{ cursor:s.route?"pointer":"default", position:"relative", overflow:"hidden",
              borderColor: s.emph ? "oklch(0.85 0.07 155)" : "var(--line)" }}
            onClick={()=> s.route && onNav(s.route)}>
            <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
              <div style={{ width:38, height:38, borderRadius:10, display:"flex", alignItems:"center", justifyContent:"center",
                background:`oklch(0.95 0.04 ${s.hue})`, color:`oklch(0.5 0.13 ${s.hue})` }}>
                <Icon name={s.icon} size={20} />
              </div>
              {s.route && <Icon name="arrowRight" size={16} style={{ color:"var(--faint)" }} />}
            </div>
            <div style={{ fontSize:30, fontWeight:800, marginTop:14, letterSpacing:"-0.02em" }} className={s.money?"mono":""}>{s.value}</div>
            <div style={{ fontSize:13.5, fontWeight:600, color:"var(--ink-2)", marginTop:2 }}>{s.label}</div>
            <div style={{ fontSize:12.5, color:"var(--faint)", marginTop:3 }}>{s.sub}</div>
          </Card>
        ))}
      </div>

      <div style={{ display:"grid", gridTemplateColumns:"1.5fr 1fr", gap:16 }}>
        {/* Recent orders */}
        <Card pad={0}>
          <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"16px 20px", borderBottom:"1px solid var(--line)" }}>
            <h3 style={{ fontSize:15.5, fontWeight:700, margin:0 }}>Órdenes recientes</h3>
            <button onClick={()=>onNav("orders")} style={{ border:"none", background:"transparent", color:"var(--accent-ink)", fontSize:13, fontWeight:600 }}>Ver todas →</button>
          </div>
          <div>
            {recent.map((o,i)=>{
              const c = getClient(o.clientId);
              return (
                <button key={o.id} onClick={()=>onOpen(o.id)}
                  style={{ display:"flex", alignItems:"center", gap:13, width:"100%", padding:"13px 20px", border:"none",
                    borderBottom: i<recent.length-1?"1px solid var(--line-2)":"none", background:"transparent", textAlign:"left", transition:"background .12s" }}
                  onMouseEnter={e=>e.currentTarget.style.background="var(--surface-2)"}
                  onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                  <DeviceGlyph type={o.device} size={40} />
                  <div style={{ minWidth:0, flex:1 }}>
                    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                      <span className="mono" style={{ fontSize:13, fontWeight:600, color:"var(--accent-ink)" }}>#{o.num}</span>
                      <span style={{ fontSize:14, fontWeight:700, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{o.brand} {o.model}</span>
                    </div>
                    <div style={{ fontSize:12.5, color:"var(--muted)", marginTop:2 }}>{c.name} · {relTime(o.createdAt)}</div>
                  </div>
                  <StatusBadge status={o.status} size="sm" />
                </button>
              );
            })}
          </div>
        </Card>

        {/* side column */}
        <div style={{ display:"flex", flexDirection:"column", gap:16 }}>
          <IngresosChart orders={orders} />

          <Card pad={18}>
            <h3 style={{ fontSize:15, fontWeight:700, margin:"0 0 14px" }}>Carga por técnico</h3>
            <div style={{ display:"flex", flexDirection:"column", gap:12 }}>
              {(()=>{
                // Usuarios reales que reparan: técnicos siempre; admins solo si tienen carga.
                const techs = users.filter(u=> u.active!==false && (u.roleId==="tecnico" || u.roleId==="admin"));
                const ranked = techs.map(t=>({ t, count: open.filter(o=>o.techId===t.id).length }))
                  .filter(r=> r.t.roleId==="tecnico" || r.count>0)
                  .sort((a,b)=> b.count-a.count).slice(0,5);
                if(ranked.length===0) return <div style={{ fontSize:12.5, color:"var(--faint)" }}>No hay técnicos registrados.</div>;
                const maxC = Math.max(...ranked.map(r=>r.count), 1);
                return ranked.map(({t,count})=>{
                  const pct = Math.max(6, (count/maxC)*100);
                  const hue = t.hue || 256;
                  const nm = (t.name||"").split(" ");
                  return (
                    <div key={t.id} style={{ display:"flex", alignItems:"center", gap:10 }}>
                      <Avatar name={t.name} initials={t.initials} hue={hue} size={30} />
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ display:"flex", justifyContent:"space-between", fontSize:13 }}>
                          <span style={{ fontWeight:600 }}>{nm[0]}{nm[1]?" "+nm[1][0]+".":""}</span>
                          <span style={{ color:"var(--muted)", fontWeight:600 }}>{count}</span>
                        </div>
                        <div style={{ height:6, borderRadius:99, background:"var(--line-2)", marginTop:5, overflow:"hidden" }}>
                          <div style={{ width:`${pct}%`, height:"100%", borderRadius:99, background:`oklch(0.6 0.12 ${hue})`, transition:"width .4s" }} />
                        </div>
                      </div>
                    </div>
                  );
                });
              })()}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

// ===== Gráfico de equipos ingresados: semana / mes =====
function IngresosChart({ orders }){
  const [mode, setMode] = React.useState("semana");

  function sameDay(a,b){ return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate(); }
  function startOfWeek(d){ const x=new Date(d); const day=(x.getDay()+6)%7; x.setHours(0,0,0,0); x.setDate(x.getDate()-day); return x; }

  const data = React.useMemo(()=>{
    const valid = orders.filter(o=>o.createdAt && !isNaN(new Date(o.createdAt)));
    if(mode==="semana"){
      const start = startOfWeek(new Date());
      const days = [...Array(7)].map((_,i)=>{ const d=new Date(start); d.setDate(d.getDate()+i); return d; });
      return days.map((d,i)=>({ label:["L","M","M","J","V","S","D"][i], count: valid.filter(o=>sameDay(new Date(o.createdAt), d)).length }));
    }
    const now = new Date();
    const months = [...Array(6)].map((_,i)=> new Date(now.getFullYear(), now.getMonth()-(5-i), 1));
    return months.map(m=>({
      label: m.toLocaleDateString("es",{month:"short"}).replace(".",""),
      count: valid.filter(o=>{ const od=new Date(o.createdAt); return od.getFullYear()===m.getFullYear() && od.getMonth()===m.getMonth(); }).length,
    }));
  }, [orders, mode]);

  const max = Math.max(...data.map(d=>d.count), 1);
  const curr = data[data.length-1].count;
  const prev = data.length>1 ? data[data.length-2].count : 0;
  const diff = curr - prev;
  const pct = prev>0 ? Math.round((diff/prev)*100) : (curr>0?100:0);
  const periodo = mode==="semana" ? "esta semana" : "este mes";
  const total = data.reduce((s,d)=>s+d.count,0);

  const Toggle = ({ id, label }) => (
    <button onClick={()=>setMode(id)} style={{ padding:"4px 11px", borderRadius:8, fontSize:12, fontWeight:600, cursor:"pointer",
      border:"none", background: mode===id?"var(--accent-soft)":"transparent", color: mode===id?"var(--accent-ink)":"var(--muted)" }}>{label}</button>
  );

  return (
    <Card pad={18}>
      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:4 }}>
        <h3 style={{ fontSize:15, fontWeight:700, margin:0 }}>Equipos ingresados</h3>
        <div style={{ display:"flex", gap:2, padding:2, borderRadius:9, background:"var(--surface-2)" }}>
          <Toggle id="semana" label="Semana" />
          <Toggle id="mes" label="Mes" />
        </div>
      </div>

      <div style={{ display:"flex", alignItems:"baseline", gap:8, marginBottom:14 }}>
        <span style={{ fontSize:26, fontWeight:800, letterSpacing:"-0.02em" }}>{curr}</span>
        <span style={{ fontSize:12.5, color:"var(--muted)" }}>{periodo}</span>
        {prev>0 && (
          <span style={{ fontSize:12, fontWeight:700, marginLeft:"auto", display:"inline-flex", alignItems:"center", gap:3,
            color: diff>=0 ? "var(--st-listo)" : "var(--st-entrada)" }}>
            {diff>=0?"▲":"▼"} {Math.abs(pct)}% <span style={{ color:"var(--faint)", fontWeight:500 }}>vs. {mode==="semana"?"sem.":"mes"} ant.</span>
          </span>
        )}
      </div>

      <div style={{ display:"flex", alignItems:"flex-end", gap:mode==="semana"?5:8, height:72 }}>
        {data.map((d,i)=>{
          const last = i===data.length-1;
          return (
            <div key={i} style={{ flex:1, display:"flex", flexDirection:"column", alignItems:"center", gap:5, height:"100%", justifyContent:"flex-end" }}>
              <span style={{ fontSize:11, fontWeight:700, color: last?"var(--accent-ink)":"var(--muted)" }}>{d.count>0?d.count:""}</span>
              <div title={`${d.count} equipo(s)`} style={{ width:"100%", height:`${Math.max(6,(d.count/max)*100)}%`, minHeight:4,
                background: last?"var(--accent)":"var(--line)", borderRadius:4, transition:"height .3s" }} />
            </div>
          );
        })}
      </div>
      <div style={{ display:"flex", justifyContent:"space-between", marginTop:8, fontSize:11, color:"var(--faint)", gap:mode==="semana"?5:8 }}>
        {data.map((d,i)=><span key={i} style={{ flex:1, textAlign:"center", textTransform:"capitalize" }}>{d.label}</span>)}
      </div>
      {total===0 && <div style={{ fontSize:12, color:"var(--faint)", textAlign:"center", marginTop:10 }}>Sin ingresos registrados en este período.</div>}
    </Card>
  );
}

Object.assign(window, { Dashboard, IngresosChart });