import { toGoogleMapsEmbedSrc } from "@/lib/maps";
import { formatDate } from "@/lib/format";
import type { KolaboraEvent } from "@/types/event";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";
import { SignatureSectionHeading } from "./SignatureSectionHeading";
import { SIGNATURE_SECTION_MIN_HEIGHT } from "./section-layout";

// Each card's height is independent — adjust one without affecting the other.
const DENAH_CARD_HEIGHT = "min-h-64";
const TANGGAL_CARD_HEIGHT = "min-h-64";

// Width ratio between the 2 cards (Denah:Tanggal) on the row — per denah.png,
// Denah is noticeably wider than Tanggal. Adjust the fr values to change the
// ratio (e.g. "2fr_1fr" for an even bigger gap, "1fr_1fr" for equal width).
const VENUE_DATE_COLUMN_RATIO = "sm:grid-cols-[3fr_2fr]";

/** "Denah" / "Tgl" — two separate side-by-side cards, per the wireframe. */
export function SignatureVenueDate({ event }: { event: KolaboraEvent }) {
  const mapsEmbedSrc = event.gmaps_url ? toGoogleMapsEmbedSrc(event.gmaps_url) : null;

  return (
    <QueueSection as="section" className={`${SIGNATURE_SECTION_MIN_HEIGHT} px-6 py-12`}>
      <div className="mx-auto w-full max-w-3xl">
        <QueueItem as="div">
          <SignatureSectionHeading>Venue &amp; Date</SignatureSectionHeading>
        </QueueItem>

        <div className={`mt-6 grid grid-cols-1 gap-4 ${VENUE_DATE_COLUMN_RATIO}`}>
          {/* blur off: this card hosts a cross-origin Google Maps <iframe> —
              animating a blur filter over an iframe is compositor-unfriendly
              and reads as stutter, unlike the plain-text Tanggal card below. */}
          <QueueItem
            as="div"
            blur={false}
            className={`flex ${DENAH_CARD_HEIGHT} flex-col overflow-hidden rounded-2xl bg-signaturee-red text-signaturee-cream`}
          >
            <p className="px-5 pt-5 font-signaturee text-lg font-semibold">Venue</p>
            {mapsEmbedSrc ? (
              <iframe
                src={mapsEmbedSrc}
                title={`Map location for ${event.title}`}
                loading="lazy"
                className="mt-3 h-48 w-full grow"
              />
            ) : (
              <div className="flex flex-1 items-center justify-center px-5 pb-5 text-sm text-signaturee-cream/80">
                {event.location ?? "Location not set yet"}
              </div>
            )}
            {event.gmaps_url && (
              <a
                href={event.gmaps_url}
                target="_blank"
                rel="noreferrer"
                className="px-5 pb-4 pt-2 text-sm font-medium underline"
              >
                Open in Google Maps &rarr;
              </a>
            )}
          </QueueItem>

          <QueueItem
            as="div"
            className={`flex ${TANGGAL_CARD_HEIGHT} flex-col justify-center rounded-2xl bg-signaturee-orange px-5 py-5 text-signaturee-cream`}
          >
            <p className="font-signaturee text-lg font-semibold">Date</p>
            <p className="mt-3 text-2xl font-semibold">{formatDate(event.start_date)}</p>
            <p className="text-sm text-signaturee-cream/80">to</p>
            <p className="text-2xl font-semibold">{formatDate(event.end_date)}</p>
            {event.location && <p className="mt-4 text-sm text-signaturee-cream/80">{event.location}</p>}
            {event.address && <p className="text-sm text-signaturee-cream/80">{event.address}</p>}
          </QueueItem>
        </div>
      </div>
    </QueueSection>
  );
}