"use client";

import { useState } from "react";
import { Users, Building2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Team } from "@/lib/types";
import { TreeViewPage } from "../management/tree-view-page";
import { useTreeView } from "@/hooks/use-tree-view";
import { useFormDialog } from "@/hooks/use-form-dialog";
import { useUsersManagement } from "@/hooks/use-users-management";
import { UserFormDialog } from "./user-form-dialog";
import { UsersList } from "./users-list";

interface UsersManagementPageProps {
  teams: Team[];
  initialUsers: any[];
}

export function UsersManagementPage({
  teams,
  initialUsers,
}: UsersManagementPageProps) {
  const [searchTerm, setSearchTerm] = useState("");

  const { isCreateDialogOpen, openCreateDialog, closeCreateDialog } =
    useFormDialog();

  const {
    users,
    isLoading,
    error,
    userFormData,
    isSubmitting,
    setUserFormData,
    resetForm,
    handleCreateUser,
    handleDeleteUser,
  } = useUsersManagement(teams, initialUsers);

  // Utilisation du hook factorisé pour la vue arborescente
  const {
    filteredDataByCategory: filteredUsersByTeam,
    expandedCategories: expandedTeams,
    toggleCategory: toggleTeam,
    expandAll,
    collapseAll,
  } = useTreeView({
    data: users,
    searchFields: ["firstName", "lastName"],
    groupBy: (user) => user.teamName || "Sans équipe",
    searchTerm,
    onSearchChange: setSearchTerm,
  });

  const handleCreateSubmit = async () => {
    const success = await handleCreateUser();
    if (success) {
      closeCreateDialog();
    }
  };

  const handleOpenCreateDialog = () => {
    resetForm();
    openCreateDialog();
  };

  const headerActions = (
    <Button onClick={handleOpenCreateDialog}>
      <Users className="w-4 h-4 mr-2" />
      Créer un utilisateur
    </Button>
  );

  const emptyState = (
    <div className="text-center py-8">
      <Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
      <h3 className="text-base font-medium text-slate-400 mb-1">
        {searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
      </h3>
      <p className="text-sm text-slate-500">
        {searchTerm
          ? "Essayez de modifier vos critères de recherche"
          : "Commencez par créer votre premier utilisateur"}
      </p>
    </div>
  );

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-white">
            Gestion des utilisateurs
          </h2>
          <Button disabled>
            <Users className="w-4 h-4 mr-2" />
            Créer un utilisateur
          </Button>
        </div>
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center gap-3 p-3">
              <div className="w-8 h-8 rounded-full bg-slate-700 animate-pulse" />
              <div className="flex-1 space-y-2">
                <div className="h-4 bg-slate-700 rounded animate-pulse w-32" />
                <div className="h-3 bg-slate-700 rounded animate-pulse w-24" />
              </div>
              <div className="w-20 h-8 bg-slate-700 rounded animate-pulse" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-white">
            Gestion des utilisateurs
          </h2>
        </div>
        <div className="text-center py-8">
          <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
            <Users className="w-6 h-6 text-red-400" />
          </div>
          <p className="text-red-400 mb-4">{error}</p>
          <Button onClick={() => window.location.reload()} variant="outline">
            Réessayer
          </Button>
        </div>
      </div>
    );
  }

  return (
    <>
      <TreeViewPage
        title="Gestion des utilisateurs"
        description="Gérez les utilisateurs de votre organisation"
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
        onExpandAll={expandAll}
        onCollapseAll={collapseAll}
        searchPlaceholder="Rechercher un utilisateur..."
        hasContent={Object.keys(filteredUsersByTeam).length > 0}
        emptyState={emptyState}
        headerActions={headerActions}
      >
        <UsersList
          filteredUsersByTeam={filteredUsersByTeam}
          expandedTeams={expandedTeams}
          onToggleTeam={toggleTeam}
          onDeleteUser={handleDeleteUser}
        />
      </TreeViewPage>

      {/* Dialog de création */}
      <UserFormDialog
        isOpen={isCreateDialogOpen}
        onClose={closeCreateDialog}
        onSubmit={handleCreateSubmit}
        title="Créer un nouvel utilisateur"
        formData={userFormData}
        onFormDataChange={setUserFormData}
        teams={teams}
        isSubmitting={isSubmitting}
      />
    </>
  );
}