import type { Client } from '@/admin/api/clients';
import { Button, buttonVariants } from '@/components/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import { createColumnHelper } from '@tanstack/react-table';
import { dateI18n, getSettings } from '@wordpress/date';
import { __ } from '@wordpress/i18n';
import { EyeIcon, MoreVertical, Trash2 } from 'lucide-react';

const col = createColumnHelper<Client>();

export function createClientColumns({
	onView,
	onDelete,
	getOrdersCount,
}: {
	onView: (client: Client) => void;
	onDelete: (id: number) => void;
	getOrdersCount: (clientId: number) => number;
}) {
	return [
		col.accessor('id', {
			header: 'ID',
			cell: ({ getValue }) => (
				<span className="font-mono text-sm text-gray-500">#{getValue()}</span>
			),
		}),
		col.display({
			id: 'name',
			header: 'Name',
			cell: ({ row }) => (
				<div className="flex items-center gap-3">
					<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-teal-100 text-sm font-semibold text-teal-700">
						{row.original.name.charAt(0).toUpperCase()}
					</div>
					<span className="font-semibold text-gray-800">
						{row.original.name}
					</span>
				</div>
			),
		}),
		col.accessor('email', {
			header: 'Email',
			cell: ({ getValue }) => (
				<span className="text-gray-600">{getValue()}</span>
			),
		}),
		col.accessor('phone', {
			header: 'Phone',
			cell: ({ getValue }) => (
				<span className="text-gray-600">
					{getValue() ?? <span className="text-gray-300">—</span>}
				</span>
			),
		}),
		col.accessor('created_at', {
			header: 'Created',
			cell: ({ getValue }) => (
				<span className="text-gray-500">
					{dateI18n(getSettings().formats.date, getValue())}
				</span>
			),
		}),
		col.display({
			id: 'total_bookings',
			header: 'Total Orders',
			cell: ({ row }) => {
				const count = getOrdersCount(row.original.id);
				return <span className="font-medium text-gray-700">{count}</span>;
			},
		}),
		col.display({
			id: 'actions',
			header: 'Actions',
			cell: ({ row }) => {
				const client = row.original;
				return (
					<div className="flex items-center gap-1.5">
						<Button
							variant="outline"
							size="xs"
							className="w-18 cursor-pointer"
							onClick={() => onView(client)}
						>
							<EyeIcon /> {__('View', 'allcoach')}
						</Button>
						<DropdownMenu>
							<DropdownMenuTrigger
								className={cn(
									buttonVariants({ variant: 'outline', size: 'icon-xs' }),
									'cursor-pointer',
								)}
							>
								<MoreVertical className="size-4" />
							</DropdownMenuTrigger>
							<DropdownMenuContent align="end">
								<DropdownMenuItem
									className="cursor-pointer"
									onClick={() => onView(client)}
								>
									<EyeIcon className="size-3.5" />
									{__('View', 'allcoach')}
								</DropdownMenuItem>
								<DropdownMenuItem
									className="cursor-pointer text-red-600 focus:bg-red-50 focus:text-red-600"
									onClick={() => onDelete(client.id)}
								>
									<Trash2 className="size-3.5" />
									{__('Delete', 'allcoach')}
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
				);
			},
		}),
	];
}