"use client"

import { useState } from 'react';
import { ColumnDef } from "@tanstack/react-table"
import { ArrowUpDown, MoreHorizontal, Coins, Ban } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Users = {
	id: string | number
	name: string
	email: string
	role: string
	original_id?: string | number
	isEditing?: boolean
	current_cash?: number
}

function EditableIdCell({ row, updateData }: { row: { original: Users }; updateData: (userId: string | number, field: keyof Users, value: string | number) => void }) {
	const [isEditing, setIsEditing] = useState(false);
	const [value, setValue] = useState(row.original.id);

	if (isEditing) {
		return (
			<Input
				type="number"
				className="h-8 w-20"
				value={value}
				onChange={(e) => setValue(e.target.value)}
				onBlur={() => {
					updateData(row.original.id, 'id', value);
					setIsEditing(false);
				}}
				onKeyDown={(e) => {
					if (e.key === 'Enter') {
						updateData(row.original.id, 'id', value);
						setIsEditing(false);
					} else if (e.key === 'Escape') {
						setValue(row.original.id);
						setIsEditing(false);
					}
				}}
				autoFocus
			/>
		);
	}

	return (
		<div
			className="cursor-pointer px-2 py-1"
			onClick={() => setIsEditing(true)}
		>
			{row.original.id}
		</div>
	);
}

function EditableEmailCell({ row, updateData }: { row: { original: Users }; updateData: (userId: string | number, field: keyof Users, value: string | number) => void }) {
	const [isEditing, setIsEditing] = useState(false);
	const [value, setValue] = useState(row.original.email);

	if (isEditing) {
		return (
			<Input
				type="email"
				className="h-8 w-48"
				value={value}
				onChange={(e) => setValue(e.target.value)}
				onBlur={() => {
					updateData(row.original.id, 'email', value);
					setIsEditing(false);
				}}
				onKeyDown={(e) => {
					if (e.key === 'Enter') {
						updateData(row.original.id, 'email', value);
						setIsEditing(false);
					} else if (e.key === 'Escape') {
						setValue(row.original.email);
						setIsEditing(false);
					}
				}}
				autoFocus
			/>
		);
	}

	return (
		<div
			className="cursor-pointer px-2 py-1"
			onClick={() => setIsEditing(true)}
		>
			{row.original.email}
		</div>
	);
}

function EditableRoleCell({ row, updateData, availableRoles }: { row: { original: Users }; updateData: (userId: string | number, field: keyof Users, value: string | number) => void; availableRoles: string[] }) {
	const [isEditing, setIsEditing] = useState(false);
	const [value, setValue] = useState(row.original.role);

	if (isEditing) {
		return (
			<Select
				value={value}
				onValueChange={(newValue) => {
					setValue(newValue);
					updateData(row.original.id, 'role', newValue);
					setIsEditing(false);
				}}
			>
				<SelectTrigger className="h-8 w-24">
					<SelectValue />
				</SelectTrigger>
				<SelectContent>
					{availableRoles.map((role) => (
						<SelectItem key={role} value={role}>
							{role}
						</SelectItem>
					))}
				</SelectContent>
			</Select>
		);
	}

	return (
		<div
			className="cursor-pointer px-2 py-1"
			onClick={() => setIsEditing(true)}
		>
			{row.original.role}
		</div>
	);
}

export const columns = (
	updateData: (userId: string | number, field: keyof Users, value: string | number) => void,
	availableRoles: string[],
	openAddGold?: (user: Users) => void,
	openBanUser?: (user: Users) => void,
): ColumnDef<Users>[] => [
		{
			id: "select",
			header: ({ table }) => (
				<Checkbox
					checked={
						table.getIsAllPageRowsSelected() ||
						(table.getIsSomePageRowsSelected() && "indeterminate")
					}
					onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
					aria-label="Select all"
				/>
			),
			cell: ({ row }) => (
				<Checkbox
					checked={row.getIsSelected()}
					onCheckedChange={(value) => row.toggleSelected(!!value)}
					aria-label="Select row"
				/>
			),
			enableSorting: false,
			enableHiding: false,
		},
		{
			accessorKey: "id",
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						ID
						<ArrowUpDown className="ml-2 h-4 w-4" />
					</Button>
				)
			},
			cell: ({ row }) => <EditableIdCell row={row} updateData={updateData} />,
		},
		{
			accessorKey: "name",
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						Name
						<ArrowUpDown className="ml-2 h-4 w-4" />
					</Button>
				)
			},
			cell: ({ row }) => {
				return (
					<div className="px-2 py-1">
						{row.original.name}
					</div>
				);
			},
		},
		{
			accessorKey: "email",
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						Email
						<ArrowUpDown className="ml-2 h-4 w-4" />
					</Button>
				)
			},
			cell: ({ row }) => <EditableEmailCell row={row} updateData={updateData} />,
		},
		{
			accessorKey: "current_cash",
			header: "Current Cash",
			cell: ({ row }) => {
				const cash = row.original.current_cash ?? 0;
				return (
					<div className="px-2 py-1 text-green-600 dark:text-green-400 font-semibold">
						{Math.floor(cash).toLocaleString('en-US')}
					</div>
				);
			},
		},
		{
			accessorKey: "role",
			header: "Role",
			cell: ({ row }) => <EditableRoleCell row={row} updateData={updateData} availableRoles={availableRoles} />,
		},
		{
			id: "actions",
			cell: ({ row }) => {
				const user = row.original

				return (
					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button variant="ghost" className="h-8 w-8 p-0">
								<span className="sr-only">Open menu</span>
								<MoreHorizontal className="h-4 w-4" />
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end">
							<DropdownMenuLabel>Actions</DropdownMenuLabel>

							<DropdownMenuSeparator />

							{openAddGold && (
								<DropdownMenuItem
									onClick={() => openAddGold(user)}
								>
									<Coins className="mr-2 h-4 w-4" />
									Add Gold
								</DropdownMenuItem>
							)}
							{openBanUser && (
								<DropdownMenuItem
									onClick={() => openBanUser(user)}
									className="text-destructive focus:text-destructive"
								>
									<Ban className="mr-2 h-4 w-4" />
									Ban User
								</DropdownMenuItem>
							)}
						</DropdownMenuContent>
					</DropdownMenu>
				)
			},
		},
	]