import type { MemorialData } from "@/types";

function formatDates(born: string | null, passed: string | null): string {
  if (born && passed) return `${born} \u2014 ${passed}`;
  if (passed) return passed;
  if (born) return born;
  return "";
}

function MemorialFooter({ name }: { name: string | null }) {
  return (
    <footer className="border-t border-stone-200 py-10 text-center">
      <div className="mx-auto mb-3 flex h-8 w-8 items-center justify-center rounded-full bg-amber-100">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-5 w-5 text-amber-600">
          <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-stone-400">Во спомен на</p>
      {name && <p className="mt-1 text-xs text-stone-400">{name}</p>}
    </footer>
  );
}

export function renderTemplate(templateId: number, data: MemorialData) {
  switch (templateId) {
    case 1:
      return <TemplateElegance data={data} />;
    case 2:
      return <TemplateCinematic data={data} />;
    case 3:
      return <TemplateSerene data={data} />;
    default:
      return <TemplateElegance data={data} />;
  }
}

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

  return (
    <div className="min-h-screen bg-stone-50 font-serif">
      {heroImage && (
        <div className="relative h-[55vh] w-full overflow-hidden">
          <img src={heroImage.url} alt={data.title || "Спомен"} className="h-full w-full object-cover object-top" />
          <div className="absolute inset-0 bg-gradient-to-t from-stone-900/70 via-stone-900/20 to-transparent" />
          <div className="absolute bottom-10 left-0 right-0 text-center">
            <h1 className="text-4xl font-bold tracking-wide text-white md:text-6xl drop-shadow-lg">
              {data.title || "Во спомен на"}
            </h1>
            {dates && (
              <p className="mt-3 text-lg tracking-widest text-stone-200 uppercase drop-shadow">
                {dates}
              </p>
            )}
          </div>
        </div>
      )}

      {!heroImage && (
        <div className="mx-auto max-w-2xl px-6 pt-24 text-center">
          <h1 className="text-4xl font-bold tracking-wide text-stone-900 md:text-6xl">
            {data.title || "Во спомен на"}
          </h1>
          {dates && (
            <p className="mt-4 text-lg tracking-widest text-stone-400 uppercase">{dates}</p>
          )}
          <div className="mx-auto mt-6 h-px w-16 bg-amber-400" />
        </div>
      )}

      <div className="mx-auto max-w-3xl px-6 py-14">
        {data.description && (
          <div className="text-center">
            <p className="text-lg leading-relaxed text-stone-700 whitespace-pre-wrap md:text-xl">
              {data.description}
            </p>
          </div>
        )}

        {gridImages.length > 0 && (
          <div className="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-2">
            {gridImages.map((img) => (
              <div key={img.id} className="overflow-hidden rounded-lg shadow-md">
                <img src={img.url} alt="" className="h-64 w-full object-cover transition-transform duration-500 hover:scale-105" />
              </div>
            ))}
          </div>
        )}

        <MemorialFooter name={data.title} />
      </div>
    </div>
  );
}

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">
            <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">
                  <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>
  );
}

export function TemplateSerene({ 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-white">
      <div className="mx-auto max-w-xl px-6 py-20 md:py-28">
        <div className="text-center">
          {sortedImages.length > 0 && (
            <div className="mx-auto mb-8 h-40 w-40 overflow-hidden rounded-full shadow-lg">
              <img src={sortedImages[0].url} alt={data.title || "Спомен"} className="h-full w-full object-cover object-top" />
            </div>
          )}

          <h1 className="text-3xl font-light tracking-tight text-zinc-900 md:text-5xl">
            {data.title || "Во спомен на"}
          </h1>

          {dates && (
            <p className="mt-3 text-sm tracking-[0.2em] text-zinc-400 uppercase">{dates}</p>
          )}

          <div className="mx-auto mt-6 h-px w-12 bg-blue-200" />
        </div>

        {data.description && (
          <div className="mt-10 border-l-2 border-blue-100 pl-6">
            <p className="text-base leading-7 text-zinc-600 whitespace-pre-wrap md:text-lg">
              {data.description}
            </p>
          </div>
        )}

        {sortedImages.length > 1 && (
          <div className="mt-12 flex gap-4 overflow-x-auto pb-4">
            {sortedImages.slice(1).map((img) => (
              <div key={img.id} className="flex-shrink-0">
                <img src={img.url} alt="" className="h-56 w-auto rounded-lg shadow-sm object-cover" />
              </div>
            ))}
          </div>
        )}

        <MemorialFooter name={data.title} />
      </div>
    </div>
  );
}