import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import "./SearchPage.css";

const SearchPage = () => {
  const [movieDetails, setMovieDetails] = useState(null);
  const [searchResults, setSearchResults] = useState([]);
  const [trailerKey, setTrailerKey] = useState(null); 
  const location = useLocation();
  const navigate = useNavigate();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get("q");
  const movieId = queryParams.get("id");

  
  useEffect(() => {
    if (movieId) {
      const fetchMovieDetails = async () => {
        const movieResponse = await fetch(
          `https://api.themoviedb.org/3/movie/${movieId}?api_key=59690efd14e375225c4531fcdced2901`
        );
        const movieData = await movieResponse.json();
        setMovieDetails(movieData);

        const videoResponse = await fetch(
          `https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=59690efd14e375225c4531fcdced2901`
        );
        const videoData = await videoResponse?.json();
        const trailer = videoData?.results?.find(
          (video) => video.type === "Trailer"
        );
        if (trailer) {
          setTrailerKey(trailer?.key);
        }
      };
      fetchMovieDetails();
    }
  }, [movieId]);


  useEffect(() => {
    if (query) {
      const fetchSearchResults = async () => {
        const response = await fetch(
          `https://api.themoviedb.org/3/search/movie?api_key=59690efd14e375225c4531fcdced2901&query=${query}`
        );
        const data = await response.json();
        setSearchResults(data?.results);
      };
      fetchSearchResults();
    }
  }, [query]);

  
  if (movieDetails) {
    return (
      <div className="movie-detail-container">
        <div className="movie-detail-card">
          <img
            src={`https://image.tmdb.org/t/p/w500/${movieDetails?.poster_path}`}
            alt={movieDetails?.title}
            className="movie-detail-poster"
          />
          <div className="movie-detail-info">
            <h2>{movieDetails?.title}</h2>
            <p className="movie-detail-release-date">
              <strong>Release Date:</strong> {movieDetails?.release_date}
            </p>
            <p className="movie-detail-tagline">
              <em>{movieDetails?.tagline}</em>
            </p>
            <p className="movie-detail-overview">{movieDetails?.overview}</p>
            <p className="movie-detail-genres">
              <strong>Genres:</strong>{" "}
              {movieDetails.genres.map((genre) => genre.name).join(", ")}
            </p>
            <p className="movie-detail-runtime">
              <strong>Runtime:</strong> {movieDetails?.runtime} minutes
            </p>
            <a
              href={movieDetails?.homepage}
              target="_blank"
              rel="noopener noreferrer"
              className="movie-detail-link"
            >
              Official Website
            </a>

          
            {trailerKey && (
              <div className="movie-trailer">
                <h3>Watch Trailer:</h3>
                <iframe
                  title="movie-trailer"
                  width="100%"
                  height="400"
                  src={`https://www.youtube.com/embed/${trailerKey}`}
                  frameBorder="0"
                  allowFullScreen
                ></iframe>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  
  if (searchResults?.length > 0) {
    return (
      <div>
        <h1>Search Results for "{query}"</h1>
        <div className="search-results">
          {searchResults.map((movie) => (
            <div
              key={movie.id}
              className="search-item"
              onClick={() => navigate(`/search?id=${movie?.id}`)}
            >
              <img
                src={`https://image.tmdb.org/t/p/w500/${movie?.poster_path}`}
                alt={movie?.title}
                className="search-item-poster"
              />
              <h3>{movie?.title}</h3>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return <p>No results found.</p>;
};

export default SearchPage;