"use client";
/* eslint-disable @next/next/no-img-element -- images are served through /api/media with our own responsive variants */

import * as React from "react";
import { cn } from "@/lib/utils";

export interface ShowroomSlide {
  id: string;
  imageId: string;
  code: string;
  name: string;
  city: string;
  building: string | null;
  meta: string;
}

const src = (id: string, w: number) => `/api/media/${id}?w=${w}`;

/**
 * Cinematic property showroom for the sign-in page: slow refined crossfade
 * through hero apartments. Public presentation content only — no business
 * data. Honors reduced-motion (no auto-advance).
 */
export function Showroom({ slides, businessName, variant = "panel" }: { slides: ShowroomSlide[]; businessName: string; variant?: "panel" | "hero" }) {
  const [i, setI] = React.useState(0);
  const [reduced, setReduced] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const h = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", h);
    return () => mq.removeEventListener("change", h);
  }, []);
  React.useEffect(() => {
    if (reduced || slides.length < 2) return;
    const t = setInterval(() => setI((x) => (x + 1) % slides.length), 7000);
    return () => clearInterval(t);
  }, [reduced, slides.length]);
  if (!slides.length) return null;
  const cur = slides[i];
  return (
    <div className={cn("relative overflow-hidden bg-brand-950", variant === "panel" ? "h-full min-h-dvh" : "h-[42vh] min-h-[280px]")}>
      {slides.map((s, idx) => (
        <img key={s.id} src={src(s.imageId, 1600)} srcSet={`${src(s.imageId, 960)} 960w, ${src(s.imageId, 1600)} 1600w`} sizes="(min-width: 1024px) 60vw, 100vw" alt="" aria-hidden={idx !== i} className={cn("absolute inset-0 size-full object-cover transition-opacity duration-[1800ms] ease-out", idx === i ? "opacity-100" : "opacity-0")} loading={idx === 0 ? "eager" : "lazy"} />
      ))}
      <div className={cn("absolute inset-0", variant === "panel" ? "bg-gradient-to-t from-brand-950/90 via-brand-950/30 to-brand-950/20" : "bg-gradient-to-t from-bg via-brand-950/20 to-brand-950/30")} />
      <div className={cn("absolute inset-x-0 bottom-0 text-white", variant === "panel" ? "p-10 lg:p-12" : "p-5")}>
        <p className="text-2xs font-semibold uppercase tracking-[0.22em] text-white/70 animate-fade-in" key={`k-${cur.id}`}>
          {cur.city}
          {cur.building ? ` · ${cur.building}` : ""}
        </p>
        <p className={cn("mt-1 font-display font-medium tracking-tight animate-slide-up", variant === "panel" ? "text-3xl lg:text-4xl" : "text-xl")} key={`n-${cur.id}`}>
          {cur.name}
        </p>
        <p className="mt-1 text-xs text-white/70">
          <span className="font-mono">{cur.code}</span> · {cur.meta}
        </p>
        {slides.length > 1 ? (
          <div className="mt-4 flex items-center gap-1.5" role="tablist" aria-label="Apartments">
            {slides.map((s, idx) => (
              <button key={s.id} type="button" role="tab" aria-selected={idx === i} aria-label={s.name} onClick={() => setI(idx)} className={cn("h-1 rounded-full transition-all duration-500", idx === i ? "w-8 bg-white" : "w-3 bg-white/40 hover:bg-white/70")} />
            ))}
          </div>
        ) : null}
        {variant === "panel" ? <p className="mt-8 text-2xs text-white/50">{businessName} · Authorised personnel only · Activity is logged</p> : null}
      </div>
    </div>
  );
}