"use client";

import Image from "next/image";

import { motion, useReducedMotion } from "framer-motion";

import { ArrowUpRight, MapPin, Ticket } from "lucide-react";

import { StatusPill } from "@/components/ui/status-pill";

import { SourceChip } from "@/components/shared/SourceChip";

import { SeatView } from "./SeatView";

import { RelativeTime } from "@/components/shared/RelativeTime";

import { dropCardVariants, flashAccentKeyframes } from "@/lib/motion";

import { useUiStore } from "@/stores/ui";

import { formatPriceRange, cn } from "@/lib/utils";

import type { Drop } from "@/lib/types";

export function DropCard({ drop }: { drop: Drop }) {

  const reduce = useReducedMotion();

  const isFresh = useUiStore((s) => s.freshIds.has(drop.id));

  const clearFresh = useUiStore((s) => s.clearFresh);

  const { event } = drop;

  const venue = [event.venue_name, event.city].filter(Boolean).join(" · ");

  return (

    <motion.article

      layout

      variants={dropCardVariants}

      initial="initial"

      animate={

        isFresh && !reduce

          ? { ...dropCardVariants.animate, ...flashAccentKeyframes }

          : "animate"

      }

      exit="exit"

      onAnimationComplete={() => isFresh && clearFresh(drop.id)}

      className="ring-frame relative overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] p-3.5"

    >

      {}

      <div className="flex items-center justify-between gap-2">

        <StatusPill status={event.status} />

        <RelativeTime iso={drop.detected_at} className="text-xs" />

      </div>

      {}

      <div className="mt-2 flex gap-3">

        <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-[var(--radius)] bg-[var(--color-bg-inset)]">

          {event.image_url ? (

            <Image

              src={event.image_url}

              alt=""

              fill

              sizes="64px"

              className="object-cover"

              unoptimized

            />

          ) : (

            <div className="grid h-full w-full place-items-center text-[var(--color-fg-disabled)]">

              <Ticket className="h-5 w-5" aria-hidden />

            </div>

          )}

        </div>

        <div className="min-w-0 flex-1">

          <h3 className="truncate text-sm font-semibold text-[var(--color-fg-primary)]">{event.title}</h3>

          {event.subtitle ? (

            <p className="truncate text-xs text-[var(--color-fg-secondary)]">{event.subtitle}</p>

          ) : null}

          {venue ? (

            <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-[var(--color-fg-tertiary)]">

              <MapPin className="h-3 w-3 shrink-0" aria-hidden />

              <span className="truncate">{venue}</span>

            </p>

          ) : null}

        </div>

      </div>

      {}

      <div className="mt-3 flex items-center gap-2 border-t border-[var(--color-border-subtle)] pt-2.5">

        <span className="font-mono text-sm tabular text-[var(--color-fg-primary)]">

          {formatPriceRange(event.price_min, event.price_max, event.currency)}

        </span>

        <SourceChip id={event.source_id} className="ml-auto" />

        <SeatView event={event} />

        <a

          href={`${event.buy_url}${event.buy_url.includes("?") ? "&" : "?"}drophawk=1`}

          target="_blank"

          rel="noopener noreferrer"

          className={cn(

            "inline-flex h-8 items-center gap-1 rounded-[var(--radius)] bg-[var(--color-accent-teal)] px-3 text-xs font-semibold text-[var(--color-bg-inset)]",

            "transition-[background,box-shadow] duration-[var(--duration-fast)] hover:bg-[var(--color-accent-teal-hover)] hover:shadow-[var(--shadow-glow-teal)]",

            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent-teal)]",

          )}

          aria-label={`Buy tickets for ${event.title}`}

        >

          Buy <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />

        </a>

      </div>

    </motion.article>

  );

}