"use client"; // Indicate that this file is a client component in Next.js

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { search } from "@/api/searchApi"; // Ensure the path is correct for your API
import "./searchPage.css";

const SearchPage = () => {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState({ films: [], tv_series: [] });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [debouncedQuery, setDebouncedQuery] = useState("");

  const router = useRouter(); // Use Next.js useRouter for navigation

  useEffect(() => {
    const handler = setTimeout(() => {
      if (debouncedQuery) {
        handleSearch();
      }
    }, 200); // Delay of 200ms

    return () => {
      clearTimeout(handler);
    };
  }, [debouncedQuery]);

  const handleSearch = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await search(debouncedQuery);
      setResults(data);
    } catch (err) {
      setError("Failed to fetch search results.");
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (e) => {
    setQuery(e.target.value);
    setDebouncedQuery(e.target.value);
  };

  const handleItemClick = (path) => {
    router.push(path); // Use router.push for navigation
  };

  return (
    <div className="search-page">
      <div className="search-container">
        <input
          type="text"
          value={query}
          onChange={handleChange}
          placeholder="Search for films or TV shows..."
          className="search-input"
        />
        {loading && (
          <div className="loading-indicator">
            <div className="spinner"></div>
          </div>
        )}
      </div>
      {error && <div className="error-message">{error}</div>}
      <div className="results-container">
        {results.films.length > 0 && (
          <div className="results-section">
            <h2>Films</h2>
            <ul className="results-list">
              {results.films.map((film, index) => (
                <li
                  key={index}
                  className="result-item"
                  onClick={() => handleItemClick(`/film/${encodeURIComponent(film)}`)}
                >
                  {film}
                </li>
              ))}
            </ul>
          </div>
        )}
        {results.tv_series.length > 0 && (
          <div className="results-section">
            <h2>TV Series</h2>
            <ul className="results-list">
              {results.tv_series.map((series, index) => (
                <li
                  key={index}
                  className="result-item"
                  onClick={() => handleItemClick(`/tvshow/${encodeURIComponent(series)}`)}
                >
                  {series}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

export default SearchPage;