"use client";

import { type UserRole, translateUserRole } from "@/server/auth/permissions";
import type { users } from "@/server/db/schema";
import type { ColumnDef } from "@tanstack/react-table";
import type { InferSelectModel } from "drizzle-orm";
import {
	ArrowUpDown,
	MailIcon,
	MessageCircleIcon,
	MoreHorizontal,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Link from "next/link";
import {
	EditUserDialogContent,
	EditUserDialogRoot,
	EditUserDialogTrigger,
} from "@/app/admin/users/dialog";

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type User = {
	id: string;
	github_id: number;
	username: string;
	displayName: string;
	email: string;
	role: string;
};

export const columns: ColumnDef<InferSelectModel<typeof users>>[] = [
	{
		accessorKey: "id",
		header: ({ column }) => {
			return (
				<Button
					variant="ghost"
					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
				>
					ID
					<ArrowUpDown className="ml-2 h-4 w-4" />
				</Button>
			);
		},
	},
	{
		accessorKey: "github_id",
		header: "GitHub ID",
	},
	{
		accessorKey: "username",
		header: "Username",
	},
	{
		accessorKey: "displayName",
		header: "Name",
	},
	{
		accessorKey: "email",
		header: "E-Mail",
	},
	{
		accessorKey: "role",
		header: "Rolle",
		cell: ({ row }) => {
			const role = row.getValue("role");
			const translated = translateUserRole(role as UserRole);

			return translated;
		},
	},
	{
		id: "actions",
		cell: ({ row }) => {
			const user = row.original;

			return (
				<EditUserDialogRoot>
					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button variant="ghost" className="h-8 w-8 p-0">
								<span className="sr-only">Menu öffnen</span>
								<MoreHorizontal className="h-4 w-4" />
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end">
							<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
							<DropdownMenuItem asChild>
								<Link
									target="_blank"
									href={generateTeamsChatURL(user.email)}
									className="flex gap-2 items-center"
								>
									<MessageCircleIcon className="w-4 h-4" />
									<span>Teams-Chat öffnen</span>
								</Link>
							</DropdownMenuItem>
							<DropdownMenuItem asChild>
								<Link
									target="_blank"
									href={generateEMailURL(user.email)}
									className="flex gap-2 items-center"
								>
									<MailIcon className="w-4 h-4" />
									<span>E-Mail schicken</span>
								</Link>
							</DropdownMenuItem>
							<DropdownMenuSeparator />
							<DropdownMenuItem>
								<EditUserDialogTrigger />
							</DropdownMenuItem>
						</DropdownMenuContent>
					</DropdownMenu>
					<EditUserDialogContent user={user as User} />
				</EditUserDialogRoot>
			);
		},
	},
];

function generateTeamsChatURL(email: string) {
	return `https://teams.microsoft.com/l/chat/0/0?users=${email}`;
}

function generateEMailURL(email: string) {
	return `mailto:${email}`;
}
