"use client";

import { useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";
import { UsersOverview } from "./columns";
import { EntityDetailSheet } from "@/components/dashboard/data-view/EntityDetailSheet";
import { UserEditForm } from "./UserEditForm";
import { deleteUser } from "@/actions/user";
import { toast } from "sonner";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface UsersTableProps {
  columns: any[];
  data: any[];
}

export function UsersTable({ columns, data }: UsersTableProps) {
  const [selectedUser, setSelectedUser] = useState<UsersOverview | null>(null);
  const [editingUser, setEditingUser] = useState<UsersOverview | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [userToDelete, setUserToDelete] = useState<UsersOverview | null>(null);

  const handleEdit = (user: UsersOverview) => {
    setEditingUser(user);
  };

  const handleDelete = (user: UsersOverview) => {
    setUserToDelete(user);
    setDeleteDialogOpen(true);
  };

  const confirmDelete = async () => {
    if (!userToDelete) return;

    try {
      await deleteUser({ id: userToDelete.id });
      toast.success("Benutzer erfolgreich gelöscht");
    } catch (error) {
      toast.error("Fehler beim Löschen des Benutzers");
    }
    setDeleteDialogOpen(false);
    setUserToDelete(null);
  };

  const tableColumns = columns.map((col) => ({
    ...col,
    meta: {
      onEdit: handleEdit,
      onDelete: handleDelete,
    },
  }));

  return (
    <>
      <DataTable
        columns={tableColumns}
        data={data}
        onRowClick={(row) => setSelectedUser(row)}
      />
      <EntityDetailSheet
        type="user"
        data={selectedUser}
        open={!!selectedUser}
        onOpenChange={(open) => !open && setSelectedUser(null)}
      />
      {editingUser && (
        <UserEditForm
          user={editingUser}
          open={!!editingUser}
          onOpenChange={(open) => !open && setEditingUser(null)}
        />
      )}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Benutzer löschen</AlertDialogTitle>
            <AlertDialogDescription>
              Sind Sie sicher, dass Sie den Benutzer &quot;{userToDelete?.firstName} {userToDelete?.lastName}&quot; löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Abbrechen</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete}>Löschen</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}