import React from 'react';
import type { LiveShowLayoutMode, LiveShowPhoto } from '../services/liveShowApi';

const BASE_TILE =
  'relative overflow-hidden rounded-[28px] bg-black/70 shadow-[0_24px_70px_rgba(0,0,0,0.55)]';

function PhotoTile({
  photo,
  fit,
  label,
  className = '',
}: {
  photo: LiveShowPhoto;
  fit: 'cover' | 'contain';
  label: string;
  className?: string;
}) {
  const src = photo.full_url || photo.thumb_url || '';
  return (
    <div className={`${BASE_TILE} ${className}`.trim()}>
      {src ? (
        <img
          src={src}
          alt={label}
          className={`h-full w-full object-${fit} object-center`}
          loading="eager"
        />
      ) : (
        <div className="flex h-full w-full items-center justify-center text-sm text-white/60">
          {label}
        </div>
      )}
    </div>
  );
}

export default function LiveShowStage({
  layout,
  photos,
  title,
}: {
  layout: LiveShowLayoutMode;
  photos: LiveShowPhoto[];
  title: string;
}) {
  if (photos.length === 0) {
    return null;
  }

  if (layout === 'single') {
    return (
      <div className="flex h-full w-full items-center justify-center px-6 py-12">
        <PhotoTile
          photo={photos[0]}
          fit="contain"
          label={title}
          className="h-[62vh] w-full max-w-[1200px] sm:h-[72vh]"
        />
      </div>
    );
  }

  if (layout === 'split') {
    return (
      <div className="grid h-[72vh] w-full grid-cols-1 gap-6 px-6 py-12 lg:grid-cols-2">
        {photos.slice(0, 2).map((photo) => (
          <PhotoTile key={photo.id} photo={photo} fit="cover" label={title} className="h-full w-full" />
        ))}
      </div>
    );
  }

  return (
    <div className="grid h-[72vh] w-full grid-cols-2 grid-rows-2 gap-5 px-6 py-12">
      {photos.slice(0, 4).map((photo) => (
        <PhotoTile key={photo.id} photo={photo} fit="cover" label={title} className="h-full w-full" />
      ))}
    </div>
  );
}
