// components/admin/reservations/ReservationTableColumns.tsx
'use client';

import { ColumnDefinition } from '@/types/table';
import { Badge } from '@/components/ui/badge';
import { motion } from 'framer-motion';
import { CalendarDays, MapPin, Users, Phone, User } from 'lucide-react';
import { Reservation } from '@/types';

// Format date helper
export const formatDate = (date: Date) => {
	return new Intl.DateTimeFormat('en-US', {
		year: 'numeric',
		month: 'short',
		day: 'numeric',
	}).format(new Date(date));
};

export const reservationColumns: ColumnDefinition<Reservation>[] = [
	{
		id: 'customer',
		header: 'Customer',
		sortable: true,
		cell: (reservation) => (
			<motion.div
				initial={{ opacity: 0, x: -10 }}
				animate={{ opacity: 1, x: 0 }}
				className="flex items-center gap-2"
			>
				<User className="w-4 h-4 text-primary/60" />
				<div className="flex flex-col">
					<span className="font-medium text-foreground">
						{reservation.firstName} {reservation.lastName}
					</span>
					<span className="text-xs text-muted-foreground flex items-center gap-1">
						<Phone className="w-3 h-3" />
						{reservation.phone}
					</span>
				</div>
			</motion.div>
		),
	},

	{
		id: 'service',
		accessorKey: 'serviceType',
		header: 'Service',
		sortable: true,
		cell: (reservation) => (
			<span className="text-sm font-medium text-foreground/90">
				{reservation.serviceType}
			</span>
		),
	},

	{
		id: 'route',
		header: 'Route',
		cell: (reservation) => (
			<div className="text-sm space-y-1">
				<div className="flex items-center gap-1 text-muted-foreground">
					<MapPin className="w-3 h-3 text-primary" />
					<span className="truncate max-w-[160px]">
						{reservation.pickupAddress}
					</span>
				</div>
				<div className="flex items-center gap-1 text-muted-foreground">
					<MapPin className="w-3 h-3 text-primary/60" />
					<span className="truncate max-w-[160px]">
						{reservation.dropoffAddress}
					</span>
				</div>
			</div>
		),
	},

	{
		id: 'pickup',
		header: 'Pickup',
		sortable: true,
		cell: (reservation) => (
			<div className="flex items-center gap-2 text-sm">
				<CalendarDays className="w-4 h-4 text-primary/70" />
				<div className="flex flex-col">
					<span>{formatDate(reservation.pickupDate)}</span>
					<span className="text-xs text-muted-foreground">
						{reservation.pickupTime}
					</span>
				</div>
			</div>
		),
	},

	{
		id: 'passengers',
		header: 'Passengers',
		sortable: true,
		cell: (reservation) => (
			<div className="flex items-center gap-1 text-sm">
				<Users className="w-4 h-4 text-primary/70" />
				{reservation.passengers}
			</div>
		),
	},

	{
		id: 'status',
		accessorKey: 'status',
		header: 'Status',
		sortable: true,
		cell: (reservation) => {
			const statusStyles = {
				PENDING: 'bg-yellow-500/20 text-yellow-500 border-yellow-500/30',
				CONFIRMED: 'bg-primary/20 text-primary border-primary/30',
				CANCELLED: 'bg-red-500/20 text-red-500 border-red-500/30',
				COMPLETED: 'bg-green-500/20 text-green-500 border-green-500/30',
				CHECKED_IN: 'bg-blue-500/20 text-blue-500 border-blue-500/30',
				NO_SHOW: 'bg-gray-500/20 text-gray-500 border-gray-500/30',
				FAILED: 'bg-red-500/20 text-red-500 border-red-500/30',
			};

			return (
				<Badge
					className={`px-3 py-1 rounded-full text-xs font-medium border ${
						statusStyles[reservation.status]
					}`}
				>
					{reservation.status}
				</Badge>
			);
		},
	},

	{
		id: 'createdAt',
		accessorKey: 'createdAt',
		header: 'Created',
		sortable: true,
		cell: (reservation) => (
			<span className="text-sm text-muted-foreground">
				{formatDate(reservation.createdAt)}
			</span>
		),
	},
];