"use client";

import { motion } from "framer-motion";
import {
	Clock,
	ExternalLink,
	LucideMapPin,
	MoreHorizontal,
	Pencil,
	Trash2,
} from "lucide-react";
import { RRuleDisplay } from "@/components/rrule-display";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { CalendarEvent } from "@/lib/types";

interface EventCardProps {
	event: CalendarEvent;
	onEdit: (event: CalendarEvent) => void;
	onDelete: (eventId: string) => void;
}

export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
	const formatDateTime = (dateStr: string, allDay: boolean | undefined) => {
		return allDay
			? new Date(dateStr).toLocaleDateString(undefined, {
					month: "short",
					day: "numeric",
					year: "numeric",
				})
			: new Date(dateStr).toLocaleString(undefined, {
					month: "short",
					day: "numeric",
					hour: "numeric",
					minute: "2-digit",
				});
	};

	const handleEdit = () => {
		onEdit({
			id: event.id,
			title: event.title,
			description: event.description || "",
			location: event.location || "",
			url: event.url || "",
			start: event.start,
			end: event.end || "",
			allDay: event.allDay || false,
		});
	};

	const endDate =
		event.end && !event.allDay ? formatDateTime(event.end, event.allDay) : null;

	return (
		<motion.div
			layout
			initial={{ opacity: 0, y: 8 }}
			animate={{ opacity: 1, y: 0 }}
			exit={{ opacity: 0, y: -8, transition: { duration: 0.15 } }}
			transition={{ duration: 0.2 }}
		>
			<div className="glass-card p-4 group cursor-pointer hover:bg-accent/50 transition-colors duration-150">
				<div className="flex items-start gap-3">
					<div className="flex-1 min-w-0 space-y-1.5">
						<h3 className="font-medium text-sm leading-snug truncate">
							{event.title}
						</h3>

						{event.description && (
							<p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
								{event.description}
							</p>
						)}

						<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
							<span className="inline-flex items-center gap-1">
								<Clock className="h-3 w-3 shrink-0" />
								{formatDateTime(event.start, event.allDay)}
								{endDate && <span className="text-muted-foreground/50">-</span>}
								{endDate}
							</span>

							{event.location && (
								<span className="inline-flex items-center gap-1 truncate">
									<LucideMapPin className="h-3 w-3 shrink-0" />
									<span className="truncate">{event.location}</span>
								</span>
							)}

							{event.url && (
								<Button
									variant="link"
									size="sm"
									className="inline-flex items-center gap-1 h-auto p-0 text-xs text-primary/70 hover:text-primary"
									asChild
								>
									<a
										href={event.url}
										target="_blank"
										rel="noopener noreferrer"
										onClick={(e) => e.stopPropagation()}
									>
										<ExternalLink className="h-3 w-3" />
										<span className="truncate max-w-[120px]">Link</span>
									</a>
								</Button>
							)}
						</div>

						{event.recurrenceRule && (
							<RRuleDisplay rrule={event.recurrenceRule} />
						)}
					</div>

					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button
								variant="ghost"
								size="icon"
								className="h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
							>
								<MoreHorizontal className="h-3.5 w-3.5" />
								<span className="sr-only">Event actions</span>
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end" className="w-36">
							<DropdownMenuItem onClick={handleEdit}>
								<Pencil className="h-3.5 w-3.5 mr-2" />
								Edit
							</DropdownMenuItem>
							<DropdownMenuSeparator />
							<DropdownMenuItem
								onClick={() => onDelete(event.id)}
								className="text-destructive focus:text-destructive"
							>
								<Trash2 className="h-3.5 w-3.5 mr-2" />
								Delete
							</DropdownMenuItem>
						</DropdownMenuContent>
					</DropdownMenu>
				</div>
			</div>
		</motion.div>
	);
};