import React, { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";
import { useGetSearchData } from "@/state/search/search.action";
import Image from "next/image";
import Link from "next/link";
import { truncateWords } from "@/lib/common-function";
import { useSettingsStore } from "@/state/store/settings.store";
import { Input } from "../ui/input";
import { SearchDataResponse } from "./search-type";

interface SearchBoxProps {
  isOpen: boolean;
  setIsOpen: (open: boolean) => void;
}

const SearchBox: React.FC<SearchBoxProps> = ({ isOpen, setIsOpen }) => {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebouncedQuery] = useState(query);

  const { language, country } = useSettingsStore();

  // Debounce search input
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500);

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

  // API payload
  const payload = {
    search: debouncedQuery,
    country: country?.country_id ?? "",
    language: language?.language_id ?? "",
  };

  // The header mounts this on every page. Without the gate it fetched the
  // whole series list on load for a dialog nobody had opened yet.
  const { data, isLoading } = useGetSearchData(payload, { enabled: isOpen });
  const typedData = data as SearchDataResponse;
  const actionResults = typedData?.action ?? [];
  const comedyResults = typedData?.comedy ?? [];
  const horrorResults = typedData?.horror ?? [];
  const topPerformingSeries = typedData?.topPerformingSeries ?? [];

  // Clear search when dialog closes
  const handleDialogChange = (open: boolean) => {
    setIsOpen(open);
    if (!open) {
      setQuery("");
      setDebouncedQuery("");
    }
  };
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const renderCategoryResults = (categoryName: string, results: any[]) => {
    if (results.length === 0) return null;

    return (
      <div key={categoryName}>
        <h2 className="text-xl font-bold mt-6 mb-3">{categoryName}</h2>
        <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {results?.map(
            (
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
              item: any
            ) => (
              <div
                key={item.series_id || item.video_id}
                className="rounded-[10px] border border-gray-700 overflow-hidden"
              >
                <Link
                  href={
                    item?.series_id
                      ? `/series/${item.series_id}`
                      : `/video/${item.video_id}`
                  }
                  onClick={() => setIsOpen(false)}
                >
                  <div className="relative aspect-[3/4] w-full h-[100px] overflow-hidden">
                    <Image
                      src={`${item?.series_thumbnail ?? ""}`}
                      alt={item.title}
                      fill
                      sizes="(max-width: 768px) 50vw, 33vw"
                      className="object-cover transition-transform duration-500 hover:scale-105"
                    />
                  </div>
                  <div className="p-2">
                    <p className="text-sm font-medium">{item.title}</p>
                    <p className="text-xs text-gray-400">
                      {truncateWords(item.description, 20)}
                    </p>
                  </div>
                </Link>
              </div>
            )
          )}
        </div>
      </div>
    );
  };

  const hasResults =
    actionResults.length > 0 ||
    comedyResults.length > 0 ||
    horrorResults.length > 0 ||
    topPerformingSeries.length > 0;

  return (
    <Dialog open={isOpen} onOpenChange={handleDialogChange}>
      <DialogContent className="!max-w-[1024px] !min-h-[600px] w-full bg-black border border-[lch(100_0_0_/_0.25)]">
        <DialogHeader>
          <DialogTitle className="mb-8">
            Browsing and Discovering Series/Video.
          </DialogTitle>
          <DialogDescription>
            <Input
              type="text"
              placeholder="Search..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="w-full rounded-md border border-gray-500 focus:border-transparent focus:ring-0 p-2 text-white focus-visible:ring-0"
            />
            {isLoading && (
              <p className="min-h-[400px] flex items-center justify-center text-sm text-gray-400 mt-4 ">
                Loading...
              </p>
            )}
          </DialogDescription>

          <div className="max-h-[500px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900 custom-scrollbar">
            {debouncedQuery && !isLoading && !hasResults ? (
              <p className="min-h-[400px] flex items-center justify-center text-[20px] text-gray-400 mt-4">
                No results found
              </p>
            ) : (
              <>
                {renderCategoryResults(
                  "Top Performing Series",
                  topPerformingSeries
                )}
                {renderCategoryResults("Action", actionResults)}
                {renderCategoryResults("Comedy", comedyResults)}
                {renderCategoryResults("Horror", horrorResults)}
              </>
            )}
          </div>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

export default SearchBox;