"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { getCurrentUser, SessionUser } from "@/lib/session-client";
import PageLayout from "@/components/layout/PageLayout";
import Card from "@/components/ui/Card";
import Input from "@/components/ui/Input";
import Select from "@/components/ui/Select";
import Button from "@/components/ui/Button";
import Modal from "@/components/ui/Modal";
import Badge from "@/components/ui/Badge";
import {
  ReciboCarro,
  obtenerRecibosCarros,
  obtenerReciboCarroPorId,
  registrarPagoCarro,
  eliminarReciboCarro,
} from "@/services/recibos-carros";
import { imprimirReciboCarro } from "@/lib/print-carros";

function formatearDinero(valor: number) {
  return `$${valor.toLocaleString("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`;
}

function formatearFecha(valor?: string | null) {
  if (!valor) return "-";
  const fecha = new Date(valor);
  if (isNaN(fecha.getTime())) return valor;
  return fecha.toLocaleDateString("es-HN");
}

export default function RecibosCarrosPage() {
  const router = useRouter();
  const [recibos, setRecibos] = useState<ReciboCarro[]>([]);
  const [loading, setLoading] = useState(true);
  const [usuarioSesion, setUsuarioSesion] = useState<SessionUser | null>(null);

  const [busqueda, setBusqueda] = useState("");
  const [filtroEstado, setFiltroEstado] = useState("Todos");

  const [reciboPago, setReciboPago] = useState<ReciboCarro | null>(null);
  const [pagoImporte, setPagoImporte] = useState("");
  const [pagoFecha, setPagoFecha] = useState("");
  const [pagoMetodo, setPagoMetodo] = useState("");
  const [pagoReferencia, setPagoReferencia] = useState("");
  const [pagoObservaciones, setPagoObservaciones] = useState("");
  const [guardandoPago, setGuardandoPago] = useState(false);

  const [reciboEliminar, setReciboEliminar] = useState<ReciboCarro | null>(null);
  const [eliminando, setEliminando] = useState(false);

  useEffect(() => {
    getCurrentUser().then(setUsuarioSesion).catch(() => setUsuarioSesion(null));
    cargarRecibos();
  }, []);

  async function cargarRecibos() {
    setLoading(true);
    try {
      const data = await obtenerRecibosCarros();
      setRecibos(data);
    } catch (error: any) {
      console.error("ERROR CARGANDO RECIBOS DE CARROS:", error);
      alert(error?.message || "Error al cargar los recibos de carros.");
    } finally {
      setLoading(false);
    }
  }

  const estadosPago = [
    { value: "Todos", label: "Todos" },
    { value: "Pendiente", label: "Pendiente" },
    { value: "Abono parcial", label: "Abono parcial" },
    { value: "Pagado", label: "Pagado" },
  ];

  const recibosFiltrados = useMemo(() => {
    return recibos.filter((recibo) => {
      const coincideEstado =
        filtroEstado === "Todos" || recibo.estado_pago === filtroEstado;

      if (!coincideEstado) return false;

      if (!busqueda.trim()) return true;

      const texto = busqueda.toLowerCase();
      return (
        recibo.numero?.toLowerCase().includes(texto) ||
        recibo.remitente_nombre?.toLowerCase().includes(texto) ||
        recibo.destinatario_nombre?.toLowerCase().includes(texto) ||
        recibo.marca?.toLowerCase().includes(texto) ||
        recibo.modelo?.toLowerCase().includes(texto) ||
        recibo.vin?.toLowerCase().includes(texto)
      );
    });
  }, [recibos, busqueda, filtroEstado]);

  const {
    totalRecibos,
    totalVehiculos,
    totalCargos,
    totalAbonado,
    saldoPendiente,
  } = useMemo(() => {
    let recibosCount = 0;
    let cargos = 0;
    let abonado = 0;
    let saldo = 0;

    for (const recibo of recibosFiltrados) {
      recibosCount++;
      cargos += recibo.total;
      abonado += recibo.total_abonado;
      saldo += recibo.saldo_pendiente;
    }

    return {
      totalRecibos: recibosCount,
      totalVehiculos: recibosCount,
      totalCargos: cargos,
      totalAbonado: abonado,
      saldoPendiente: saldo,
    };
  }, [recibosFiltrados]);

  const esAdmin =
    usuarioSesion?.tipo === "admin" || usuarioSesion?.tipo === "usuario";

  async function handleRegistrarPago() {
    if (!reciboPago) return;

    const importe = Number(pagoImporte);
    if (!importe || importe <= 0) {
      alert("Ingresa un importe válido.");
      return;
    }
    if (importe > reciboPago.saldo_pendiente) {
      alert("El abono no puede superar el saldo pendiente.");
      return;
    }

    setGuardandoPago(true);
    try {
      await registrarPagoCarro(reciboPago.id, {
        fecha: pagoFecha || new Date().toISOString().split("T")[0],
        importe,
        metodo_pago: pagoMetodo,
        referencia: pagoReferencia,
        observaciones: pagoObservaciones,
      });

      alert("Abono registrado correctamente.");
      setReciboPago(null);
      setPagoImporte("");
      setPagoFecha("");
      setPagoMetodo("");
      setPagoReferencia("");
      setPagoObservaciones("");
      await cargarRecibos();
    } catch (error: any) {
      console.error("ERROR REGISTRANDO ABONO:", error);
      alert(error?.message || "No se pudo registrar el abono.");
    } finally {
      setGuardandoPago(false);
    }
  }

  async function handleEliminar() {
    if (!reciboEliminar) return;

    setEliminando(true);
    try {
      await eliminarReciboCarro(reciboEliminar.id);
      alert("Recibo de carro eliminado correctamente.");
      setReciboEliminar(null);
      await cargarRecibos();
    } catch (error: any) {
      console.error("ERROR ELIMINANDO RECIBO DE CARRO:", error);
      alert(error?.message || "No se pudo eliminar el recibo.");
    } finally {
      setEliminando(false);
    }
  }

  function abrirPago(recibo: ReciboCarro) {
    setReciboPago(recibo);
    setPagoImporte("");
    setPagoFecha(new Date().toISOString().split("T")[0]);
    setPagoMetodo("");
    setPagoReferencia("");
    setPagoObservaciones("");
  }

  async function abrirImpresion(recibo: ReciboCarro) {
    const completo = await obtenerReciboCarroPorId(recibo.id);
    if (completo) {
      imprimirReciboCarro(completo);
    } else {
      alert("No se pudo cargar el recibo para imprimir.");
    }
  }

  function variantBadge(estado: string): any {
    switch (estado) {
      case "Pagado":
        return "success";
      case "Abono parcial":
        return "warning";
      default:
        return "danger";
    }
  }

  if (loading) {
    return (
      <PageLayout>
        <div className="flex min-h-[200px] items-center justify-center text-sm text-[var(--text-muted)]">
          Cargando recibos de carros...
        </div>
      </PageLayout>
    );
  }

  return (
    <PageLayout>
      <div className="max-sm:[&_input]:min-h-12 max-sm:[&_select]:min-h-12 max-sm:[&_button]:min-h-11">
      <section className="mb-4 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">
          Recibos de Carros
        </h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Registro de recibos de vehículos HCE
        </p>
      </section>

      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total de recibos
          </p>
          <p className="mt-1 text-3xl font-black text-[var(--accent)]">
            {totalRecibos}
          </p>
        </Card>
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total de vehículos
          </p>
          <p className="mt-1 text-3xl font-black text-emerald-500">{totalVehiculos}</p>
        </Card>
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total en cargos
          </p>
          <p className="mt-1 text-3xl font-black text-blue-500">
            {formatearDinero(totalCargos)}
          </p>
        </Card>
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total abonado
          </p>
          <p className="mt-1 text-3xl font-black text-orange-500">
            {formatearDinero(totalAbonado)}
          </p>
        </Card>
      </div>

      <div className="mb-4 grid grid-cols-1 gap-3 md:grid-cols-3">
        <Card padding="sm" className="md:col-start-2">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Saldo pendiente total
          </p>
          <p className="mt-1 text-3xl font-black text-red-500">
            {formatearDinero(saldoPendiente)}
          </p>
        </Card>
      </div>

      <Card className="mb-4" padding="sm">
        <div className="flex flex-col gap-3 md:flex-row md:items-end">
          <div className="flex-1">
            <Input
              label="Buscar"
              placeholder="Número, remitente, destinatario, marca, modelo, VIN..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
            />
          </div>
          <div className="w-full md:w-48">
            <Select
              label="Estado de pago"
              options={estadosPago}
              value={filtroEstado}
              onChange={(e) => setFiltroEstado(e.target.value)}
            />
          </div>
          <div>
            <Link className="block w-full md:w-auto" href="/recibos-carros/nuevo">
              <Button className="w-full md:w-auto">+ Nuevo recibo</Button>
            </Link>
          </div>
        </div>
      </Card>

      <div className="mb-4 grid gap-3 md:grid-cols-2 xl:hidden">
        {recibosFiltrados.map((recibo, index) => (
          <Card key={recibo.id} padding="sm" className="min-w-0">
            <div className="flex min-w-0 items-start justify-between gap-3">
              <div className="min-w-0">
                <p className="break-all font-bold text-[var(--accent)]">
                  {recibo.numero}
                </p>
                <p className="text-xs text-[var(--text-muted)]">
                  #{index + 1} · {formatearFecha(recibo.fecha)}
                </p>
              </div>
              <Badge variant={variantBadge(recibo.estado_pago)} size="sm">
                {recibo.estado_pago}
              </Badge>
            </div>

            <div className="mt-3 grid min-w-0 grid-cols-2 gap-3 text-sm">
              <div className="min-w-0">
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Remitente
                </p>
                <p className="break-words text-[var(--text-primary)]">
                  {recibo.remitente_nombre || "-"}
                </p>
              </div>
              <div className="min-w-0">
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Destinatario
                </p>
                <p className="break-words text-[var(--text-primary)]">
                  {recibo.destinatario_nombre || "-"}
                </p>
              </div>
              <div className="col-span-2 min-w-0">
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Vehículo
                </p>
                <p className="break-words text-[var(--text-secondary)]">
                  {[recibo.tipo_vehiculo, recibo.marca, recibo.modelo, recibo.color]
                    .filter(Boolean)
                    .join(" ") || "-"}
                </p>
              </div>
              <div>
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Total
                </p>
                <p className="font-bold text-[var(--text-primary)]">
                  {formatearDinero(recibo.total)}
                </p>
              </div>
              <div>
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Abonado
                </p>
                <p className="font-bold text-emerald-500">
                  {formatearDinero(recibo.total_abonado)}
                </p>
              </div>
              <div className="col-span-2">
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Saldo pendiente
                </p>
                <p className="font-black text-[var(--accent)]">
                  {formatearDinero(recibo.saldo_pendiente)}
                </p>
              </div>
            </div>

            <div className="mt-3 grid grid-cols-2 gap-2 border-t border-[var(--border)] pt-3">
              <Button
                className="min-h-11 w-full"
                size="sm"
                variant="secondary"
                onClick={() => router.push(`/recibos-carros/${recibo.id}`)}
              >
                Ver
              </Button>
              <Button
                className="min-h-11 w-full"
                size="sm"
                variant="secondary"
                onClick={() => router.push(`/recibos-carros/${recibo.id}/editar`)}
              >
                Editar
              </Button>
              <Button
                className="min-h-11 w-full"
                size="sm"
                variant="secondary"
                onClick={() => abrirPago(recibo)}
                disabled={recibo.estado_pago === "Pagado"}
              >
                Abono
              </Button>
              <Button
                className="min-h-11 w-full"
                size="sm"
                variant="secondary"
                onClick={() => abrirImpresion(recibo)}
              >
                Imprimir
              </Button>
              {esAdmin && (
                <Button
                  className="col-span-2 min-h-11 w-full"
                  size="sm"
                  variant="danger"
                  onClick={() => setReciboEliminar(recibo)}
                >
                  Borrar
                </Button>
              )}
            </div>
          </Card>
        ))}
        {recibosFiltrados.length === 0 && (
          <Card padding="sm" className="text-center text-sm text-[var(--text-muted)] md:col-span-2">
            No hay recibos de carros para los filtros seleccionados.
          </Card>
        )}
      </div>

      <Card padding="none" className="hidden xl:block">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1100px] text-left text-[12px]">
            <thead className="bg-[var(--bg-secondary)] text-[11px] font-black uppercase tracking-wider text-[var(--text-secondary)]">
              <tr>
                <th className="px-3 py-2">#</th>
                <th className="px-3 py-2">Recibo</th>
                <th className="px-3 py-2">Fecha</th>
                <th className="px-3 py-2">Remitente</th>
                <th className="px-3 py-2">Destinatario</th>
                <th className="px-3 py-2">Vehículo</th>
                <th className="px-3 py-2">Color</th>
                <th className="px-3 py-2 text-right">Total</th>
                <th className="px-3 py-2 text-right">Abonado</th>
                <th className="px-3 py-2 text-right">Saldo</th>
                <th className="px-3 py-2 text-center">Estado</th>
                <th className="px-3 py-2 text-center">Acciones</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[var(--border)]">
              {recibosFiltrados.map((recibo, index) => (
                <tr
                  key={recibo.id}
                  className="transition hover:bg-[var(--bg-secondary)]/50"
                >
                  <td className="px-3 py-2 text-[var(--text-secondary)]">
                    {index + 1}
                  </td>
                  <td className="whitespace-nowrap px-3 py-2 font-bold text-[var(--accent)]">
                    {recibo.numero}
                  </td>
                  <td className="whitespace-nowrap px-3 py-2 text-[var(--text-muted)]">
                    {formatearFecha(recibo.fecha)}
                  </td>
                  <td className="px-3 py-2 text-[var(--text-primary)]">
                    {recibo.remitente_nombre || "-"}
                  </td>
                  <td className="px-3 py-2 text-[var(--text-primary)]">
                    {recibo.destinatario_nombre || "-"}
                  </td>
                  <td className="px-3 py-2 text-[var(--text-secondary)]">
                    {recibo.tipo_vehiculo || "-"} {recibo.marca || ""}{" "}
                    {recibo.modelo || ""}
                  </td>
                  <td className="px-3 py-2 text-[var(--text-secondary)]">
                    {recibo.color || "-"}
                  </td>
                  <td className="px-3 py-2 text-right font-medium text-[var(--text-primary)]">
                    {formatearDinero(recibo.total)}
                  </td>
                  <td className="px-3 py-2 text-right text-emerald-500">
                    {formatearDinero(recibo.total_abonado)}
                  </td>
                  <td className="px-3 py-2 text-right text-[var(--text-secondary)]">
                    {formatearDinero(recibo.saldo_pendiente)}
                  </td>
                  <td className="px-3 py-2 text-center">
                    <Badge variant={variantBadge(recibo.estado_pago)} size="sm">
                      {recibo.estado_pago}
                    </Badge>
                  </td>
                  <td className="px-3 py-2 text-center">
                    <div className="flex flex-wrap justify-center gap-1">
                      <Button
                        size="sm"
                        variant="secondary"
                        onClick={() => router.push(`/recibos-carros/${recibo.id}`)}
                      >
                        Ver
                      </Button>
                      <Button
                        size="sm"
                        variant="secondary"
                        onClick={() => router.push(`/recibos-carros/${recibo.id}/editar`)}
                      >
                        Editar
                      </Button>
                      <Button
                        size="sm"
                        variant="secondary"
                        onClick={() => abrirPago(recibo)}
                        disabled={recibo.estado_pago === "Pagado"}
                      >
                        Abono
                      </Button>
                      <Button
                        size="sm"
                        variant="secondary"
                        onClick={() => abrirImpresion(recibo)}
                      >
                        Imprimir
                      </Button>
                      {esAdmin && (
                        <Button
                          size="sm"
                          variant="danger"
                          onClick={() => setReciboEliminar(recibo)}
                        >
                          Borrar
                        </Button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}

              {recibosFiltrados.length === 0 && (
                <tr>
                  <td
                    colSpan={12}
                    className="px-4 py-8 text-center text-sm text-[var(--text-muted)]"
                  >
                    No hay recibos de carros para los filtros seleccionados.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {/* Modal de pago */}
      <Modal
        isOpen={!!reciboPago}
        onClose={() => setReciboPago(null)}
        title={`Registrar abono · ${reciboPago?.numero || ""}`}
        footer={
          <>
            <Button className="w-full sm:w-auto" variant="ghost" onClick={() => setReciboPago(null)}>
              Cancelar
            </Button>
            <Button
              className="w-full sm:w-auto"
              onClick={handleRegistrarPago}
              disabled={guardandoPago}
            >
              {guardandoPago ? "Guardando..." : "Registrar abono"}
            </Button>
          </>
        }
      >
        {reciboPago && (
          <div className="space-y-3">
            <div className="rounded-lg bg-[var(--bg-primary)] p-3 text-sm">
              <p>
                <strong>Saldo pendiente:</strong>{" "}
                {formatearDinero(reciboPago.saldo_pendiente)}
              </p>
            </div>
            <Input
              label="Fecha del pago"
              type="date"
              value={pagoFecha}
              onChange={(e) => setPagoFecha(e.target.value)}
            />
            <Input
              label="Importe (USD)"
              type="number"
              min="0"
              step="0.01"
              value={pagoImporte}
              onChange={(e) => setPagoImporte(e.target.value)}
            />
            <Select
              label="Método de pago"
              options={[
                { value: "", label: "Seleccionar" },
                { value: "Efectivo", label: "Efectivo" },
                { value: "Transferencia", label: "Transferencia" },
                { value: "Zelle", label: "Zelle" },
                { value: "Cheque", label: "Cheque" },
                { value: "Otro", label: "Otro" },
              ]}
              value={pagoMetodo}
              onChange={(e) => setPagoMetodo(e.target.value)}
            />
            <Input
              label="Referencia"
              value={pagoReferencia}
              onChange={(e) => setPagoReferencia(e.target.value)}
            />
            <Input
              label="Observaciones"
              value={pagoObservaciones}
              onChange={(e) => setPagoObservaciones(e.target.value)}
            />
          </div>
        )}
      </Modal>

      {/* Modal de eliminar */}
      <Modal
        isOpen={!!reciboEliminar}
        onClose={() => setReciboEliminar(null)}
        title="Eliminar recibo de carro"
        footer={
          <>
            <Button className="w-full sm:w-auto" variant="ghost" onClick={() => setReciboEliminar(null)}>
              Cancelar
            </Button>
            <Button
              className="w-full sm:w-auto"
              variant="danger"
              onClick={handleEliminar}
              disabled={eliminando}
            >
              {eliminando ? "Eliminando..." : "Eliminar"}
            </Button>
          </>
        }
      >
        <p className="text-sm text-[var(--text-secondary)]">
          ¿Seguro que deseas eliminar el recibo{" "}
          <strong>{reciboEliminar?.numero}</strong>? Esta acción no se puede
          deshacer.
        </p>
      </Modal>
      </div>
    </PageLayout>
  );
}