"use client";

import * as React from "react";
import { ColumnDef } from "@tanstack/react-table";
import { UserDTOSchema } from "@/lib/db/schemas/api";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Edit, Trash2, MoreHorizontal } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import Link from "next/link";
import { toast } from "sonner";
import { deleteUser } from "@/actions/user";
import { CopyButton } from "@/components/ui/CopyButton";
import { useAction } from "@/hooks/useAction";
import { useRouter } from "next/navigation";

export type UsersOverview = z.infer<typeof UserDTOSchema>;

export const columns: ColumnDef<UsersOverview>[] = [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => {
      const id = row.getValue("id") as string;
      return (
        <div className="flex items-center gap-2 group/id">
          <span className="text-xs text-muted-foreground font-mono">
            #{id}
          </span>
          <CopyButton
            value={id}
            copyMessage="Benutzer-ID kopieren"
            successMessage="ID kopiert!"
            aria-label={`Benutzer-ID ${id} kopieren`}
            className="h-6 w-6 opacity-0 group-hover/id:opacity-100 group-focus-within/id:opacity-100 transition-opacity"
          />
        </div>
      );
    },
  },
  {
    accessorKey: "firstName",
    header: "Vorname",
  },
  {
    accessorKey: "lastName",
    header: "Nachname",
  },
  {
    accessorKey: "email",
    header: "Email",
    cell: ({ row }) => {
      const email = row.getValue("email") as string;
      return (
        <div className="flex items-center gap-2 group/email">
          <span>{email}</span>
          <CopyButton
            value={email}
            copyMessage="Email kopieren"
            successMessage="Email kopiert!"
            aria-label={`Email ${email} kopieren`}
            className="h-6 w-6 opacity-0 group-hover/email:opacity-100 group-focus-within/email:opacity-100 transition-opacity"
          />
        </div>
      );
    },
  },
  {
    accessorKey: "role",
    header: "Rolle",
  },
  {
    id: "actions",
    cell: ({ row }) => <UserActionsCell user={row.original} />,
  },
];

function UserActionsCell({ user }: { user: UsersOverview }) {
  const router = useRouter();
  const { execute, isLoading } = useAction(deleteUser);

  const handleDelete = async () => {
    const result = await execute({ id: user.id });
    if (result?.success) {
      toast.success("Benutzer erfolgreich gelöscht.");
      router.refresh();
    } else if (result?.error) {
      toast.error(result.error);
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="h-8 w-8 p-0" disabled={isLoading}>
          <span className="sr-only">Menü öffnen</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Aktionen</DropdownMenuLabel>
        <DropdownMenuItem asChild>
          <Link href={`/dashboard/users/${user.id}`}>
            <Edit className="mr-2 h-4 w-4" />
            Bearbeiten
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <DropdownMenuItem
              onSelect={(e) => e.preventDefault()}
              className="text-destructive focus:text-destructive"
            >
              <Trash2 className="mr-2 h-4 w-4" />
              Löschen
            </DropdownMenuItem>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Benutzer löschen</AlertDialogTitle>
              <AlertDialogDescription>
                Möchten Sie den Benutzer &quot;{user.firstName} {user.lastName}&quot; wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={isLoading}>Abbrechen</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleDelete}
                disabled={isLoading}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              >
                {isLoading ? "Löscht..." : "Löschen"}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}