/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useEffect, useState } from "react";
import "../../../styles/ai-library.css";
import apiClient from "@/lib/apiClient";
import ConfirmDeleteModal from "@/components/ConfirmDeleteModal";
import { useRouter } from "next/navigation";
import AIStudioHeader from "@/components/ai-library/AIStudioHeader";
import UpgradeBanner from "@/components/ai-library/UpgradeBanner";
import LibraryControls from "@/components/ai-library/LibraryControls";
import MediaGrid from "@/components/ai-library/MediaGrid";
import { GeneratedMedia, PAGE_SIZE, TypeFilter, SortOption } from "@/components/ai-library/types";

export default function CreativeStudioPage() {
  const [items, setItems] = useState<GeneratedMedia[]>([]);
  const [sort, setSort] = useState<SortOption>("Newest");
  const [loadingInitial, setLoadingInitial] = useState<boolean>(false);
  const [loadingMore, setLoadingMore] = useState<boolean>(false);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
  const [selectedItem, setSelectedItem] = useState<GeneratedMedia | null>(null);
  const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
  const [typeFilter, setTypeFilter] = useState<TypeFilter>("ALL");
  const [isLimitReached, setIsLimitReached] = useState(false);
  const [showFavorites, setShowFavorites] = useState(false);
  const router = useRouter();

  useEffect(() => {
    let isMounted = true;

    async function fetchLibrary() {
      try {
        setLoadingInitial(true);
        setError(null);

        const params: any = {};
        if (typeFilter !== "ALL") {
          params.type = typeFilter;
        }
        if (showFavorites) {
          params.favorites = "true";
        }
        params.limit = PAGE_SIZE.toString();
        params.offset = "0";

        const res = await apiClient.get("/image/generated-media", { params });
        if (!isMounted) return;

        if (res.data?.success && Array.isArray(res.data.data)) {
          const data = res.data.data as GeneratedMedia[];

          // Debug logging
          console.log('[AI Library] Fetched data:', {
            total: data.length,
            images: data.filter(item => item.type === 'IMAGE').length,
            videos: data.filter(item => item.type === 'VIDEO').length,
            typeFilter,
            showFavorites,
            params
          });

          // Sort by newest first (descending created_at)
          const sortedData = [...data].sort((a, b) =>
            new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
          );
          setItems(sortedData);
          setHasMore(data.length === PAGE_SIZE);
        } else {
          setItems([]);
          setHasMore(false);
        }
      } catch (err: any) {
        if (!isMounted) return;
        console.error("Failed to load AI library", err);
        setError("Failed to load creatives. Please try again.");
        setItems([]);
        setHasMore(false);
      } finally {
        if (isMounted) setLoadingInitial(false);
      }
    }

    fetchLibrary();

    return () => {
      isMounted = false;
    };
  }, [typeFilter, showFavorites]);

  const handleLoadMore = async () => {
    if (loadingMore || !hasMore) return;
    try {
      setLoadingMore(true);
      setError(null);

      const params: any = {
        limit: PAGE_SIZE.toString(),
        offset: items.length.toString(),
      };
      if (typeFilter !== "ALL") {
        params.type = typeFilter;
      }
      if (showFavorites) {
        params.favorites = "true";
      }

      const res = await apiClient.get("/image/generated-media", { params });
      if (res.data?.success && Array.isArray(res.data.data)) {
        const data = res.data.data as GeneratedMedia[];
        const sortedData = [...data].sort((a, b) =>
          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
        );
        setItems((prev) => [...prev, ...sortedData]);
        setHasMore(data.length === PAGE_SIZE);
      } else {
        setHasMore(false);
      }
    } catch (err: any) {
      console.error("Failed to load more creatives", err);
      setError("Failed to load more creatives. Please try again.");
    } finally {
      setLoadingMore(false);
    }
  };

  const handleTypeChange = (value: TypeFilter) => {
    setTypeFilter(value);
  };

  const openDeleteModal = (item: GeneratedMedia) => {
    setSelectedItem(item);
    setDeleteModalOpen(true);
  };

  const handleConfirmDelete = async () => {
    if (!selectedItem) return;
    try {
      setDeleteLoading(true);
      setError(null);

      await apiClient.delete(`/image/generated-media/${selectedItem.id}`);
      setItems((prev) => prev.filter((x) => x.id !== selectedItem.id));
      setDeleteModalOpen(false);
      setSelectedItem(null);
    } catch (err: any) {
      console.error("Failed to delete creative", err);
      setError("Failed to delete creative. Please try again.");
    } finally {
      setDeleteLoading(false);
    }
  };

  const handleSortChange = (value: SortOption) => {
    setSort(value);

    if (value === "Newest") {
      setItems((prev) => [...prev].sort((a, b) =>
        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
      ));
    } else {
      setItems((prev) => [...prev].sort((a, b) =>
        new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
      ));
    }
  };

  const handleUpgrade = () => {
    router.push("/pricing");
  };

  const handleLike = async (
    itemId: number,
    newLikedState: boolean
  ): Promise<boolean> => {
    try {
      await apiClient.patch(
        `/image/generated-media/${itemId}/favorite`,
        { is_favorite: newLikedState }
      );

      setItems((prev) =>
        prev.map((item) =>
          item.id === itemId
            ? { ...item, is_favorite: newLikedState }
            : item
        )
      );

      return true;
    } catch (error) {
      console.error("Failed to update favorite status:", error);
      return false;
    }
  };


  const toggleFavorites = () => {
    setShowFavorites((prev) => !prev);
  };

  // We are now doing server-side filtering
  const displayedItems = items;

  // Check if any filters are applied
  const hasFiltersApplied = typeFilter !== "ALL" || showFavorites;

  useEffect(() => {
    const fetchQuotaStatus = async () => {
      try {
        setError(null);

        const { data } = await apiClient.get("/quota/status");

        const quotaData = data.data;

        if (quotaData.remaining <= 0) {
          setIsLimitReached(true);
        } else {
          setIsLimitReached(false);
        }
      } catch (err) {
        console.error("Failed to fetch quota status", err);
        setError("Unable to fetch quota status");
      }
    };

    fetchQuotaStatus();
  }, []);

  return (
    <div className="pcoded-main-container bg-light">
      <div className="studio-root">
        <AIStudioHeader isLimitReached={isLimitReached} hasData={items.length > 0} />

        {/* {isLimitReached && <UpgradeBanner onUpgrade={handleUpgrade} />} */}
   
        <section className="library-section">
          {!loadingInitial && (items.length > 0 || hasFiltersApplied) && (
            <LibraryControls
              typeFilter={typeFilter}
              onTypeChange={handleTypeChange}
              sort={sort}
              onSortChange={handleSortChange}
              showFavorites={showFavorites}
              onToggleFavorites={toggleFavorites}
            />
          )}

          <MediaGrid
            items={displayedItems}
            loadingInitial={loadingInitial}
            loadingMore={loadingMore}
            hasMore={hasMore}
            error={error}
            onLoadMore={handleLoadMore}
            onDelete={openDeleteModal}
            deleteLoading={deleteLoading}
            selectedItemId={selectedItem?.id || null}
            onLike={handleLike}
            hasFiltersApplied={hasFiltersApplied}
          />
        </section>

        <ConfirmDeleteModal
          isOpen={deleteModalOpen}
          onClose={() => {
            if (deleteLoading) return;
            setDeleteModalOpen(false);
            setSelectedItem(null);
          }}
          onConfirm={handleConfirmDelete}
          loading={deleteLoading}
          title="Are you sure you want to delete this creative?"
        />
      </div>
    </div>
  );
}