"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { FiArrowUpRight, FiChevronRight, FiPlay, FiX } from "react-icons/fi";
import { confirmedPlatforms } from "@/data/platforms";
import { featuredRelease, releases } from "@/data/releases";
import { site } from "@/data/site";
import { trackEvent, trackPlatformClick } from "@/lib/analytics";
import { cn } from "@/lib/utils";
import { Logo } from "@/components/logo";
import { PlatformIcon } from "@/components/platform-icon";

const primaryIds = [
  "spotify",
  "appleMusic",
  "youtubeMusic",
  "youtube",
  "amazonMusic",
  "deezer",
] as const;

export function BioExperience() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    trackEvent("bio_page_view");
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    const close = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", close);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", close);
    };
  }, [open]);

  const primary = confirmedPlatforms.filter((platform) =>
    primaryIds.includes(platform.id as (typeof primaryIds)[number]),
  );

  return (
    <main className="bio-page">
      <div className="bio-background">
        <Image
          src="/images/brand/hero.webp"
          alt=""
          fill
          priority
          sizes="100vw"
        />
      </div>
      <div className="bio-overlay" />

      <div className="bio-shell">
        <header className="bio-header">
          <Logo compact priority />
          <Link href="/" className="bio-site-link">
            SITE OFICIAL
            <FiArrowUpRight />
          </Link>
        </header>

        <section className="bio-intro">
          <div className="bio-logo">
            <Image
              src="/images/brand/logo.webp"
              alt="SelahBeat"
              width={190}
              height={190}
              priority
            />
          </div>
          <span className="eyebrow">SELAHBEAT / OFICIAL</span>
          <h1>Verdades eternas no som do presente.</h1>
          <p>{site.bio}</p>
        </section>

        <section className="bio-featured">
          <div className="bio-featured-cover">
            <Image
              src={featuredRelease.cover}
              alt={`Capa de ${featuredRelease.title}`}
              fill
              priority
              sizes="96px"
            />
            <a
              href={featuredRelease.spotifyUrl}
              target="_blank"
              rel="noreferrer"
              aria-label={`Ouvir ${featuredRelease.title}`}
              onClick={() => trackEvent("play_release", { release: featuredRelease.slug })}
            >
              <FiPlay />
            </a>
          </div>
          <div>
            <span>ÚLTIMO DESTAQUE</span>
            <strong>{featuredRelease.title}</strong>
            <small>{featuredRelease.style}</small>
          </div>
          <Link href={`/musicas/${featuredRelease.slug}`} aria-label="Ver detalhes">
            <FiChevronRight />
          </Link>
        </section>

        <section className="bio-links" aria-label="Plataformas musicais">
          {primary.map((platform, index) => (
            <a
              key={platform.id}
              href={platform.url}
              target="_blank"
              rel="noreferrer"
              className={cn(index === 0 && "is-primary")}
              aria-label={`Ouvir SelahBeat no ${platform.name}`}
              onClick={() => trackPlatformClick(platform.name, "bio")}
            >
              <PlatformIcon id={platform.id} />
              <span>Ouvir no {platform.name}</span>
              <FiArrowUpRight />
            </a>
          ))}
        </section>

        <button className="platform-sheet-trigger" type="button" onClick={() => setOpen(true)}>
          Escolha onde ouvir
          <span>10 plataformas</span>
        </button>

        <section className="bio-latest">
          <div className="bio-section-title">
            <span>ÚLTIMOS LANÇAMENTOS</span>
            <Link href="/musicas">Ver catálogo</Link>
          </div>
          <div className="bio-release-row">
            {releases.slice(0, 5).map((release) => (
              <Link key={release.slug} href={`/musicas/${release.slug}`}>
                <Image
                  src={release.cover}
                  alt={`Capa de ${release.title}`}
                  width={118}
                  height={118}
                />
                <span>{release.title}</span>
              </Link>
            ))}
          </div>
        </section>

        <footer className="bio-footer">
          <p>Direção humana. Tecnologia como ferramenta.</p>
          <strong>Toda glória a Deus.</strong>
        </footer>
      </div>

      <div
        className={cn("platform-sheet-backdrop", open && "is-open")}
        onClick={() => setOpen(false)}
        aria-hidden={!open}
      />
      <aside
        className={cn("platform-sheet", open && "is-open")}
        aria-hidden={!open}
        aria-label="Todas as plataformas"
      >
        <div className="platform-sheet-header">
          <div>
            <span className="eyebrow">ONDE OUVIR</span>
            <h2>Escolha sua plataforma.</h2>
          </div>
          <button type="button" onClick={() => setOpen(false)} aria-label="Fechar">
            <FiX />
          </button>
        </div>
        <div className="platform-sheet-list">
          {confirmedPlatforms.map((platform) => (
            <a
              key={platform.id}
              href={platform.url}
              target="_blank"
              rel="noreferrer"
              onClick={() => trackPlatformClick(platform.name, "bio_sheet")}
            >
              <PlatformIcon id={platform.id} />
              <span>{platform.name}</span>
              <FiArrowUpRight />
            </a>
          ))}
        </div>
      </aside>
    </main>
  );
}