// Objetivos e Historial

// Una orden cuenta para objetivos cuando el trabajo ya está hecho (terminado, entregado o pagado)
const FINALIZADOS_OBJ = ["terminado", "entregado", "pagados"];

const META_INPUT_STYLE = {
  width: 44,
  background: "transparent",
  border: "none",
  borderBottom: "1px solid var(--border-soft)",
  color: "var(--text-mute)",
  fontFamily: "var(--font-mono)",
  fontSize: "inherit",
  textAlign: "center",
  padding: "0 2px",
  outline: "none",
};

function ObjetivosView({ data, setData, mes }) {
  const ot = data.objetivosTrabajo || { mantenimientos: [], reparaciones: [] };

  const finalizadas = data.ordenes.filter(o => FINALIZADOS_OBJ.includes(o.estado) && o.terminado);
  const mesLabel = labelDeMes(mes);
  const ordsMes = finalizadas.filter(o => o.terminado.slice(0, 7) === mes);

  const hechosDe = (nombre, col) =>
    ordsMes.reduce((s, o) => s + (o[col] || []).filter(l => l.tipoObjetivo === nombre).length, 0);

  function updateMeta(otKey, nombre, valor) {
    setData(d => ({
      ...d,
      objetivosTrabajo: {
        ...d.objetivosTrabajo,
        [otKey]: (d.objetivosTrabajo[otKey] || []).map(it =>
          it.nombre === nombre ? { ...it, meta: valor } : it
        ),
      },
    }));
  }

  function updateObjetivoHoras(campo, valor) {
    setData(d => ({ ...d, objetivos: { ...d.objetivos, [campo]: valor } }));
  }

  const grupo = (titulo, color, items, col, otKey) => {
    const conteo = items.map(it => ({ ...it, hechos: hechosDe(it.nombre, col) }));
    const tH = conteo.reduce((s, it) => s + it.hechos, 0);
    const tM = conteo.reduce((s, it) => s + it.meta, 0);
    const cumplidos = conteo.filter(it => it.hechos >= it.meta && it.meta > 0).length;
    return (
      <>
        <div className="section-title">
          {titulo}
          <span className="mono muted" style={{ fontSize: 11, fontWeight: 400, marginLeft: "auto" }}>
            {cumplidos}/{conteo.length} cumplidos · {tH} de {tM}
          </span>
        </div>
        <div className="card">
          <div className="card__body obj-list">
            {conteo.map(it => {
              const pct  = it.meta > 0 ? Math.min(it.hechos / it.meta * 100, 100) : 0;
              const done = it.hechos >= it.meta && it.meta > 0;
              return (
                <div key={it.nombre} className="obj-row">
                  <div className="obj-row__head">
                    <span className="obj-row__name">{it.nombre}</span>
                    <span className="obj-row__count mono">
                      <b style={{ color: done ? "var(--ok)" : "var(--text)" }}>{it.hechos}</b>
                      <span className="muted"> / </span>
                      <input
                        type="number" min="0" value={it.meta || ""}
                        style={META_INPUT_STYLE}
                        onWheel={e => e.target.blur()}
                        onChange={e => updateMeta(otKey, it.nombre, Number(e.target.value) || 0)}
                        title="Editar meta"
                      />
                      {done && <span style={{ color: "var(--ok)", marginLeft: 7 }}>✓</span>}
                    </span>
                  </div>
                  <div className="obj-bar">
                    <div className="obj-bar__fill" style={{ width: pct + "%", background: done ? "var(--ok)" : color }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </>
    );
  };

  // Horas reales del taller (suma de todos los técnicos)
  const hsSemanaTaller = (data.tecnicos || []).reduce((s, t) => s + horasTecnicoSemana(data.ordenes, t.id), 0);
  const hsMesTaller    = (data.tecnicos || []).reduce((s, t) => s + horasTecnicoMes(data.ordenes, t.id, mes), 0);
  const metaSemana     = Number((data.objetivos || {}).horasSemanalesMeta) || 0;
  const metaMes        = Number((data.objetivos || {}).horasMensualesMeta) || 0;
  const metaOrdenes    = Number((data.objetivos || {}).ordenesMensual) || 0;

  const filaHoras = (label, real, meta, campo, unidad = "hs") => {
    const pct  = meta > 0 ? Math.min(real / meta * 100, 100) : 0;
    const done = real >= meta && meta > 0;
    return (
      <div className="obj-row">
        <div className="obj-row__head">
          <span className="obj-row__name">{label}</span>
          <span className="obj-row__count mono">
            <b style={{ color: done ? "var(--ok)" : "var(--text)" }}>{real}</b>
            <span className="muted"> / </span>
            <input
              type="number" min="0" value={meta || ""}
              style={META_INPUT_STYLE}
              onWheel={e => e.target.blur()}
              onChange={e => updateObjetivoHoras(campo, Number(e.target.value) || 0)}
              title="Editar meta"
            />
            {unidad && <span className="muted"> {unidad}</span>}
            {done && <span style={{ color: "var(--ok)", marginLeft: 7 }}>✓</span>}
          </span>
        </div>
        <div className="obj-bar">
          <div className="obj-bar__fill" style={{ width: pct + "%", background: done ? "var(--ok)" : "var(--amber)" }} />
        </div>
      </div>
    );
  };

  return (
    <>
      <div className="section-title" style={{ marginTop: 0 }}>Objetivos de trabajo — {mesLabel}</div>
      {grupo("Mantenimientos", "#5fd39a", ot.mantenimientos, "mantenimiento", "mantenimientos")}
      {grupo("Reparaciones", "#4b8bf5", ot.reparaciones, "reparaciones", "reparaciones")}

      <div className="section-title" style={{ marginTop: 24 }}>Órdenes del mes — {mesLabel}</div>
      <div className="card">
        <div className="card__body obj-list">
          {filaHoras("Total de órdenes", ordsMes.length, metaOrdenes, "ordenesMensual", "")}
        </div>
      </div>

      <div className="section-title" style={{ marginTop: 24 }}>Horas del taller — {mesLabel}</div>
      <div className="card">
        <div className="card__body obj-list">
          {filaHoras("Horas semanales (semana en curso)", hsSemanaTaller, metaSemana, "horasSemanalesMeta")}
          {filaHoras(`Horas mensuales (${mesLabel})`, hsMesTaller, metaMes, "horasMensualesMeta")}
        </div>
      </div>
    </>
  );
}

function HistorialView({ data, onSelectOrden, search, isOwner }) {
  const [tipo, setTipo] = React.useState("todos");
  const [ultMant, setUltMant] = React.useState("");
  const [mesFiltro, setMesFiltro] = React.useState("");
  const all = [...data.ordenes].sort((a, b) => (b.entrada || "").localeCompare(a.entrada || ""));

  const MESES_H = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
  const mesesDisponibles = [...new Set(all.map(o => (o.entrada || "").slice(0, 7)).filter(Boolean))].sort((a, b) => b.localeCompare(a));
  const filtered = all.filter(o => {
    // Filtro por tipo de trabajo (una orden puede tener ambos → aparece en los dos)
    if (tipo === "mantenimiento" && (o.mantenimiento || []).length === 0) return false;
    if (tipo === "reparacion"    && (o.reparaciones  || []).length === 0) return false;
    // Búsqueda
    if (!search) return true;
    const s = search.toLowerCase();
    return o.cliente.toLowerCase().includes(s) || o.patente.toLowerCase().includes(s)
      || o.numero.includes(s) || (o.modelo || "").toLowerCase().includes(s);
  });

  const byMonth = {};
  filtered.forEach(o => {
    const k = (o.entrada || "").slice(0, 7);
    if (!mesFiltro || k === mesFiltro) {
      if (!byMonth[k]) byMonth[k] = [];
      byMonth[k].push(o);
    }
  });

  // ── Filtro "último mantenimiento hace ≥ N meses" → vehículos a contactar ──
  const mesesDesde = (iso) => {
    const d = new Date(iso + "T12:00:00");
    const now = new Date();
    let m = (now.getFullYear() - d.getFullYear()) * 12 + (now.getMonth() - d.getMonth());
    if (now.getDate() < d.getDate()) m -= 1;
    return m;
  };
  let aContactar = [];
  if (ultMant) {
    const N = Number(ultMant);
    const ult = {}; // patente → orden del último mantenimiento (con fecha de terminado)
    data.ordenes.forEach(o => {
      if (!o.patente || !o.terminado || (o.mantenimiento || []).length === 0) return;
      if (!ult[o.patente] || o.terminado > ult[o.patente].terminado) ult[o.patente] = o;
    });
    aContactar = Object.values(ult)
      .map(o => ({ orden: o, meses: mesesDesde(o.terminado) }))
      .filter(v => v.meses >= N);
    if (search) {
      const s = search.toLowerCase();
      aContactar = aContactar.filter(v =>
        v.orden.patente.toLowerCase().includes(s) || v.orden.cliente.toLowerCase().includes(s) ||
        (v.orden.modelo || "").toLowerCase().includes(s));
    }
    aContactar.sort((a, b) => b.meses - a.meses);
  }

  return (
    <>
      <div className="filter-bar">
        <CustomSelect value={mesFiltro} onChange={e => setMesFiltro(e.target.value)}>
          <option value="">Todos los meses</option>
          {mesesDisponibles.map(mk => {
            const [a, m] = mk.split("-");
            return <option key={mk} value={mk}>{MESES_H[Number(m) - 1]} {a}</option>;
          })}
        </CustomSelect>
        <CustomSelect value={tipo} onChange={e => setTipo(e.target.value)}>
          <option value="todos">Todos los servicios</option>
          <option value="mantenimiento">Mantenimientos</option>
          <option value="reparacion">Reparaciones</option>
        </CustomSelect>
        <CustomSelect value={ultMant} onChange={e => setUltMant(e.target.value)}>
          <option value="">Último mantenimiento</option>
          {[6, 7, 8, 9, 10, 11, 12].map(n => <option key={n} value={String(n)}>Hace +{n} meses</option>)}
        </CustomSelect>
      </div>

      {ultMant ? (
        <>
          <div className="section-title">
            Vehículos para contactar
            <span className="mono muted" style={{ fontSize: 11, marginLeft: "auto" }}>
              {aContactar.length} con último mantenimiento hace +{ultMant} meses
            </span>
          </div>
          <div className="card">
            {aContactar.length === 0 ? (
              <div className="card__body muted" style={{ textAlign: "center", padding: 28 }}>
                Ningún vehículo con su último mantenimiento hace +{ultMant} meses.
              </div>
            ) : (
              <table className="table">
                <thead>
                  <tr>
                    <th>Patente</th><th>Cliente</th><th>Teléfono</th><th>Vehículo</th>
                    <th>Último mantenimiento</th><th className="num">Hace</th>
                  </tr>
                </thead>
                <tbody>
                  {aContactar.map(v => (
                    <tr key={v.orden.patente} onClick={() => onSelectOrden(v.orden)} style={{ cursor: "pointer" }}>
                      <td className="mono">{v.orden.patente}</td>
                      <td><b>{v.orden.cliente}</b></td>
                      <td className="mono dim">{v.orden.telefono}</td>
                      <td>{v.orden.marca} {v.orden.modelo}</td>
                      <td className="mono dim">{fmtDate(v.orden.terminado)}</td>
                      <td className="num mono" style={{ color: "var(--brand)", fontWeight: 600 }}>{v.meses} meses</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </>
      ) : Object.entries(byMonth).map(([mes, items]) => {
        const total  = items.reduce((s, o) => s + o.total, 0);
        const meses  = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
        const [a, m] = mes.split("-");
        const titulo = `${meses[parseInt(m) - 1]} ${a}`;
        return (
          <React.Fragment key={mes}>
            <div className="section-title">
              {titulo}
              <span className="mono muted" style={{ fontSize: 11, marginLeft: "auto" }}>
                {items.length} órdenes{isOwner ? ` · ${fmtMoney(total)}` : ""}
              </span>
            </div>
            <div className="card">
              <table className="table">
                <thead>
                  <tr>
                    <th>N° Orden</th><th>Fecha</th><th>Cliente</th><th>Vehículo</th>
                    <th>Patente</th><th>Trabajos</th><th>Estado</th>{isOwner && <th className="num">Total</th>}
                  </tr>
                </thead>
                <tbody>
                  {items.map(o => (
                    <tr key={o.numero} onClick={() => onSelectOrden(o)} style={{ cursor: "pointer" }}>
                      <td><span className="ordnum">#{o.numero}</span></td>
                      <td className="mono dim">{fmtDate(o.entrada)}</td>
                      <td><b>{o.cliente}</b></td>
                      <td>{o.marca} {o.modelo}</td>
                      <td className="mono">{o.patente}</td>
                      <td className="muted" style={{ fontSize: 12, maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                        {[...(o.mantenimiento || []), ...(o.reparaciones || [])].map(i => i.descripcion).join(" · ")}
                      </td>
                      <td>
                        {o.archivado
                          ? <span className="pill pill--archivada"><span className="pill__dot" />Archivada</span>
                          : <span className={`pill pill--${estadoPill[o.estado]}`}><span className="pill__dot" />{estadoLabel[o.estado]}</span>
                        }
                      </td>
                      {isOwner && <td className="num mono">{fmtMoney(o.total)}</td>}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </React.Fragment>
        );
      })}
    </>
  );
}

window.ObjetivosView = ObjetivosView;
window.HistorialView = HistorialView;

// ── Costos Variables ───────────────────────────────────────────────────────
const MEDIOS_PAGO = ["Efectivo", "Transferencia", "Débito", "Crédito", "Cheque"];
const MEDIO_PILL  = { Efectivo: "pagado", Transferencia: "ingresado", Débito: "proceso", Crédito: "ncredito", Cheque: "entregado" };
const MESES_CV    = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

function CostosVariablesView({ data, setData }) {
  const hoy       = new Date().toISOString().slice(0, 10);
  const mesActual = hoy.slice(0, 7);

  const [anoFiltro,  setAnoFiltro]  = React.useState(mesActual.slice(0, 4));
  const [mesFiltroN, setMesFiltroN] = React.useState(mesActual.slice(5, 7));
  const [modal,      setModal]      = React.useState(null);

  const todos           = data.costosVariables || [];
  const anosDisponibles = [...new Set(todos.map(c => c.fecha.slice(0, 4)))].sort((a, b) => b.localeCompare(a));
  const visibles        = todos
    .filter(c =>
      (!anoFiltro  || c.fecha.slice(0, 4) === anoFiltro) &&
      (!mesFiltroN || c.fecha.slice(5, 7) === mesFiltroN)
    )
    .sort((a, b) => b.fecha.localeCompare(a.fecha));
  const totalVisible = visibles.reduce((s, c) => s + (Number(c.importe) || 0), 0);
  const promedio     = visibles.length > 0 ? totalVisible / visibles.length : 0;

  function subLabel() {
    if (anoFiltro && mesFiltroN) return `${MESES_CV[Number(mesFiltroN) - 1]} ${anoFiltro}`;
    if (anoFiltro) return anoFiltro;
    if (mesFiltroN) return MESES_CV[Number(mesFiltroN) - 1];
    return "todos los meses";
  }

  function openNew()   { setModal({ fecha: hoy, concepto: "", importe: "", medioPago: "Efectivo" }); }
  function openEdit(c) { setModal({ ...c, importe: String(c.importe) }); }

  function handleSave(form) {
    setData(d => {
      const list = [...(d.costosVariables || [])];
      if (form.id) {
        const idx = list.findIndex(c => c.id === form.id);
        if (idx >= 0) list[idx] = form;
      } else {
        list.unshift({ ...form, id: Date.now() });
      }
      return { ...d, costosVariables: list };
    });
    setModal(null);
  }

  function handleDelete(id, concepto) {
    if (!window.confirm(`¿Eliminar "${concepto}"?`)) return;
    setData(d => ({ ...d, costosVariables: (d.costosVariables || []).filter(c => c.id !== id) }));
  }

  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--accent)" }} />
          <div className="kpi__icon" style={{ background: "rgba(230,57,70,.1)", color: "var(--accent)" }}>
            <Icon.cash width="16" height="16" />
          </div>
          <div className="kpi__label">Total costos variables</div>
          <div className="kpi__value mono" style={{ color: "var(--accent)" }}>{fmtMoneyShort(totalVisible)}</div>
          <div className="kpi__sub muted">{subLabel()}</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--info)" }} />
          <div className="kpi__icon" style={{ background: "rgba(75,139,245,.12)", color: "var(--info)" }}>
            <Icon.receipt width="16" height="16" />
          </div>
          <div className="kpi__label">Cantidad de gastos</div>
          <div className="kpi__value mono">{visibles.length}</div>
          <div className="kpi__sub muted">{visibles.length !== 1 ? "registros" : "registro"}</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--brand)" }} />
          <div className="kpi__icon" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}>
            <Icon.trend width="16" height="16" />
          </div>
          <div className="kpi__label">Promedio por gasto</div>
          <div className="kpi__value mono">{promedio > 0 ? fmtMoneyShort(promedio) : "—"}</div>
          <div className="kpi__sub muted">{promedio > 0 ? "por registro" : "sin datos"}</div>
        </div>
      </div>

      <div className="filter-bar">
        <CustomSelect value={anoFiltro} onChange={e => setAnoFiltro(e.target.value)}>
          <option value="">Todos los años</option>
          {anosDisponibles.map(a => <option key={a} value={a}>{a}</option>)}
        </CustomSelect>
        <CustomSelect value={mesFiltroN} onChange={e => setMesFiltroN(e.target.value)}>
          <option value="">Todos los meses</option>
          {MESES_CV.map((m, i) => <option key={i + 1} value={String(i + 1).padStart(2, "0")}>{m}</option>)}
        </CustomSelect>
        <div style={{ flex: 1 }} />
        <button className="btn btn--primary" onClick={openNew}>
          <Icon.plus /> Agregar gasto
        </button>
      </div>

      {todos.length === 0 ? (
        <div className="card">
          <div className="card__body" style={{ textAlign: "center", padding: "52px 24px" }}>
            <div className="muted" style={{ fontSize: 14 }}>
              No hay costos variables cargados. Registrá los gastos que varían mes a mes.
            </div>
            <button className="btn btn--primary" style={{ marginTop: 18 }} onClick={openNew}>
              <Icon.plus /> Agregar primer gasto
            </button>
          </div>
        </div>
      ) : (
        <div className="card">
          <table className="table">
            <thead>
              <tr>
                <th>Fecha</th>
                <th>Concepto</th>
                <th>Medio de pago</th>
                <th className="num">Importe</th>
                <th style={{ width: 72 }} />
              </tr>
            </thead>
            <tbody>
              {visibles.map(c => (
                <tr key={c.id}>
                  <td className="mono dim">{fmtDate(c.fecha)}</td>
                  <td style={{ cursor: "pointer" }} onClick={() => openEdit(c)}><b>{c.concepto}</b></td>
                  <td>
                    <span className={`pill pill--${MEDIO_PILL[c.medioPago] || "entregado"}`}>
                      <span className="pill__dot" />{c.medioPago}
                    </span>
                  </td>
                  <td className="num mono" style={{ color: "var(--accent)", fontWeight: 600 }}>{fmtMoney(c.importe)}</td>
                  <td style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                    <button className="btn btn--ghost btn--sm" title="Editar" style={{ padding: "4px 8px" }} onClick={() => openEdit(c)}>
                      <Icon.edit />
                    </button>
                    <button className="btn btn--ghost btn--sm" title="Eliminar" style={{ padding: "4px 8px", color: "var(--text-mute)" }}
                      onClick={() => handleDelete(c.id, c.concepto)}>
                      <Icon.trash />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {modal && (
        <CostoVariableModal
          item={modal}
          onClose={() => setModal(null)}
          onSave={handleSave}
        />
      )}
    </>
  );
}

function CostoVariableModal({ item, onClose, onSave }) {
  const [form, setForm] = React.useState({
    id:        item?.id        || null,
    fecha:     item?.fecha     || new Date().toISOString().slice(0, 10),
    concepto:  item?.concepto  || "",
    importe:   item?.importe   || "",
    medioPago: item?.medioPago || "Efectivo",
  });

  const set   = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.concepto.trim().length > 0 && Number(form.importe) > 0 && !!form.fecha;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 440 }}>
        <div className="modal__head">
          <div className="modal__title">{item?.id ? "Editar gasto variable" : "Nuevo gasto variable"}</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="field">
              <label className="field__label">Concepto *</label>
              <input value={form.concepto} onChange={set("concepto")} autoFocus
                placeholder="Ej: Combustible, lubricantes, insumos…" />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">Importe *</label>
                <input type="number" min="0" value={form.importe} onWheel={e => e.target.blur()} onChange={set("importe")}
                  placeholder="0" style={{ fontFamily: "var(--font-mono)" }} />
              </div>
              <div className="field">
                <label className="field__label">Medio de pago</label>
                <CustomSelect value={form.medioPago} onChange={set("medioPago")}>
                  {MEDIOS_PAGO.map(mp => <option key={mp} value={mp}>{mp}</option>)}
                </CustomSelect>
              </div>
            </div>
            <div className="field">
              <label className="field__label">Fecha *</label>
              <input type="date" value={form.fecha} onChange={set("fecha")} />
            </div>
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary"
            onClick={() => valid && onSave({ ...form, importe: Number(form.importe) })}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> {item?.id ? "Guardar cambios" : "Agregar gasto"}
          </button>
        </div>
      </div>
    </div>
  );
}

window.CostosVariablesView = CostosVariablesView;