import Link from "next/link";
import type { SportsEvent } from "@/lib/demo-data";

const eventThemes: Record<
  SportsEvent["sport"],
  { surface: string; icon: string; accent: string }
> = {
  Soccer: {
    surface: "bg-[linear-gradient(145deg,#dcecf3,#cfe3ec)]",
    icon: "sports_soccer",
    accent: "bg-[#c4dce7]",
  },
  Basketball: {
    surface: "bg-[linear-gradient(145deg,#ffe7b1,#f8d898)]",
    icon: "sports_basketball",
    accent: "bg-[#f3cd82]",
  },
  "Touch Rugby": {
    surface: "bg-[linear-gradient(145deg,#dbece2,#cce2d6)]",
    icon: "sports_rugby",
    accent: "bg-[#c0dacb]",
  },
};

export function EventCard({ event }: { event: SportsEvent }) {
  const spotsLeft = Math.max(event.capacity - event.joined, 0);
  const theme = eventThemes[event.sport];

  return (
    <article className="group overflow-hidden rounded-[1.8rem] border border-white/70 bg-white/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_18px_50px_rgba(27,47,58,0.065)] backdrop-blur-lg transition duration-300 hover:-translate-y-1.5 hover:border-white/90 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_26px_60px_rgba(27,47,58,0.11)]">
      <div className={`relative h-40 overflow-hidden p-6 ${theme.surface}`}>
        <span className="relative z-10 inline-flex rounded-full bg-white/55 px-3 py-1.5 text-[10px] font-extrabold uppercase tracking-[0.16em] text-[#313d43] backdrop-blur-md">
          {event.sport}
        </span>
        <span className={`absolute -bottom-16 -right-12 h-48 w-48 rounded-full ${theme.accent}`} />
        <span className="absolute -bottom-7 -right-3 h-32 w-32 rounded-full border-[18px] border-white/35" />
        <span className="material-symbols-outlined absolute bottom-5 right-6 text-[48px] text-[#26343a]/80">
          {theme.icon}
        </span>
      </div>

      <div className="p-6">
        <div className="flex items-start justify-between gap-5">
          <div>
            <p className="text-[11px] font-extrabold uppercase tracking-[0.1em] text-[#66727a]">
              {event.dateLabel} · {event.time}
            </p>
            <h3 className="mt-2 text-xl font-extrabold leading-tight tracking-[-0.04em] text-[#0b0f12]">
              {event.title}
            </h3>
          </div>
          <span className="shrink-0 rounded-full bg-white/55 px-3 py-1.5 text-sm font-extrabold text-[#273138]">
            {event.price === 0 ? "Free" : `$${event.price}`}
          </span>
        </div>

        <p className="mt-5 flex items-center gap-2 text-sm text-[#6c7880]">
          <span className="material-symbols-outlined text-[20px] text-[#53636c]">location_on</span>
          {event.venue}, {event.suburb}
        </p>

        <div className="mt-6 flex items-center justify-between gap-4">
          <span className="text-xs font-bold text-[#66727a]">
            {event.status === "cancelled" ? "Cancelled" : `${spotsLeft} spots left`} · {event.ageGroup}
          </span>
          <Link
            href={`/events/${event.id}`}
            className="inline-flex items-center gap-2 text-sm font-extrabold text-[#273138]"
          >
            View
            <span className="grid h-9 w-9 place-items-center rounded-full bg-white/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)] transition-transform duration-300 group-hover:translate-x-1">
              <span className="material-symbols-outlined text-[18px]">arrow_forward</span>
            </span>
          </Link>
        </div>
      </div>
    </article>
  );
}