"use client";

import { Info } from "lucide-react";
import type { TicketTier } from "@/content/tickets";
import { site } from "@/content/site";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Props = {
  tier: TicketTier;
  serial: string;
  className?: string;
};

export function TicketInclusionsPopover({ tier, serial, className }: Props) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className={cn(
            "topo-card-link h-8 gap-1.5 rounded-full px-3 text-xs font-medium hover:bg-[#37a47a]/8",
            className
          )}
          aria-label={`What's included in ${tier.name}`}
        >
          <Info className="size-3.5 shrink-0" aria-hidden />
          What&apos;s included
        </Button>
      </PopoverTrigger>
      <PopoverContent
        align="start"
        className="w-[min(calc(100vw-2rem),20rem)] border-[#37a47a]/15 p-0"
      >
        <div className="border-b border-border/80 px-4 py-3">
          <p className="text-xs font-semibold uppercase tracking-wider text-[#37a47a]">
            {tier.name}
          </p>
          <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
            {tier.description}
          </p>
        </div>
        <ul className="space-y-2 px-4 py-3">
          {tier.features.map((feature) => (
            <li key={feature} className="flex gap-2 text-sm text-foreground">
              <span className="font-bold text-[#37a47a]" aria-hidden>
                ✓
              </span>
              {feature}
            </li>
          ))}
        </ul>
        <div className="space-y-1 border-t border-border/80 bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
          <p>
            <span className="font-medium text-foreground">When:</span>{" "}
            {tier.scheduleLabel ?? site.dates.label}
          </p>
          <p>
            <span className="font-medium text-foreground">Where:</span>{" "}
            {site.venue.name}, {site.venue.address}
          </p>
          <p className="font-mono text-[10px] uppercase tracking-wider opacity-70">
            {serial}
          </p>
        </div>
      </PopoverContent>
    </Popover>
  );
}