"use client";

import React, { useState, useEffect, useTransition, useCallback } from "react";
import {
  Flame,
  Search,
  RotateCcw,
  RefreshCw,
  FileVideo,
  Sparkles,
  SlidersHorizontal,
  Film,
  ArrowRight,
  TrendingUp,
} from "lucide-react";
import { Movie, Category, ScrapeResult, ViewState } from "./types";
import {
  DEFAULT_CATEGORIES,
  getSiteName,
  getSiteTitle,
  getSiteDescription,
  SITE_NAME,
} from "./config/site";
import { getListing, searchMovies } from "./services/scraper";
import { Header } from "./components/Header";
import { SideMenu } from "./components/SideMenu";
import { HeroSlider } from "./components/HeroSlider";
import { NoticeBanner } from "./components/NoticeBanner";
import { PosterCard } from "./components/PosterCard";
import { SkeletonCard } from "./components/SkeletonCard";
import { Pagination } from "./components/Pagination";
import { PostPage } from "./components/PostPage";
import { Footer } from "./components/Footer";
import { WelcomePopup } from "./components/WelcomePopup";
import { SearchFilterToolbar } from "./components/SearchFilterToolbar";

export function StudioApp() {
  const [viewState, setViewState] = useState<ViewState>({ type: "list" });
  const [isPending, startTransition] = useTransition();

  // Navigation & filter states
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const [selectedQuality, setSelectedQuality] = useState("");
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const [selectedYear, setSelectedYear] = useState("");
  const [sortBy, setSortBy] = useState("latest");
  const [currentPage, setCurrentPage] = useState(1);

  // Data states
  const [movies, setMovies] = useState<Movie[]>([]);
  const [categories, setCategories] = useState<Category[]>(DEFAULT_CATEGORIES);
  const [totalPages, setTotalPages] = useState(1);
  const [totalFound, setTotalFound] = useState<number | undefined>(undefined);
  const [hasNext, setHasNext] = useState(false);
  const [hasPrev, setHasPrev] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // UI state
  const [sideMenuOpen, setSideMenuOpen] = useState(false);

  // Client-Side SEO updates (safe, stable)
  const updateSeo = useCallback((movieList: Movie[], search: string, catSlug: string) => {
    if (typeof document === "undefined") return;

    const siteName = getSiteName();
    let pageTitle = getSiteTitle();

    if (search) {
      pageTitle = `Search: ${search} — ${siteName}`;
    } else if (catSlug) {
      pageTitle = `${catSlug.toUpperCase()} Movies & Web Series — ${siteName}`;
    }

    document.title = pageTitle;

    // Inject/update JSON-LD ItemList schema
    if (movieList && movieList.length > 0) {
      let schemaScript = document.getElementById("seo-schema") as HTMLScriptElement;
      if (!schemaScript) {
        schemaScript = document.createElement("script");
        schemaScript.id = "seo-schema";
        schemaScript.type = "application/ld+json";
        document.head.appendChild(schemaScript);
      }

      const items = movieList.slice(0, 15).map((m, index) => ({
        "@type": "ListItem",
        position: index + 1,
        name: m.title,
        url: typeof window !== "undefined" ? `${window.location.origin}/${m.slug}` : `/${m.slug}`,
        image: m.imageUrl,
      }));

      schemaScript.text = JSON.stringify({
        "@context": "https://schema.org",
        "@type": "ItemList",
        itemListElement: items,
      });
    }
  }, []);

  // Parse Initial URL & handle Popstate
  useEffect(() => {
    if (typeof window === "undefined") return;

    const parseRouteFromLocation = () => {
      const pathname = window.location.pathname;
      const searchParams = new URLSearchParams(window.location.search);

      // Category route
      if (pathname.startsWith("/category/")) {
        const parts = pathname.split("/").filter(Boolean);
        const catSlug = parts[1] || "";
        setSelectedCategory(catSlug);
        setViewState({ type: "list" });
        return;
      }

      // Search route
      if (searchParams.has("q") || pathname.includes("search")) {
        const q = searchParams.get("q") || "";
        setSearchTerm(q);
        setDebouncedSearch(q);
        setViewState({ type: "list" });
        return;
      }

      // Root or page route
      if (pathname === "/" || pathname.startsWith("/page/")) {
        setViewState({ type: "list" });
        return;
      }

      // Single Movie Post slug
      const slug = pathname.replace(/^\/+|\/+$/g, "");
      if (slug && slug !== "index.html" && !slug.includes(".")) {
        setViewState({ type: "post", slug });
      } else {
        setViewState({ type: "list" });
      }
    };

    parseRouteFromLocation();

    const handlePopState = () => {
      parseRouteFromLocation();
    };

    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);
  }, []);

  // Debounce search input (350ms)
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearch(searchTerm);
      if (searchTerm) {
        setCurrentPage(1);
      }
    }, 350);
    return () => clearTimeout(handler);
  }, [searchTerm]);

  // Search submit handler (instant on Enter or Search click)
  const handleSearchSubmit = (overrideQuery?: string) => {
    const q = (overrideQuery !== undefined ? overrideQuery : searchTerm).trim();
    setSearchTerm(q);
    setDebouncedSearch(q);
    setCurrentPage(1);
    if (viewState.type !== "list") {
      setViewState({ type: "list" });
    }
    if (typeof window !== "undefined") {
      const newUrl = q ? `/?q=${encodeURIComponent(q)}` : "/";
      window.history.pushState({ search: q }, "", newUrl);
    }
  };

  // Quick search suggestion click handler
  const handleQuickSearch = (query: string) => {
    handleSearchSubmit(query);
  };

  // Clear search handler
  const handleClearSearch = () => {
    setSearchTerm("");
    setDebouncedSearch("");
    setCurrentPage(1);
    if (typeof window !== "undefined") {
      window.history.pushState({}, "", "/");
    }
  };

  // Search input change handler
  const handleSearchChange = (query: string) => {
    setSearchTerm(query);
    if (viewState.type !== "list") {
      setViewState({ type: "list" });
    }
  };

  // Fetch listing or search results
  useEffect(() => {
    if (viewState.type !== "list") return;

    let isMounted = true;
    const loadData = async () => {
      setLoading(true);
      setError(null);

      try {
        let res: ScrapeResult;

        if (debouncedSearch.trim()) {
          res = await searchMovies(debouncedSearch.trim(), currentPage);
          if (isMounted) {
            setTotalFound(res.totalFound);
          }
        } else {
          res = await getListing(selectedCategory, currentPage);
          if (isMounted) {
            setTotalFound(undefined);
          }
        }

        if (!isMounted) return;

        setMovies(res.movies || []);
        if (res.categories && res.categories.length > DEFAULT_CATEGORIES.length) {
          setCategories(res.categories);
        }
        setTotalPages(res.totalPages || 1);
        setHasNext(res.hasNext || false);
        setHasPrev(res.hasPrev || false);

        // Update Client-Side SEO metadata
        updateSeo(res.movies, debouncedSearch, selectedCategory);
      } catch (err: any) {
        if (!isMounted) return;
        setError(
          err?.message ||
            "The source site is currently unreachable. Please try again shortly."
        );
      } finally {
        if (isMounted) setLoading(false);
      }
    };

    loadData();

    return () => {
      isMounted = false;
    };
  }, [debouncedSearch, selectedCategory, currentPage, viewState.type, updateSeo]);

  // Open movie post
  const handleSelectMovie = (movie: Movie) => {
    if (!movie.slug) return;

    startTransition(() => {
      setViewState({
        type: "post",
        slug: movie.slug!,
        fallbackTitle: movie.title,
        fallbackImage: movie.imageUrl,
      });

      // Update URL with history.pushState so it is shareable
      if (typeof window !== "undefined") {
        window.history.pushState(
          { type: "post", slug: movie.slug },
          "",
          `/${movie.slug}`
        );
      }
    });
  };

  // Back button handler
  const handleBackToList = () => {
    if (typeof window !== "undefined" && window.history.length > 1) {
      window.history.back();
    } else {
      setViewState({ type: "list" });
      if (typeof window !== "undefined") {
        window.history.pushState({}, "", "/");
      }
    }
  };

  // Home logo click handler
  const handleHomeClick = () => {
    setSearchTerm("");
    setDebouncedSearch("");
    setSelectedCategory("");
    setSelectedQuality("");
    setSelectedLanguage("");
    setSelectedYear("");
    setSortBy("latest");
    setCurrentPage(1);
    setViewState({ type: "list" });

    if (typeof window !== "undefined") {
      window.history.pushState({}, "", "/");
    }
  };

  // Category switch handler
  const handleSelectCategory = (slug: string) => {
    setSelectedCategory(slug);
    setCurrentPage(1);
    setSearchTerm("");
    setDebouncedSearch("");
    setViewState({ type: "list" });

    if (typeof window !== "undefined") {
      const newUrl = slug ? `/category/${slug}/` : "/";
      window.history.pushState({ category: slug }, "", newUrl);
    }
  };

  // Filter and sort movies client-side
  const filteredAndSortedMovies = React.useMemo(() => {
    let result = movies.filter((m) => {
      const text = `${m.title} ${m.quality || ""} ${(m.categories || []).join(" ")} ${m.category || ""}`.toLowerCase();

      // Quality filter
      if (selectedQuality) {
        const qLow = selectedQuality.toLowerCase();
        if (qLow.includes("4k")) {
          if (!text.includes("4k") && !text.includes("2160p")) return false;
        } else if (qLow.includes("1080p")) {
          if (!text.includes("1080p")) return false;
        } else if (qLow.includes("720p")) {
          if (!text.includes("720p")) return false;
        } else if (qLow.includes("480p")) {
          if (!text.includes("480p")) return false;
        } else if (qLow.includes("hevc")) {
          if (!text.includes("hevc") && !text.includes("hdr") && !text.includes("x265")) return false;
        }
      }

      // Language / Audio filter
      if (selectedLanguage) {
        const lLow = selectedLanguage.toLowerCase();
        if (lLow.includes("dual")) {
          if (!text.includes("dual")) return false;
        } else if (lLow.includes("hindi")) {
          if (!text.includes("hindi")) return false;
        } else if (lLow.includes("english")) {
          if (!text.includes("english")) return false;
        } else if (lLow.includes("tamil")) {
          if (!text.includes("tamil")) return false;
        } else if (lLow.includes("telugu")) {
          if (!text.includes("telugu")) return false;
        } else if (lLow.includes("multi")) {
          if (!text.includes("multi")) return false;
        } else if (lLow.includes("south")) {
          if (
            !text.includes("south") &&
            !text.includes("tamil") &&
            !text.includes("telugu") &&
            !text.includes("malayalam") &&
            !text.includes("kannada")
          ) {
            return false;
          }
        }
      }

      // Genre / Category filter
      if (selectedCategory && debouncedSearch) {
        const catLow = selectedCategory.toLowerCase();
        if (!text.includes(catLow)) return false;
      }

      // Release Year filter
      if (selectedYear) {
        if (selectedYear === "2010s") {
          const mYear = parseInt(m.year || "0", 10);
          if (mYear < 2010 || mYear > 2019) return false;
        } else {
          if (m.year !== selectedYear && !text.includes(selectedYear)) {
            return false;
          }
        }
      }

      return true;
    });

    // Sorting
    if (sortBy === "az") {
      result = [...result].sort((a, b) => a.title.localeCompare(b.title));
    } else if (sortBy === "za") {
      result = [...result].sort((a, b) => b.title.localeCompare(a.title));
    } else if (sortBy === "year-desc") {
      result = [...result].sort(
        (a, b) => (parseInt(b.year || "0", 10) || 0) - (parseInt(a.year || "0", 10) || 0)
      );
    } else if (sortBy === "year-asc") {
      result = [...result].sort(
        (a, b) => (parseInt(a.year || "9999", 10) || 9999) - (parseInt(b.year || "9999", 10) || 9999)
      );
    } else if (sortBy === "quality") {
      const getQualityScore = (q?: string) => {
        if (!q) return 0;
        const low = q.toLowerCase();
        if (low.includes("4k") || low.includes("2160p")) return 5;
        if (low.includes("1080p")) return 4;
        if (low.includes("720p")) return 3;
        if (low.includes("480p")) return 2;
        return 1;
      };
      result = [...result].sort((a, b) => getQualityScore(b.quality) - getQualityScore(a.quality));
    }

    return result;
  }, [movies, selectedQuality, selectedLanguage, selectedCategory, debouncedSearch, selectedYear, sortBy]);

  const hasActiveFilters = Boolean(
    selectedQuality ||
      selectedLanguage ||
      selectedYear ||
      (selectedCategory && debouncedSearch) ||
      sortBy !== "latest"
  );

  const resetAllFilters = () => {
    setSelectedQuality("");
    setSelectedLanguage("");
    setSelectedYear("");
    setSortBy("latest");
    if (debouncedSearch) {
      setSelectedCategory("");
    }
  };

  // Conditions for HeroSlider & NoticeBanner
  const isHomeView = !selectedCategory && !debouncedSearch && currentPage === 1;
  const isUnfilteredList = !debouncedSearch && !hasActiveFilters && currentPage === 1;

  // Active Category Name
  const currentCategoryObj = categories.find((c) => c.slug === selectedCategory);
  const sectionTitle = debouncedSearch
    ? `Results for "${debouncedSearch}"`
    : selectedCategory
    ? `${currentCategoryObj?.name || selectedCategory} Movies`
    : "Latest Releases";

  return (
    <div className="min-h-screen bg-black text-white selection:bg-red-600 selection:text-white font-sans relative overflow-x-hidden">
      {/* 3 Fixed Decorative Red Radial Glows */}
      <div className="fixed top-[-100px] left-1/2 -translate-x-1/2 w-[600px] sm:w-[900px] h-[350px] bg-red-600/15 blur-[140px] pointer-events-none rounded-full z-0" />
      <div className="fixed top-[45%] right-[-150px] w-[500px] h-[500px] bg-red-700/10 blur-[150px] pointer-events-none rounded-full z-0" />
      <div className="fixed bottom-[-100px] left-[-150px] w-[500px] h-[500px] bg-red-600/10 blur-[150px] pointer-events-none rounded-full z-0" />

      {/* Clean Welcome Popup on every page load (Zero ads) */}
      <WelcomePopup />

      {/* Side Navigation Menu */}
      <SideMenu
        isOpen={sideMenuOpen}
        onClose={() => setSideMenuOpen(false)}
        categories={categories}
        selectedCategory={selectedCategory}
        onSelectCategory={handleSelectCategory}
      />

      {/* Sticky Header */}
      <Header
        onToggleMenu={() => setSideMenuOpen(true)}
        searchTerm={searchTerm}
        onSearchChange={handleSearchChange}
        onSearchSubmit={() => handleSearchSubmit()}
        selectedQuality={selectedQuality}
        onQualityChange={setSelectedQuality}
        selectedLanguage={selectedLanguage}
        onLanguageChange={setSelectedLanguage}
        selectedYear={selectedYear}
        onYearChange={setSelectedYear}
        onHomeClick={handleHomeClick}
        activeCategoryName={currentCategoryObj?.name}
        onResetFilters={resetAllFilters}
        hasActiveFilters={hasActiveFilters}
      />

      {/* Main App Container */}
      <main className="relative z-10 max-w-7xl mx-auto px-3 sm:px-6 pt-6">
        {viewState.type === "post" ? (
          <PostPage
            slug={viewState.slug}
            fallbackTitle={viewState.fallbackTitle}
            fallbackImage={viewState.fallbackImage}
            onBack={handleBackToList}
          />
        ) : (
          <div className="space-y-6">
            {/* Hero Slider (Home + Page 1 + No Filters) */}
            {isHomeView && movies.length > 0 && (
              <HeroSlider
                movies={movies}
                onSelectMovie={handleSelectMovie}
              />
            )}

            {/* Notice Banner (Unfiltered List) */}
            {isUnfilteredList && <NoticeBanner />}

            {/* Quick Category Chips Row */}
            <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none">
              {categories.slice(0, 12).map((cat) => {
                const isActive = selectedCategory === cat.slug;
                return (
                  <button
                    key={cat.slug || "all"}
                    onClick={() => handleSelectCategory(cat.slug)}
                    className={`px-3.5 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all duration-200 shrink-0 ${
                      isActive
                        ? "bg-red-600 text-white shadow-md shadow-red-600/30 border border-red-400/40"
                        : "bg-white/[0.04] text-white/70 hover:text-white hover:bg-white/[0.08] border border-white/10"
                    }`}
                  >
                    {cat.name}
                  </button>
                );
              })}
            </div>

            {/* Search Filter & Sorting Toolbar */}
            <SearchFilterToolbar
              searchTerm={debouncedSearch || searchTerm}
              onClearSearch={handleClearSearch}
              onQuickSearch={handleQuickSearch}
              totalFound={totalFound}
              filteredCount={filteredAndSortedMovies.length}
              isSearching={Boolean(debouncedSearch.trim())}
              selectedQuality={selectedQuality}
              onQualityChange={setSelectedQuality}
              selectedLanguage={selectedLanguage}
              onLanguageChange={setSelectedLanguage}
              selectedCategory={selectedCategory}
              onCategoryChange={setSelectedCategory}
              selectedYear={selectedYear}
              onYearChange={setSelectedYear}
              sortBy={sortBy}
              onSortChange={setSortBy}
              onResetFilters={resetAllFilters}
              hasActiveFilters={hasActiveFilters}
            />

            {/* Section Heading */}
            <div className="flex items-center justify-between gap-4 pt-2 border-b border-white/10 pb-4">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-xl bg-red-600/20 text-red-500 border border-red-500/30 flex items-center justify-center">
                  <Flame className="w-4 h-4" />
                </div>
                <div>
                  <h2 className="text-lg sm:text-xl font-bold text-white tracking-tight">
                    {sectionTitle}
                  </h2>
                  <p className="text-xs text-white/40">
                    High quality 480p, 720p, 1080p and 4K downloads
                  </p>
                </div>
              </div>

              {/* Page Pill */}
              <div className="flex items-center gap-2">
                <span className="px-3 py-1 rounded-full text-xs font-mono font-bold bg-white/[0.04] text-white/70 border border-white/10">
                  Page {currentPage} {totalPages > 1 ? `of ${totalPages}` : ""}
                </span>
              </div>
            </div>

            {/* Main Content Layout */}
            <div className="w-full">
              {/* Movie Cards Grid */}
              <div className="w-full">
                {loading ? (
                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
                    {Array.from({ length: 12 }).map((_, i) => (
                      <SkeletonCard key={i} />
                    ))}
                  </div>
                ) : error ? (
                  <div className="flex flex-col items-center justify-center p-8 sm:p-12 rounded-3xl bg-neutral-950/80 border border-red-500/30 text-center space-y-4 shadow-xl">
                    <div className="w-12 h-12 rounded-2xl bg-red-600/20 text-red-400 flex items-center justify-center border border-red-500/30">
                      <RefreshCw className="w-6 h-6" />
                    </div>
                    <div className="space-y-1 max-w-md">
                      <h3 className="text-base sm:text-lg font-bold text-white">
                        Unable to Connect to Movie Server
                      </h3>
                      <p className="text-xs text-white/60">{error}</p>
                    </div>
                    <button
                      onClick={() => {
                        setLoading(true);
                        const fetchPromise = debouncedSearch.trim()
                          ? searchMovies(debouncedSearch.trim(), currentPage)
                          : getListing(selectedCategory, currentPage);
                        fetchPromise
                          .then((r) => {
                            setMovies(r.movies);
                            setTotalPages(r.totalPages || 1);
                            setError(null);
                          })
                          .catch((e) => setError(e.message))
                          .finally(() => setLoading(false));
                      }}
                      className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-red-600 hover:bg-red-500 text-white font-bold text-xs transition-colors shadow-lg shadow-red-600/30"
                    >
                      <RefreshCw className="w-4 h-4" />
                      <span>Retry Connection</span>
                    </button>
                  </div>
                ) : filteredAndSortedMovies.length === 0 ? (
                  <div className="flex flex-col items-center justify-center p-8 sm:p-12 rounded-3xl bg-neutral-950/60 border border-white/10 text-center space-y-4">
                    <div className="w-12 h-12 rounded-2xl bg-white/[0.05] border border-white/10 flex items-center justify-center text-white/40">
                      <FileVideo className="w-6 h-6" />
                    </div>
                    <div className="space-y-1 max-w-md">
                      <h3 className="text-base font-bold text-white">
                        {debouncedSearch
                          ? `No results found for "${debouncedSearch}"`
                          : "No Movies Found with Current Filters"}
                      </h3>
                      <p className="text-xs text-white/50">
                        {hasActiveFilters
                          ? "Try clearing some of your filters or search keywords to see more releases."
                          : "Try searching with a shorter movie title or different spelling."}
                      </p>
                    </div>

                    {/* Quick helper buttons */}
                    <div className="flex items-center gap-2 flex-wrap justify-center pt-2">
                      {hasActiveFilters && (
                        <button
                          onClick={resetAllFilters}
                          className="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-500 text-white text-xs font-semibold shadow-md shadow-red-600/30 transition-all"
                        >
                          Reset Filters
                        </button>
                      )}
                      <button
                        onClick={handleHomeClick}
                        className="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 text-white text-xs font-semibold border border-white/10 transition-colors"
                      >
                        Return to Home
                      </button>
                    </div>

                    {/* Popular search pills in empty state */}
                    <div className="pt-4 border-t border-white/10 w-full max-w-md">
                      <span className="text-[11px] text-white/40 font-medium block mb-2">
                        Try popular searches:
                      </span>
                      <div className="flex items-center justify-center gap-1.5 flex-wrap">
                        {["Toxic", "Mirzapur", "Pushpa 2", "Deadpool", "Bigg Boss", "4K"].map((q) => (
                          <button
                            key={q}
                            onClick={() => handleQuickSearch(q)}
                            className="px-2.5 py-1 rounded-lg bg-white/[0.05] hover:bg-white/[0.1] text-white/80 hover:text-white border border-white/10 text-xs font-medium transition-colors"
                          >
                            {q}
                          </button>
                        ))}
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
                    {filteredAndSortedMovies.map((movie) => (
                      <PosterCard
                        key={movie.id}
                        movie={movie}
                        onSelect={handleSelectMovie}
                      />
                    ))}
                  </div>
                )}

                {/* Pagination (Active for both Search & Category Listing!) */}
                {totalPages > 1 && !loading && !error && movies.length > 0 && (
                  <Pagination
                    currentPage={currentPage}
                    totalPages={totalPages}
                    hasNext={hasNext}
                    hasPrev={hasPrev}
                    onPageChange={(p) => {
                      setCurrentPage(p);
                      window.scrollTo({ top: 0, behavior: "smooth" });
                    }}
                    isLoading={loading}
                  />
                )}
              </div>
            </div>
          </div>
        )}
      </main>

      {/* Footer */}
      <Footer
        onSelectCategory={handleSelectCategory}
        onHomeClick={handleHomeClick}
      />
    </div>
  );
}