"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { getCurrentUser, SessionUser } from "@/lib/session-client";
import PageLayout from "@/components/layout/PageLayout";
import Card from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import Modal from "@/components/ui/Modal";
import Input from "@/components/ui/Input";
import Select from "@/components/ui/Select";
import {
  ReciboCarroCompleto,
  obtenerReciboCarroPorId,
  registrarPagoCarro,
  eliminarReciboCarro,
} from "@/services/recibos-carros";
import {
  imprimirReciboCarro,
  compartirReciboCarroWhatsApp,
} 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 DetalleReciboCarroPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [recibo, setRecibo] = useState<ReciboCarroCompleto | null>(null);
  const [loading, setLoading] = useState(true);
  const [usuarioSesion, setUsuarioSesion] = useState<SessionUser | null>(null);

  const [modalPago, setModalPago] = useState(false);
  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 [modalEliminar, setModalEliminar] = useState(false);
  const [eliminando, setEliminando] = useState(false);

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

  async function cargarRecibo() {
    setLoading(true);
    const data = await obtenerReciboCarroPorId(id);
    setRecibo(data);
    setLoading(false);
  }

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

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

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

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

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

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

  async function handleEliminar() {
    setEliminando(true);
    try {
      await eliminarReciboCarro(id);
      alert("Recibo de carro eliminado correctamente.");
      router.push("/recibos-carros");
    } catch (error: any) {
      console.error("ERROR ELIMINANDO RECIBO DE CARRO:", error);
      alert(error?.message || "No se pudo eliminar el recibo.");
      setEliminando(false);
    }
  }

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

  if (!recibo) {
    return (
      <PageLayout>
        <Card className="p-6 text-center text-[var(--text-muted)]">
          No se encontró el recibo de carro.
        </Card>
      </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 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">
            Recibo {recibo.numero}
          </h1>
          <p className="mt-0.5 text-xs text-[var(--text-muted)]">
            {formatearFecha(recibo.fecha)} ·{" "}
            <Badge variant={variantBadge(recibo.estado_pago)} size="sm">
              {recibo.estado_pago}
            </Badge>
          </p>
        </div>
        <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
          <Link href="/recibos-carros">
            <Button className="min-h-11 w-full sm:w-auto" variant="secondary" size="sm">Volver</Button>
          </Link>
          <Link href={`/recibos-carros/${recibo.id}/editar`}>
            <Button className="min-h-11 w-full sm:w-auto" variant="secondary" size="sm">Editar</Button>
          </Link>
          <Button
            className="min-h-11 w-full sm:w-auto"
            variant="secondary"
            size="sm"
            onClick={() => setModalPago(true)}
            disabled={recibo.estado_pago === "Pagado"}
          >
            Registrar abono
          </Button>
          <Button
            className="min-h-11 w-full sm:w-auto"
            variant="secondary"
            size="sm"
            onClick={() => imprimirReciboCarro(recibo)}
          >
            Imprimir
          </Button>
          <Button
            className="min-h-11 w-full sm:w-auto"
            variant="secondary"
            size="sm"
            onClick={() => compartirReciboCarroWhatsApp(recibo)}
          >
            WhatsApp
          </Button>
          {esAdmin && (
            <Button className="min-h-11 w-full sm:w-auto" variant="danger" size="sm" onClick={() => setModalEliminar(true)}>
              Eliminar
            </Button>
          )}
        </div>
      </section>

      <div className="grid min-w-0 gap-4 xl:grid-cols-3">
        <div className="min-w-0 space-y-4 xl:col-span-2">
          <Card padding="sm">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Clientes
            </h2>
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Remitente
                </p>
                <p className="font-bold text-[var(--text-primary)]">
                  {recibo.remitente_nombre || "-"}
                </p>
                <p className="text-sm text-[var(--text-secondary)]">
                  {recibo.remitente_telefono || "-"}
                </p>
              </div>
              <div>
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Destinatario
                </p>
                <p className="font-bold text-[var(--text-primary)]">
                  {recibo.destinatario_nombre || "-"}
                </p>
                <p className="text-sm text-[var(--text-secondary)]">
                  {recibo.destinatario_telefono || "-"}
                </p>
              </div>
            </div>
          </Card>

          <Card padding="sm">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Vehículo
            </h2>
            <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-3">
              <Info label="Tipo" value={recibo.tipo_vehiculo} />
              <Info label="Marca" value={recibo.marca} />
              <Info label="Modelo" value={recibo.modelo} />
              <Info label="Año" value={recibo.anio} />
              <Info label="Color" value={recibo.color} />
              <Info label="VIN / Chasis" value={recibo.vin} />
              <Info label="Puerto destino" value={recibo.puerto_destino} />
            </div>
            {recibo.observaciones && (
              <div className="mt-3 rounded-lg bg-[var(--bg-primary)] p-3">
                <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                  Observaciones
                </p>
                <p className="text-sm text-[var(--text-secondary)]">
                  {recibo.observaciones}
                </p>
              </div>
            )}
          </Card>

          <Card padding="sm">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Servicios e importes
            </h2>
            <table className="w-full table-fixed text-left text-sm">
              <thead className="bg-[var(--bg-secondary)] text-[11px] font-black uppercase text-[var(--text-secondary)]">
                <tr>
                  <th className="px-3 py-2">Concepto</th>
                  <th className="px-3 py-2 text-right">Importe</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[var(--border)]">
                {recibo.conceptos.map((c) => (
                  <tr key={c.id}>
                    <td className="break-words px-3 py-2 text-[var(--text-primary)]">
                      {c.concepto}
                    </td>
                    <td className="px-3 py-2 text-right font-medium">
                      {formatearDinero(Number(c.importe))}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>

          {recibo.pagos.length > 0 && (
            <Card padding="sm">
              <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
                Historial de abonos
              </h2>
              <div className="space-y-2 sm:hidden">
                {recibo.pagos.map((p) => (
                  <div
                    key={p.id}
                    className="grid grid-cols-2 gap-x-3 gap-y-2 rounded-lg bg-[var(--bg-primary)] p-3 text-sm"
                  >
                    <div>
                      <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                        Fecha
                      </p>
                      <p className="text-[var(--text-secondary)]">
                        {formatearFecha(p.fecha)}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                        Importe
                      </p>
                      <p className="font-bold text-emerald-500">
                        {formatearDinero(Number(p.importe))}
                      </p>
                    </div>
                    <div className="min-w-0">
                      <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                        Método
                      </p>
                      <p className="break-words text-[var(--text-secondary)]">
                        {p.metodo_pago || "-"}
                      </p>
                    </div>
                    <div className="min-w-0">
                      <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
                        Referencia
                      </p>
                      <p className="break-all text-[var(--text-secondary)]">
                        {p.referencia || "-"}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
              <div className="hidden overflow-x-auto sm:block">
              <table className="w-full table-fixed text-left text-sm">
                <thead className="bg-[var(--bg-secondary)] text-[11px] font-black uppercase text-[var(--text-secondary)]">
                  <tr>
                    <th className="px-3 py-2">Fecha</th>
                    <th className="px-3 py-2">Método</th>
                    <th className="px-3 py-2">Referencia</th>
                    <th className="px-3 py-2 text-right">Importe</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[var(--border)]">
                  {recibo.pagos.map((p) => (
                    <tr key={p.id}>
                      <td className="px-3 py-2 text-[var(--text-muted)]">
                        {formatearFecha(p.fecha)}
                      </td>
                      <td className="break-words px-3 py-2 text-[var(--text-secondary)]">
                        {p.metodo_pago || "-"}
                      </td>
                      <td className="px-3 py-2 text-[var(--text-secondary)]">
                        {p.referencia || "-"}
                      </td>
                      <td className="px-3 py-2 text-right font-medium text-emerald-500">
                        {formatearDinero(Number(p.importe))}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              </div>
            </Card>
          )}
        </div>

        <div className="min-w-0 space-y-4">
          <Card padding="sm" className="xl:sticky xl:top-4">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Resumen financiero
            </h2>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-[var(--text-muted)]">Total</span>
                <span className="font-bold text-[var(--text-primary)]">
                  {formatearDinero(recibo.total)}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-[var(--text-muted)]">Abonado</span>
                <span className="font-bold text-emerald-500">
                  {formatearDinero(recibo.total_abonado)}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-[var(--text-muted)]">Estado de pago</span>
                <span className="text-right font-bold text-[var(--text-primary)]">
                  {recibo.estado_pago}
                </span>
              </div>
              <div className="flex justify-between border-t border-[var(--border)] pt-2">
                <span className="text-[var(--text-muted)]">Saldo</span>
                <span className="text-lg font-black text-[var(--accent)]">
                  {formatearDinero(recibo.saldo_pendiente)}
                </span>
              </div>
            </div>
          </Card>
        </div>
      </div>

      <Modal
        isOpen={modalPago}
        onClose={() => setModalPago(false)}
        title="Registrar abono"
        footer={
          <>
            <Button className="w-full sm:w-auto" variant="ghost" onClick={() => setModalPago(false)}>
              Cancelar
            </Button>
            <Button className="w-full sm:w-auto" onClick={handleRegistrarPago} disabled={guardandoPago}>
              {guardandoPago ? "Guardando..." : "Registrar abono"}
            </Button>
          </>
        }
      >
        <div className="space-y-3">
          <div className="rounded-lg bg-[var(--bg-primary)] p-3 text-sm">
            <p>
              <strong>Saldo pendiente:</strong>{" "}
              {formatearDinero(recibo.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
        isOpen={modalEliminar}
        onClose={() => setModalEliminar(false)}
        title="Eliminar recibo de carro"
        footer={
          <>
            <Button className="w-full sm:w-auto" variant="ghost" onClick={() => setModalEliminar(false)}>
              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>{recibo.numero}</strong>?
          Esta acción no se puede deshacer.
        </p>
      </Modal>
      </div>
    </PageLayout>
  );
}

function Info({ label, value }: { label: string; value?: string | null }) {
  return (
    <div>
      <p className="text-[10px] font-bold uppercase text-[var(--text-muted)]">
        {label}
      </p>
      <p className="text-sm font-medium text-[var(--text-primary)]">
        {value || "-"}
      </p>
    </div>
  );
}