import Link from "next/link";
import { notFound } from "next/navigation";
import { projects } from "@/data/projects";
import { SectionLabel } from "@/components/ui/SectionLabel";
import { VideoPreview } from "@/components/media/VideoPreview";
import { ArrowLink } from "@/components/ui/ArrowLink";

export function generateStaticParams() {
  return projects.map((project) => ({ slug: project.slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const project = projects.find((item) => item.slug === slug);
  if (!project) return {};
  return {
    title: `${project.title} / ${project.client}`,
    description: project.description,
  };
}

export default async function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const project = projects.find((item) => item.slug === slug);
  if (!project) notFound();

  const currentIndex = projects.findIndex((item) => item.slug === project.slug);
  const next = projects[(currentIndex + 1) % projects.length];

  return (
    <div className="page">
      <section className="project-hero">
        <div className="container">
          <SectionLabel number="01">PROJECT / {project.category.toUpperCase()}</SectionLabel>
          <div className="project-hero__meta">
            <h1 className="display">{project.title}</h1>
            <div className="project-hero__info">
              <span>{project.client}</span>
              <span>{project.year}</span>
              <span>{project.category}</span>
            </div>
          </div>
          <div className="project-video">
            <VideoPreview src={project.fullVideo} poster={project.thumbnail} autoPlay label="PLAY" />
          </div>
        </div>
      </section>

      <section className="project-copy">
        <div className="container" style={{ display: "contents" }}>
          <div className="project-copy__big">{project.description}</div>
          <div className="project-copy__blocks">
            <div className="project-copy__block">
              <h3>PROJECT OVERVIEW</h3>
              <p>{project.overview}</p>
            </div>
            <div className="project-copy__block">
              <h3>CHALLENGE</h3>
              <p>{project.challenge}</p>
            </div>
            <div className="project-copy__block">
              <h3>OUR APPROACH</h3>
              <p>{project.approach}</p>
            </div>
            <div className="project-copy__block">
              <h3>DELIVERABLES</h3>
              <div className="deliverables">{project.deliverables.map((x) => <span key={x}>{x}</span>)}</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="container">
          <SectionLabel number="02">SERVICES / DELIVERED</SectionLabel>
          <div className="feature-list" style={{ marginTop: 25 }}>
            {project.services.map((service) => <span key={service}>{service}</span>)}
          </div>
        </div>
      </section>

      <section className="next-project">
        <div className="container">
          <span className="eyebrow">NEXT PROJECT</span>
          <Link href={`/work/${next.slug}`} data-cursor="VIEW">
            <h2 className="display">{next.title}</h2>
            <span className="next-project__arrow">↗</span>
          </Link>
          <div style={{ marginTop: 25 }}><ArrowLink href="/work">BACK TO WORK</ArrowLink></div>
        </div>
      </section>
    </div>
  );
}