"use client";

import { getThemeColors } from "@/lib/themes";
import type { Album } from "../lib/ListTypes";
import { Box, Card, Text, Badge, Group } from "@mantine/core";
import { Link } from "next-view-transitions";
import { useState } from "react";
import Image from "next/image";

export default function AlbumCard({ album }: { album: Album }) {
	const { label, releaseDate, image, tracks } = album;
	const [isElevated, setIsElevated] = useState(false);

	type Songs = {
		count: number;
		emilyLiveSongs: number;
		lpLiveSongs: number;
	};

	const songs: Songs = {
		count: tracks.length,
		emilyLiveSongs: tracks.filter((track) => track.emilyLive !== null).length,
		lpLiveSongs: tracks.filter((track) => track.lpLive !== null).length,
	};

	const theme = getThemeColors(album.id);

	return (
		<div
			style={{
				border: `1px solid ${theme.border.DEFAULT}`,
				boxShadow: `0 4px 20px ${theme.primary.DEFAULT}20`,
				overflow: "hidden",
				borderRadius: "8px",
				zIndex: isElevated ? 50 : 1,
			}}
			className="group relative col-span-1 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl"
		>
			<Card
				component={Link}
				prefetch={true}
				href={`/album/${album.id}`}
				className="cursor-pointer"
				style={{
					background: theme.background.gradient,
					viewTransitionName: `album-card-background-${album.id}`,
				}}
				onMouseEnter={() => setIsElevated(true)}
				onMouseLeave={() => setIsElevated(false)}
				onClick={() => setIsElevated(true)}
			>
				<Box
					className="relative overflow-hidden rounded-lg"
					style={{
						border: `2px solid ${theme.border.light}`,
						borderRadius: "8px",
						padding: "2px",
						background: theme.background.secondary,
						viewTransitionName: `album-card-image-${album.id}`,
					}}
				>
					<Box>
						<Image
							loading="eager"
							src={image}
							alt={label}
							width={450}
							height={450}
							className="aspect-square w-full object-cover transition-transform duration-500 group-hover:scale-110"
						/>
					</Box>
				</Box>
				<Box className="space-y-3 p-4">
					<Text
						size="xl"
						fw={700}
						className="transition-colors"
						style={{
							color: theme.text.primary,
						}}
					>
						<span style={{ viewTransitionName: `album-card-title-${album.id}` }}>{label}</span>
					</Text>

					<Text
						size="sm"
						style={{
							color: theme.text.secondary,
						}}
					>
						<span style={{ viewTransitionName: `album-card-release-date-${album.id}` }}>
							<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
							{new Date(releaseDate).toLocaleDateString("en-US", {
								year: "numeric",
								month: "long",
								day: "numeric",
							})}
						</span>
					</Text>

					<Group gap="xs">
						<Badge
							size="sm"
							variant="filled"
							style={{
								background: theme.primary.DEFAULT,
								color: theme.text.contrast,
							}}
						>
							{songs.count} Songs
						</Badge>
						{songs.emilyLiveSongs > 0 && (
							<Badge
								size="sm"
								variant="filled"
								style={{
									background: theme.badges.liveEmily,
									color: theme.text.contrast,
								}}
							>
								{songs.emilyLiveSongs} Emily Live
							</Badge>
						)}
						{songs.lpLiveSongs > 0 && (
							<Badge
								size="sm"
								variant="filled"
								style={{
									background: theme.badges.liveLP,
									color: theme.text.contrast,
								}}
							>
								{songs.lpLiveSongs} LP Live
							</Badge>
						)}
					</Group>
				</Box>
			</Card>
		</div>
	);
}
