import type { MemorialData } from "@/types";
import { formatDates } from "./shared";

export function TemplateCinematic({ data }: { data: MemorialData }) {
  const sortedImages = [...data.images].sort((a, b) => a.order - b.order);
  const dates = formatDates(data.bornDate, data.passedDate);

  return (
    <div className="min-h-screen bg-zinc-950 text-white">
      {sortedImages.length > 0 && (
        <>
          <div className="relative h-screen w-full">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={sortedImages[0].url} alt={data.title || "Спомен"} className="h-full w-full object-cover object-top" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
            <div className="absolute bottom-16 left-8 right-8 md:left-16">
              <h1 className="text-5xl font-black tracking-tight md:text-8xl drop-shadow-2xl">
                {data.title || "Во спомен на"}
              </h1>
              {dates && (
                <p className="mt-3 text-lg font-light tracking-widest text-zinc-300 uppercase md:text-xl">
                  {dates}
                </p>
              )}
              {data.description && (
                <p className="mt-6 max-w-2xl text-base leading-relaxed text-zinc-300 md:text-lg line-clamp-4">
                  {data.description}
                </p>
              )}
            </div>
          </div>

          {sortedImages.length > 1 && (
            <div className="grid grid-cols-2 gap-0.5 md:grid-cols-3">
              {sortedImages.slice(1).map((img) => (
                <div key={img.id} className="relative aspect-square overflow-hidden">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={img.url} alt="" className="h-full w-full object-cover" />
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {sortedImages.length === 0 && (
        <div className="flex min-h-screen items-center justify-center px-8">
          <div className="max-w-2xl text-center">
            <h1 className="text-5xl font-black tracking-tight md:text-8xl">
              {data.title || "Во спомен на"}
            </h1>
            {dates && (
              <p className="mt-4 text-lg font-light tracking-widest text-zinc-400 uppercase">{dates}</p>
            )}
            {data.description && (
              <p className="mt-8 text-base leading-relaxed text-zinc-400 whitespace-pre-wrap md:text-lg">
                {data.description}
              </p>
            )}
          </div>
        </div>
      )}

      <footer className="py-12 text-center">
        <div className="mx-auto mb-3 flex h-8 w-8 items-center justify-center rounded-full bg-white/10">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-5 w-5 text-zinc-500">
            <path d="M12 3C7 8 4 11 4 14.5C4 18 7 21 12 21C17 21 20 18 20 14.5C20 11 17 8 12 3Z" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <p className="text-sm italic text-zinc-500">Во спомен на</p>
      </footer>
    </div>
  );
}
