"use client";

import { useInfiniteLogsQuery } from "@/services/logs/useGetLogsQuery";
import DashboardSearchInput from "@/shared/components/dashboard-search-input/dashboard-search-input";
import ShowFilterButton from "@/shared/components/show-filter-button/show-filter-button";
import useDebounce from "@/shared/hooks/useDebounce";
import Link from "next/link";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import ActionTabs from "./action-tabs";
import SearchDate from "./search-date";

const ActionList = () => {
	// State to manage filter visibility and search input
	const [showFilter, setShowFilter] = useState(false);
	const [searchValue, setSearchValue] = useState<string>("");
	const debouncedSearchValue = useDebounce(searchValue);

	// State for date range selection
	const [dateRangeDateTo, setDateRangeDateTo] = useState<Date | undefined>(
		undefined
	);
	const [dateRangeDateFrom, setDateRangeDateFrom] = useState<
		Date | undefined
	>(undefined);

	// State for active tab
	const [activeTab, setActiveTab] = useState("all");

	const {
		data: logData,
		error,
		isLoading,
		isFetchingNextPage,
		hasNextPage,
		fetchNextPage,
	} = useInfiniteLogsQuery({
		dateRangeDateFrom,
		dateRangeDateTo,
		searchValue: debouncedSearchValue,
		activeTab,
	});

	// Flatten all pages into a single array
	const allLogs = logData?.pages.flatMap(page => page.results) ?? [];

	console.log("data:", allLogs);

	useEffect(() => {
		console.log("Searching for:", debouncedSearchValue);
	}, [debouncedSearchValue]);

	// Handle errors with toast
	useEffect(() => {
		if (error) {
			toast.error("Failed to load logs. Please try again later.");
		}
	}, [error]);

	const handleShowFilter = () => setShowFilter(prev => !prev);
	const handleSearchValue = (value: string) => setSearchValue(value);

	return (
		<div className='basis-4/12 bg-white shadow-[0_0_32px_0_#00000014] p-6 h-[calc(100vh_-_133px_-_95px_-15px_-_26px)] overflow-hidden'>
			<div className='flex flex-col border-b border-[#E9E9E9] pb-2.5'>
				<div className='flex justify-between items-center'>
					<div className='font-semibold text-[20px] leading-[100%] p-2.5'>
						Last Actions
					</div>
					<Link
						href={"/"}
						className='text-[16px] leading-[140%] underline decoration-solid p-2.5'>
						View All
					</Link>
				</div>
			</div>
			<div className='mt-5 flex flex-col gap-6'>
				<div className='flex items-center gap-4'>
					<DashboardSearchInput
						searchValue={searchValue}
						onChange={handleSearchValue}
						placeholder='Search by Action'
					/>
					<ShowFilterButton
						showFilter={showFilter}
						onClick={handleShowFilter}
					/>
				</div>
				{showFilter ? (
					<SearchDate
						dateRangeDateFrom={dateRangeDateFrom}
						setDateRangeDateFrom={setDateRangeDateFrom}
						dateRangeDateTo={dateRangeDateTo}
						setDateRangeDateTo={setDateRangeDateTo}
					/>
				) : (
					<></>
				)}
				<div className='flex-1 min-h-0'>
					<ActionTabs
						activeTab={activeTab}
						setActiveTab={setActiveTab}
						logs={allLogs}
						isLoading={isLoading}
						error={error}
						hasNextPage={hasNextPage}
						isFetchingNextPage={isFetchingNextPage}
						fetchNextPage={fetchNextPage}
					/>
				</div>
			</div>
		</div>
	);
};

export default ActionList;