"use client";

import { useEffect, useState } from "react";
import { supabase } from "@/lib/supabase";
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 Badge from "@/components/ui/Badge";

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 (
    <PageLayout>
      {/* Encabezado */}
      <section className="mb-4 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">
          Recolectores
        </h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Administración de recolectores de Honduras Cargo Express
        </p>
      </section>

      {mensaje && (
        <div
          className={`mb-4 rounded-xl border p-3 text-xs font-medium ${
            mensaje.includes("correctamente")
              ? "border-green-500/30 bg-green-500/10 text-green-500"
              : "border-red-500/30 bg-red-500/10 text-red-500"
          }`}
        >
          {mensaje}
        </div>
      )}

      {/* Formulario */}
      <Card className="mb-4" padding="sm">
        <h2 className="text-sm font-black text-[var(--text-primary)]">Nuevo recolector</h2>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Registra los datos y credenciales del recolector.
        </p>

        <form onSubmit={agregarRecolector} className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
          <Input
            label="Nombre completo *"
            placeholder="Nombre completo"
            value={nombre}
            onChange={(e) => setNombre(e.target.value)}
          />
          <Input
            label="Teléfono"
            type="tel"
            placeholder="Teléfono"
            value={telefono}
            onChange={(e) => setTelefono(e.target.value)}
          />
          <Input
            label="Dirección"
            placeholder="Dirección"
            value={direccion}
            onChange={(e) => setDireccion(e.target.value)}
          />
          <Input
            label="Identificación"
            placeholder="Número de identificación"
            value={identificacion}
            onChange={(e) => setIdentificacion(e.target.value)}
          />
          <Input
            label="Usuario *"
            placeholder="Usuario para iniciar sesión"
            value={usuario}
            onChange={(e) => setUsuario(e.target.value)}
          />
          <Input
            label="Contraseña *"
            type="password"
            placeholder="Contraseña"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />

          <div className="md:col-span-2">
            <Button type="submit" size="sm" disabled={guardando} fullWidth className="sm:w-auto">
              {guardando ? "Guardando..." : "Agregar recolector"}
            </Button>
          </div>
        </form>
      </Card>

      {/* Resumen */}
      <div className="mb-4 grid grid-cols-3 gap-3">
        <ResumenCard titulo="Total" valor={recolectores.length} color="text-[var(--text-primary)]" />
        <ResumenCard titulo="Activos" valor={activos} color="text-emerald-500" />
        <ResumenCard titulo="Inactivos" valor={inactivos} color="text-red-500" />
      </div>

      {/* Lista */}
      <Card padding="none">
        <div className="border-b border-[var(--border)] p-3">
          <h2 className="text-sm font-black text-[var(--text-primary)]">Lista de recolectores</h2>
          <p className="text-xs text-[var(--text-muted)]">Administra los recolectores registrados.</p>
        </div>

        {cargando ? (
          <div className="p-6 text-center text-sm text-[var(--text-muted)]">
            Cargando recolectores...
          </div>
        ) : recolectores.length === 0 ? (
          <div className="p-6 text-center text-sm text-[var(--text-muted)]">
            No hay recolectores registrados.
          </div>
        ) : (
          <>
            {/* Vista móvil */}
            <div className="space-y-2 p-3 lg:hidden">
              {recolectores.map((recolector) => (
                <div
                  key={recolector.id}
                  className="rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <p className="text-sm font-bold text-[var(--text-primary)]">
                        {recolector.nombre}
                      </p>
                      <p className="text-xs text-[var(--text-muted)]">
                        {recolector.telefono || "Sin teléfono"}
                      </p>
                    </div>
                    <Badge variant={recolector.estado === "Activo" ? "success" : "danger"} size="sm">
                      {recolector.estado || "Activo"}
                    </Badge>
                  </div>

                  <div className="mt-2 space-y-1 text-xs text-[var(--text-secondary)]">
                    <p>📍 {recolector.direccion || "Sin dirección"}</p>
                    <p>👤 {recolector.usuario || "Sin usuario"}</p>
                  </div>

                  <div className="mt-3 grid grid-cols-2 gap-2">
                    <Select
                      value={recolector.estado || "Activo"}
                      onChange={(event) => cambiarEstado(recolector.id, event.target.value)}
                      options={[
                        { value: "Activo", label: "Activo" },
                        { value: "Inactivo", label: "Inactivo" },
                      ]}
                    />
                    <Button
                      variant="danger"
                      size="sm"
                      fullWidth
                      disabled={eliminando === recolector.id}
                      onClick={() => eliminarRecolector(recolector.id, recolector.nombre)}
                    >
                      {eliminando === recolector.id ? "Eliminando..." : "Eliminar"}
                    </Button>
                  </div>
                </div>
              ))}
            </div>

            {/* Vista escritorio */}
            <div className="hidden overflow-x-auto lg:block">
              <table className="w-full text-left">
                <thead className="bg-[var(--bg-secondary)] text-[11px] font-black uppercase tracking-wider text-[var(--text-secondary)]">
                  <tr>
                    <th className="px-4 py-3">Nombre</th>
                    <th className="px-4 py-3">Teléfono</th>
                    <th className="px-4 py-3">Dirección</th>
                    <th className="px-4 py-3">Usuario</th>
                    <th className="px-4 py-3">Estado</th>
                    <th className="px-4 py-3 text-center">Acciones</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[var(--border)]">
                  {recolectores.map((recolector) => (
                    <tr
                      key={recolector.id}
                      className="transition hover:bg-[var(--bg-secondary)]/50"
                    >
                      <td className="px-4 py-3 text-sm font-semibold text-[var(--text-primary)]">
                        {recolector.nombre}
                      </td>
                      <td className="px-4 py-3 text-sm text-[var(--text-secondary)]">
                        {recolector.telefono || "-"}
                      </td>
                      <td className="max-w-[200px] truncate px-4 py-3 text-sm text-[var(--text-secondary)]">
                        {recolector.direccion || "-"}
                      </td>
                      <td className="px-4 py-3">
                        <Badge variant="orange" size="sm">
                          {recolector.usuario || "Sin usuario"}
                        </Badge>
                      </td>
                      <td className="px-4 py-3">
                        <Select
                          value={recolector.estado || "Activo"}
                          onChange={(event) => cambiarEstado(recolector.id, event.target.value)}
                          options={[
                            { value: "Activo", label: "Activo" },
                            { value: "Inactivo", label: "Inactivo" },
                          ]}
                        />
                      </td>
                      <td className="px-4 py-3 text-center">
                        <Button
                          variant="danger"
                          size="sm"
                          disabled={eliminando === recolector.id}
                          onClick={() => eliminarRecolector(recolector.id, recolector.nombre)}
                        >
                          {eliminando === recolector.id ? "Eliminando..." : "Eliminar"}
                        </Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </Card>
    </PageLayout>
  );
}

function ResumenCard({
  titulo,
  valor,
  color,
}: {
  titulo: string;
  valor: number;
  color: string;
}) {
  return (
    <Card padding="sm">
      <p className="text-xs text-[var(--text-muted)]">{titulo}</p>
      <h2 className={`mt-1 text-2xl font-black ${color}`}>{valor}</h2>
    </Card>
  );
}