// Vista Dashboard / Panel

function GaugeKPI({ label, value, max, displayValue, sub, delay }) {
  const r = 42, cx = 56, cy = 56;
  const circ = 2 * Math.PI * r;
  const trackLen = circ * 0.75;
  const gapLen = circ - trackLen;
  const pct = Math.min(Math.max(max > 0 ? value / max : 0, 0), 1);
  const fillLen = trackLen * pct;

  return (
    <div className="kpi kpi--gauge">
      <svg viewBox="0 0 112 118" className="kpi__gauge-svg">
        {/* Track */}
        <circle cx={cx} cy={cy} r={r} fill="none"
          stroke="rgba(255,255,255,0.09)" strokeWidth="4"
          strokeDasharray={`${trackLen.toFixed(2)} ${gapLen.toFixed(2)}`}
          strokeLinecap="round"
          transform={`rotate(135 ${cx} ${cy})`} />

        {/* Fill — amarillo marca, sin glow */}
        {fillLen > 0.5 && (
          <circle cx={cx} cy={cy} r={r} fill="none"
            stroke="#f5d416" strokeWidth="4"
            strokeLinecap="round"
            transform={`rotate(135 ${cx} ${cy})`}
            style={{
              strokeDasharray: `${fillLen.toFixed(2)} 9999`,
              animation: `gaugeIn 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${delay || 0}ms both`,
            }} />
        )}

        {/* Valor principal */}
        <text x={cx} y={cy + 6} textAnchor="middle"
          fill="#e6e6e0" fontSize="19" fontFamily="JetBrains Mono, monospace"
          fontWeight="600">
          {displayValue}
        </text>

        {/* Porcentaje */}
        <text x={cx} y={cy + 22} textAnchor="middle"
          fill="rgba(255,255,255,0.3)" fontSize="8.5"
          fontFamily="JetBrains Mono, monospace">
          {Math.round(pct * 100)}%
        </text>
      </svg>

      <div className="kpi__gauge-label">{label}</div>
      {sub && <div className="kpi__gauge-sub">{sub}</div>}
    </div>
  );
}

function Dashboard({ data, mes, onNuevaOrden, onSelectOrden }) {
  const MESES_DASH = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
  const mesLabel   = mes ? `${MESES_DASH[Number(mes.slice(5, 7)) - 1]} ${mes.slice(0, 4)}` : "";

  // Mismo filtro exacto que ObjetivosView
  const ordsMes = data.ordenes.filter(o =>
    ["terminado", "entregado", "pagados"].includes(o.estado) &&
    o.terminado &&
    o.terminado.slice(0, 7) === mes
  );
  const nOrds = ordsMes.length;
  const nMant = ordsMes.reduce((s, o) => s + ((o.mantenimiento?.length || 0) > 0 ? 1 : 0), 0);
  const nRep  = ordsMes.reduce((s, o) => s + ((o.reparaciones?.length || 0) > 0 ? 1 : 0), 0);

  // Autos en el taller = órdenes en proceso (ingresado o en_proceso, sin terminados)
  const tecNombre = Object.fromEntries((data.tecnicos || []).map(t => [t.id, t.nombre]));
  const enTaller = (data.ordenes || [])
    .filter(o => !o.archivado && (o.estado === "ingresado" || o.estado === "en_proceso" || o.estado === "terminado"))
    .sort((a, b) => (b.entrada || "").localeCompare(a.entrada || ""));

  const pendienteCobro = (data.ordenes || [])
    .filter(o => !o.archivado && o.estado === "entregado")
    .sort((a, b) => (b.entregado || b.entrada || "").localeCompare(a.entregado || a.entrada || ""));

  // Recordatorios de hoy = turnos + recordatorios del día (fecha real, sin cancelados)
  const hoyDash   = new Date().toISOString().slice(0, 10);
  const turnosHoy = (data.turnos || []).filter(t => t.fecha === hoyDash);
  const recsHoy   = (data.recordatorios || []).filter(r => r.fecha === hoyDash);
  const nHoy      = turnosHoy.length + recsHoy.length;

  return (
    <div className="dash">
      {/* ── KPI Gauges ── */}
      <div className="kpi-grid">
        <GaugeKPI
          label="Órdenes del Mes"
          value={nOrds}
          max={data.objetivos.ordenesMensual}
          displayValue={String(nOrds)}
          sub={<>Meta: {data.objetivos.ordenesMensual} órdenes</>}
          delay={0}
        />
        <GaugeKPI
          label="Mantenimientos"
          value={nMant}
          max={nOrds || 1}
          displayValue={String(nMant)}
          sub={<>de {nOrds} órdenes · {mesLabel}</>}
          delay={80}
        />
        <GaugeKPI
          label="Reparaciones"
          value={nRep}
          max={nOrds || 1}
          displayValue={String(nRep)}
          sub={<>de {nOrds} órdenes · {mesLabel}</>}
          delay={160}
        />
        <GaugeKPI
          label="Recordatorios hoy"
          value={nHoy}
          max={8}
          displayValue={String(nHoy)}
          sub={nHoy === 0
            ? <>Nada para hoy</>
            : <>{turnosHoy.length} turno{turnosHoy.length !== 1 ? "s" : ""} · {recsHoy.length} record.</>}
          delay={240}
        />
      </div>

      {/* ── En el taller + Pendiente de cobro ── */}
      <div className="grid-2 dash__main" style={{ gridTemplateColumns: "1fr 1fr" /* desktop: columnas iguales; mobile: CSS override a 1 col */ }}>
        <div className="card card--taller">
          <div className="card__head">
            <div className="card__title">En el taller</div>
            <div className="card__sub mono">{enTaller.length} auto{enTaller.length !== 1 ? "s" : ""}</div>
          </div>
          <div className="card__body taller-list">
            {enTaller.length === 0 ? (
              <div className="muted" style={{ textAlign: "center", padding: 24 }}>No hay autos en el taller.</div>
            ) : enTaller.map(o => (
              <div key={o.numero} className="taller-row" onClick={() => onSelectOrden(o)}>
                <div className="taller-row__plate mono">{o.patente}</div>
                <div className="taller-row__info">
                  <div className="taller-row__veh">{o.marca} {o.modelo}</div>
                  <div className="taller-row__work">
                    {[...(o.mantenimiento || []), ...(o.reparaciones || [])].map(i => i.descripcion).join(" · ") || "—"}
                  </div>
                  <div className="taller-row__tec">{tecNombre[o.tecnicoId] || "Sin técnico"}</div>
                </div>
                <span className={`pill pill--${estadoPill[o.estado]}`}><span className="pill__dot" />{estadoLabel[o.estado]}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card card--taller">
          <div className="card__head">
            <div className="card__title">Pendiente de cobro</div>
            <div className="card__sub mono">{pendienteCobro.length} orden{pendienteCobro.length !== 1 ? "es" : ""}</div>
          </div>
          <div className="card__body taller-list">
            {pendienteCobro.length === 0 ? (
              <div className="muted" style={{ textAlign: "center", padding: 24 }}>Sin órdenes pendientes de cobro.</div>
            ) : pendienteCobro.map(o => (
              <div key={o.numero} className="taller-row" onClick={() => onSelectOrden(o)}>
                <div className="taller-row__plate mono">{o.patente}</div>
                <div className="taller-row__info">
                  <div className="taller-row__veh">{o.marca} {o.modelo}</div>
                  <div className="taller-row__work">
                    {[...(o.mantenimiento || []), ...(o.reparaciones || [])].map(i => i.descripcion).join(" · ") || "—"}
                  </div>
                  <div className="taller-row__tec">{tecNombre[o.tecnicoId] || "Sin técnico"}</div>
                </div>
                <span className={`pill pill--${estadoPill[o.estado]}`}><span className="pill__dot" />{estadoLabel[o.estado]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;