"use client";

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

type Recolector = {
  id: number;
  nombre: string;
  telefono: string | null;
  direccion: string | null;
  identificacion: string | null;
  usuario: string | null;
  password: string | null;
  estado: string | null;
  fecha_registro: string | null;
};

const TABLA_RECOLECTORES = "hce_recolectores";

export default function RecolectoresPage() {
  const [recolectores, setRecolectores] = useState<Recolector[]>([]);

  const [nombre, setNombre] = useState("");
  const [telefono, setTelefono] = useState("");
  const [direccion, setDireccion] = useState("");
  const [identificacion, setIdentificacion] = useState("");
  const [usuario, setUsuario] = useState("");
  const [password, setPassword] = useState("");

  const [mensaje, setMensaje] = useState("");
  const [cargando, setCargando] = useState(true);
  const [guardando, setGuardando] = useState(false);
  const [eliminando, setEliminando] = useState<number | null>(null);

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

  async function cargarRecolectores() {
    try {
      setCargando(true);
      setMensaje("");

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

      if (error) {
        console.error("ERROR CARGANDO RECOLECTORES:", error);

        setMensaje(
          "Error al cargar recolectores: " +
            (error.message || "Error desconocido")
        );

        return;
      }

      setRecolectores(data || []);
    } catch (error: any) {
      console.error(
        "ERROR GENERAL CARGANDO RECOLECTORES:",
        error
      );

      setMensaje(
        "Error general: " +
          (error?.message || "Error desconocido")
      );
    } finally {
      setCargando(false);
    }
  }

  function limpiarFormulario() {
    setNombre("");
    setTelefono("");
    setDireccion("");
    setIdentificacion("");
    setUsuario("");
    setPassword("");
  }

  async function agregarRecolector(
    event: React.FormEvent<HTMLFormElement>
  ) {
    event.preventDefault();

    setMensaje("");

    if (!nombre.trim()) {
      setMensaje(
        "Debes ingresar el nombre del recolector."
      );

      return;
    }

    if (!usuario.trim()) {
      setMensaje(
        "Debes asignar un usuario."
      );

      return;
    }

    if (!password.trim()) {
      setMensaje(
        "Debes asignar una contraseña."
      );

      return;
    }

    try {
      setGuardando(true);

      const usuarioNormalizado = usuario
        .trim()
        .toLowerCase();

      const {
        data: usuarioExiste,
        error: errorUsuario,
      } = await supabase
        .from(TABLA_RECOLECTORES)
        .select("id")
        .eq("usuario", usuarioNormalizado)
        .maybeSingle();

      if (errorUsuario) {
        console.error(
          "ERROR VERIFICANDO USUARIO:",
          errorUsuario
        );

        setMensaje(
          "Error verificando usuario: " +
            errorUsuario.message
        );

        return;
      }

      if (usuarioExiste) {
        setMensaje(
          "Ese nombre de usuario ya está siendo utilizado."
        );

        return;
      }

      const { error } = await supabase
        .from(TABLA_RECOLECTORES)
        .insert([
          {
            nombre: nombre.trim(),
            telefono: telefono.trim() || null,
            direccion: direccion.trim() || null,
            identificacion:
              identificacion.trim() || null,
            usuario: usuarioNormalizado,
            password: password.trim(),
            estado: "Activo",
          },
        ]);

      if (error) {
        console.error(
          "ERROR GUARDANDO RECOLECTOR:",
          error
        );

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

        return;
      }

      limpiarFormulario();

      setMensaje(
        "Recolector creado correctamente."
      );

      await cargarRecolectores();
    } catch (error: any) {
      console.error(
        "ERROR GENERAL AL GUARDAR:",
        error
      );

      setMensaje(
        "Error: " +
          (error?.message || "Error desconocido")
      );
    } finally {
      setGuardando(false);
    }
  }

  async function cambiarEstado(
    id: number,
    nuevoEstado: string
  ) {
    const estadoAnterior = recolectores.find(
      (recolector) => recolector.id === id
    )?.estado;

    setRecolectores((actuales) =>
      actuales.map((recolector) =>
        recolector.id === id
          ? {
              ...recolector,
              estado: nuevoEstado,
            }
          : recolector
      )
    );

    const { error } = await supabase
      .from(TABLA_RECOLECTORES)
      .update({
        estado: nuevoEstado,
      })
      .eq("id", id);

    if (error) {
      console.error(
        "ERROR CAMBIANDO ESTADO:",
        error
      );

      setRecolectores((actuales) =>
        actuales.map((recolector) =>
          recolector.id === id
            ? {
                ...recolector,
                estado:
                  estadoAnterior || "Activo",
              }
            : recolector
        )
      );

      setMensaje(
        "Error actualizando estado: " +
          error.message
      );

      return;
    }

    setMensaje(
      "Estado actualizado correctamente."
    );
  }

  async function eliminarRecolector(
    id: number,
    nombreRecolector: string
  ) {
    const confirmar = window.confirm(
      `¿Seguro que deseas eliminar a ${nombreRecolector}?`
    );

    if (!confirmar) {
      return;
    }

    try {
      setMensaje("");
      setEliminando(id);

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

      if (error) {
        console.error(
          "ERROR ELIMINANDO:",
          error
        );

        setMensaje(
          "Error al eliminar: " +
            error.message
        );

        return;
      }

      setRecolectores((actuales) =>
        actuales.filter(
          (recolector) =>
            recolector.id !== id
        )
      );

      setMensaje(
        "Recolector eliminado correctamente."
      );
    } catch (error: any) {
      console.error(
        "ERROR GENERAL ELIMINANDO:",
        error
      );

      setMensaje(
        error?.message ||
          "Error al eliminar."
      );
    } finally {
      setEliminando(null);
    }
  }

  const activos = recolectores.filter(
    (recolector) =>
      recolector.estado === "Activo"
  ).length;

  const inactivos =
    recolectores.length - activos;

  return (
    <main className="min-h-screen bg-[#060d1c] text-white">
      <Sidebar />

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

        {/* ENCABEZADO */}

        <div className="mb-6">

          <h1 className="text-2xl font-bold sm:text-3xl">
            🚚 Recolectores
          </h1>

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

        </div>

        {/* MENSAJE */}

        {mensaje && (

          <div
            className={`mb-6 rounded-2xl border p-4 text-sm sm:text-base ${
              mensaje.includes("correctamente")
                ? "border-green-500/40 bg-green-500/10 text-green-300"
                : "border-red-500/40 bg-red-500/10 text-red-300"
            }`}
          >
            {mensaje}
          </div>

        )}

        {/* FORMULARIO */}

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

          <div className="mb-5">

            <h2 className="text-lg font-bold sm:text-xl">
              ➕ Nuevo recolector
            </h2>

            <p className="mt-1 text-sm text-slate-400">
              Registra los datos y credenciales del recolector.
            </p>

          </div>

          <form
            onSubmit={agregarRecolector}
            className="grid grid-cols-1 gap-4 md:grid-cols-2"
          >

            <Campo
              etiqueta="Nombre completo *"
              valor={nombre}
              cambiar={setNombre}
              placeholder="Nombre completo"
            />

            <Campo
              etiqueta="Teléfono"
              valor={telefono}
              cambiar={setTelefono}
              placeholder="Teléfono"
              tipo="tel"
            />

            <Campo
              etiqueta="Dirección"
              valor={direccion}
              cambiar={setDireccion}
              placeholder="Dirección"
            />

            <Campo
              etiqueta="Identificación"
              valor={identificacion}
              cambiar={setIdentificacion}
              placeholder="Número de identificación"
            />

            <Campo
              etiqueta="Usuario *"
              valor={usuario}
              cambiar={setUsuario}
              placeholder="Usuario para iniciar sesión"
            />

            <Campo
              etiqueta="Contraseña *"
              valor={password}
              cambiar={setPassword}
              placeholder="Contraseña"
              tipo="password"
            />

            <div className="md:col-span-2">

              <button
                type="submit"
                disabled={guardando}
                className="w-full rounded-xl bg-orange-500 px-5 py-3 text-sm font-bold text-white transition hover:bg-orange-600 disabled:cursor-not-allowed disabled:bg-slate-600 sm:text-base"
              >
                {guardando
                  ? "Guardando..."
                  : "➕ Agregar recolector"}
              </button>

            </div>

          </form>

        </div>

        {/* RESUMEN */}

        <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">

          <ResumenCard
            icono="🚚"
            titulo="Total"
            valor={recolectores.length}
            color="text-orange-400"
          />

          <ResumenCard
            icono="🟢"
            titulo="Activos"
            valor={activos}
            color="text-green-400"
          />

          <ResumenCard
            icono="🔴"
            titulo="Inactivos"
            valor={inactivos}
            color="text-red-400"
          />

        </div>

        {/* LISTA */}

        <div className="overflow-hidden rounded-2xl border border-slate-700 bg-[#182235] shadow-lg">

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

            <h2 className="text-lg font-bold sm:text-xl">
              👥 Lista de recolectores
            </h2>

            <p className="mt-1 text-sm text-slate-400">
              Administra los recolectores registrados.
            </p>

          </div>

          {cargando ? (

            <div className="p-8 text-center text-sm text-slate-400 sm:p-10 sm:text-base">
              🔄 Cargando recolectores...
            </div>

          ) : recolectores.length === 0 ? (

            <div className="p-8 text-center text-sm text-slate-400 sm:p-10 sm:text-base">
              No hay recolectores registrados.
            </div>

          ) : (

            <>
              {/* VISTA MOVIL */}

              <div className="space-y-3 p-3 md:hidden">

                {recolectores.map(
                  (recolector) => (

                    <div
                      key={recolector.id}
                      className="rounded-xl border border-slate-700 bg-[#101827] p-4"
                    >

                      <div className="flex items-start justify-between gap-3">

                        <div>

                          <h3 className="font-bold">
                            {recolector.nombre}
                          </h3>

                          <p className="mt-1 text-xs text-slate-400">
                            {recolector.telefono || "Sin teléfono"}
                          </p>

                        </div>

                        <span
                          className={`rounded-full px-3 py-1 text-xs font-bold ${
                            recolector.estado === "Activo"
                              ? "bg-green-500/15 text-green-400"
                              : "bg-red-500/15 text-red-400"
                          }`}
                        >
                          {recolector.estado || "Activo"}
                        </span>

                      </div>

                      <div className="mt-4 space-y-2 text-sm">

                        <p className="text-slate-400">
                          📍{" "}
                          {recolector.direccion ||
                            "Sin dirección"}
                        </p>

                        <p className="text-slate-400">
                          👤{" "}
                          {recolector.usuario ||
                            "Sin usuario"}
                        </p>

                      </div>

                      <div className="mt-4 grid grid-cols-2 gap-2">

                        <select
                          value={
                            recolector.estado ||
                            "Activo"
                          }
                          onChange={(event) =>
                            cambiarEstado(
                              recolector.id,
                              event.target.value
                            )
                          }
                          className="rounded-lg border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white outline-none focus:border-orange-500"
                        >
                          <option value="Activo">
                            🟢 Activo
                          </option>

                          <option value="Inactivo">
                            🔴 Inactivo
                          </option>
                        </select>

                        <button
                          type="button"
                          disabled={
                            eliminando === recolector.id
                          }
                          onClick={() =>
                            eliminarRecolector(
                              recolector.id,
                              recolector.nombre
                            )
                          }
                          className="rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white transition hover:bg-red-700 disabled:bg-slate-600"
                        >
                          {eliminando === recolector.id
                            ? "Eliminando..."
                            : "🗑 Eliminar"}
                        </button>

                      </div>

                    </div>

                  )
                )}

              </div>

              {/* VISTA COMPUTADORA */}

              <div className="hidden overflow-x-auto md:block">

                <table className="w-full text-left">

                  <thead className="bg-[#253247] text-sm text-slate-300">

                    <tr>

                      <th className="px-5 py-4">
                        Nombre
                      </th>

                      <th className="px-5 py-4">
                        Teléfono
                      </th>

                      <th className="px-5 py-4">
                        Dirección
                      </th>

                      <th className="px-5 py-4">
                        Usuario
                      </th>

                      <th className="px-5 py-4">
                        Estado
                      </th>

                      <th className="px-5 py-4 text-center">
                        Acciones
                      </th>

                    </tr>

                  </thead>

                  <tbody>

                    {recolectores.map(
                      (recolector) => (

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

                          <td className="px-5 py-4 font-semibold">
                            {recolector.nombre}
                          </td>

                          <td className="px-5 py-4 text-slate-300">
                            {recolector.telefono ||
                              "-"}
                          </td>

                          <td className="px-5 py-4 text-slate-400">
                            {recolector.direccion ||
                              "-"}
                          </td>

                          <td className="px-5 py-4">

                            <span className="rounded-full bg-orange-500/15 px-3 py-1.5 text-xs font-bold text-orange-400">

                              {recolector.usuario ||
                                "Sin usuario"}

                            </span>

                          </td>

                          <td className="px-5 py-4">

                            <select
                              value={
                                recolector.estado ||
                                "Activo"
                              }
                              onChange={(event) =>
                                cambiarEstado(
                                  recolector.id,
                                  event.target.value
                                )
                              }
                              className="rounded-lg border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white outline-none focus:border-orange-500"
                            >

                              <option value="Activo">
                                🟢 Activo
                              </option>

                              <option value="Inactivo">
                                🔴 Inactivo
                              </option>

                            </select>

                          </td>

                          <td className="px-5 py-4 text-center">

                            <button
                              type="button"
                              disabled={
                                eliminando === recolector.id
                              }
                              onClick={() =>
                                eliminarRecolector(
                                  recolector.id,
                                  recolector.nombre
                                )
                              }
                              className="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-700 disabled:bg-slate-600"
                            >

                              {eliminando === recolector.id
                                ? "Eliminando..."
                                : "🗑 Eliminar"}

                            </button>

                          </td>

                        </tr>

                      )
                    )}

                  </tbody>

                </table>

              </div>
            </>

          )}

        </div>

      </section>

    </main>
  );
}

function Campo({
  etiqueta,
  valor,
  cambiar,
  placeholder,
  tipo = "text",
}: {
  etiqueta: string;
  valor: string;
  cambiar: (valor: string) => void;
  placeholder: string;
  tipo?: string;
}) {
  return (
    <div>

      <label className="mb-2 block text-sm font-medium text-slate-300">
        {etiqueta}
      </label>

      <input
        type={tipo}
        value={valor}
        onChange={(event) =>
          cambiar(event.target.value)
        }
        placeholder={placeholder}
        className="w-full rounded-xl border border-slate-600 bg-[#253247] px-4 py-3 text-sm text-white outline-none transition placeholder:text-slate-500 focus:border-orange-500 sm:text-base"
      />

    </div>
  );
}

function ResumenCard({
  icono,
  titulo,
  valor,
  color,
}: {
  icono: string;
  titulo: string;
  valor: number;
  color: string;
}) {
  return (
    <div className="rounded-2xl border border-slate-700 bg-[#182235] p-4 shadow-lg sm:p-5">

      <div className="flex items-center justify-between">

        <p className="text-sm text-slate-400">
          {titulo}
        </p>

        <span className="text-xl">
          {icono}
        </span>

      </div>

      <h2
        className={`mt-3 text-3xl font-bold sm:text-4xl ${color}`}
      >
        {valor}
      </h2>

    </div>
  );
}