import { motion } from 'framer-motion';
// ------------------------------------------------------
// Columns definition
import { ColumnDefinition } from '@/types/table';
import { Badge } from '@/components/ui/badge';
import { AdminAccount } from '@/app/generated/prisma/client';

// ------------------------------------------------------
// Format date helper
// ------------------------------------------------------
const formatDate = (date?: string | Date) =>
	date
		? new Intl.DateTimeFormat('en-US', {
				year: 'numeric',
				month: 'short',
				day: 'numeric',
				hour: '2-digit',
				minute: '2-digit',
			}).format(new Date(date))
		: '-';

// ------------------------------------------------------
// Type for table row
type AdminRow = AdminAccount;

// ------------------------------------------------------
export const adminColumns: ColumnDefinition<AdminRow>[] = [
	{
		id: 'profileImage',
		accessorKey: 'profileImage',
		header: 'Avatar',
		cell: (admin) => (
			<motion.img
				initial={{ opacity: 0, scale: 0.8 }}
				animate={{ opacity: 1, scale: 1 }}
				src={admin.profileImage ?? '/default-avatar.png'}
				alt={admin.fullName}
				className="w-10 h-10 rounded-full object-cover"
			/>
		),
	},
	{
		id: 'fullName',
		accessorKey: 'fullName',
		header: 'Name',
		sortable: true,
		filterable: true,
		cell: (admin) => (
			<motion.div
				initial={{ opacity: 0, x: -10 }}
				animate={{ opacity: 1, x: 0 }}
			>
				<span className="font-medium text-foreground/90">
					{admin.fullName}
				</span>
			</motion.div>
		),
	},
	{
		id: 'email',
		accessorKey: 'email',
		header: 'Email',
		sortable: true,
		filterable: true,
		cell: (admin) => (
			<motion.span
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				className="text-sm text-foreground/80 truncate max-w-[200px]"
			>
				{admin.email}
			</motion.span>
		),
	},
	{
		id: 'role',
		accessorKey: 'role',
		header: 'Role',
		sortable: true,
		filterable: true,
		cell: (admin) => {
			const role = admin.role ?? 'Support';
			let badgeColor = 'bg-gray-200 text-gray-800';
			if (role === 'Admin') badgeColor = 'bg-red-100 text-red-800';
			else if (role === 'Support') badgeColor = 'bg-blue-100 text-blue-800';
			return (
				<Badge
					className={`px-2 py-1 text-xs font-medium rounded-full ${badgeColor}`}
				>
					{role}
				</Badge>
			);
		},
	},
	{
		id: 'isActive',
		accessorKey: 'isActive',
		header: 'Status',
		sortable: true,
		filterable: true,
		cell: (admin) => (
			<motion.div
				initial={{ opacity: 0, scale: 0.8 }}
				animate={{ opacity: 1, scale: 1 }}
			>
				<Badge
					className={`px-3 py-1 rounded-full text-xs font-semibold ${
						admin.isActive
							? 'bg-primary/20 text-primary border border-primary/30'
							: 'bg-secondary text-foreground/60 border border-primary/10'
					}`}
				>
					{admin.isActive ? 'Active' : 'Inactive'}
				</Badge>
			</motion.div>
		),
	},
	{
		id: 'lastLogin',
		accessorKey: 'lastLogin',
		header: 'Last Login',
		sortable: true,
		filterable: true,
		cell: (admin) => (
			<motion.span
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				className="text-sm text-foreground/60"
			>
				{formatDate(admin.lastLogin?.toString())}
			</motion.span>
		),
	},
	{
		id: 'createdAt',
		accessorKey: 'createdAt',
		header: 'Created',
		sortable: true,
		filterable: true,
		cell: (admin) => (
			<motion.span
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				className="text-sm text-foreground/60"
			>
				{formatDate(admin.createdAt)}
			</motion.span>
		),
	},
	{
		id: 'updatedAt',
		accessorKey: 'updatedAt',
		header: 'Updated',
		sortable: true,
		filterable: true,
		cell: (admin) => (
			<motion.span
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				className="text-sm text-foreground/60"
			>
				{formatDate(admin.updatedAt)}
			</motion.span>
		),
	},
];