/* RegisterSheet (editor completo) → window. Usa useData, helpers, Spinner, CloseIcon. */
(function () {
  const { useState, useEffect, useMemo } = React;
  const { useData, todayISO, fmt, fmtFechaLarga, Spinner, CloseIcon } = window;

  function RegisterSheet({ open, onClose, editing }) {
    const { upsert, remove, records } = useData();
    const [fecha, setFecha] = useState(todayISO());
    const [ingreso, setIngreso] = useState("");
    const [gasolina, setGasolina] = useState("");
    const [mantenimiento, setMantenimiento] = useState("");
    const [nota, setNota] = useState("");
    const [saving, setSaving] = useState(false);
    const [saveError, setSaveError] = useState("");
    const [confirmDel, setConfirmDel] = useState(false);
    const [deleting, setDeleting] = useState(false);

    useEffect(() => {
      if (!open) return;
      if (editing) {
        setFecha(editing.fecha);
        setIngreso(String(editing.ingreso || ""));
        setGasolina(String(editing.gasolina || ""));
        setMantenimiento(editing.mantenimiento ? String(editing.mantenimiento) : "");
        setNota(editing.nota || "");
      } else {
        setFecha(todayISO());
        setIngreso("");
        setGasolina("");
        setMantenimiento("");
        setNota("");
      }
    }, [open, editing]);

    const neto = useMemo(
      () => (Number(ingreso) || 0) - (Number(gasolina) || 0) - (Number(mantenimiento) || 0),
      [ingreso, gasolina, mantenimiento]
    );
    const existing = useMemo(() => records.find(r => r.fecha === fecha && (!editing || editing.fecha !== fecha)), [records, fecha, editing]);

    if (!open) return null;

    const canSave = fecha && (ingreso !== "" || gasolina !== "" || mantenimiento !== "" || nota.trim() !== "") && !saving;

    const handleSave = async () => {
      if (!canSave) return;
      setSaveError("");
      setSaving(true);
      try {
        await upsert({ fecha, ingreso, gasolina, mantenimiento, nota });
        setSaving(false);
        onClose();
      } catch (e) {
        console.warn("save error:", e);
        setSaveError("No se pudo guardar. Revisa tu conexión.");
        setSaving(false);
      }
    };

    const askDelete = () => { setSaveError(""); setConfirmDel(true); };

    const confirmDelete = async () => {
      if (!editing || deleting) return;
      setDeleting(true);
      setSaveError("");
      try {
        await remove(editing.fecha);
        setConfirmDel(false);
        setDeleting(false);
        onClose();
      } catch (e) {
        console.warn("delete error:", e);
        setSaveError("No se pudo eliminar. Revisa tu conexión.");
        setDeleting(false);
      }
    };

    return (
      <div className="fixed inset-0 z-50 flex items-end justify-center" style={{ background: "rgba(0,0,0,0.5)" }} onClick={onClose}>
        <div className="w-full max-w-[430px] bg-white rounded-t-3xl p-6 pb-8 sheet-enter max-h-[92vh] overflow-y-auto hide-scroll" onClick={e => e.stopPropagation()}>
          <div className="flex justify-between items-center mb-5">
            <h2 className="text-2xl font-black text-[#3C3C3C]">{editing ? "Editar día" : "Registrar día"}</h2>
            <button onClick={onClose} className="w-10 h-10 rounded-full bg-[#F0F0F0] flex items-center justify-center"><CloseIcon /></button>
          </div>

          <label className="block text-xs font-black uppercase text-[#777] mb-1">Fecha</label>
          <input type="date" value={fecha} onChange={e => setFecha(e.target.value)}
                 className="w-full h-14 px-4 rounded-2xl border-2 border-[#E5E5E5] font-bold text-[#3C3C3C] mb-1 outline-none focus:border-[#58CC02]" />
          {existing && (
            <p className="text-xs font-bold text-[#FFC800] mb-3">⚠ Ya existe registro en esta fecha. Se sobrescribirá.</p>
          )}
          {!existing && <div className="mb-3" />}

          <label className="block text-xs font-black uppercase text-[#777] mb-1">Ingreso Uber</label>
          <input type="number" inputMode="numeric" placeholder="0" value={ingreso} onChange={e => setIngreso(e.target.value)}
                 className="w-full h-14 px-4 rounded-2xl border-2 border-[#E5E5E5] font-bold text-[#3C3C3C] text-lg mb-4 outline-none focus:border-[#58CC02]" />

          <label className="block text-xs font-black uppercase text-[#777] mb-1">Gasto gasolina</label>
          <input type="number" inputMode="numeric" placeholder="0" value={gasolina} onChange={e => setGasolina(e.target.value)}
                 className="w-full h-14 px-4 rounded-2xl border-2 border-[#E5E5E5] font-bold text-[#3C3C3C] text-lg mb-4 outline-none focus:border-[#FF4B4B]" />

          <label className="block text-xs font-black uppercase text-[#777] mb-1">Mantenimiento</label>
          <input type="number" inputMode="numeric" placeholder="0" value={mantenimiento} onChange={e => setMantenimiento(e.target.value)}
                 className="w-full h-14 px-4 rounded-2xl border-2 border-[#E5E5E5] font-bold text-[#3C3C3C] text-lg mb-4 outline-none focus:border-[#FFC800]" />

          <label className="block text-xs font-black uppercase text-[#777] mb-1">Nota</label>
          <textarea value={nota} onChange={e => setNota(e.target.value)} rows={2}
                    placeholder="Ej: cambio de aceite, gomas, pasajero raro…"
                    className="w-full px-4 py-3 rounded-2xl border-2 border-[#E5E5E5] font-semibold text-[#3C3C3C] text-sm mb-4 outline-none focus:border-[#58CC02] resize-none" />

          <div className="rounded-2xl p-4 mb-6" style={{ background: neto >= 0 ? "#DFFBC2" : "#FFE3E3" }}>
            <div className="text-xs font-black uppercase" style={{ color: neto >= 0 ? "#46A302" : "#CC3B3B" }}>Neto</div>
            <div className="text-3xl font-black" style={{ color: neto >= 0 ? "#46A302" : "#CC3B3B" }}>{fmt(neto)}</div>
          </div>

          <button onClick={handleSave} disabled={!canSave}
                  className={"btn-3d w-full h-14 rounded-full text-white font-black uppercase tracking-wide flex items-center justify-center gap-2 " + (canSave ? "btn-green" : "bg-[#CCC]")}
                  style={!canSave ? { boxShadow: "0 4px 0 #AAA" } : {}}>
            {saving && <Spinner size={18} color="#FFFFFF" />}
            {saving ? "Guardando..." : (editing ? "Actualizar" : "Guardar")}
          </button>

          {saveError && <p className="text-center text-sm text-[#FF4B4B] font-bold mt-3">{saveError}</p>}

          {editing && (
            <button onClick={askDelete} disabled={saving} className="w-full h-12 mt-3 rounded-full font-black uppercase tracking-wide text-[#FF4B4B] disabled:opacity-50">
              Eliminar registro
            </button>
          )}

          {confirmDel && (
            <div className="fixed inset-0 z-[60] flex items-center justify-center px-6" style={{ background: "rgba(0,0,0,0.6)" }} onClick={() => !deleting && setConfirmDel(false)}>
              <div className="w-full max-w-[360px] bg-white rounded-3xl p-6 fade-in" onClick={e => e.stopPropagation()}>
                <h3 className="text-xl font-black text-[#3C3C3C] text-center">¿Eliminar registro?</h3>
                <p className="text-sm font-semibold text-[#777] text-center mt-2">
                  Se borrará <span className="font-black text-[#3C3C3C]">{fmtFechaLarga(editing.fecha)}</span>. Esta acción no se puede deshacer.
                </p>
                <div className="mt-5 flex flex-col gap-3">
                  <button onClick={confirmDelete} disabled={deleting}
                          className="btn-3d btn-red w-full h-12 rounded-full text-white font-black uppercase tracking-wide flex items-center justify-center gap-2 disabled:opacity-70">
                    {deleting && <Spinner size={16} color="#FFFFFF" />}
                    {deleting ? "Eliminando..." : "Sí, eliminar"}
                  </button>
                  <button onClick={() => setConfirmDel(false)} disabled={deleting}
                          className="w-full h-11 rounded-full font-black uppercase tracking-wide text-[#777] disabled:opacity-50">
                    Cancelar
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }

  window.RegisterSheet = RegisterSheet;
})();