"use client";

import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useSeriesListByCategory } from "@/state/categories/categories.action";
import { useGetGlobalSearch } from "@/state/search/search.action";
import { useSettingsStore } from "@/state/store/settings.store";
import { Search, X } from "lucide-react";
import Link from "next/link";
import { useState, useEffect, useRef } from "react";

// -------------------- Types --------------------
type SeriesItem = {
  id: string;
  title: string;
  series_id?: string;
  video_id?: string;
  type?: "series" | "video";
};

type PaginatedResponse<T> = {
  pages: {
    items: T[];
  }[];
};

type SearchItem = {
  id: string;
  title: string;
  type: "series" | "video";
  series_id?: string;
  video_id?: string;
};

type SearchResponse = {
  items: SearchItem[];
};

// -------------------- Component --------------------
export default function AnimatedSearch() {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebouncedQuery] = useState(query);
  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);

  const { language, country } = useSettingsStore();

  // -------------------- Debounce --------------------
  useEffect(() => {
    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);

    debounceTimeout.current = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500); // 500ms delay

    return () => {
      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
    };
  }, [query]);

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

  // -------------------- Hooks --------------------
  const { data: dataSearch, isLoading } = useGetGlobalSearch(payload) as {
    data?: SearchResponse;
    isLoading: boolean;
  };

  const { data } = useSeriesListByCategory({
    category: "trending",
    languageId: language?.language_id,
    countryId: country?.country_id,
  }) as { data?: PaginatedResponse<SeriesItem> };

  const trendingItems = data?.pages?.[0]?.items ?? [];
  const searchItems = dataSearch?.items ?? [];

  // Decide what to render
  const itemsToRender = debouncedQuery ? searchItems : trendingItems;

  // Generate href for item
  const getItemHref = (
    item: SeriesItem | SearchItem,
    isSearchItem: boolean
  ) => {
    if (isSearchItem) {
      if (item.type === "series") return `/series/${item.id}`;
      if (item.type === "video") return `/video/${item.id}`;
    } else {
      if ("series_id" in item && item.series_id)
        return `/series/${item.series_id}`;
      if ("video_id" in item && item.video_id) return `/video/${item.video_id}`;
    }
    return "#"; // fallback
  };

  return (
    <div className="relative flex items-center">
      <Popover>
        <PopoverTrigger asChild>
          <div className="flex items-center cursor-pointer">
            <Search size={22} />
          </div>
        </PopoverTrigger>

        <PopoverContent
          side="bottom"
          align="end"
          className="w-[360px] p-4 bg-[#0A0A0B] text-white rounded-xl border border-white/20 shadow-lg top-[-30px] relative"
        >
          {/* Search Input */}
          <div className="flex gap-2 pl-2 pr-2 rounded-full bg-[#0A0A0B]/80 border border-white/20 text-white placeholder:text-white/50 focus-visible:ring-0 focus-visible:ring-offset-0">
            <Input
              autoFocus
              placeholder="Search anything you like"
              className="border-0 focus:outline-0 focus-visible:ring-0"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            {query && (
              <button
                className="text-white/60 hover:text-white transition"
                onClick={() => setQuery("")}
              >
                <X size={18} />
              </button>
            )}
          </div>

          {/* Results */}
          <div className="space-y-4 keep-open mt-4">
            <div>
              <h4 className="font-semibold mb-2 flex items-center gap-1">
                {debouncedQuery ? "🔍 SEARCH RESULTS" : "🔥 TRENDING"}
              </h4>
              {isLoading && <p className="text-white/60 text-sm">Loading...</p>}
              <ul className="space-y-1 text-sm">
                {itemsToRender.length > 0
                  ? itemsToRender?.map((item, index) => (
                      <li key={index} className="my-2">
                        <Link
                          href={getItemHref(item, !!debouncedQuery)}
                          className="text-[16px] text-white hover:text-[#ED3A57]"
                        >
                          {item.title}
                        </Link>
                      </li>
                    ))
                  : !isLoading && (
                      <li className="text-white/60 text-sm">
                        No results found
                      </li>
                    )}
              </ul>
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}