"use client";

import { useState } from "react";
import Link from "next/link";
import { guardarGuia } from "@/services/guias";
import {
  buscarClientePorNombre,
  type Cliente,
} from "@/services/clientes";

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

export default function NuevaGuiaPage() {
  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 [estadoPago, setEstadoPago] =
    useState("Pendiente");

  const [metodoPago, setMetodoPago] =
    useState("");

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

  const [clientesEncontrados, setClientesEncontrados] =
    useState<Cliente[]>([]);

  const [medidas, setMedidas] = useState<Medida[]>([
    {
      largo: "",
      ancho: "",
      alto: "",
    },
  ]);

  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(
      (medidasActuales) =>
        Array.from(
          {
            length: numero,
          },
          (_, index) =>
            medidasActuales[index] ?? {
              largo: "",
              ancho: "",
              alto: "",
            }
        )
    );
  }

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

        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;
    }

    if (
      estadoPago === "Pagado" &&
      !metodoPago
    ) {
      alert(
        "Debes seleccionar el método de pago."
      );

      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(),

          estadoPago:
            estadoPago,

          metodoPago:
            estadoPago === "Pagado"
              ? metodoPago
              : "",

          cajas:
            medidas.map((m) => ({
              largo:
                Number(m.largo),

              ancho:
                Number(m.ancho),

              alto:
                Number(m.alto),
            })),
        });

      if (resultado?.ok) {
        alert(
          `Guía ${resultado.numero} creada correctamente`
        );

        window.location.href =
          "/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 (
    <main className="min-h-screen bg-[#020817] p-6 text-white md:p-10">

      <div className="mx-auto max-w-4xl">

        <Link
          href="/guias"
          className="mb-8 inline-flex items-center gap-2 rounded-xl border border-slate-700 bg-slate-800 px-5 py-3 font-semibold text-white transition hover:bg-slate-700"
        >
          ← Volver a Guías
        </Link>

        <div className="mb-8">

          <h1 className="text-4xl font-bold md:text-5xl">
            📦 Nueva Guía
          </h1>

          <p className="mt-2 text-lg text-slate-400">
            Registra un nuevo envío en Honduras Cargo Express
          </p>

        </div>

        <div className="space-y-6">

          {/* DATOS DEL CLIENTE */}

          <section className="rounded-3xl border border-slate-700 bg-slate-900 p-6 shadow-xl">

            <h2 className="mb-6 text-2xl font-bold">
              👤 Datos del Cliente
            </h2>

            <div className="space-y-5">

              {/* CLIENTE PRIMERO */}

              <div className="relative">

                <label className="mb-2 block text-sm font-medium text-slate-400">
                  Cliente
                </label>

                <input
                  className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                  placeholder="Buscar o escribir nombre del cliente..."
                  value={cliente}
                  onChange={(e) =>
                    buscarCliente(
                      e.target.value
                    )
                  }
                />

                {clientesEncontrados.length > 0 && (

                  <div className="absolute z-10 mt-2 w-full overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-2xl">

                    {clientesEncontrados.map(
                      (c) => (

                        <button
                          key={c.id}
                          type="button"
                          onClick={() =>
                            seleccionarCliente(c)
                          }
                          className="block w-full border-b border-slate-800 p-4 text-left transition hover:bg-slate-700 last:border-b-0"
                        >

                          <p className="font-bold">
                            {c.nombre ??
                              "Sin nombre"}
                          </p>

                          <p className="mt-1 text-sm text-slate-400">
                            {c.telefono ?? "-"}
                            {" — "}
                            {c.correo ??
                              "Sin correo"}
                            {" — "}
                            {c.ciudad ?? "-"}
                          </p>

                        </button>

                      )
                    )}

                  </div>

                )}

              </div>

              {/* TELEFONO / CORREO / CIUDAD */}

              <div className="grid gap-5 md:grid-cols-2">

                <div>

                  <label className="mb-2 block text-sm font-medium text-slate-400">
                    Teléfono
                  </label>

                  <input
                    className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                    placeholder="Teléfono"
                    value={telefono}
                    onChange={(e) =>
                      setTelefono(
                        e.target.value
                      )
                    }
                  />

                </div>

                <div>

                  <label className="mb-2 block text-sm font-medium text-slate-400">
                    Correo electrónico
                  </label>

                  <input
                    type="email"
                    className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                    placeholder="correo@ejemplo.com"
                    value={correo}
                    onChange={(e) =>
                      setCorreo(
                        e.target.value
                      )
                    }
                  />

                </div>

                <div>

                  <label className="mb-2 block text-sm font-medium text-slate-400">
                    Ciudad
                  </label>

                  <input
                    className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                    placeholder="Ciudad"
                    value={ciudad}
                    onChange={(e) =>
                      setCiudad(
                        e.target.value
                      )
                    }
                  />

                </div>

              </div>

              {/* DIRECCION */}

              <div>

                <label className="mb-2 block text-sm font-medium text-slate-400">
                  Dirección
                </label>

                <textarea
                  className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                  placeholder="Dirección completa"
                  rows={3}
                  value={direccion}
                  onChange={(e) =>
                    setDireccion(
                      e.target.value
                    )
                  }
                />

              </div>

            </div>

          </section>

          {/* PAGO */}

          <section className="rounded-3xl border border-slate-700 bg-slate-900 p-6 shadow-xl">

            <h2 className="mb-2 text-2xl font-bold">
              💰 Información de Pago
            </h2>

            <p className="mb-6 text-sm text-slate-400">
              Indica si el cliente ya realizó el pago o si queda pendiente.
            </p>

            <div className="grid gap-5 md:grid-cols-2">

              <div>

                <label className="mb-2 block text-sm font-medium text-slate-400">
                  Estado del pago
                </label>

                <select
                  value={estadoPago}
                  onChange={(e) => {

                    const nuevoEstado =
                      e.target.value;

                    setEstadoPago(
                      nuevoEstado
                    );

                    if (
                      nuevoEstado ===
                      "Pendiente"
                    ) {
                      setMetodoPago("");
                    }

                  }}
                  className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                >

                  <option value="Pendiente">
                    🕒 Pendiente
                  </option>

                  <option value="Pagado">
                    💲 Pagado
                  </option>

                </select>

              </div>

              {estadoPago === "Pagado" && (

                <div>

                  <label className="mb-2 block text-sm font-medium text-slate-400">
                    Método de pago
                  </label>

                  <select
                    value={metodoPago}
                    onChange={(e) =>
                      setMetodoPago(
                        e.target.value
                      )
                    }
                    className="w-full rounded-xl bg-slate-800 p-4 text-white outline-none transition focus:ring-2 focus:ring-orange-500"
                  >

                    <option value="">
                      Seleccionar método
                    </option>

                    <option value="Cash">
                      💵 Cash
                    </option>

                    <option value="Cheque">
                      🧾 Cheque
                    </option>

                    <option value="Zelle">
                      📱 Zelle
                    </option>

                    <option value="Transferencia">
                      🏦 Transferencia
                    </option>

                  </select>

                </div>

              )}

            </div>

          </section>

          {/* CANTIDAD */}

          <section className="rounded-3xl border border-slate-700 bg-slate-900 p-6 shadow-xl">

            <h2 className="mb-2 text-2xl font-bold">
              📦 Cantidad de Cajas
            </h2>

            <p className="mb-5 text-sm text-slate-400">
              Indica cuántas cajas tendrá este envío.
            </p>

            <input
              type="text"
              inputMode="numeric"
              pattern="[0-9]*"
              className="w-full rounded-xl bg-slate-800 p-4 text-xl text-white outline-none transition focus:ring-2 focus:ring-orange-500"
              value={cantidad}
              onFocus={(e) => {
                e.currentTarget.select();
              }}
              onBlur={() => {
                if (cantidad === "") {
                  cambiarCantidad("1");
                }
              }}
              onChange={(e) =>
                cambiarCantidad(e.target.value)
              }
            />

          </section>

          {/* MEDIDAS */}

          <section className="rounded-3xl border border-slate-700 bg-slate-900 p-6 shadow-xl">

            <h2 className="mb-2 text-2xl font-bold">
              📏 Medidas de las Cajas
            </h2>

            <p className="mb-6 text-sm text-slate-400">
              Ingresa las medidas de cada caja.
            </p>

            <div className="space-y-5">

              {medidas.map(
                (m, index) => (

                  <div
                    key={index}
                    className="rounded-2xl border border-slate-700 bg-slate-800 p-5"
                  >

                    <h3 className="mb-4 text-xl font-bold">
                      📦 Caja #{index + 1}
                    </h3>

                    <div className="grid gap-4 md:grid-cols-3">

                      <div>

                        <label className="mb-2 block text-sm text-slate-400">
                          Largo
                        </label>

                        <input
                          type="number"
                          min="0"
                          step="any"
                          className="w-full rounded-xl bg-slate-900 p-4 text-white outline-none focus:ring-2 focus:ring-orange-500"
                          placeholder="Largo"
                          value={m.largo}
                          onChange={(e) =>
                            cambiarMedida(
                              index,
                              "largo",
                              e.target.value
                            )
                          }
                        />

                      </div>

                      <div>

                        <label className="mb-2 block text-sm text-slate-400">
                          Ancho
                        </label>

                        <input
                          type="number"
                          min="0"
                          step="any"
                          className="w-full rounded-xl bg-slate-900 p-4 text-white outline-none focus:ring-2 focus:ring-orange-500"
                          placeholder="Ancho"
                          value={m.ancho}
                          onChange={(e) =>
                            cambiarMedida(
                              index,
                              "ancho",
                              e.target.value
                            )
                          }
                        />

                      </div>

                      <div>

                        <label className="mb-2 block text-sm text-slate-400">
                          Alto
                        </label>

                        <input
                          type="number"
                          min="0"
                          step="any"
                          className="w-full rounded-xl bg-slate-900 p-4 text-white outline-none focus:ring-2 focus:ring-orange-500"
                          placeholder="Alto"
                          value={m.alto}
                          onChange={(e) =>
                            cambiarMedida(
                              index,
                              "alto",
                              e.target.value
                            )
                          }
                        />

                      </div>

                    </div>

                  </div>

                )
              )}

            </div>

          </section>

          {/* GUARDAR */}

          <button
            type="button"
            onClick={guardar}
            disabled={guardando}
            className="w-full rounded-2xl bg-orange-500 p-5 text-xl font-bold text-white transition hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {guardando
              ? "Guardando guía..."
              : "💾 Guardar Guía"}
          </button>

          <p className="pb-6 text-center text-sm text-slate-500">
            Honduras Cargo Express
          </p>

        </div>

      </div>

    </main>
  );
}