import { Link } from "@tanstack/react-router";
import { BadgeCheck, CalendarDays, MapPin, ShieldAlert } from "lucide-react";
import { format } from "date-fns";
import { cn } from "@/lib/utils";
import { formatPrice, verificationLabel, type HotspotEvent } from "@/lib/hotspots";

export function VerificationBadge({ level }: { level: HotspotEvent["verification"] }) {
  const info = verificationLabel(level);
  if (!info) return null;
  const Icon = info.tone === "muted" ? ShieldAlert : BadgeCheck;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold",
        info.tone === "leaf" && "bg-leaf/15 text-leaf",
        info.tone === "gold" && "bg-gold/15 text-gold",
        info.tone === "muted" && "bg-muted text-muted-foreground",
      )}
    >
      <Icon className="h-3 w-3" />
      {info.label}
    </span>
  );
}

export function EventCard({
  event,
  className,
  compact,
}: {
  event: HotspotEvent;
  className?: string;
  compact?: boolean;
}) {
  const date = new Date(event.starts_at);
  return (
    <Link
      to="/events/$slug"
      params={{ slug: event.slug ?? event.id }}
      className={cn(
        "group block overflow-hidden surface-card transition-transform duration-200 hover:-translate-y-1",
        compact ? "w-[260px] shrink-0 snap-start" : "w-full",
        className,
      )}
    >
      <div className="relative aspect-[16/10] overflow-hidden bg-secondary">
        {event.image_url ? (
          <img
            src={event.image_url}
            alt={event.title}
            loading="lazy"
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <div className="grid h-full w-full place-items-center text-4xl">
            {event.categories?.emoji ?? "✨"}
          </div>
        )}
        <div className="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-background/95 to-transparent p-3">
          <span className="rounded-full bg-primary px-2.5 py-1 text-[11px] font-bold text-primary-foreground">
            {formatPrice(event)}
          </span>
          <VerificationBadge level={event.verification} />
        </div>
      </div>
      <div className="space-y-2 p-4">
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span>{event.categories?.emoji}</span>
          <span className="uppercase tracking-wide">{event.categories?.name ?? "Event"}</span>
        </div>
        <h3 className="line-clamp-2 font-display text-base font-bold leading-snug">{event.title}</h3>
        <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <CalendarDays className="h-3.5 w-3.5" />
          {format(date, "EEE d MMM · h:mm a")}
        </p>
        <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <MapPin className="h-3.5 w-3.5" />
          <span className="truncate">
            {event.venue ?? "TBA"}
            {event.cities?.name ? ` · ${event.cities.name}` : ""}
          </span>
        </p>
      </div>
    </Link>
  );
}

export function EventCardSkeleton({ compact }: { compact?: boolean }) {
  return (
    <div className={cn("surface-card animate-pulse", compact ? "w-[260px] shrink-0" : "w-full")}>
      <div className="aspect-[16/10] rounded-t-2xl bg-secondary" />
      <div className="space-y-2 p-4">
        <div className="h-3 w-20 rounded bg-secondary" />
        <div className="h-4 w-3/4 rounded bg-secondary" />
        <div className="h-3 w-1/2 rounded bg-secondary" />
      </div>
    </div>
  );
}