import Image from "next/image";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/tmdb";

export function MovieHeader({
  movie,
  showBack = true,
}: {
  movie: TmdbMovieDetails;
  showBack?: boolean;
}) {
  const poster = getPosterUrl(movie.poster_path, "w500");
  const year = movie.release_date?.slice(0, 4);
  const certification = getUsCertification(movie);

  return (
    <div className="space-y-6">
      {showBack && (
        <Link
          href="/"
          className="inline-flex w-fit items-center gap-2 text-sm text-stone-500 transition hover:text-amber-700"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to search
        </Link>
      )}

      <div className="flex flex-col gap-6 sm:flex-row sm:items-end">
        <div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-stone-200 bg-stone-100 shadow-sm sm:mx-0">
          {poster ? (
            <Image
              src={poster}
              alt={movie.title}
              fill
              className="object-cover"
              sizes="144px"
              priority
            />
          ) : (
            <div className="flex h-full items-center justify-center text-sm text-stone-500">
              No poster
            </div>
          )}
        </div>

        <div className="space-y-3 text-center sm:text-left">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight text-stone-950 md:text-4xl">
              {movie.title}
            </h1>
            <p className="mt-1 text-stone-600">
              {[year, movie.runtime ? `${movie.runtime} min` : null]
                .filter(Boolean)
                .join(" · ")}
            </p>
          </div>

          <div className="flex flex-wrap justify-center gap-2 sm:justify-start">
            {certification ? (
              <span className="rounded-full border border-amber-300 bg-amber-100 px-3 py-1 text-sm font-medium text-amber-700">
                {certification}
              </span>
            ) : null}
            {movie.genres.map((genre) => (
              <span
                key={genre.id}
                className="rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-sm text-stone-700"
              >
                {genre.name}
              </span>
            ))}
          </div>

          {movie.overview ? (
            <p className="max-w-3xl text-sm leading-relaxed text-stone-600 md:text-base">
              {movie.overview}
            </p>
          ) : null}
        </div>
      </div>
    </div>
  );
}