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

const col = createColumnHelper<Program>();

export function createProgramColumns({
	onEdit,
	onDelete,
	onToggleStatus,
}: {
	onEdit: (id: number) => void;
	onDelete: (id: number) => void;
	onToggleStatus: (id: number, is_active: boolean) => void;
}) {
	return [
		col.display({
			id: 'program',
			header: 'Program',
			cell: ({ row }) => (
				<div className="flex flex-col gap-1">
					<button
						className="hover:text-primary cursor-pointer text-start font-semibold text-gray-700"
						onClick={() => onEdit(row.original.id)}
					>
						{row.original.title}
					</button>
					<div className="flex flex-wrap gap-1">
						{row.original.categories.map((c) => (
							<span
								key={c.id}
								className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500"
							>
								{c.name}
							</span>
						))}
					</div>
				</div>
			),
		}),
		col.accessor('booking_count', {
			header: 'Clients',
			cell: ({ getValue }) => (
				<span className="font-medium text-gray-500">{getValue()}</span>
			),
		}),
		col.display({
			id: 'price',
			header: 'Price',
			cell: ({ row }) => {
				const { is_free, amount, currency } = row.original.price;
				if (is_free) {
					return (
						<span className="rounded-full bg-teal-50 px-2 py-0.5 text-xs font-medium text-teal-600">
							{__('Free', 'allcoach')}
						</span>
					);
				}
				const currencyData = __ALLCOACH_ADMIN__.currencies.find(
					(c) => c.code === currency,
				);
				const label = currencyData
					? `${currency} (${currencyData.symbol})`
					: currency;
				return (
					<span className="text-xs font-medium text-gray-700">
						{amount} {label}
					</span>
				);
			},
		}),
		col.accessor('created_at', {
			header: 'Created Date',
			cell: ({ getValue }) => (
				<span className="text-gray-500">
					{dateI18n(getSettings().formats.date, getValue())}
				</span>
			),
		}),
		col.display({
			id: 'status',
			header: 'Status',
			cell: ({ row }) => {
				const active = row.original.is_active;
				const switchId = `status-switch-${row.original.id}`;
				return (
					<div className="flex items-center gap-2">
						<Switch
							className="cursor-pointer"
							id={switchId}
							checked={active}
							onCheckedChange={(checked) =>
								onToggleStatus(row.original.id, checked)
							}
						/>
						<Label
							htmlFor={switchId}
							className={cn(
								'text-xs',
								active ? 'text-primary' : 'text-gray-600',
							)}
						>
							{active ? __('Active', 'allcoach') : __('Draft', 'allcoach')}
						</Label>
					</div>
				);
			},
		}),
		col.display({
			id: 'actions',
			header: 'Actions',
			cell: ({ row }) => {
				const id = row.original.id;
				return (
					<div className="flex items-center gap-1.5">
						<Button
							variant="outline"
							size="xs"
							className="w-18 cursor-pointer"
							onClick={() => onEdit(id)}
						>
							<PencilIcon /> {__('Edit', '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={() => onEdit(id)}
								>
									<PencilIcon className="size-3.5" />
									{__('Edit', 'allcoach')}
								</DropdownMenuItem>
								<DropdownMenuItem
									className="cursor-pointer text-red-600 focus:bg-red-50 focus:text-red-600"
									onClick={() => onDelete(id)}
								>
									<Trash2 className="size-3.5" />
									{__('Delete', 'allcoach')}
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
				);
			},
		}),
	];
}