"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useDocuments } from "@/hooks/useDocuments";

import DocumentTable from "./components/DocumentTable";
import DeleteConfirmationModal from "./components/DeleteConfirmationModal";

interface Empleado {
  id: string;
  nombre: string;
}

interface EmployeeFromAPI {
  id: string;
  name: string | null;
  username: string | null;
  image: string | null;
  role: string;
  createdAt: Date;
  updatedAt: Date;
  _count: {
    documents: number;
  };
}

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

  // Usar el hook personalizado en lugar de Server Actions
  const {
    documents: data,
    isLoading: isDocumentsLoading,
    error: documentsError,
    deleteDocument,
    updateDocument,
    refetch: refetchDocuments,
  } = useDocuments();

  const [empleados, setEmpleados] = useState<Empleado[]>([]);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [documentoAEliminar, setDocumentoAEliminar] = useState<typeof data[number] | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  // Escuchar evento de documento guardado desde upload
  useEffect(() => {
    const handleDocumentSaved = () => {
      refetchDocuments();
    };

    window.addEventListener('document-saved', handleDocumentSaved);
    return () => window.removeEventListener('document-saved', handleDocumentSaved);
  }, [refetchDocuments]);

  // Cargar empleados si es admin
  useEffect(() => {
    if (status === "authenticated" && session?.user?.role === "ADMIN") {
      fetch("/api/employees")
        .then((res) => res.json())
        .then((data) => {
          if (data.success) {
            const empleadosFormateados = data.employees.map(
              (emp: EmployeeFromAPI) => ({
                id: emp.id,
                nombre: emp.name || emp.username,
              })
            );
            setEmpleados(empleadosFormateados);
          }
        })
        .catch((error) => console.error("Error al cargar empleados:", error));
    }
  }, [status, session]);

  // Cargar categorías
  const [categories, setCategories] = useState<Array<{ id: string; name: string; icon: string | null; color: string | null }>>([]);

  useEffect(() => {
    if (status === "authenticated") {
      fetch("/api/categories")
        .then((res) => res.json())
        .then((data) => {
          if (data.success) {
            setCategories(data.categories);
          }
        })
        .catch((error) => console.error("Error al cargar categorías:", error));
    }
  }, [status]);

  if (status === "loading") {
    return <div className="text-center p-12">Cargando sesión...</div>;
  }

  if (status === "unauthenticated") {
    router.push("/login");
    return null;
  }

  const handleOpenModal = (doc: typeof data[number]) => {
    setDocumentoAEliminar(doc);
    setShowDeleteModal(true);
  };

  const handleCloseModal = () => {
    setDocumentoAEliminar(null);
    setShowDeleteModal(false);
  };

  const handleConfirmDelete = async () => {
    if (!documentoAEliminar) return;
    
    setIsDeleting(true);
    try {
      await deleteDocument(documentoAEliminar.id);
      handleCloseModal();
    } catch (error) {
      console.error("Error al eliminar documento:", error);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <div className="space-y-6 animate-fade-in">
      {documentsError && (
        <div className="bg-destructive-background border border-destructive-border text-destructive px-4 py-3 rounded-lg flex items-start gap-3 animate-slide-down">
          <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>{documentsError}</span>
        </div>
      )}

      {isDocumentsLoading && data.length === 0 ? (
        <div className="space-y-4">
          <div className="h-8 bg-[var(--color-background-alt)] rounded-lg skeleton w-1/3"></div>
          <div className="h-16 bg-[var(--color-background-alt)] rounded-lg skeleton"></div>
          <div className="h-96 bg-[var(--color-background-alt)] rounded-xl skeleton"></div>
        </div>
      ) : (
        <DocumentTable
          data={data}
          onDelete={handleOpenModal}
          empleados={empleados}
          usuarioActual={{
            id: session?.user?.id || "",
            rol: session?.user?.role || "USER",
          }}
          categories={categories}
          onUpdateDocument={updateDocument}
        />
      )}

      <DeleteConfirmationModal
        isOpen={showDeleteModal}
        documento={documentoAEliminar}
        isDeleting={isDeleting}
        onClose={handleCloseModal}
        onConfirm={handleConfirmDelete}
      />
    </div>
  );
}