'use client';

import Image from 'next/image';
import { useDeleteVehicleMutation } from '@/store/slice/vehicleApi';
import { useState } from 'react';

import { useSelector } from 'react-redux';
import { isAdminSelector } from '@/store/authSlice';
import { Pencil, Trash2 } from 'lucide-react';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import { toast } from 'sonner';
import { toastColor } from '@/constant/toast-color';

export function FleetCard({ fleet, onEdit }: any) {
	const isAdmin = useSelector(isAdminSelector);
	const [isOpen, setIsOpen] = useState(false);
	const [deleteVehicle, { isLoading }] = useDeleteVehicleMutation();

	const handleClose = () => setIsOpen(false);

	return (
		<div className="group relative rounded-2xl overflow-hidden  bg-card border border-border shadow-sm transition-all duration-500 hover:-translate-y-1 hover:shadow-xl hover:border-primary/30">
			{/* Image */}
			<div className="relative w-full aspect-4/3 overflow-hidden">
				<Image
					src={fleet.imageUrl || '/default/logo.png'}
					alt={fleet.name}
					fill
					className="object-cover transition-transform duration-700 group-hover:scale-105"
				/>

				{/* Gradient overlay */}
				<div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent" />

				{/* Status badge */}
				<div className="absolute top-4 right-4">
					<span
						className={`px-3 py-1 text-xs font-medium rounded-full backdrop-blur-md border
      ${
			fleet.isActive
				? 'bg-green-100 text-green-800 border-green-300' // Active: Green
				: 'bg-red-100 text-red-800 border-red-300' // Inactive: Red
		}`}
					>
						{fleet.isActive ? 'Active' : 'Inactive'}
					</span>
				</div>
			</div>

			{/* Content */}
			<div className="p-6 space-y-4">
				{/* Title */}
				<div>
					<h3 className="text-xl font-semibold text-foreground tracking-tight">
						{fleet.name}
					</h3>

					<div className="w-10 h-[2px] bg-primary mt-2 rounded-full" />
				</div>

				{/* Fleet Info */}
				<div className="flex items-center justify-between text-sm text-muted-foreground">
					<span className="flex items-center gap-2">
						<span className="text-foreground font-medium">
							{fleet.passengerMin} – {fleet.passengerMax}
						</span>
						passengers
					</span>
				</div>

				{/* Actions */}
				<div className="flex justify-end gap-2 pt-3">
					{/* Edit */}
					<button
						onClick={() => onEdit(fleet)}
						className="h-9 w-9 flex items-center justify-center rounded-lg
		bg-primary/10 text-primary
		transition-all duration-300
		hover:bg-primary hover:text-primary-foreground hover:scale-105"
						title="Edit Fleet"
					>
						<Pencil className="w-4 h-4" />
					</button>

					{/* Delete */}
					{isAdmin && (
						<button
							onClick={() => setIsOpen(true)}
							className="h-9 w-9 flex items-center justify-center rounded-lg
			bg-destructive/10 text-destructive
			transition-all duration-300
			hover:bg-destructive hover:text-white hover:scale-105"
							title="Delete Fleet"
						>
							<Trash2 className="w-4 h-4" />
						</button>
					)}
				</div>
			</div>
			<CustomResponsiveDialog
				open={isOpen}
				setOpen={handleClose}
				header={
					<div className="w-full">
						<h2 className="text-lg font-semibold text-foreground/90">
							Are you sure you want to delete this fleet?
						</h2>
						<p className="mt-1 text-sm text-foreground/60">
							This action cannot be undone. All associated data will be
							permanently deleted.
						</p>
					</div>
				}
				// control padding for dialog content (desktop)
				classNameContent="m-0 p-0 max-w-[640px] p-4 rounded-lg bg-background border-none max-h-[90vh] overflow-y-scroll overflow-x-scroll scrollbar-x-hidden"
				// control body padding for both dialog & drawer
				classNameBody="px-2 py-6 sm:px-12 sm:py-6"
				// style the close button (absolute top-right)
				classNameCloseBtn="absolute top-4 right-4 text-[#CD3232] cursor-pointer"
			>
				<div className="flex gap-4 justify-end">
					<button
						onClick={handleClose}
						className="px-4 py-2 rounded-lg border border-border text-sm"
					>
						Cancel
					</button>
					<button
						onClick={() => {
							deleteVehicle(fleet.id);
							handleClose();
							toast.success(
								'Fleet deleted successfully',
								toastColor.success
							);
						}}
						disabled={isLoading}
						className="px-4 py-2 rounded-lg bg-destructive text-white text-sm hover:bg-destructive/90 transition-all duration-300"
					>
						{isLoading ? 'Deleting...' : 'Delete'}
					</button>
				</div>
			</CustomResponsiveDialog>
		</div>
	);
}