"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { guardarGuia } from "@/services/guias";
import { buscarClientePorNombre, type Cliente } from "@/services/clientes";
import { getCurrentUser, type SessionUser } from "@/lib/session-client";
import PageLayout from "@/components/layout/PageLayout";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Card from "@/components/ui/Card";

type Medida = {
  largo: string;
  ancho: string;
  alto: string;
};

export default function NuevaGuiaPage() {
  const router = useRouter();

  const [cliente, setCliente] = useState("");
  const [telefono, setTelefono] = useState("");
  const [correo, setCorreo] = useState("");
  const [ciudad, setCiudad] = useState("");
  const [direccion, setDireccion] = useState("");

  const [cantidad, setCantidad] = useState<number | "">(1);

  const [guardando, setGuardando] = useState(false);
  const [clientesEncontrados, setClientesEncontrados] = useState<Cliente[]>([]);
  const [medidas, setMedidas] = useState<Medida[]>([{ largo: "", ancho: "", alto: "" }]);
  const [usuarioSesion, setUsuarioSesion] = useState<SessionUser | null>(null);

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

  async function buscarCliente(valor: string) {
    setCliente(valor);
    if (valor.trim().length < 2) {
      setClientesEncontrados([]);
      return;
    }
    try {
      const resultados = await buscarClientePorNombre(valor.trim());
      setClientesEncontrados(Array.isArray(resultados) ? resultados : []);
    } catch (error) {
      console.error("Error buscando cliente:", error);
      setClientesEncontrados([]);
    }
  }

  function seleccionarCliente(c: Cliente) {
    setCliente(c.nombre ?? "");
    setTelefono(c.telefono ?? "");
    setCorreo(c.correo ?? "");
    setCiudad(c.ciudad ?? "");
    setDireccion(c.direccion ?? "");
    setClientesEncontrados([]);
  }

  function cambiarCantidad(valor: string) {
    if (valor === "") {
      setCantidad("");
      return;
    }
    if (!/^\d+$/.test(valor)) return;

    const numero = Number(valor);
    if (!Number.isSafeInteger(numero) || numero < 1) return;

    setCantidad(numero);
    setMedidas((actuales) =>
      Array.from({ length: numero }, (_, index) => actuales[index] ?? { largo: "", ancho: "", alto: "" })
    );
  }

  function cambiarMedida(index: number, campo: keyof Medida, valor: string) {
    setMedidas((actuales) => {
      const copia = [...actuales];
      copia[index] = { ...copia[index], [campo]: valor };
      return copia;
    });
  }

  async function guardar() {
    if (!cliente.trim()) {
      alert("Debes ingresar o seleccionar un cliente.");
      return;
    }
    if (!telefono.trim()) {
      alert("Debes ingresar el teléfono.");
      return;
    }
    if (!ciudad.trim()) {
      alert("Debes ingresar la ciudad.");
      return;
    }
    if (!direccion.trim()) {
      alert("Debes ingresar la dirección.");
      return;
    }
    for (let i = 0; i < medidas.length; i++) {
      const caja = medidas[i];
      if (
        !caja.largo ||
        !caja.ancho ||
        !caja.alto ||
        Number(caja.largo) <= 0 ||
        Number(caja.ancho) <= 0 ||
        Number(caja.alto) <= 0
      ) {
        alert(`Debes ingresar medidas válidas para la Caja #${i + 1}.`);
        return;
      }
    }

    setGuardando(true);

    try {
      const resultado = await guardarGuia({
        cliente: cliente.trim(),
        telefono: telefono.trim(),
        correo: correo.trim(),
        ciudad: ciudad.trim(),
        direccion: direccion.trim(),
        cajas: medidas.map((m) => ({
          largo: Number(m.largo),
          ancho: Number(m.ancho),
          alto: Number(m.alto),
        })),
        creadoPor: usuarioSesion?.usuario || null,
      });

      if (resultado?.ok) {
        alert(`Guía ${resultado.numero} creada correctamente`);
        router.push("/guias");
        return;
      }

      console.error("Error guardando guía:", resultado);
      alert(resultado?.error || "Error guardando guía");
    } catch (error) {
      console.error("Error guardando guía:", error);
      alert("Error guardando guía");
    } finally {
      setGuardando(false);
    }
  }

  return (
    <PageLayout>
      <div className="mb-4 flex items-center justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <Link href="/guias">
              <Button variant="ghost" size="sm" leftIcon={<IconArrowLeft />}>
                Volver
              </Button>
            </Link>
            <h1 className="text-lg font-black text-[var(--text-primary)] sm:text-xl">
              Nueva Guía
            </h1>
          </div>
          <p className="mt-0.5 text-xs text-[var(--text-muted)]">
            Registra un nuevo envío
          </p>
        </div>
      </div>

      <div className="mx-auto max-w-5xl space-y-3">
        {/* Cliente */}
        <Card padding="sm">
          <h2 className="mb-3 text-xs font-black uppercase tracking-wider text-[var(--text-muted)]">
            Datos del cliente
          </h2>

          <div className="relative mb-3">
            <Input
              label="Cliente"
              placeholder="Buscar o escribir nombre..."
              value={cliente}
              onChange={(e) => buscarCliente(e.target.value)}
              autoComplete="off"
            />
            {clientesEncontrados.length > 0 && (
              <div className="absolute z-10 mt-1 max-h-44 w-full overflow-auto rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-xl">
                {clientesEncontrados.map((c) => (
                  <button
                    key={c.id}
                    type="button"
                    onClick={() => seleccionarCliente(c)}
                    className="block w-full border-b border-[var(--border)] p-2 text-left transition hover:bg-[var(--bg-primary)] last:border-b-0"
                  >
                    <p className="text-sm font-bold text-[var(--text-primary)]">{c.nombre ?? "Sin nombre"}</p>
                    <p className="text-xs text-[var(--text-muted)]">
                      {c.telefono ?? "-"} — {c.correo ?? "Sin correo"} — {c.ciudad ?? "-"}
                    </p>
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <Input label="Teléfono" placeholder="Teléfono" value={telefono} onChange={(e) => setTelefono(e.target.value)} />
            <Input label="Correo" type="email" placeholder="correo@ejemplo.com" value={correo} onChange={(e) => setCorreo(e.target.value)} />
            <Input label="Ciudad" placeholder="Ciudad" value={ciudad} onChange={(e) => setCiudad(e.target.value)} />
            <Input label="Dirección" placeholder="Dirección" value={direccion} onChange={(e) => setDireccion(e.target.value)} />
          </div>
        </Card>

        {/* Cajas */}
        <Card padding="sm">
          <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <h2 className="text-xs font-black uppercase tracking-wider text-[var(--text-muted)]">
              Cajas
            </h2>
            <div className="flex items-center gap-2">
              <label className="text-xs font-medium text-[var(--text-secondary)]">Cantidad</label>
              <input
                type="text"
                inputMode="numeric"
                pattern="[0-9]*"
                value={cantidad}
                onFocus={(e) => e.currentTarget.select()}
                onBlur={() => cantidad === "" && cambiarCantidad("1")}
                onChange={(e) => cambiarCantidad(e.target.value)}
                className="w-16 rounded-lg border border-[var(--border)] bg-[var(--input-bg)] px-2 py-1.5 text-center text-sm text-[var(--text-primary)] outline-none focus:border-[var(--accent)]"
              />
            </div>
          </div>

          <div className="space-y-2">
            {medidas.map((m, index) => (
              <div
                key={index}
                className="rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3"
              >
                <p className="mb-2 text-xs font-bold text-[var(--text-primary)]">
                  Caja #{index + 1}
                </p>
                <div className="grid grid-cols-3 gap-2">
                  <Input
                    label="Largo"
                    type="number"
                    min="0"
                    step="any"
                    placeholder="Largo"
                    value={m.largo}
                    onChange={(e) => cambiarMedida(index, "largo", e.target.value)}
                  />
                  <Input
                    label="Ancho"
                    type="number"
                    min="0"
                    step="any"
                    placeholder="Ancho"
                    value={m.ancho}
                    onChange={(e) => cambiarMedida(index, "ancho", e.target.value)}
                  />
                  <Input
                    label="Alto"
                    type="number"
                    min="0"
                    step="any"
                    placeholder="Alto"
                    value={m.alto}
                    onChange={(e) => cambiarMedida(index, "alto", e.target.value)}
                  />
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Button
          type="button"
          onClick={guardar}
          disabled={guardando}
          fullWidth
          className="sm:w-auto"
        >
          {guardando ? "Guardando guía..." : "Guardar Guía"}
        </Button>
      </div>
    </PageLayout>
  );
}

function IconArrowLeft() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
    </svg>
  );
}