// src/app/dashboard/employees/page.tsx
"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { LuPencil, LuTrash2, LuUserCog, LuSearch, LuPlus, LuSettings } from "react-icons/lu";
import EditEmployeeModal from "./components/EditEmployeeModal";
import DeleteConfirmModal from "./components/DeleteConfirmModal";
import EmployeeDocumentsModal from "./components/EmployeeDocumentsModal";
import CreateUserDrawer from "./components/CreateUserDrawer";
import MobileEmployeeCard from "./components/MobileEmployeeCard";
import { useEmployees, Employee } from "@/hooks/useEmployees";
import { CreateUserInput } from "@/types/auth";

export default function EmployeesPage() {
  const { data: session, status } = useSession();
  const router = useRouter();

  // Usar el hook personalizado
  const {
    employees,
    isLoading,
    error,
    createEmployee,
    deleteEmployee,
    refetch,
  } = useEmployees();

  const [filteredEmployees, setFilteredEmployees] = useState<Employee[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(
    null
  );
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [showDocumentsModal, setShowDocumentsModal] = useState(false);
  const [showCreateDrawer, setShowCreateDrawer] = useState(false);

  // Proteger ruta - solo admin
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    } else if (status === "authenticated" && session?.user?.role !== "ADMIN") {
      router.push("/dashboard");
    }
  }, [status, session, router]);

  // Filtrar empleados por búsqueda
  useEffect(() => {
    const filtered = employees.filter(
      (emp) =>
        emp.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        emp.username.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredEmployees(filtered);
  }, [searchTerm, employees]);

  const handleEdit = (employee: Employee) => {
    setSelectedEmployee(employee);
    setShowEditModal(true);
  };

  const handleDelete = async () => {
    if (!selectedEmployee) return;

    try {
      await deleteEmployee(selectedEmployee.id);
      setShowDeleteModal(false);
      setSelectedEmployee(null);
    } catch (error) {
      console.error('❌ Error al eliminar:', error);
      alert(error instanceof Error ? error.message : 'Error al eliminar empleado');
    }
  };

  const handleViewDocuments = (employee: Employee) => {
    setSelectedEmployee(employee);
    setShowDocumentsModal(true);
  };

  const handleCreateEmployee = async (data: CreateUserInput) => {
    try {
      await createEmployee(data);
      console.log('✅ Empleado creado exitosamente');
      setShowCreateDrawer(false);
    } catch (error) {
      console.error('❌ Error al crear empleado:', error);
      throw error; // El drawer maneja el error
    }
  };

  if (status === "loading" || isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-text">
            Gestión de Usuarios
          </h1>
          <p className="text-text-muted mt-1 text-sm">
            Administra los usuarios del sistema
          </p>
        </div>
        <div className="flex items-center gap-3">
          <div className="hidden sm:flex items-center gap-2 px-4 py-2 bg-background border border-border-subtle rounded-xl text-sm font-medium text-text shadow-sm">
            <LuUserCog className="h-4 w-4 text-primary" />
            <span>{employees.length} {employees.length === 1 ? 'usuario' : 'usuarios'} {employees.length === 1 ? 'registrado' : 'registrados'}</span>
          </div>
          <button
            onClick={() => setShowCreateDrawer(true)}
            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-primary to-primary-hover text-primary-foreground rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 font-medium shadow-sm focus-ring"
          >
            <LuPlus className="h-4 w-4" />
            <span className="hidden sm:inline">Registrar Nuevo Usuario</span>
            <span className="sm:hidden">Nuevo</span>
          </button>
        </div>
      </div>

      {/* Error Message */}
      {error && (
        <div className="bg-destructive-background border border-destructive-border text-destructive-foreground px-4 py-3.5 rounded-xl flex items-start gap-3 animate-slide-down" role="alert">
          <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
          </svg>
          <span>{error}</span>
        </div>
      )}

      {/* Barra de búsqueda */}
      <div className="relative">
        <LuSearch className="absolute left-4 top-1/2 transform -translate-y-1/2 text-text-subtle h-5 w-5" />
        <input
          type="text"
          placeholder="Buscar por nombre o usuario..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full pl-11 pr-4 py-3 border border-border-subtle rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-background transition-all"
        />
      </div>

      {/* Tabla de empleados (Desktop) & Cards (Mobile) */}
      <div className="bg-background rounded-2xl shadow-sm border border-border-subtle overflow-hidden animate-scale-in">
        {/* Desktop Table */}
        <div className="hidden md:block overflow-x-auto">
          <table className="min-w-full divide-y divide-border-light">
            <thead className="bg-background-alt">
              <tr>
                <th className="px-6 py-4 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">
                  Empleado
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">
                  Usuario
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">
                  Rol
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">
                  Documentos
                </th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">
                  Fecha de registro
                </th>
                <th className="px-6 py-4 text-right text-xs font-semibold text-text-muted uppercase tracking-wider">
                  Acciones
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border-light">
              {filteredEmployees.length === 0 ? (
                <tr>
                  <td
                    colSpan={6}
                    className="px-6 py-12 text-center text-text-muted"
                  >
                    <div className="flex flex-col items-center gap-3">
                      <div className="w-16 h-16 rounded-full bg-background-alt flex items-center justify-center">
                        <LuSearch className="h-8 w-8 text-text-subtle" />
                      </div>
                      {searchTerm
                        ? "No se encontraron empleados con ese criterio"
                        : "No hay empleados registrados"}
                    </div>
                  </td>
                </tr>
              ) : (
                filteredEmployees.map((employee) => (
                  <tr key={employee.id} className="hover:bg-primary-faint/30 transition-colors group">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center">
                        <div className="h-11 w-11 flex-shrink-0">
                          <div className="h-11 w-11 rounded-full bg-gradient-to-br from-primary to-primary-hover flex items-center justify-center text-primary-foreground font-semibold shadow-sm">
                            {employee.name?.charAt(0).toUpperCase() ||
                              employee.username.charAt(0).toUpperCase()}
                          </div>
                        </div>
                        <div className="ml-4">
                          <div className="text-sm font-semibold text-text">
                            {employee.name || "Sin nombre"}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm font-medium text-text">
                        {employee.username}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span
                        className={`inline-flex items-center gap-1 px-3 py-1 text-xs font-semibold rounded-full ${employee.role === "ADMIN"
                          ? "bg-info-background text-info border border-info-border"
                          : "bg-success-background text-success-foreground border border-success-border"
                          }`}
                      >
                        {employee.role === "ADMIN" && <LuSettings className="h-3 w-3" />}
                        {employee.role}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text-muted">
                      <button
                        onClick={() => handleViewDocuments(employee)}
                        className="text-primary hover:text-primary-hover font-medium hover:underline transition-colors"
                      >
                        {employee._count.documents} documento(s)
                      </button>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text-muted">
                      {new Date(employee.createdAt).toLocaleDateString("es-ES", {
                        day: 'numeric',
                        month: 'long',
                        year: 'numeric'
                      })}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex items-center justify-end gap-2">
                        <button
                          onClick={() => handleEdit(employee)}
                          className="p-2 text-text-subtle hover:text-primary hover:bg-primary-faint rounded-lg transition-all focus-ring"
                          title="Editar"
                          aria-label={`Editar ${employee.name || employee.username}`}
                        >
                          <LuPencil className="h-4 w-4" />
                        </button>
                        <button
                          onClick={() => {
                            setSelectedEmployee(employee);
                            setShowDeleteModal(true);
                          }}
                          className="p-2 text-text-subtle hover:text-destructive hover:bg-destructive-background rounded-lg transition-all focus-ring"
                          title="Eliminar"
                          aria-label={`Eliminar ${employee.name || employee.username}`}
                          disabled={employee.id === session?.user?.id}
                        >
                          <LuTrash2
                            className={`h-4 w-4 ${employee.id === session?.user?.id
                              ? "opacity-30 cursor-not-allowed"
                              : ""
                              }`}
                          />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Mobile Cards */}
        <div className="md:hidden p-4 space-y-4 bg-background-subtle">
          {filteredEmployees.length === 0 ? (
            <div className="text-center py-10 text-text-muted">
              <div className="flex flex-col items-center gap-3">
                <div className="w-16 h-16 rounded-full bg-background-alt flex items-center justify-center">
                  <LuSearch className="h-8 w-8 text-text-subtle" />
                </div>
                {searchTerm
                  ? "No se encontraron empleados con ese criterio"
                  : "No hay empleados registrados"}
              </div>
            </div>
          ) : (
            filteredEmployees.map((employee) => (
              <MobileEmployeeCard
                key={employee.id}
                employee={employee}
                onEdit={handleEdit}
                onDelete={(emp) => {
                  setSelectedEmployee(emp);
                  setShowDeleteModal(true);
                }}
                onViewDocuments={handleViewDocuments}
                currentUserId={session?.user?.id}
              />
            ))
          )}
        </div>
      </div>

      {/* Modales */}
      {showEditModal && selectedEmployee && (
        <EditEmployeeModal
          employee={selectedEmployee}
          onClose={() => {
            setShowEditModal(false);
            setSelectedEmployee(null);
          }}
          onSuccess={() => {
            refetch();
            setShowEditModal(false);
            setSelectedEmployee(null);
          }}
        />
      )}

      {showDeleteModal && selectedEmployee && (
        <DeleteConfirmModal
          employee={selectedEmployee}
          onClose={() => {
            setShowDeleteModal(false);
            setSelectedEmployee(null);
          }}
          onConfirm={handleDelete}
          isDeleting={false}
        />
      )}

      {showDocumentsModal && selectedEmployee && (
        <EmployeeDocumentsModal
          employeeId={selectedEmployee.id}
          employeeName={selectedEmployee.name || selectedEmployee.username}
          onClose={() => {
            setShowDocumentsModal(false);
            setSelectedEmployee(null);
          }}
        />
      )}

      <CreateUserDrawer
        isOpen={showCreateDrawer}
        onClose={() => setShowCreateDrawer(false)}
        onCreateUser={handleCreateEmployee}
      />
    </div>
  );
}