import type { SignatureArtist } from "@/types/event";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";
import CardFanCarousel, { type CardItem } from "@/components/ui/card-fan-carousel";
import { SignatureSectionHeading } from "./SignatureSectionHeading";
import { SIGNATURE_SECTION_MIN_HEIGHT } from "./section-layout";

/** Dark card bearing the artist's initial, standing in until Admin uploads a real photo_url. */
function placeholderPhoto(name: string) {
  const initial = name.charAt(0).toUpperCase();
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="700"><rect width="100%" height="100%" fill="#211a1d"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="180" fill="#fff69a">${initial}</text></svg>`;
  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
}

export function SignatureLineup({ artists }: { artists?: SignatureArtist[] }) {
  const cards: CardItem[] =
    artists?.map((artist) => ({
      imgUrl: artist.photo_url ?? placeholderPhoto(artist.name),
      alt: artist.role ? `${artist.name} — ${artist.role}` : artist.name,
    })) ?? [];

  return (
    <QueueSection as="section" className={`${SIGNATURE_SECTION_MIN_HEIGHT} px-6 py-16 text-center`}>
      <div className="mx-auto w-full max-w-3xl">
        <QueueItem as="div">
          <SignatureSectionHeading>Artist Lineup</SignatureSectionHeading>
        </QueueItem>

        {cards.length === 0 ? (
          <p className="mt-4 text-neutral-700">Coming soon.</p>
        ) : (
          <QueueItem as="div">
            <CardFanCarousel cards={cards} />
          </QueueItem>
        )}
      </div>
    </QueueSection>
  );
}