"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { getUserPermissions } from "@/lib/validation/permissions";
import { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown, Copy, Mail } from "lucide-react";
import { User } from "next-auth";

import UserPermissionsPopover from "../_components/user-permissions-popover";
import CopyToClip from "@/components/copy-to-clip";

export const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",

    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Name
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
  },

  {
    accessorKey: "email",
    cell: ({ row }) => {
      const email = String(row.getValue("email"));
      return (
        <div className="flex items-center gap-2">
          <CopyToClip text={email} targetName="Email" />
          <span>{email}</span>
        </div>
      );
    },
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          <Mail className="size-4" />
          <span>Email</span>
          <ArrowUpDown className="size-4" />
        </Button>
      );
    },
  },
  {
    accessorKey: "role",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Benutzerrechte
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
    cell: ({ row }) => {
      const roles = getUserPermissions(Number(row.getValue("role")));
      const userId = String(row.getValue("id"));

      return (
        <div className="flex items-center gap-2">
          <UserPermissionsPopover
            server_permissions={Number(row.getValue("role"))}
            userId={userId}
          />
          {roles
            .filter(({ name }) => name !== "User")
            .map((role) => (
              <Badge
                key={role.name}
                variant={"outline"}
                className={`${Object.values(role.color).join(" ")}`}
              >
                {role.name}
              </Badge>
            ))}
        </div>
      );
    },
  },
  {
    accessorKey: "id",
    header: () => <div className="text-end">Benutzer ID</div>,
    cell: ({ row }) => {
      return (
        <div className="flex items-center justify-end gap-2">
          <CopyToClip
            text={row.getValue("id")}
            targetName="Benutzer ID"
            buttonProps={{
              size: "default",
              variant: "outline",
            }}
          >
            <Copy className="size-4" />
            <span>Kopieren</span>
          </CopyToClip>
        </div>
      );
    },
  },
];
