"use client";

import { useEffect, useState } from "react";
import Sidebar from "../../components/Sidebar";
import { supabase } from "../../lib/supabase";

type Cliente = {
  id: number;
  nombre: string;
  telefono: string | null;
  correo: string | null;
  ciudad: string | null;
  direccion: string | null;
  total_envios?: number;
  actualizado?: string;
};

export default function ClientesPage() {
  const [clientes, setClientes] = useState<Cliente[]>([]);

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

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

  const [eliminando, setEliminando] =
    useState<number | null>(null);

  const [clienteEditando, setClienteEditando] =
    useState<Cliente | null>(null);

  useEffect(() => {
    cargarClientes();
  }, []);

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

    const { data, error } = await supabase
      .from("hce_clientes")
      .select("*")
      .order("id", {
        ascending: false,
      });

    if (error) {
      console.error(
        "ERROR AL CARGAR CLIENTES HCE:",
        error
      );

      setMensaje(
        "Error al cargar clientes HCE: " +
          error.message
      );

      return;
    }

    setClientes(
      (data || []) as Cliente[]
    );
  }

  async function guardarCliente(
    e: React.FormEvent<HTMLFormElement>
  ) {
    e.preventDefault();

    setMensaje("");

    if (!nombre.trim()) {
      setMensaje(
        "El nombre del cliente es obligatorio."
      );

      return;
    }

    setGuardando(true);

    const datosCliente = {
      nombre: nombre.trim(),
      telefono: telefono.trim() || null,
      correo: correo.trim() || null,
      ciudad: ciudad.trim() || null,
      direccion: direccion.trim() || null,
      actualizado: new Date().toISOString(),
    };

    if (clienteEditando) {
      const { error } = await supabase
        .from("hce_clientes")
        .update(datosCliente)
        .eq(
          "id",
          clienteEditando.id
        );

      setGuardando(false);

      if (error) {
        console.error(
          "ERROR AL ACTUALIZAR CLIENTE HCE:",
          error
        );

        setMensaje(
          "Error al actualizar el cliente: " +
            error.message
        );

        return;
      }

      setMensaje(
        "Cliente actualizado correctamente."
      );

      limpiarFormulario();

      await cargarClientes();

      return;
    }

    const { error } = await supabase
      .from("hce_clientes")
      .insert([
        {
          ...datosCliente,
          total_envios: 0,
        },
      ]);

    setGuardando(false);

    if (error) {
      console.error(
        "ERROR AL GUARDAR CLIENTE HCE:",
        error
      );

      setMensaje(
        "Error al guardar el cliente: " +
          error.message
      );

      return;
    }

    setMensaje(
      "Cliente guardado correctamente."
    );

    limpiarFormulario();

    await cargarClientes();
  }

  function editarCliente(
    cliente: Cliente
  ) {
    setClienteEditando(cliente);

    setNombre(
      cliente.nombre || ""
    );

    setTelefono(
      cliente.telefono || ""
    );

    setCorreo(
      cliente.correo || ""
    );

    setCiudad(
      cliente.ciudad || ""
    );

    setDireccion(
      cliente.direccion || ""
    );

    setMensaje("");

    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  }

  async function eliminarCliente(
    cliente: Cliente
  ) {
    const confirmar = window.confirm(
      `¿Seguro que deseas eliminar a ${cliente.nombre}?`
    );

    if (!confirmar) {
      return;
    }

    setMensaje("");

    setEliminando(cliente.id);

    const { error } = await supabase
      .from("hce_clientes")
      .delete()
      .eq(
        "id",
        cliente.id
      );

    setEliminando(null);

    if (error) {
      console.error(
        "ERROR AL ELIMINAR CLIENTE HCE:",
        error
      );

      setMensaje(
        "No se pudo eliminar el cliente: " +
          error.message
      );

      return;
    }

    setMensaje(
      "Cliente eliminado correctamente."
    );

    if (
      clienteEditando &&
      clienteEditando.id === cliente.id
    ) {
      limpiarFormulario();
    }

    await cargarClientes();
  }

  function cancelarEdicion() {
    limpiarFormulario();
    setMensaje("");
  }

  function limpiarFormulario() {
    setNombre("");
    setTelefono("");
    setCorreo("");
    setCiudad("");
    setDireccion("");

    setClienteEditando(null);
  }

  return (
    <main className="min-h-screen bg-[#020617] text-white">

      <Sidebar />

      <section className="min-h-screen p-4 pt-24 sm:p-6 sm:pt-24 md:ml-72 md:p-8 lg:p-10">

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

          <div className="mb-6 sm:mb-8">

            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
              👥 Clientes
            </h2>

            <p className="mt-2 text-sm text-slate-400 sm:text-base">
              Administración de clientes de Honduras Cargo Express.
            </p>

          </div>

          <div className="rounded-2xl border border-slate-700 bg-[#172033] p-4 shadow-xl sm:p-6">

            <h3 className="mb-5 text-xl font-bold sm:mb-6 sm:text-2xl">
              {clienteEditando
                ? "✏️ Editar cliente"
                : "➕ Agregar cliente"}
            </h3>

            {clienteEditando && (

              <div className="mb-5 rounded-xl border border-blue-500/30 bg-blue-500/10 p-4">

                <p className="text-sm text-blue-300 sm:text-base">
                  Editando a:{" "}

                  <strong>
                    {clienteEditando.nombre}
                  </strong>

                </p>

              </div>

            )}

            <form onSubmit={guardarCliente}>

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

                <input
                  type="text"
                  placeholder="Nombre completo *"
                  value={nombre}
                  onChange={(e) =>
                    setNombre(e.target.value)
                  }
                  className="w-full rounded-xl border border-slate-600 bg-[#263248] p-3 text-sm text-white outline-none transition placeholder:text-slate-400 focus:border-orange-500 sm:p-4 sm:text-base"
                />

                <input
                  type="text"
                  placeholder="Teléfono"
                  value={telefono}
                  onChange={(e) =>
                    setTelefono(e.target.value)
                  }
                  className="w-full rounded-xl border border-slate-600 bg-[#263248] p-3 text-sm text-white outline-none transition placeholder:text-slate-400 focus:border-orange-500 sm:p-4 sm:text-base"
                />

                <input
                  type="email"
                  placeholder="Correo electrónico"
                  value={correo}
                  onChange={(e) =>
                    setCorreo(e.target.value)
                  }
                  className="w-full rounded-xl border border-slate-600 bg-[#263248] p-3 text-sm text-white outline-none transition placeholder:text-slate-400 focus:border-orange-500 sm:p-4 sm:text-base"
                />

                <input
                  type="text"
                  placeholder="Ciudad"
                  value={ciudad}
                  onChange={(e) =>
                    setCiudad(e.target.value)
                  }
                  className="w-full rounded-xl border border-slate-600 bg-[#263248] p-3 text-sm text-white outline-none transition placeholder:text-slate-400 focus:border-orange-500 sm:p-4 sm:text-base"
                />

                <input
                  type="text"
                  placeholder="Dirección"
                  value={direccion}
                  onChange={(e) =>
                    setDireccion(e.target.value)
                  }
                  className="w-full rounded-xl border border-slate-600 bg-[#263248] p-3 text-sm text-white outline-none transition placeholder:text-slate-400 focus:border-orange-500 sm:p-4 sm:text-base md:col-span-2"
                />

              </div>

              <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:gap-4">

                <button
                  type="submit"
                  disabled={guardando}
                  className="w-full rounded-xl bg-orange-500 p-3 text-sm font-bold text-white transition hover:bg-orange-600 disabled:bg-slate-600 sm:flex-1 sm:p-4 sm:text-base"
                >
                  {guardando
                    ? "Guardando..."
                    : clienteEditando
                    ? "💾 Guardar cambios"
                    : "💾 Guardar cliente"}
                </button>

                {clienteEditando && (

                  <button
                    type="button"
                    onClick={cancelarEdicion}
                    className="w-full rounded-xl bg-slate-700 px-6 py-3 text-sm font-bold text-white transition hover:bg-slate-600 sm:w-auto sm:px-8 sm:text-base"
                  >
                    Cancelar
                  </button>

                )}

              </div>

            </form>

            {mensaje && (

              <div
                className={`mt-5 rounded-xl border p-4 text-sm font-medium sm:text-base ${
                  mensaje.includes("correctamente")
                    ? "border-green-500/30 bg-green-500/10 text-green-400"
                    : "border-red-500/30 bg-red-500/10 text-red-400"
                }`}
              >
                {mensaje}
              </div>

            )}

          </div>

          <div className="mt-6 overflow-hidden rounded-2xl border border-slate-700 bg-[#172033] shadow-xl sm:mt-8">

            <div className="border-b border-slate-700 p-4 sm:p-6">

              <h3 className="text-xl font-bold sm:text-2xl">
                👥 Lista de Clientes
              </h3>

              <p className="mt-2 text-sm text-slate-400 sm:text-base">
                Clientes registrados únicamente en Honduras Cargo Express.
              </p>

            </div>

            {clientes.length === 0 ? (

              <p className="p-5 text-sm text-slate-400 sm:p-6 sm:text-base">
                No hay clientes registrados todavía.
              </p>

            ) : (

              <div className="overflow-x-auto">

                <table className="min-w-[850px] w-full text-left">

                  <thead className="bg-[#263248] text-xs text-slate-300 sm:text-sm">

                    <tr>

                      <th className="p-4 sm:p-5">
                        Cliente
                      </th>

                      <th className="p-4 sm:p-5">
                        Teléfono
                      </th>

                      <th className="p-4 sm:p-5">
                        Correo
                      </th>

                      <th className="p-4 sm:p-5">
                        Ciudad
                      </th>

                      <th className="p-4 sm:p-5">
                        Dirección
                      </th>

                      <th className="p-4 text-center sm:p-5">
                        Acciones
                      </th>

                    </tr>

                  </thead>

                  <tbody>

                    {clientes.map(
                      (cliente) => (

                        <tr
                          key={cliente.id}
                          className="border-t border-slate-700 transition hover:bg-slate-800/70"
                        >

                          <td className="p-4 text-sm font-semibold text-white sm:p-5 sm:text-base">
                            {cliente.nombre}
                          </td>

                          <td className="p-4 text-sm text-slate-300 sm:p-5 sm:text-base">
                            {cliente.telefono || "-"}
                          </td>

                          <td className="p-4 text-sm text-slate-300 sm:p-5 sm:text-base">

                            {cliente.correo ? (

                              <span className="text-green-400">
                                📧 {cliente.correo}
                              </span>

                            ) : (

                              <span className="text-red-400">
                                Sin correo
                              </span>

                            )}

                          </td>

                          <td className="p-4 text-sm text-slate-300 sm:p-5 sm:text-base">
                            {cliente.ciudad || "-"}
                          </td>

                          <td className="p-4 text-sm text-slate-300 sm:p-5 sm:text-base">
                            {cliente.direccion || "-"}
                          </td>

                          <td className="p-4 sm:p-5">

                            <div className="flex justify-center gap-2 sm:gap-3">

                              <button
                                type="button"
                                onClick={() =>
                                  editarCliente(cliente)
                                }
                                className="whitespace-nowrap rounded-lg bg-yellow-500 px-3 py-2 text-sm font-bold text-black transition hover:bg-yellow-400 sm:px-5"
                              >
                                ✏️ Editar
                              </button>

                              <button
                                type="button"
                                disabled={
                                  eliminando === cliente.id
                                }
                                onClick={() =>
                                  eliminarCliente(cliente)
                                }
                                className="whitespace-nowrap rounded-lg bg-red-600 px-3 py-2 text-sm font-bold text-white transition hover:bg-red-500 disabled:bg-slate-600 sm:px-5"
                              >
                                {eliminando === cliente.id
                                  ? "Eliminando..."
                                  : "🗑️ Borrar"}
                              </button>

                            </div>

                          </td>

                        </tr>

                      )
                    )}

                  </tbody>

                </table>

              </div>

            )}

          </div>

        </div>

      </section>

    </main>
  );
}