// Vista Vehículos — el vehículo es la entidad principal

// Construye una lista de vehículos únicos a partir de las órdenes
function buildVehiculos(ordenes) {
  const map = {};
  ordenes.forEach(o => {
    if (!o.patente) return;
    if (!map[o.patente]) map[o.patente] = { patente: o.patente, ordenes: [] };
    map[o.patente].ordenes.push(o);
  });

  return Object.values(map).map(v => {
    const byDate = [...v.ordenes].sort((a, b) => new Date(b.entrada) - new Date(a.entrada));
    const last   = byDate[0];
    return {
      ...v,
      marca:        last?.marca     || "—",
      modelo:       last?.modelo    || "—",
      propietario:  last?.cliente   || "—",
      telefono:     last?.telefono  || "—",
      ultimaVisita: last?.entrada   || null,
      servicios:    v.ordenes.length,
    };
  });
}

function ClientesView({ data, search, onSelectCliente }) {
  const vehiculos = React.useMemo(() => buildVehiculos(data.ordenes), [data.ordenes]);

  const filtered = vehiculos.filter(v => {
    if (!search) return true;
    const s = search.toLowerCase();
    return v.patente.toLowerCase().includes(s)    ||
           v.modelo.toLowerCase().includes(s)     ||
           v.marca.toLowerCase().includes(s)      ||
           v.propietario.toLowerCase().includes(s);
  });

  const sorted = [...filtered].sort((a, b) => new Date(b.ultimaVisita) - new Date(a.ultimaVisita));

  return (
    <>
      {/* KPIs */}
      <div className="grid-2 mb-18" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
        <div className="kpi">
          <div className="kpi__bar" />
          <div className="kpi__label">Vehículos registrados</div>
          <div className="kpi__value">{vehiculos.length}</div>
          <div className="kpi__sub muted">con al menos 1 orden</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{background:"var(--ok)"}} />
          <div className="kpi__label">Vehículos frecuentes</div>
          <div className="kpi__value">{vehiculos.filter(v => v.servicios >= 3).length}</div>
          <div className="kpi__sub muted">3+ services</div>
        </div>
      </div>

      {/* Lista */}
      <div className="card">
        <div className="card__head">
          <div className="card__title">Vehículos</div>
          <div className="card__sub">{filtered.length} resultados</div>
        </div>
        <div>
          {sorted.map(v => (
            <div key={v.patente} className="veh-row" onClick={() => onSelectCliente(v)}>
              {/* Patente — dato principal */}
              <div className="veh-plate">{v.patente}</div>

              {/* Vehículo + propietario actual */}
              <div className="veh-info">
                <div className="veh-model">{v.marca} {v.modelo}</div>
                <div className="veh-owner">
                  {v.propietario}
                  {v.telefono && <span className="veh-phone"> · {v.telefono}</span>}
                </div>
              </div>

              {/* Stats */}
              <div className="client-stat">
                <div className="client-stat__value">{v.servicios}</div>
                <div className="client-stat__label">Services</div>
              </div>
              <div className="client-stat">
                <div className="client-stat__value mono dim">{fmtDate(v.ultimaVisita)}</div>
                <div className="client-stat__label">Último service</div>
              </div>
            </div>
          ))}
          {sorted.length === 0 && (
            <div className="card__body muted" style={{textAlign:"center", padding:32}}>Sin vehículos encontrados.</div>
          )}
        </div>
      </div>
    </>
  );
}

// Detalle de vehículo con historial completo
function ClienteDetalle({ cliente: vehiculo, ordenes, onClose, onSelectOrden }) {
  const histOrdenes = [...vehiculo.ordenes].sort((a, b) => new Date(b.entrada) - new Date(a.entrada));

  // Cada orden cuenta como máximo 1 mantenimiento y 1 reparación (según sus ítems)
  const nMant = histOrdenes.filter(o => (o.mantenimiento?.length || 0) > 0).length;
  const nRep  = histOrdenes.filter(o => (o.reparaciones?.length || 0) > 0).length;

  // Detectar si hubo cambio de propietario
  const propietarios = [...new Map(histOrdenes.map(o => [o.cliente, { nombre: o.cliente, telefono: o.telefono }])).values()];

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth: 760}}>
        <div className="modal__head">
          <div>
            {/* Patente como título principal */}
            <div className="modal__title" style={{fontFamily:"var(--font-mono)", letterSpacing:3, color:"var(--brand)"}}>
              {vehiculo.patente}
            </div>
            <div style={{fontSize:13, color:"var(--text-dim)", marginTop:3}}>
              {vehiculo.marca} {vehiculo.modelo}
            </div>
          </div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>

        <div className="modal__body">
          {/* Propietario actual */}
          <div style={{display:"flex", gap:24, marginBottom:20, padding:"14px 16px", background:"var(--bg-soft)", borderRadius:"var(--radius)", border:"1px solid var(--border-soft)"}}>
            <div>
              <div style={{fontSize:10, textTransform:"uppercase", letterSpacing:1.5, color:"var(--text-mute)", fontFamily:"var(--font-mono)", marginBottom:4}}>Propietario actual</div>
              <div style={{fontWeight:600, fontSize:14}}>{vehiculo.propietario}</div>
            </div>
            <div>
              <div style={{fontSize:10, textTransform:"uppercase", letterSpacing:1.5, color:"var(--text-mute)", fontFamily:"var(--font-mono)", marginBottom:4}}>Teléfono</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:14}}>{vehiculo.telefono}</div>
            </div>
            {propietarios.length > 1 && (
              <div style={{marginLeft:"auto"}}>
                <div style={{fontSize:10, textTransform:"uppercase", letterSpacing:1.5, color:"var(--text-mute)", fontFamily:"var(--font-mono)", marginBottom:4}}>Propietarios anteriores</div>
                <div style={{fontSize:12, color:"var(--text-dim)"}}>{propietarios.length - 1} anterior{propietarios.length > 2 ? "es" : ""}</div>
              </div>
            )}
          </div>

          {/* Stats */}
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}>
            <div className="kpi"><div className="kpi__bar" style={{background:"var(--ok)"}} /><div className="kpi__label">Mantenimientos</div><div className="kpi__value" style={{color:"var(--ok)"}}>{nMant}</div></div>
            <div className="kpi"><div className="kpi__bar" style={{background:"var(--brand)"}} /><div className="kpi__label">Reparaciones</div><div className="kpi__value" style={{color:"var(--brand)"}}>{nRep}</div></div>
          </div>

          {/* Historial */}
          <div className="section-title" style={{marginTop:24}}>Historial del vehículo</div>
          <div className="card">
            {histOrdenes.length === 0 ? (
              <div className="card__body muted">Sin órdenes registradas.</div>
            ) : (
              <div className="timeline">
                {histOrdenes.map(o => (
                  <div className="timeline-item" key={o.numero}>
                    <div className="timeline-dot">{o.numero.slice(-2)}</div>
                    <div style={{flex:1, cursor:"pointer"}} onClick={() => onSelectOrden(o)}>
                      <div className="row" style={{justifyContent:"space-between"}}>
                        <div>
                          <span className="mono" style={{color:"var(--brand)", fontWeight:600, marginRight:10}}>#{o.numero}</span>
                          <b>{o.cliente}</b>
                          <span className="muted" style={{fontSize:12, marginLeft:8}}>{o.telefono}</span>
                        </div>
                        <span className={`pill pill--${estadoPill[o.estado]}`}><span className="pill__dot" />{estadoLabel[o.estado]}</span>
                      </div>
                      <div className="muted mt-12" style={{fontSize:12}}>
                        {((o.mantenimiento || []).length + (o.reparaciones || []).length)} trabajo(s) · Entrada {fmtDate(o.entrada)}
                        {o.entregado ? ` · Entregado ${fmtDate(o.entregado)}` : ""}
                      </div>
                      <div className="row mt-12" style={{gap:18, fontSize:12}}>
                        <span className="muted">M.O. <span className="mono" style={{color:"var(--text)"}}>{fmtMoney(o.manoObraTotal)}</span></span>
                        <span className="muted">Rep. <span className="mono" style={{color:"var(--text)"}}>{fmtMoney(o.repuestos)}</span></span>
                        <span className="muted">Total <span className="mono" style={{color:"var(--brand)", fontWeight:600}}>{fmtMoney(o.total)}</span></span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.ClientesView = ClientesView;
window.ClienteDetalle = ClienteDetalle;