import { clientsApi } from '@/admin/api/clients';
import type {
	Booking,
	BookingStatus,
	CreateBookingData,
	OrderBulkAction,
} from '@/admin/api/orders';
import { ordersApi } from '@/admin/api/orders';
import { programsApi } from '@/admin/api/programs';
import { ordersQuery } from '@/admin/queries/orders';
import { DataTable } from '@/components/table';
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { BulkActionBar } from '@/components/ui/bulk-action-bar';
import { Button, buttonVariants } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import {
	Dialog,
	DialogContent,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from '@/components/ui/dialog';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import {
	InputGroup,
	InputGroupAddon,
	InputGroupInput,
} from '@/components/ui/input-group';
import { Label } from '@/components/ui/label';
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from '@/components/ui/popover';
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinner';
import { Textarea } from '@/components/ui/textarea';
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
import { cn } from '@/lib/utils';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { getRouteApi } from '@tanstack/react-router';
import { createColumnHelper } from '@tanstack/react-table';
import { dateI18n, getSettings } from '@wordpress/date';
import { __, sprintf } from '@wordpress/i18n';
import {
	CalendarIcon,
	CheckCircle2,
	Clock,
	EyeIcon,
	MoreVertical,
	Plus,
	SearchIcon,
	Trash2,
	X,
	XCircle,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import type { DateRange } from 'react-day-picker';
import { toast } from 'sonner';

const routeApi = getRouteApi('/_app/orders/');

const col = createColumnHelper<Booking>();

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

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 ADD_ORDER_DEFAULTS = {
	client_id: '',
	program_id: '',
	status: 'pending' as 'pending' | 'confirmed',
	payment_method: 'offline' as const,
	amount: '',
	currency: 'USD',
	notes: '',
};

function formatDateRange(range: DateRange): string {
	const fmt = (d: Date) =>
		dateI18n(getSettings().formats.date, d.toISOString());

	if (range.from && range.to) {
		return `${fmt(range.from)} – ${fmt(range.to)}`;
	}
	if (range.from) {
		return fmt(range.from);
	}
	return '';
}

const toDateStr = (d: Date) => d.toISOString().split('T')[0];

const Orders = () => {
	const queryClient = useQueryClient();
	const navigate = routeApi.useNavigate();
	const search = routeApi.useSearch();

	const [calendarOpen, setCalendarOpen] = useState(false);
	const [deleteTargetId, setDeleteTargetId] = useState<number | null>(null);
	const [selectedOrders, setSelectedOrders] = useState<Booking[]>([]);
	const [bulkDeleteConfirm, setBulkDeleteConfirm] = useState(false);
	const [resetSelectionKey, setResetSelectionKey] = useState(0);
	const [editTarget, setEditTarget] = useState<Booking | null>(null);
	const [editNotes, setEditNotes] = useState('');
	const [addDialogOpen, setAddDialogOpen] = useState(false);
	const [addForm, setAddForm] = useState(ADD_ORDER_DEFAULTS);
	const [searchInput, setSearchInput] = useState(search.search);
	const debouncedSearch = useDebouncedValue(searchInput);

	// Sync input when URL changes externally (e.g. browser back/forward)
	useEffect(() => {
		setSearchInput(search.search);
	}, [search.search]);

	// Update URL after debounce
	useEffect(() => {
		if (debouncedSearch !== search.search) {
			setFilter({ search: debouncedSearch });
		}
	}, [debouncedSearch]);

	const setFilter = (updates: Partial<typeof search>) => {
		navigate({ search: { ...search, ...updates, page: 1 } });
	};

	// Convert URL string params to DateRange for Calendar
	const dateRange: DateRange | undefined = search.from_date
		? {
				from: new Date(search.from_date + 'T00:00:00'),
				to: search.to_date ? new Date(search.to_date + 'T00:00:00') : undefined,
			}
		: undefined;

	const {
		data: ordersData,
		isLoading: ordersLoading,
		isFetching: ordersFetching,
	} = useQuery(
		ordersQuery({
			page: search.page,
			per_page: search.per_page,
			search: debouncedSearch || undefined,
			status: search.status,
			from_date: search.from_date,
			to_date: search.to_date,
		}),
	);

	const { data: clientsData } = useQuery({
		queryKey: ['clients', 'all'],
		queryFn: () => clientsApi.list({ per_page: 100 }),
		enabled: addDialogOpen,
	});

	const { data: programsData } = useQuery({
		queryKey: ['programs', 'all'],
		queryFn: () => programsApi.list({ per_page: 100 }),
		enabled: addDialogOpen,
	});

	const orders = ordersData?.orders ?? [];
	const total = ordersData?.total ?? 0;

	const openAdd = () => {
		setAddForm(ADD_ORDER_DEFAULTS);
		setAddDialogOpen(true);
	};

	const createOrder = useMutation({
		mutationFn: (data: CreateBookingData) => ordersApi.create(data),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ['orders'] });
			toast.success(__('Order created.', 'allcoach'));
			setAddDialogOpen(false);
		},
		onError: () => {
			toast.error(__('Failed to create order. Please try again.', 'allcoach'));
		},
	});

	const handleCreateOrder = () => {
		if (!addForm.client_id || !addForm.program_id) return;
		const payload: CreateBookingData = {
			client_id: Number(addForm.client_id),
			program_id: Number(addForm.program_id),
			status: addForm.status,
			payment_method: addForm.payment_method,
			amount: addForm.amount ? Number(addForm.amount) : undefined,
			currency: addForm.currency.trim() || undefined,
			notes: addForm.notes.trim() || undefined,
		};
		createOrder.mutate(payload);
	};

	const confirmBooking = useMutation({
		mutationFn: (id: number) => ordersApi.confirm(id),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ['orders'] });
			toast.success(__('Order confirmed.', 'allcoach'));
			setEditTarget(null);
		},
		onError: () => {
			toast.error(__('Failed to confirm order.', 'allcoach'));
		},
	});

	const cancelBooking = useMutation({
		mutationFn: (id: number) => ordersApi.cancel(id),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ['orders'] });
			toast.success(__('Order cancelled.', 'allcoach'));
			setEditTarget(null);
		},
		onError: () => {
			toast.error(__('Failed to cancel order.', 'allcoach'));
		},
	});

	const reactivateBooking = useMutation({
		mutationFn: (id: number) => ordersApi.reactivate(id),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ['orders'] });
			toast.success(__('Order reactivated.', 'allcoach'));
			setEditTarget(null);
		},
		onError: () => {
			toast.error(__('Failed to reactivate order.', 'allcoach'));
		},
	});

	const deleteBooking = useMutation({
		mutationFn: (id: number) => ordersApi.delete(id),
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ['orders'] });
			toast.success(__('Order deleted.', 'allcoach'));
		},
		onError: () => {
			toast.error(__('Failed to delete order.', 'allcoach'));
		},
	});

	const bulkAction = useMutation({
		mutationFn: ({ action, ids }: { action: OrderBulkAction; ids: number[] }) =>
			ordersApi.bulk(action, ids),
		onSuccess: (result) => {
			queryClient.invalidateQueries({ queryKey: ['orders'] });
			setResetSelectionKey((k) => k + 1);
			if (result.failed === 0) {
				toast.success(
					sprintf(
						/* translators: %d: number of orders updated */
						__('%d order(s) updated.', 'allcoach'),
						result.processed,
					),
				);
			} else {
				toast.warning(
					sprintf(
						/* translators: %1$d: number of succeeded actions, %2$d: number of failed actions */
						__('%1$d succeeded, %2$d failed.', 'allcoach'),
						result.processed,
						result.failed,
					),
				);
			}
		},
		onError: () => {
			toast.error(__('Bulk action failed. Please try again.', 'allcoach'));
		},
	});

	const openEdit = (booking: Booking) => {
		setEditTarget(booking);
		setEditNotes(booking.notes ?? '');
	};

	const columns = [
		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: () => <div className="w-full text-right">{__('Actions')}</div>,
			cell: ({ row }) => {
				const booking = row.original;
				return (
					<div className="flex items-center justify-end gap-1.5 text-xs font-medium">
						<Button
							variant="outline"
							size="xs"
							className="w-18 cursor-pointer"
							onClick={() => openEdit(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={() => openEdit(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={() => setDeleteTargetId(booking.id)}
								>
									<Trash2 className="size-3.5" />
									{__('Delete', 'allcoach')}
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
				);
			},
		}),
	];

	const toolbar = (
		<div className="flex flex-wrap items-center gap-3">
			{/* Search */}
			<div className="relative w-full md:w-72">
				<InputGroup>
					<InputGroupInput
						value={searchInput}
						onChange={(e) => setSearchInput(e.target.value)}
						id="orders-search"
						placeholder={__('Search client or program…', 'allcoach')}
					/>
					<InputGroupAddon align="inline-start">
						<SearchIcon className="text-muted-foreground" />
					</InputGroupAddon>
				</InputGroup>
			</div>

			{/* Date range picker */}
			<Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
				<PopoverTrigger asChild>
					<Button
						variant="outline"
						className={cn(
							'w-full justify-start gap-2 text-start font-normal md:w-[300px]',
							!dateRange && 'text-muted-foreground',
						)}
					>
						<CalendarIcon className="size-4 shrink-0" />
						{dateRange?.from
							? formatDateRange(dateRange)
							: __('Pick a date range', 'allcoach')}
						{dateRange?.from && (
							<span
								role="button"
								className="ms-auto inline-flex size-4 items-center justify-center rounded-full hover:bg-gray-200"
								onClick={(e) => {
									e.stopPropagation();
									setFilter({ from_date: undefined, to_date: undefined });
								}}
							>
								<X className="size-3" />
							</span>
						)}
					</Button>
				</PopoverTrigger>
				<PopoverContent className="w-auto p-0" align="start">
					<Calendar
						mode="range"
						selected={dateRange}
						onSelect={(range) => {
							setFilter({
								from_date: range?.from ? toDateStr(range.from) : undefined,
								to_date: range?.to ? toDateStr(range.to) : undefined,
							});
							if (range?.from && range?.to) {
								setCalendarOpen(false);
							}
						}}
						numberOfMonths={2}
						autoFocus
					/>
				</PopoverContent>
			</Popover>

			{/* Status filter */}
			<Select
				value={search.status ?? 'all'}
				onValueChange={(value) =>
					setFilter({
						status: value === 'all' ? undefined : (value as BookingStatus),
					})
				}
			>
				<SelectTrigger className="w-full md:w-[180px]">
					<SelectValue placeholder="Status" />
				</SelectTrigger>
				<SelectContent>
					<SelectGroup>
						<SelectItem value="all">{__('All Status', 'allcoach')}</SelectItem>
						<SelectItem value="pending">{__('Pending', 'allcoach')}</SelectItem>
						<SelectItem value="confirmed">
							{__('Confirmed', 'allcoach')}
						</SelectItem>
						<SelectItem value="cancelled">
							{__('Cancelled', 'allcoach')}
						</SelectItem>
					</SelectGroup>
				</SelectContent>
			</Select>
			<Button
				onClick={openAdd}
				className="w-full cursor-pointer md:ms-auto md:w-auto"
			>
				<Plus />
				{__('New Order', 'allcoach')}
			</Button>
		</div>
	);

	const isAddFormValid = !!addForm.client_id && !!addForm.program_id;

	return (
		<div className="min-h-screen p-4 md:p-6">
			<DataTable
				data={orders}
				columns={columns}
				enableRowSelection
				toolbar={toolbar}
				isLoading={ordersLoading}
				isFetching={ordersFetching}
				rowsPerPageLabel={__('Orders per page', 'allcoach')}
				pageSizeOptions={[10, 25, 50, 100]}
				serverPagination={{
					total,
					page: search.page,
					perPage: search.per_page,
					onPageChange: (page) => navigate({ search: { ...search, page } }),
					onPerPageChange: (perPage) =>
						setFilter({ per_page: perPage as typeof search.per_page }),
				}}
				onSelectionChange={(rows) => setSelectedOrders(rows as Booking[])}
				resetSelectionKey={resetSelectionKey}
			/>

			{/* Add Order dialog */}
			<Dialog
				open={addDialogOpen}
				onOpenChange={(open) => setAddDialogOpen(open)}
			>
				<DialogContent className="flex max-h-[90svh] flex-col overflow-hidden sm:max-w-lg">
					<DialogHeader>
						<DialogTitle>{__('New Order', 'allcoach')}</DialogTitle>
					</DialogHeader>

					<div className="flex flex-col gap-4 overflow-x-hidden overflow-y-auto pt-2 pb-4">
						{/* Client */}
						<div className="flex flex-col gap-1.5">
							<Label htmlFor="new-order-client">
								{__('Client', 'allcoach')}{' '}
								<span className="text-red-500">*</span>
							</Label>
							<Select
								value={addForm.client_id}
								onValueChange={(v) =>
									setAddForm((f) => ({ ...f, client_id: v }))
								}
							>
								<SelectTrigger id="new-order-client" className="w-full">
									<SelectValue
										placeholder={__('Select a client…', 'allcoach')}
									/>
								</SelectTrigger>
								<SelectContent className="!z-[999999] max-h-60">
									<SelectGroup>
										{(clientsData?.clients ?? []).map((c) => (
											<SelectItem key={c.id} value={String(c.id)}>
												<span className="font-medium">{c.name}</span>
												<span className="ms-1.5 text-xs text-gray-400">
													{c.email}
												</span>
											</SelectItem>
										))}
									</SelectGroup>
								</SelectContent>
							</Select>
						</div>

						{/* Program */}
						<div className="flex flex-col gap-1.5">
							<Label htmlFor="new-order-program">
								{__('Program', 'allcoach')}{' '}
								<span className="text-red-500">*</span>
							</Label>
							<Select
								value={addForm.program_id}
								onValueChange={(v) =>
									setAddForm((f) => ({ ...f, program_id: v }))
								}
							>
								<SelectTrigger id="new-order-program" className="w-full">
									<SelectValue
										placeholder={__('Select a program…', 'allcoach')}
									/>
								</SelectTrigger>
								<SelectContent className="!z-[999999] max-h-60">
									<SelectGroup>
										{(programsData?.programs ?? []).map((p) => (
											<SelectItem key={p.id} value={String(p.id)}>
												{p.title}
											</SelectItem>
										))}
									</SelectGroup>
								</SelectContent>
							</Select>
						</div>

						{/* Status */}
						<div className="flex flex-col gap-1.5">
							<Label htmlFor="new-order-status">
								{__('Status', 'allcoach')}
							</Label>
							<Select
								value={addForm.status}
								onValueChange={(v) =>
									setAddForm((f) => ({
										...f,
										status: v as 'pending' | 'confirmed',
									}))
								}
							>
								<SelectTrigger id="new-order-status" className="w-full">
									<SelectValue />
								</SelectTrigger>
								<SelectContent className="!z-[999999]">
									<SelectItem value="pending">
										{__('Pending', 'allcoach')}
									</SelectItem>
									<SelectItem value="confirmed">
										{__('Confirmed', 'allcoach')}
									</SelectItem>
								</SelectContent>
							</Select>
						</div>

						{/* Payment Method */}
						<div className="flex flex-col gap-1.5">
							<Label htmlFor="new-order-payment-method">
								{__('Payment Method', 'allcoach')}
							</Label>
							<Select
								value={addForm.payment_method}
								onValueChange={(v) =>
									setAddForm((f) => ({ ...f, payment_method: v as 'offline' }))
								}
							>
								<SelectTrigger id="new-order-payment-method" className="w-full">
									<SelectValue />
								</SelectTrigger>
								<SelectContent className="!z-[999999]">
									<SelectItem value="offline">
										{__('Offline / Manual', 'allcoach')}
									</SelectItem>
								</SelectContent>
							</Select>
						</div>

						{/* Amount + Currency */}
						<div className="grid grid-cols-2 gap-3">
							<div className="flex flex-col gap-1.5">
								<Label htmlFor="new-order-amount">
									{__('Amount', 'allcoach')}
								</Label>
								<Input
									id="new-order-amount"
									type="number"
									min="0"
									step="0.01"
									value={addForm.amount}
									onChange={(e) =>
										setAddForm((f) => ({ ...f, amount: e.target.value }))
									}
									placeholder="0.00"
								/>
							</div>
							<div className="flex flex-col gap-1.5">
								<Label htmlFor="new-order-currency">
									{__('Currency', 'allcoach')}
								</Label>
								<Input
									id="new-order-currency"
									value={addForm.currency}
									onChange={(e) =>
										setAddForm((f) => ({
											...f,
											currency: e.target.value.toUpperCase(),
										}))
									}
									placeholder="USD"
									maxLength={3}
								/>
							</div>
						</div>

						{/* Notes */}
						<div className="flex flex-col gap-1.5">
							<Label htmlFor="new-order-notes">{__('Notes', 'allcoach')}</Label>
							<Textarea
								id="new-order-notes"
								value={addForm.notes}
								onChange={(e) =>
									setAddForm((f) => ({ ...f, notes: e.target.value }))
								}
								placeholder={__('Optional notes…', 'allcoach')}
								rows={3}
							/>
						</div>
					</div>

					<DialogFooter>
						<Button
							variant="outline"
							className="cursor-pointer"
							onClick={() => setAddDialogOpen(false)}
						>
							{__('Cancel', 'allcoach')}
						</Button>
						<Button
							className="cursor-pointer"
							disabled={!isAddFormValid || createOrder.isPending}
							onClick={handleCreateOrder}
						>
							{createOrder.isPending && <Spinner />}
							{__('Create Order', 'allcoach')}
						</Button>
					</DialogFooter>
				</DialogContent>
			</Dialog>

			{/* View dialog */}
			<Dialog
				open={editTarget !== null}
				onOpenChange={(open) => !open && setEditTarget(null)}
			>
				<DialogContent className="flex max-h-[90svh] flex-col overflow-hidden sm:max-w-3xl">
					<DialogHeader className="gap-0.5">
						<DialogTitle>
							{__('View Order', 'allcoach')} #{editTarget?.id}
						</DialogTitle>
						{editTarget && (
							<p className="text-xs text-gray-400">
								{dateI18n(getSettings().formats.date, editTarget.created_at)}{' '}
								{dateI18n(getSettings().formats.time, editTarget.created_at)}
							</p>
						)}
					</DialogHeader>

					{editTarget && (
						<div className="flex flex-col gap-4 overflow-x-hidden overflow-y-auto py-1 pb-4">
							{/* Detail rows */}
							<div className="divide-y divide-gray-100 text-sm">
								{[
									{
										label: __('Client', 'allcoach'),
										value: editTarget.client_name || `#${editTarget.client_id}`,
									},
									{
										label: __('Program', 'allcoach'),
										value:
											editTarget.program_title || `#${editTarget.program_id}`,
									},
									{
										label: __('Status', 'allcoach'),
										value: (
											<span
												className={cn(
													'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
													STATUS_STYLES[editTarget.status],
												)}
											>
												{STATUS_LABELS[editTarget.status]}
											</span>
										),
									},
									{
										label: __('Amount', 'allcoach'),
										value: `${editTarget.amount} ${editTarget.currency.toUpperCase()}`,
									},
									{
										label: __('Payment Method', 'allcoach'),
										value: (
											<span className="capitalize">
												{editTarget.payment_method}
											</span>
										),
									},
									{
										label: __('Payment Status', 'allcoach'),
										value: (
											<span className="capitalize">
												{editTarget.payment_status}
											</span>
										),
									},
									...(editTarget.transaction_id
										? [
												{
													label: __('Transaction ID', 'allcoach'),
													value: (
														<span className="font-mono break-all">
															{editTarget.transaction_id}
														</span>
													),
												},
											]
										: []),
									...(editTarget.paid_at
										? [
												{
													label: __('Paid At', 'allcoach'),
													value: `${dateI18n(getSettings().formats.date, editTarget.paid_at)} ${dateI18n(getSettings().formats.time, editTarget.paid_at)}`,
												},
											]
										: []),
								].map(({ label, value }) => (
									<div
										key={label}
										className="flex items-center justify-between gap-4 py-2.5"
									>
										<span className="shrink-0 text-gray-500">{label}</span>
										<span className="text-end font-medium text-gray-900">
											{value}
										</span>
									</div>
								))}
							</div>

							{/* Notes */}
							<div className="flex flex-col gap-1.5">
								<Label htmlFor="order-notes">{__('Notes', 'allcoach')}</Label>
								<Textarea
									id="order-notes"
									value={editNotes}
									onChange={(e) => setEditNotes(e.target.value)}
									placeholder={__('Add notes…', 'allcoach')}
									rows={3}
								/>
							</div>

							{/* Actions */}
							{editTarget.status !== 'completed' && (
								<div className="flex gap-2">
									{editTarget.status === 'pending' && (
										<Button
											variant="outline"
											size="sm"
											className="cursor-pointer border-teal-200 text-teal-600 hover:bg-teal-50"
											disabled={confirmBooking.isPending}
											onClick={() => confirmBooking.mutate(editTarget.id)}
										>
											{__('Confirm Order', 'allcoach')}
										</Button>
									)}
									{editTarget.status === 'cancelled' && (
										<>
											<Button
												variant="outline"
												size="sm"
												className="cursor-pointer border-teal-200 text-teal-600 hover:bg-teal-50"
												disabled={reactivateBooking.isPending}
												onClick={() => reactivateBooking.mutate(editTarget.id)}
											>
												{__('Set Pending', 'allcoach')}
											</Button>
											<Button
												variant="outline"
												size="sm"
												className="cursor-pointer border-teal-200 text-teal-600 hover:bg-teal-50"
												disabled={confirmBooking.isPending}
												onClick={() => confirmBooking.mutate(editTarget.id)}
											>
												{__('Confirm Order', 'allcoach')}
											</Button>
										</>
									)}
									{(editTarget.status === 'pending' ||
										editTarget.status === 'confirmed') && (
										<Button
											variant="outline"
											size="sm"
											className="cursor-pointer border-red-200 text-red-600 hover:bg-red-50"
											disabled={cancelBooking.isPending}
											onClick={() => cancelBooking.mutate(editTarget.id)}
										>
											{__('Cancel Order', 'allcoach')}
										</Button>
									)}
								</div>
							)}
						</div>
					)}
				</DialogContent>
			</Dialog>

			{/* Delete confirmation */}
			<AlertDialog
				open={deleteTargetId !== null}
				onOpenChange={(open) => !open && setDeleteTargetId(null)}
			>
				<AlertDialogContent>
					<AlertDialogHeader>
						<AlertDialogTitle>
							{__('Delete Order', 'allcoach')}
						</AlertDialogTitle>
						<AlertDialogDescription>
							{__(
								'Are you sure you want to delete this order? This action cannot be undone.',
								'allcoach',
							)}
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel className="cursor-pointer">
							{__('Cancel', 'allcoach')}
						</AlertDialogCancel>
						<AlertDialogAction
							className="cursor-pointer bg-red-600 hover:bg-red-700"
							onClick={() => {
								if (deleteTargetId !== null) {
									deleteBooking.mutate(deleteTargetId);
									setDeleteTargetId(null);
								}
							}}
						>
							{__('Delete', 'allcoach')}
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
			{/* Bulk delete confirm */}
			<AlertDialog
				open={bulkDeleteConfirm}
				onOpenChange={(open) => !open && setBulkDeleteConfirm(false)}
			>
				<AlertDialogContent>
					<AlertDialogHeader>
						<AlertDialogTitle>
							{__('Delete Orders', 'allcoach')}
						</AlertDialogTitle>
						<AlertDialogDescription>
							{__(
								`Are you sure you want to delete ${selectedOrders.length} order(s)? This action cannot be undone.`,
								'allcoach',
							)}
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel className="cursor-pointer">
							{__('Cancel', 'allcoach')}
						</AlertDialogCancel>
						<AlertDialogAction
							className="cursor-pointer bg-red-600 hover:bg-red-700"
							onClick={() => {
								bulkAction.mutate({
									action: 'delete',
									ids: selectedOrders.map((o) => o.id),
								});
								setBulkDeleteConfirm(false);
							}}
						>
							{__('Delete', 'allcoach')}
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>

			{/* Bulk action bar */}
			<BulkActionBar
				count={selectedOrders.length}
				isPending={bulkAction.isPending}
				onDismiss={() => setResetSelectionKey((k) => k + 1)}
				actions={[
					{
						label: __('Confirm', 'allcoach'),
						icon: <CheckCircle2 className="size-3.5" />,
						variant: 'success',
						onClick: () =>
							bulkAction.mutate({
								action: 'confirm',
								ids: selectedOrders.map((o) => o.id),
							}),
					},
					{
						label: __('Set Pending', 'allcoach'),
						icon: <Clock className="size-3.5" />,
						onClick: () =>
							bulkAction.mutate({
								action: 'reactivate',
								ids: selectedOrders.map((o) => o.id),
							}),
					},
					{
						label: __('Cancel', 'allcoach'),
						icon: <XCircle className="size-3.5" />,
						onClick: () =>
							bulkAction.mutate({
								action: 'cancel',
								ids: selectedOrders.map((o) => o.id),
							}),
					},
					{
						label: __('Delete', 'allcoach'),
						icon: <Trash2 className="size-3.5" />,
						variant: 'danger',
						onClick: () => setBulkDeleteConfirm(true),
					},
				]}
			/>
		</div>
	);
};

export default Orders;