"use client";

import { useEffect, useMemo, 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 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,
  ReciboCarroCompleto,
  buscarClientesCarros,
  guardarClienteCarro,
  actualizarReciboCarro,
  obtenerReciboCarroPorId,
} from "@/services/recibos-carros";

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

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" },
];

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

export default function EditarReciboCarroPage() {
  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 [fecha, setFecha] = useState("");

  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[]>([]);

  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));
    cargarDatos();
  }, [id]);

  async function cargarDatos() {
    setLoading(true);
    const data = await obtenerReciboCarroPorId(id);
    if (data) {
      setRecibo(data);
      setFecha(data.fecha);
      setRemitente({
        id: data.remitente_id || 0,
        nombre: data.remitente_nombre,
        telefono: data.remitente_telefono,
      });
      setBusquedaRemitente(data.remitente_nombre || "");
      setDestinatario({
        id: data.destinatario_id || 0,
        nombre: data.destinatario_nombre,
        telefono: data.destinatario_telefono,
      });
      setBusquedaDestinatario(data.destinatario_nombre || "");
      setTipoVehiculo(data.tipo_vehiculo || "");
      setMarca(data.marca || "");
      setModelo(data.modelo || "");
      setAnio(data.anio || "");
      setColor(data.color || "");
      setVin(data.vin || "");
      setPuertoDestino(data.puerto_destino || "");
      setObservaciones(data.observaciones || "");
      setConceptos(
        data.conceptos.map((c) => ({
          concepto: c.concepto,
          importe: String(c.importe),
        }))
      );
    }
    setLoading(false);
  }

  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) => suma + importeNumerico(c.importe), 0);
  }, [conceptos]);

  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 handleGuardarCambios() {
    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;
    }

    setGuardando(true);

    try {
      const actualizado = await actualizarReciboCarro(
        id,
        {
          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()
      );

      if (actualizado) {
        router.push(`/recibos-carros/${id}`);
      } else {
        setMensaje("No se pudo actualizar el recibo.");
      }
    } catch (error: any) {
      console.error("ERROR ACTUALIZANDO RECIBO DE CARRO:", error);
      setMensaje(error?.message || "Error actualizando el recibo.");
    } finally {
      setGuardando(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 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">
          Editar recibo {recibo.numero}
        </h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Modifica los datos del 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>
        </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="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>
            <div className="mt-4 flex flex-col gap-2">
              <Button className="min-h-11 w-full" onClick={handleGuardarCambios} disabled={guardando}>
                {guardando ? "Guardando..." : "Guardar cambios"}
              </Button>
              <Link href={`/recibos-carros/${id}`}>
                <Button variant="secondary" className="min-h-11 w-full">
                  Cancelar
                </Button>
              </Link>
            </div>
          </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>
  );
}