frontend/src/app/movie/[title]/page.js

"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import "./movie.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faPlay,
  faBookmark as faBookmarkSolid,
} from "@fortawesome/free-solid-svg-icons";
import { faBookmark as faBookmarkRegular } from "@fortawesome/free-regular-svg-icons";
import apiClient from "@/api/apiClient";
import { Spinner } from "@/components/Spinner";
import CastSection from "@/components/CastSection";

export default function MovieDetailsPage({ params }) {
  const [metadata, setMetadata] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const decodedTitle = decodeURIComponent(params.title);
        const data = await apiClient.getMovieMetadataByTitle(decodedTitle);
        if (data) {
          setMetadata(data);
        } else {
          setError("Movie metadata not found.");
        }
      } catch (err) {
        setError("An error occurred while fetching movie metadata.");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [params.title]);

  if (loading) {
    return (
      <div className="loading">
        <Spinner />
      </div>
    );
  }

  if (error) {
    return <div className="movie-details-page-container">Error: {error}</div>;
  }

  const englishTitle =
    metadata?.data?.translations?.nameTranslations?.find(
      (translation) => translation.language === "eng"
    )?.name ||
    metadata?.data?.name ||
    "Title not available";

  const englishOverview =
    metadata?.data?.translations?.overviewTranslations?.find(
      (translation) => translation.language === "eng"
    )?.overview || "Overview not available";

  const backdropImage = metadata?.data?.artworks?.find(
    (artwork) => artwork.type === 15
  )?.image;

  const genres = metadata?.data?.genres || [];
  const cast = metadata?.data?.characters || [];
  return (
    <div className="movie-details-page">
      <div
        className="movie-details-backdrop"
        style={{
          backgroundImage: `
            linear-gradient(to right,  rgb(17 18 31 / 80%) 50%, transparent 50%),
            linear-gradient(rgba(0, 0, 0, 0.1) 0%, #11121f 70%),
            url("${backdropImage}")
        `,
        }}
      ></div>

      <div className="movie-details-page-container">
        <div className="movie-details-header">
          <h1>
            {englishTitle} {"(" + metadata?.data?.year + ")" || ""}
          </h1>
        </div>
        <div className="movie-details-poster">
          <Image
            src={
              metadata?.data?.image ||
              "https://via.placeholder.com/800x450?text=No+Image+Available"
            }
            alt={`${englishTitle} Poster`}
            height={300}
            width={250}
          />
        </div>
        <div className="movie-details-actions">
          <Link href={`/player/movie/${params.title}`}>
            <button className="play-button">
              <FontAwesomeIcon icon={faPlay} size="lg" /> Play
            </button>
          </Link>
          <button className="add-list-button">
            <FontAwesomeIcon icon={faBookmarkRegular} size="lg" /> MyList
          </button>
        </div>
        <div className="movie-details-info">
          <div className="movie-details-metadata">
            <label className="movie-geners-section">
              <strong>Genre:</strong>{" "}
              {genres.length > 0 ? (
                <ul className="movie-genre-list">
                  {genres.map((genre) => (
                    <li key={genre.id} className="movie-genre-item">
                      <Link href={`/genres/${genre.name}`} passHref>
                        <label className="movie-genre-link">{genre.name}</label>
                      </Link>
                    </li>
                  ))}
                </ul>
              ) : (
                "Genres not available"
              )}
            </label>
            <p>
              <strong>Director / Writer:</strong> Jon Watts, Steve Ditko, Stan
              Lee, Chris McKenna, Erik Sommers
            </p>
            <p>
              <strong>Stars:</strong> Tom Holland, Angourie Rice, Samuel L.
              Jackson, Zendaya, Jon Favreau, Jake Gyllenhaal, Marisa Tomei
            </p>
            <p>
              <strong>Release Year:</strong> {metadata?.data?.year || "N/A"}
            </p>
            <p>
              <strong>Runtime:</strong>{" "}
              {metadata?.data?.runtime
                ? `${metadata.data.runtime} minutes`
                : "N/A"}
            </p>
          </div>
          <div className="movie-details-overview">
            <h2>Storyline</h2>
            <p>{englishOverview}</p>
            <p>
              <strong>Content Rating:</strong>{" "}
              {metadata?.data?.contentRatings?.[0]?.fullname || "Not Rated"}
            </p>
          </div>
          <div className="movie-details-metadata"><CastSection cast={cast} /></div>
        </div>
      </div>
    </div>
  );
}