"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { supabase } from "@/lib/supabase";
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 {
  ClienteCarro,
  ConceptoCarro,
  buscarClientesCarros,
  guardarClienteCarro,
  guardarReciboCarro,
} from "@/services/recibos-carros";

const tiposVehiculo = [
  { value: "", label: "Seleccionar tipo" },
  { value: "Turismo", label: "Turismo" },
  { value: "SUV", label: "SUV" },
  { value: "Pickup", label: "Pickup" },
  { value: "Camioneta", label: "Camioneta" },
  { value: "Camión", label: "Camión" },
  { value: "Motocicleta", label: "Motocicleta" },
  { value: "Otro", label: "Otro" },
];

type ConceptoFormulario = {
  concepto: string;
  importe: string;
};

type ModoPagoInicial = "sin_pago" | "abono_inicial" | "pago_completo";

const conceptosPredeterminados: ConceptoFormulario[] = [
  { concepto: "Grúa", importe: "1200" },
  { concepto: "Embarque", importe: "2500" },
  { concepto: "Trámites aduaneros", importe: "4500" },
  { concepto: "Otros cargos", importe: "" },
];

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

export default function NuevoReciboCarroPage() {
  const router = useRouter();
  const [usuarioSesion, setUsuarioSesion] = useState<SessionUser | null>(null);

  const [fecha, setFecha] = useState(new Date().toISOString().split("T")[0]);

  const [remitente, setRemitente] = useState<ClienteCarro | null>(null);
  const [busquedaRemitente, setBusquedaRemitente] = useState("");
  const [clientesRemitente, setClientesRemitente] = useState<ClienteCarro[]>([]);
  const [mostrarRemitente, setMostrarRemitente] = useState(false);

  const [destinatario, setDestinatario] = useState<ClienteCarro | null>(null);
  const [busquedaDestinatario, setBusquedaDestinatario] = useState("");
  const [clientesDestinatario, setClientesDestinatario] = useState<ClienteCarro[]>([]);
  const [mostrarDestinatario, setMostrarDestinatario] = useState(false);

  const [tipoVehiculo, setTipoVehiculo] = useState("");
  const [marca, setMarca] = useState("");
  const [modelo, setModelo] = useState("");
  const [anio, setAnio] = useState("");
  const [color, setColor] = useState("");
  const [vin, setVin] = useState("");
  const [puertoDestino, setPuertoDestino] = useState("");
  const [observaciones, setObservaciones] = useState("");

  const [conceptos, setConceptos] = useState<ConceptoFormulario[]>(conceptosPredeterminados);
  const [modoPagoInicial, setModoPagoInicial] =
    useState<ModoPagoInicial>("sin_pago");
  const [importeAbonoInicial, setImporteAbonoInicial] = useState("");

  const [modalNuevoCliente, setModalNuevoCliente] = useState<"remitente" | "destinatario" | null>(null);
  const [nuevoClienteNombre, setNuevoClienteNombre] = useState("");
  const [nuevoClienteTelefono, setNuevoClienteTelefono] = useState("");
  const [nuevoClienteDireccion, setNuevoClienteDireccion] = useState("");
  const [guardandoCliente, setGuardandoCliente] = useState(false);

  const [guardando, setGuardando] = useState(false);
  const [mensaje, setMensaje] = useState("");

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

  useEffect(() => {
    const timeout = setTimeout(async () => {
      if (busquedaRemitente.trim().length < 2) {
        setClientesRemitente([]);
        return;
      }
      const resultados = await buscarClientesCarros(busquedaRemitente);
      setClientesRemitente(resultados);
    }, 300);
    return () => clearTimeout(timeout);
  }, [busquedaRemitente]);

  useEffect(() => {
    const timeout = setTimeout(async () => {
      if (busquedaDestinatario.trim().length < 2) {
        setClientesDestinatario([]);
        return;
      }
      const resultados = await buscarClientesCarros(busquedaDestinatario);
      setClientesDestinatario(resultados);
    }, 300);
    return () => clearTimeout(timeout);
  }, [busquedaDestinatario]);

  const totalRecibo = useMemo(() => {
    return conceptos.reduce((suma, c) => {
      const importe = importeNumerico(c.importe);
      return suma + Math.round((importe + Number.EPSILON) * 100) / 100;
    }, 0);
  }, [conceptos]);

  const resumenPago = useMemo(() => {
    const total = Number(totalRecibo.toFixed(2));
    let abonado = 0;
    if (modoPagoInicial === "pago_completo" && total > 0) {
      abonado = total;
    } else if (modoPagoInicial === "abono_inicial") {
      const importe = Number(importeAbonoInicial.replace(/,/g, ""));
      if (Number.isFinite(importe) && importe > 0 && importe <= total) {
        abonado = Math.round((importe + Number.EPSILON) * 100) / 100;
      }
    }
    const saldo = Math.max(0, total - abonado);
    return {
      abonado,
      saldo,
      estado: total > 0 && saldo === 0
        ? "Pagado"
        : abonado > 0
          ? "Abono parcial"
          : "Pendiente",
    };
  }, [totalRecibo, modoPagoInicial, importeAbonoInicial]);

  function seleccionarRemitente(cliente: ClienteCarro) {
    setRemitente(cliente);
    setBusquedaRemitente(cliente.nombre || "");
    setMostrarRemitente(false);
  }

  function seleccionarDestinatario(cliente: ClienteCarro) {
    setDestinatario(cliente);
    setBusquedaDestinatario(cliente.nombre || "");
    setMostrarDestinatario(false);
  }

  function cambiarConcepto(index: number, campo: keyof ConceptoFormulario, valor: string) {
    setConceptos((prev) => {
      const copia = [...prev];
      copia[index] = {
        ...copia[index],
        [campo]: valor,
      };
      return copia;
    });
  }

  function agregarConcepto() {
    setConceptos((prev) => [...prev, { concepto: "", importe: "" }]);
  }

  function importeNumerico(importe: string): number {
    const limpio = importe.trim().replace(/,/g, "");
    const numero = Number(limpio);
    return Number.isFinite(numero) && numero >= 0 ? numero : 0;
  }

  function conceptosValidos(): ConceptoCarro[] {
    return conceptos
      .filter((c) => c.concepto.trim() && importeNumerico(c.importe) >= 0)
      .map((c) => ({
        concepto: c.concepto.trim(),
        importe: importeNumerico(c.importe),
      }));
  }

  function eliminarConcepto(index: number) {
    setConceptos((prev) => {
      const copia = [...prev];
      copia.splice(index, 1);
      return copia;
    });
  }

  async function handleGuardarNuevoCliente() {
    if (!nuevoClienteNombre.trim()) {
      alert("Ingresa el nombre del cliente.");
      return;
    }

    setGuardandoCliente(true);
    try {
      const cliente = await guardarClienteCarro(
        nuevoClienteNombre,
        nuevoClienteTelefono,
        nuevoClienteDireccion,
        usuarioSesion?.usuario
      );

      if (modalNuevoCliente === "remitente") {
        seleccionarRemitente(cliente);
      } else {
        seleccionarDestinatario(cliente);
      }

      setModalNuevoCliente(null);
      setNuevoClienteNombre("");
      setNuevoClienteTelefono("");
      setNuevoClienteDireccion("");
    } catch (error: any) {
      alert("Error guardando cliente: " + error?.message);
    } finally {
      setGuardandoCliente(false);
    }
  }

  async function handleGuardarRecibo() {
    setMensaje("");

    if (!remitente) {
      setMensaje("Selecciona el cliente que envía.");
      return;
    }
    if (!destinatario) {
      setMensaje("Selecciona el cliente que recibe.");
      return;
    }
    if (!tipoVehiculo) {
      setMensaje("Selecciona el tipo de vehículo.");
      return;
    }
    if (!marca.trim()) {
      setMensaje("Ingresa la marca del vehículo.");
      return;
    }
    if (!modelo.trim()) {
      setMensaje("Ingresa el modelo del vehículo.");
      return;
    }
    if (conceptos.length === 0 || conceptos.every((c) => !c.concepto.trim())) {
      setMensaje("Agrega al menos un concepto de cobro.");
      return;
    }

    const total = Number(totalRecibo.toFixed(2));
    const importeAbono = Number(importeAbonoInicial.replace(/,/g, ""));
    if (modoPagoInicial === "abono_inicial") {
      if (!Number.isFinite(importeAbono) || importeAbono <= 0) {
        setMensaje("El abono inicial debe ser mayor que cero.");
        return;
      }
      if (importeAbono > total) {
        setMensaje("El abono inicial no puede superar el total.");
        return;
      }
    }

    setGuardando(true);

    try {
      const recibo = await guardarReciboCarro(
        {
          numero: "", // La API genera el número automáticamente.
          fecha,
          remitente_id: remitente.id,
          destinatario_id: destinatario.id,
          remitente_nombre: remitente.nombre,
          remitente_telefono: remitente.telefono,
          destinatario_nombre: destinatario.nombre,
          destinatario_telefono: destinatario.telefono,
          tipo_vehiculo: tipoVehiculo,
          marca: marca.trim(),
          modelo: modelo.trim(),
          anio: anio.trim() || null,
          color: color.trim() || null,
          vin: vin.trim() || null,
          puerto_destino: puertoDestino.trim() || null,
          observaciones: observaciones.trim() || null,
        },
        conceptosValidos(),
        {
          tipo: modoPagoInicial,
          importe: modoPagoInicial === "abono_inicial" ? importeAbono : null,
        }
      );

      router.push(`/recibos-carros/${recibo.id}`);
    } catch (error: any) {
      console.error("ERROR GUARDANDO RECIBO DE CARRO:", error);
      setMensaje(error?.message || "Error guardando el recibo.");
    } finally {
      setGuardando(false);
    }
  }

  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">
          Nuevo recibo de carro
        </h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Registra un nuevo recibo de vehículo
        </p>
      </section>

      {mensaje && (
        <div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-500">
          {mensaje}
        </div>
      )}

      <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 className="relative min-w-0">
                <Input
                  label="Remitente *"
                  placeholder="Buscar cliente..."
                  value={busquedaRemitente}
                  onChange={(e) => {
                    setBusquedaRemitente(e.target.value);
                    setMostrarRemitente(true);
                    if (!e.target.value) setRemitente(null);
                  }}
                  onFocus={() => setMostrarRemitente(true)}
                />
                {mostrarRemitente && (
                  <div className="absolute left-0 right-0 z-50 mt-1 max-h-60 max-w-full overflow-auto rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-xl">
                    {clientesRemitente.map((cliente) => (
                      <button
                        key={cliente.id}
                        type="button"
                        onClick={() => seleccionarRemitente(cliente)}
                        className="block min-h-14 w-full border-b border-[var(--border)] p-3 text-left transition hover:bg-[var(--bg-primary)] last:border-b-0"
                      >
                        <p className="text-sm font-bold text-[var(--text-primary)]">
                          {cliente.nombre}
                        </p>
                        <p className="text-xs text-[var(--text-muted)]">
                          {cliente.telefono || "Sin teléfono"}
                        </p>
                      </button>
                    ))}
                    {busquedaRemitente.trim().length >= 2 && clientesRemitente.length === 0 && (
                      <div className="p-3">
                        <button
                          type="button"
                          onClick={() => {
                            setModalNuevoCliente("remitente");
                            setNuevoClienteNombre(busquedaRemitente);
                            setMostrarRemitente(false);
                          }}
                          className="text-sm font-semibold text-[var(--accent)] hover:underline"
                        >
                          + Crear nuevo remitente
                        </button>
                      </div>
                    )}
                  </div>
                )}
                {remitente && (
                  <p className="mt-1 break-words text-xs text-emerald-500">
                    ✓ {remitente.nombre} · {remitente.telefono}
                  </p>
                )}
              </div>

              <div className="relative min-w-0">
                <Input
                  label="Destinatario *"
                  placeholder="Buscar cliente..."
                  value={busquedaDestinatario}
                  onChange={(e) => {
                    setBusquedaDestinatario(e.target.value);
                    setMostrarDestinatario(true);
                    if (!e.target.value) setDestinatario(null);
                  }}
                  onFocus={() => setMostrarDestinatario(true)}
                />
                {mostrarDestinatario && (
                  <div className="absolute left-0 right-0 z-50 mt-1 max-h-60 max-w-full overflow-auto rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-xl">
                    {clientesDestinatario.map((cliente) => (
                      <button
                        key={cliente.id}
                        type="button"
                        onClick={() => seleccionarDestinatario(cliente)}
                        className="block min-h-14 w-full border-b border-[var(--border)] p-3 text-left transition hover:bg-[var(--bg-primary)] last:border-b-0"
                      >
                        <p className="text-sm font-bold text-[var(--text-primary)]">
                          {cliente.nombre}
                        </p>
                        <p className="text-xs text-[var(--text-muted)]">
                          {cliente.telefono || "Sin teléfono"}
                        </p>
                      </button>
                    ))}
                    {busquedaDestinatario.trim().length >= 2 && clientesDestinatario.length === 0 && (
                      <div className="p-3">
                        <button
                          type="button"
                          onClick={() => {
                            setModalNuevoCliente("destinatario");
                            setNuevoClienteNombre(busquedaDestinatario);
                            setMostrarDestinatario(false);
                          }}
                          className="text-sm font-semibold text-[var(--accent)] hover:underline"
                        >
                          + Crear nuevo destinatario
                        </button>
                      </div>
                    )}
                  </div>
                )}
                {destinatario && (
                  <p className="mt-1 break-words text-xs text-emerald-500">
                    ✓ {destinatario.nombre} · {destinatario.telefono}
                  </p>
                )}
              </div>
            </div>
          </Card>

          <Card padding="sm">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Información del vehículo
            </h2>
            <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-3">
              <Select
                label="Tipo de vehículo *"
                options={tiposVehiculo}
                value={tipoVehiculo}
                onChange={(e) => setTipoVehiculo(e.target.value)}
              />
              <Input
                label="Marca *"
                value={marca}
                onChange={(e) => setMarca(e.target.value)}
              />
              <Input
                label="Modelo *"
                value={modelo}
                onChange={(e) => setModelo(e.target.value)}
              />
              <Input
                label="Año"
                value={anio}
                onChange={(e) => setAnio(e.target.value)}
              />
              <Input
                label="Color"
                value={color}
                onChange={(e) => setColor(e.target.value)}
              />
              <Input
                label="VIN / Chasis (Opcional)"
                value={vin}
                onChange={(e) => setVin(e.target.value)}
              />
              <Input
                label="Puerto de destino"
                value={puertoDestino}
                onChange={(e) => setPuertoDestino(e.target.value)}
              />
              <div className="md:col-span-2 xl:col-span-3">
                <Input
                  label="Observaciones"
                  value={observaciones}
                  onChange={(e) => setObservaciones(e.target.value)}
                />
              </div>
            </div>
          </Card>

          <Card padding="sm">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Servicios e importes
            </h2>
            <div className="space-y-2">
              {conceptos.map((concepto, index) => (
                <div
                  key={index}
                  className="flex min-w-0 flex-col gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3 md:flex-row md:items-center"
                >
                  <Input
                    label="Servicio"
                    placeholder="Ej: Grúa"
                    value={concepto.concepto}
                    onChange={(e) => cambiarConcepto(index, "concepto", e.target.value)}
                    className="flex-1"
                  />
                  <Input
                    label="Importe USD"
                    type="text"
                    inputMode="decimal"
                    placeholder="0.00"
                    value={concepto.importe}
                    onChange={(e) => cambiarConcepto(index, "importe", e.target.value)}
                    onFocus={(e) => e.currentTarget.select()}
                    className="w-full md:w-36"
                  />
                  <Button
                    type="button"
                    variant="danger"
                    size="sm"
                    onClick={() => eliminarConcepto(index)}
                    className="min-h-11 w-full md:w-auto"
                  >
                    ✕
                  </Button>
                </div>
              ))}
            </div>
            <Button
              type="button"
              variant="secondary"
              size="sm"
              className="mt-3"
              onClick={agregarConcepto}
            >
              + Agregar servicio
            </Button>
          </Card>

          <Card padding="sm">
            <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
              Pago inicial
            </h2>
            <div className="grid gap-3 sm:grid-cols-2">
              <Select
                label="Forma de pago"
                value={modoPagoInicial}
                onChange={(e) =>
                  setModoPagoInicial(e.target.value as ModoPagoInicial)
                }
                options={[
                  { value: "sin_pago", label: "Sin pago" },
                  { value: "abono_inicial", label: "Abono inicial" },
                  { value: "pago_completo", label: "Pago completo" },
                ]}
              />
              {modoPagoInicial === "abono_inicial" && (
                <Input
                  label="Importe abonado"
                  type="text"
                  inputMode="decimal"
                  placeholder="0.00"
                  value={importeAbonoInicial}
                  onChange={(e) => setImporteAbonoInicial(e.target.value)}
                />
              )}
            </div>
            {modoPagoInicial === "pago_completo" && (
              <p className="mt-2 text-sm text-[var(--text-secondary)]">
                Se registrará un abono por el total de{" "}
                <strong>{formatearDinero(totalRecibo)}</strong>.
                {totalRecibo === 0 &&
                  " Con total cero, el estado seguirá siendo Pendiente."}
              </p>
            )}
          </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
            </h2>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-[var(--text-muted)]">Fecha</span>
                <span className="font-medium">{fecha}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-[var(--text-muted)]">Subtotal servicios</span>
                <span className="text-right font-medium">{formatearDinero(totalRecibo)}</span>
              </div>
              <div className="flex justify-between border-t border-[var(--border)] pt-2">
                <span className="text-[var(--text-muted)]">Total</span>
                <span className="text-lg font-black text-[var(--accent)]">
                  {formatearDinero(totalRecibo)}
                </span>
              </div>
              <div className="flex justify-between gap-3">
                <span className="text-[var(--text-muted)]">Abonado</span>
                <span className="text-right font-bold text-emerald-500">
                  {formatearDinero(resumenPago.abonado)}
                </span>
              </div>
              <div className="flex justify-between gap-3">
                <span className="text-[var(--text-muted)]">Saldo</span>
                <span className="text-right font-bold text-[var(--text-primary)]">
                  {formatearDinero(resumenPago.saldo)}
                </span>
              </div>
              <div className="flex justify-between gap-3 border-t border-[var(--border)] pt-2">
                <span className="text-[var(--text-muted)]">Estado de pago</span>
                <span className="text-right font-bold text-[var(--text-primary)]">
                  {resumenPago.estado}
                </span>
              </div>
            </div>
            <Button
              className="mt-4 w-full"
              onClick={handleGuardarRecibo}
              disabled={guardando}
            >
              {guardando ? "Guardando..." : "Guardar recibo"}
            </Button>
          </Card>
        </div>
      </div>

      <Modal
        isOpen={!!modalNuevoCliente}
        onClose={() => setModalNuevoCliente(null)}
        title={`Nuevo ${modalNuevoCliente === "remitente" ? "remitente" : "destinatario"}`}
        footer={
          <>
            <Button className="w-full sm:w-auto" variant="ghost" onClick={() => setModalNuevoCliente(null)}>
              Cancelar
            </Button>
            <Button className="w-full sm:w-auto" onClick={handleGuardarNuevoCliente} disabled={guardandoCliente}>
              {guardandoCliente ? "Guardando..." : "Guardar cliente"}
            </Button>
          </>
        }
      >
        <div className="space-y-3">
          <Input
            label="Nombre"
            value={nuevoClienteNombre}
            onChange={(e) => setNuevoClienteNombre(e.target.value)}
          />
          <Input
            label="Teléfono"
            value={nuevoClienteTelefono}
            onChange={(e) => setNuevoClienteTelefono(e.target.value)}
          />
          <Input
            label="Dirección"
            value={nuevoClienteDireccion}
            onChange={(e) => setNuevoClienteDireccion(e.target.value)}
          />
        </div>
      </Modal>
      </div>
    </PageLayout>
  );
}