'use client';

import Image from 'next/image';
import { Service } from '@/types/service';
import { useState } from 'react';
import { Eye, Pencil, Trash2 } from 'lucide-react';
import { useSelector } from 'react-redux';
import { isAdminSelector } from '@/store/authSlice';
import ServiceDetail from './ServiceDetail';

const ServiceCard = ({
	service,

	setEditService,
	setIsDialogOpen,
}: {
	service: Service;
	index: number;
	itemVariants: any;
	setEditService: (service: Service) => void;
	setIsDialogOpen: (open: boolean) => void;
	isDialogOpen: boolean;
}) => {
	const isAdmin = useSelector(isAdminSelector);
	const clampLines = 3;
	const clampStyle: React.CSSProperties = {
		display: '-webkit-box',
		WebkitLineClamp: clampLines,
		WebkitBoxOrient: 'vertical',
		overflow: 'hidden',
		textOverflow: 'ellipsis',
	};
	const [isOpen, setIsOpen] = useState(false);
	const [openDetail, setOpenDetail] = useState(false);

	const handleViewDetails = () => {
		setOpenDetail(true);
		if (isOpen) {
			console.log(isOpen);
		}
	};

	return (
		<div
			className="group relative rounded-2xl overflow-hidden
	bg-card/70 backdrop-blur-md
	border border-border/60
	shadow-sm
	transition-all duration-500
	hover:-translate-y-1 hover:shadow-xl hover:border-primary/40"
		>
			{/* Image */}
			<div className="relative w-full aspect-4/3 overflow-hidden">
				<Image
					src={service.image ?? '/default/logo.png'}
					alt={service.title}
					fill
					sizes="(max-width: 768px) 100vw, 400px"
					className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
				/>

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

				{/* Hover border glow */}
				<div className="absolute inset-0 rounded-2xl border border-transparent group-hover:border-primary/40 transition-all duration-500 pointer-events-none" />

				{/* 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
				${
					service.isActive
						? 'bg-green-100 text-green-800 border-green-300' // Active: Green
						: 'bg-red-100 text-red-800 border-red-300' // Inactive: Red
				}`}
					>
						{service.isActive ? 'Active' : 'Inactive'}
					</span>
				</div>
			</div>

			{/* Content */}
			<div className="p-6 space-y-1">
				{/* Title */}
				<div className="space-y-3">
					{/* Category label */}
					<span className="text-[10px] uppercase tracking-widest text-primary/70 font-medium">
						Service
					</span>

					{/* Title */}
					<h3 className="text-xl font-semibold tracking-wide text-foreground leading-snug">
						{service.title}
					</h3>

					{/* Divider */}
					<div className="w-12 h-[2] bg-primary/80 rounded-full" />

					{/* Description */}
					<p
						className="text-sm text-muted-foreground leading-relaxed"
						style={clampStyle}
						title={service.description}
						aria-label={service.description}
					>
						{service.description}
					</p>
				</div>

				<div className="flex items-center justify-between">
					{/* View Detail */}
					<button
						type="button"
						onClick={handleViewDetails}
						className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-all duration-200"
					>
						<Eye size={16} />
						View Details
					</button>

					{/* Edit & Delete */}
					<div className="flex items-center gap-2">
						{/* Edit */}
						<button
							type="button"
							onClick={(e) => {
								e.stopPropagation();
								setEditService(service);
								setIsDialogOpen(true);
							}}
							className="w-9 h-9 flex items-center justify-center  rounded-lg border border-border hover:border-primary hover:bg-primary/10 transition-all duration-200"
						>
							<Pencil size={16} className="text-foreground/70" />
						</button>

						{/* Delete */}
						{isAdmin && (
							<button
								type="button"
								onClick={(e) => {
									e.stopPropagation();
									setIsOpen(true);
								}}
								className="w-9 h-9 flex items-center justify-center rounded-lg border border-border hover:border-destructive hover:bg-destructive/10 transition-all duration-200"
							>
								<Trash2 size={16} className="text-destructive" />
							</button>
						)}
					</div>
				</div>
			</div>
			<ServiceDetail
				service={service}
				handleClose={() => setOpenDetail(false)}
				isOpen={openDetail}
			/>
		</div>
	);
};

export default ServiceCard;