import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { FiArrowLeft, FiPlay } from "react-icons/fi";
import { JsonLd } from "@/components/json-ld";
import { MusicPlayer } from "@/components/music-player";
import { ReleaseGrid } from "@/components/release-grid";
import { ShareButton } from "@/components/share-button";
import { StreamingLinks } from "@/components/streaming-links";
import { getRelease, releases } from "@/data/releases";
import { site } from "@/data/site";

type PageProps = {
  params: Promise<{ slug: string }>;
};

export function generateStaticParams() {
  return releases.map((release) => ({ slug: release.slug }));
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const release = getRelease(slug);
  if (!release) return {};

  const title = `${release.title} — SelahBeat`;
  return {
    title: release.title,
    description: release.description,
    alternates: { canonical: `/musicas/${release.slug}` },
    openGraph: {
      title,
      description: release.description,
      type: "music.song",
      images: [{ url: release.cover, alt: `Capa de ${release.title}` }],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description: release.description,
      images: [release.cover],
    },
  };
}

export default async function ReleasePage({ params }: PageProps) {
  const { slug } = await params;
  const release = getRelease(slug);
  if (!release) notFound();

  const related = releases
    .filter(
      (item) =>
        item.slug !== release.slug &&
        (item.theme === release.theme || item.style === release.style),
    )
    .slice(0, 4);

  const schema = {
    "@context": "https://schema.org",
    "@type": "MusicRecording",
    name: release.title,
    byArtist: {
      "@type": "MusicGroup",
      name: "SelahBeat",
    },
    image: `${site.url}${release.cover}`,
    datePublished: release.releaseDate,
    genre: release.style,
    description: release.description,
    url: `${site.url}/musicas/${release.slug}`,
  };

  return (
    <main id="conteudo">
      <JsonLd data={schema} />
      <section className="release-detail-hero">
        <div className="release-detail-background">
          <Image
            src={release.cover}
            alt=""
            fill
            priority
            sizes="100vw"
          />
        </div>
        <div className="release-detail-overlay" />
        <div className="shell release-detail-grid">
          <div className="release-detail-cover" data-cover-reveal>
            <Image
              src={release.cover}
              alt={`Capa de ${release.title}`}
              fill
              priority
              sizes="(max-width: 900px) 88vw, 42vw"
            />
          </div>
          <div className="release-detail-copy" data-reveal>
            <Link href="/musicas" className="back-link">
              <FiArrowLeft />
              Voltar ao catálogo
            </Link>
            <span className="eyebrow">
              {release.style} / {release.releaseDate}
            </span>
            <h1>{release.title}</h1>
            <p>{release.description}</p>
            <div className="release-detail-meta">
              <span>
                <small>TEMA</small>
                {release.theme}
              </span>
              <span>
                <small>REFERÊNCIA</small>
                {release.biblicalReference}
              </span>
            </div>
            <div className="release-detail-actions">
              <a
                href={release.spotifyUrl}
                target="_blank"
                rel="noreferrer"
                className="primary-button"
              >
                <FiPlay />
                Ouvir agora
              </a>
              <ShareButton title={release.title} />
            </div>
            <StreamingLinks
              ids={[
                "spotify",
                "appleMusic",
                "amazonMusic",
                "deezer",
                "youtubeMusic",
                "youtube",
              ]}
              context={`release_${release.slug}`}
              compact
            />
          </div>
        </div>
      </section>

      <section className="section release-message-section">
        <div className="shell release-message-grid">
          <div data-reveal>
            <span className="eyebrow">MENSAGEM CENTRAL</span>
            <blockquote>“{release.lyricsExcerpt}”</blockquote>
          </div>
          <MusicPlayer title={`${release.title} — SelahBeat no Spotify`} />
        </div>
      </section>

      <section className="section related-section">
        <div className="shell">
          <div className="section-heading" data-reveal>
            <span className="eyebrow">CONTINUE OUVINDO</span>
            <h2>Outras faixas conectadas.</h2>
          </div>
          <ReleaseGrid items={related} />
        </div>
      </section>
    </main>
  );
}