// Costos Fijos del negocio

const PERIODICIDADES    = ["Mensual", "Bimestral", "Trimestral", "Semestral", "Anual"];
const PERIODOS_MESES_CF = { Mensual: 1, Bimestral: 2, Trimestral: 3, Semestral: 6, Anual: 12 };

function costoEquivMensual(c, mesKey) {
  let monto;
  if (c.historialMonto && c.historialMonto.length > 0) {
    const hist = [...c.historialMonto].sort((a, b) => a.desde.localeCompare(b.desde));
    const vigente = mesKey
      ? hist.filter(h => h.desde <= mesKey).at(-1)
      : hist.at(-1);
    monto = (vigente ?? hist[0]).monto;
  } else {
    monto = c.monto || 0;
  }
  return monto / (PERIODOS_MESES_CF[c.periodicidad] || 1);
}

function CostosFijosView({ data, setData }) {
  const [showModal, setShowModal] = React.useState(false);
  const [editItem,  setEditItem]  = React.useState(null);

  const costos       = data.costosFijos || [];
  const activos      = costos.filter(c => c.activo);
  const mesActual    = new Date().toISOString().slice(0, 7);
  const totalMensual = activos.reduce((s, c) => s + costoEquivMensual(c, mesActual), 0);

  const facMesActual = (data.ordenes || [])
    .filter(o => o.estado === "pagados" && (o.fechaPagado || "").slice(0, 7) === mesActual)
    .reduce((s, o) => s +
      [...(o.mantenimiento || []), ...(o.reparaciones || [])].reduce((a, l) => a + (Number(l.importe) || 0), 0) +
      (o.repuestosItems || []).reduce((a, l) => a + (Number(l.venta) || 0), 0), 0);
  const pctFac       = facMesActual > 0 ? (totalMensual / facMesActual) * 100 : 0;

  const openNew  = () => { setEditItem(null); setShowModal(true); };
  const openEdit = (item) => { setEditItem(item); setShowModal(true); };

  const handleSave = (form) => {
    const { desdeKey, monto, concepto, periodicidad } = form;
    const aplicaDesde = desdeKey || mesActual;

    if (editItem) {
      setData(d => ({
        ...d,
        costosFijos: d.costosFijos.map(c => {
          if (c.id !== editItem.id) return c;
          const histBase = c.historialMonto && c.historialMonto.length > 0
            ? c.historialMonto
            : [{ desde: "2025-01", monto: Number(c.monto) || 0 }];
          const idx = histBase.findIndex(h => h.desde === aplicaDesde);
          const histNuevo = idx >= 0
            ? histBase.map((h, i) => i === idx ? { desde: aplicaDesde, monto: Number(monto) } : h)
            : [...histBase, { desde: aplicaDesde, monto: Number(monto) }];
          return {
            ...c,
            concepto,
            periodicidad,
            monto: Number(monto),
            historialMonto: histNuevo.sort((a, b) => a.desde.localeCompare(b.desde)),
          };
        }),
      }));
    } else {
      setData(d => ({
        ...d,
        costosFijos: [...(d.costosFijos || []), {
          concepto, periodicidad, monto: Number(monto),
          id: Date.now(), activo: true,
          historialMonto: [{ desde: aplicaDesde, monto: Number(monto) }],
        }],
      }));
    }
    setShowModal(false);
    setEditItem(null);
  };

  const toggleActivo = (id) => {
    setData(d => ({
      ...d,
      costosFijos: d.costosFijos.map(c => c.id === id ? { ...c, activo: !c.activo } : c),
    }));
  };

  const handleDelete = (id) => {
    setData(d => ({ ...d, costosFijos: d.costosFijos.filter(c => c.id !== id) }));
  };

  // Activos primero, luego pausados
  const sorted = [
    ...costos.filter(c => c.activo),
    ...costos.filter(c => !c.activo),
  ];

  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(2,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.receipt width="16" height="16" />
          </div>
          <div className="kpi__label">Total costos fijos / mes</div>
          <div className="kpi__value mono" style={{ color: "var(--accent)" }}>
            {fmtMoneyShort(totalMensual)}
          </div>
          <div className="kpi__sub muted">{activos.length} ítems activos</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.trend width="16" height="16" />
          </div>
          <div className="kpi__label">% sobre facturación del mes</div>
          <div className="kpi__value mono">{facMesActual > 0 ? Math.round(pctFac) + "%" : "—"}</div>
          <div className="kpi__sub muted">
            {facMesActual > 0 ? `base ${fmtMoneyShort(facMesActual)} este mes` : "sin facturación este mes"}
          </div>
        </div>
      </div>

      <div className="filter-bar">
        <div style={{ flex: 1 }} />
        <button className="btn btn--primary" onClick={openNew}>
          <Icon.plus /> Agregar costo fijo
        </button>
      </div>

      {costos.length === 0 ? (
        <div className="card">
          <div className="card__body" style={{ textAlign: "center", padding: "52px 24px" }}>
            <div className="muted" style={{ fontSize: 14 }}>
              No hay costos fijos cargados. Agregá los gastos que se repiten cada mes.
            </div>
            <button className="btn btn--primary" style={{ marginTop: 18 }} onClick={openNew}>
              <Icon.plus /> Agregar primer costo fijo
            </button>
          </div>
        </div>
      ) : (
        <div className="card">
          <table className="table">
            <thead>
              <tr>
                <th>Concepto</th>
                <th>Periodicidad</th>
                <th className="num">Monto / período</th>
                <th className="num">Equiv. mensual</th>
                <th style={{ width: 96 }}>Estado</th>
                <th style={{ width: 72 }}></th>
              </tr>
            </thead>
            <tbody>
              {sorted.map(c => (
                <tr key={c.id} style={{ opacity: c.activo ? 1 : 0.45 }}>
                  <td style={{ cursor: "pointer" }} onClick={() => openEdit(c)}>
                    <b>{c.concepto}</b>
                  </td>
                  <td className="muted" style={{ fontSize: 12 }}>{c.periodicidad}</td>
                  <td className="num mono">{fmtMoney(costoEquivMensual(c, mesActual) * (PERIODOS_MESES_CF[c.periodicidad] || 1))}</td>
                  <td className="num mono" style={{ color: c.activo ? "var(--accent)" : "var(--text-mute)", fontWeight: 600 }}>
                    {fmtMoney(costoEquivMensual(c, mesActual))}
                  </td>
                  <td>
                    <span
                      className={`pill pill--${c.activo ? "terminado" : "entregado"}`}
                      style={{ cursor: "pointer", userSelect: "none" }}
                      onClick={() => toggleActivo(c.id)}
                      title={c.activo ? "Click para pausar" : "Click para activar"}
                    >
                      <span className="pill__dot" />
                      {c.activo ? "Activo" : "Pausado"}
                    </span>
                  </td>
                  <td style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                    <button className="btn btn--ghost btn--sm" title="Editar"
                      onClick={() => openEdit(c)} style={{ padding: "4px 8px" }}>
                      <Icon.edit />
                    </button>
                    <button className="btn btn--ghost btn--sm" title="Eliminar"
                      onClick={() => { if (window.confirm(`¿Eliminar "${c.concepto}"?`)) handleDelete(c.id); }}
                      style={{ padding: "4px 8px", color: "var(--text-mute)" }}>
                      <Icon.trash />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showModal && (
        <CostoFijoModal
          item={editItem}
          onClose={() => { setShowModal(false); setEditItem(null); }}
          onSave={handleSave}
        />
      )}
    </>
  );
}

function CostoFijoModal({ item, onClose, onSave }) {
  const mesActualMod = new Date().toISOString().slice(0, 7);
  const MESES_CF = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
  const labelMes = mk => { const [a, m] = mk.split("-"); return `${MESES_CF[Number(m)-1]} ${a}`; };

  const montoVigente = React.useMemo(() => {
    if (!item) return "";
    if (item.historialMonto && item.historialMonto.length > 0) {
      const hist = [...item.historialMonto].sort((a, b) => a.desde.localeCompare(b.desde));
      return String((hist.filter(h => h.desde <= mesActualMod).at(-1) ?? hist[0]).monto);
    }
    return String(item.monto || "");
  }, [item]);

  const [form, setForm] = React.useState({
    concepto:     item?.concepto     || "",
    monto:        montoVigente,
    periodicidad: item?.periodicidad || "Mensual",
    desdeKey:     mesActualMod,
  });
  const set   = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.concepto.trim().length > 0 && Number(form.monto) > 0;

  const equiv     = Number(form.monto) / (PERIODOS_MESES_CF[form.periodicidad] || 1);
  const showEquiv = valid && form.periodicidad !== "Mensual";

  const historial = item?.historialMonto
    ? [...item.historialMonto].sort((a, b) => b.desde.localeCompare(a.desde))
    : [];

  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 ? "Editar costo fijo" : "Nuevo costo fijo"}</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: Alquiler del local" />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">Monto del período *</label>
                <input type="number" min="0" value={form.monto} onWheel={e => e.target.blur()} onChange={set("monto")}
                  placeholder="0" style={{ fontFamily: "var(--font-mono)" }} />
              </div>
              <div className="field">
                <label className="field__label">Periodicidad</label>
                <CustomSelect value={form.periodicidad} onChange={set("periodicidad")}>
                  {PERIODICIDADES.map(p => <option key={p} value={p}>{p}</option>)}
                </CustomSelect>
              </div>
            </div>
            {item && (
              <div className="field">
                <label className="field__label">A partir de *</label>
                <input type="month" value={form.desdeKey} onChange={set("desdeKey")}
                  style={{ fontFamily: "var(--font-mono)" }} />
              </div>
            )}
            {showEquiv && (
              <div style={{ fontSize: 12, color: "var(--text-dim)", background: "rgba(255,255,255,0.03)", borderRadius: "var(--radius-sm)", padding: "10px 14px" }}>
                Equivale a&nbsp;
                <span className="mono" style={{ color: "var(--accent)", fontWeight: 700 }}>
                  {fmtMoney(equiv)}
                </span>
                &nbsp;por mes.
              </div>
            )}
            {historial.length > 0 && (
              <div>
                <div className="field__label" style={{ marginBottom: 8 }}>Historial de valores</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  {historial.map((h, i) => (
                    <div key={h.desde} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, padding: "6px 10px", background: "rgba(255,255,255,0.03)", borderRadius: "var(--radius-sm)", opacity: i === 0 ? 1 : 0.55 }}>
                      <span className="muted">Desde {labelMes(h.desde)}</span>
                      <span className="mono" style={{ fontWeight: i === 0 ? 700 : 400, color: i === 0 ? "var(--text)" : "var(--text-mute)" }}>
                        {fmtMoney(h.monto)}
                      </span>
                    </div>
                  ))}
                </div>
              </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)}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> {item ? "Actualizar valor" : "Agregar costo"}
          </button>
        </div>
      </div>
    </div>
  );
}

window.CostosFijosView = CostosFijosView;