// components/admin/trusted-client/TrustedClientTable.tsx
'use client';
import { ColumnDefinition } from '@/types/table';
import { TrustedClient } from '@/lib/modules/trusted-client/trusted-client.types';
import { Badge } from '@/components/ui/badge';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Globe, ExternalLink, Building2 } from 'lucide-react';

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

// Define columns for the trusted clients table
export const trustedClientColumns: ColumnDefinition<TrustedClient>[] = [
	{
		id: 'name',
		accessorKey: 'name',
		header: 'Client',
		sortable: true,
		filterable: true,
		cell: (client) => (
			<motion.div
				initial={{ opacity: 0, x: -10 }}
				animate={{ opacity: 1, x: 0 }}
				className="flex items-center gap-3"
			>
				<div className="relative w-10 h-10 rounded-lg overflow-hidden bg-linear-to-br from-primary/10 to-primary/5 border border-primary/20 group-hover:border-primary/40 transition-all duration-300">
					{client.logo ? (
						<img
							src={client.logo}
							alt={client.name}
							className="w-full h-full object-cover"
						/>
					) : (
						<div className="w-full h-full flex items-center justify-center">
							<Building2 className="w-5 h-5 text-primary/40" />
						</div>
					)}
				</div>
				<span className="font-medium text-foreground/90">
					{client.name}
				</span>
			</motion.div>
		),
	},
	{
		id: 'link',
		accessorKey: 'link',
		header: 'Website',
		sortable: true,
		filterable: true,
		cell: (client) => (
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				transition={{ delay: 0.05 }}
			>
				{client.link ? (
					<Link
						href={client.link}
						target="_blank"
						rel="noopener noreferrer"
						className="inline-flex items-center gap-2 text-primary/80 hover:text-primary transition-colors group"
					>
						<Globe className="w-4 h-4" />
						<span className="text-sm truncate max-w-[150px]">
							{client.link.replace(/^https?:\/\//, '')}
						</span>
						<ExternalLink className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
					</Link>
				) : (
					<span className="text-sm text-foreground/40">—</span>
				)}
			</motion.div>
		),
	},
	{
		id: 'isActive',
		accessorKey: 'isActive',
		header: 'Status',
		sortable: true,
		filterable: true,
		cell: (client) => (
			<motion.div
				initial={{ opacity: 0, scale: 0.8 }}
				animate={{ opacity: 1, scale: 1 }}
				transition={{ delay: 0.1 }}
			>
				<Badge
					className={`
                        px-3 py-1 rounded-full text-xs font-semibold
                        ${
									client.isActive
										? 'bg-primary/20 text-primary border border-primary/30'
										: 'bg-secondary text-foreground/60 border border-primary/10'
								}
                    `}
				>
					{client.isActive ? 'Active' : 'Inactive'}
				</Badge>
			</motion.div>
		),
	},
	{
		id: 'createdAt',
		accessorKey: 'createdAt',
		header: 'Created',
		sortable: true,
		filterable: true,
		cell: (client) => (
			<motion.span
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				transition={{ delay: 0.15 }}
				className="text-sm text-foreground/60"
			>
				{formatDate(client.createdAt)}
			</motion.span>
		),
	},
];