"use client";

import Image from "next/image";

import { Armchair, ExternalLink, ImageOff } from "lucide-react";

import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

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

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

export function SeatView({ event }: { event: TicketEvent }) {

  const venueQuery = encodeURIComponent(`${event.venue_name ?? event.title} view from seat`);

  const viewFromSeatUrl = `https://www.google.com/search?q=${venueQuery}`;

  return (

    <Dialog>

      <Tooltip>

        <TooltipTrigger asChild>

          <DialogTrigger

            className={cn(

              "inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius)]",

              "border border-[var(--color-border-default)] text-[var(--color-fg-tertiary)]",

              "transition-colors hover:border-[var(--color-accent-teal)] hover:text-[var(--color-accent-teal)]",

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

            )}

            aria-label="View seats"

          >

            <Armchair className="h-4 w-4" aria-hidden />

          </DialogTrigger>

        </TooltipTrigger>

        <TooltipContent>View seats</TooltipContent>

      </Tooltip>

      <DialogContent title="Seats">

        <div className="space-y-3 p-4">

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

          {event.venue_name ? (

            <p className="-mt-2 text-xs text-[var(--color-fg-tertiary)]">

              {[event.venue_name, event.city].filter(Boolean).join(" · ")}

            </p>

          ) : null}

          {event.seatmap_url ? (

            <div className="relative overflow-hidden rounded-[var(--radius)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-inset)]">

              <Image

                src={event.seatmap_url}

                alt={`Seat map for ${event.title}`}

                width={520}

                height={360}

                unoptimized

                className="h-auto w-full object-contain"

              />

            </div>

          ) : (

            <div className="flex flex-col items-center gap-2 rounded-[var(--radius)] border border-dashed border-[var(--color-border-subtle)] py-8 text-center">

              <ImageOff className="h-5 w-5 text-[var(--color-fg-tertiary)]" aria-hidden />

              <p className="text-xs text-[var(--color-fg-tertiary)]">

                No seat map from the source for this event.

              </p>

            </div>

          )}

          <div className="flex gap-2">

            <a

              href={viewFromSeatUrl}

              target="_blank"

              rel="noopener noreferrer"

              className="inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[var(--radius)] border border-[var(--color-border-default)] text-xs font-medium text-[var(--color-fg-secondary)] transition-colors hover:border-[var(--color-accent-teal)] hover:text-[var(--color-accent-teal)]"

            >

              View from seat <ExternalLink className="h-3.5 w-3.5" aria-hidden />

            </a>

            <a

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

              target="_blank"

              rel="noopener noreferrer"

              className="inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-[var(--radius)] bg-[var(--color-accent-teal)] text-xs font-semibold text-[var(--color-bg-inset)] transition-colors hover:bg-[var(--color-accent-teal-hover)]"

            >

              Pick seats <ExternalLink className="h-3.5 w-3.5" aria-hidden />

            </a>

          </div>

        </div>

      </DialogContent>

    </Dialog>

  );

}