import type { Booking, BookingStatus } from '@/admin/api/orders';
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';

export const STATUS_LABELS: Record<BookingStatus, string> = {
	pending: __('Pending', 'allcoach'),
	confirmed: __('Confirmed', 'allcoach'),
	cancelled: __('Cancelled', 'allcoach'),
	completed: __('Completed', 'allcoach'),
};

export const STATUS_STYLES: Record<BookingStatus, string> = {
	pending: 'bg-yellow-50 text-yellow-700 border-yellow-200',
	confirmed: 'bg-teal-50 text-teal-700 border-teal-200',
	cancelled: 'bg-red-50 text-red-600 border-red-200',
	completed: 'bg-gray-100 text-gray-600 border-gray-200',
};

const col = createColumnHelper<Booking>();

export function createOrderColumns({
	onView,
	onDelete,
}: {
	onView: (booking: Booking) => void;
	onDelete: (id: number) => void;
}) {
	return [
		col.accessor('id', {
			header: 'ID',
			cell: ({ getValue }) => (
				<span className="font-mono text-sm text-gray-500">#{getValue()}</span>
			),
		}),
		col.accessor('created_at', {
			header: 'Date / Time',
			cell: ({ getValue }) => {
				const val = getValue();
				return (
					<div className="flex flex-col gap-0.5">
						<span className="text-gray-700">
							{dateI18n(getSettings().formats.date, val)}
						</span>
						<span className="text-xs text-gray-400">
							{dateI18n(getSettings().formats.time, val)}
						</span>
					</div>
				);
			},
		}),
		col.accessor('client_name', {
			header: 'Client',
			cell: ({ getValue, row }) => (
				<span className="font-semibold text-gray-800">
					{getValue() || `#${row.original.client_id}`}
				</span>
			),
		}),
		col.accessor('program_title', {
			header: 'Program',
			cell: ({ getValue, row }) => (
				<span className="font-medium text-gray-700">
					{getValue() || `#${row.original.program_id}`}
				</span>
			),
		}),
		col.accessor('status', {
			header: 'Status',
			cell: ({ getValue }) => {
				const status = getValue() as BookingStatus;
				return (
					<span
						className={cn(
							'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
							STATUS_STYLES[status],
						)}
					>
						{STATUS_LABELS[status]}
					</span>
				);
			},
		}),
		col.display({
			id: 'actions',
			header: 'Actions',
			cell: ({ row }) => {
				const booking = row.original;
				return (
					<div className="flex items-center gap-1.5">
						<Button
							variant="outline"
							size="xs"
							className="w-18 cursor-pointer"
							onClick={() => onView(booking)}
						>
							<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(booking)}
								>
									<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(booking.id)}
								>
									<Trash2 className="size-3.5" />
									{__('Delete', 'allcoach')}
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
				);
			},
		}),
	];
}