import Link from "next/link";
import { GameMeta } from "@/types";
import Emblem from "./Emblem";

export default function BookSpine({ game }: { game: GameMeta }) {
  return (
    <Link href={`/${game.slug}`} className="group block">
      <div
        className="relative w-48 h-72 md:w-56 md:h-[340px] lg:w-64 lg:h-96 rounded-r-md shadow-lg cursor-pointer transition-all duration-300 group-hover:-translate-y-3 group-hover:rotate-[-2deg] group-hover:shadow-2xl overflow-hidden"
        style={{
          background: `
            radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.12) 0%, transparent 50%),
            radial-gradient(ellipse at 75% 85%, rgba(0,0,0,0.2) 0%, transparent 50%),
            linear-gradient(135deg, ${game.color} 0%, ${game.colorDark} 70%)
          `,
          boxShadow: `
            inset 0 0 30px rgba(0,0,0,0.3),
            inset 3px 0 8px rgba(255,255,255,0.05),
            6px 8px 20px rgba(0,0,0,0.4)
          `,
        }}
      >
        {/* Leather texture */}
        <div className="absolute inset-0 opacity-[0.05]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Cpath d='M0 0h1v1H0zm2 2h1v1H2zm4-2h1v1H6zm2 2h1v1H8zM1 3h1v1H1zm2 2h1v1H3zm4-2h1v1H5zm2 2h1v1H7zM0 6h1v1H0zm2 2h1v1H2zm4-2h1v1H6z'/%3E%3C/g%3E%3C/svg%3E")`,
          }}
        />

        {/* Spine edge with ridges */}
        <div className="absolute left-0 top-0 bottom-0 w-5 md:w-6"
          style={{
            background: `linear-gradient(to right, ${game.colorDark}, ${game.color}99 40%, transparent)`,
            boxShadow: "inset -1px 0 3px rgba(0,0,0,0.3)",
          }}
        >
          {[18, 28, 72, 82].map((top) => (
            <div key={top} className="absolute left-1 right-1 h-[2px]"
              style={{
                top: `${top}%`,
                background: `linear-gradient(to right, ${game.accentColor}40, ${game.accentColor}80, ${game.accentColor}40)`,
                boxShadow: `0 1px 0 rgba(0,0,0,0.3)`,
              }}
            />
          ))}
        </div>

        {/* Embossed border */}
        <div className="absolute top-3 left-7 right-3 bottom-3 md:top-4 md:left-8 md:right-4 md:bottom-4 rounded-sm"
          style={{
            border: `1px solid ${game.accentColor}45`,
            boxShadow: `inset 0 0 0 1px ${game.accentColor}15`,
          }}
        />

        {/* Cover content */}
        <div className="flex flex-col items-center justify-center h-full px-5 md:px-7 text-center relative z-10">
          {/* Top ornament */}
          <div className="flex items-center gap-2 mb-3">
            <div className="w-6 md:w-8 h-[1px]" style={{ background: `linear-gradient(to right, transparent, ${game.accentColor}aa)` }} />
            <div className="w-1.5 h-1.5 rotate-45" style={{ backgroundColor: game.accentColor, opacity: 0.8 }} />
            <div className="w-6 md:w-8 h-[1px]" style={{ background: `linear-gradient(to left, transparent, ${game.accentColor}aa)` }} />
          </div>

          {/* Emblem */}
          <div className="mb-3 opacity-80 group-hover:opacity-100 transition-opacity duration-300"
            style={{ filter: `drop-shadow(0 2px 4px rgba(0,0,0,0.4))` }}
          >
            <Emblem type={game.emblem} color={game.accentColor} size={52} />
          </div>

          {/* Title */}
          <h2 className="font-playfair text-lg md:text-2xl lg:text-3xl font-bold leading-tight"
            style={{
              color: game.accentColor,
              textShadow: `0 1px 3px rgba(0,0,0,0.5), 0 0 20px ${game.accentColor}20`,
            }}
          >
            {game.title}
          </h2>

          {/* Subtitle */}
          <p className="text-xs md:text-sm mt-2 font-lora italic tracking-wider"
            style={{ color: game.accentColor, opacity: 0.75 }}
          >
            {game.subtitle}
          </p>

          {/* Bottom ornament */}
          <div className="flex items-center gap-2 mt-3">
            <div className="w-6 md:w-8 h-[1px]" style={{ background: `linear-gradient(to right, transparent, ${game.accentColor}aa)` }} />
            <div className="w-1.5 h-1.5 rotate-45" style={{ backgroundColor: game.accentColor, opacity: 0.8 }} />
            <div className="w-6 md:w-8 h-[1px]" style={{ background: `linear-gradient(to left, transparent, ${game.accentColor}aa)` }} />
          </div>
        </div>

        {/* Vignette */}
        <div className="absolute inset-0 pointer-events-none rounded-r-md"
          style={{ background: "radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.2) 100%)" }}
        />

        {/* Shine on hover */}
        <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-r-md" />
      </div>
    </Link>
  );
}
