"use client";
import { useState, useEffect, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { toast } from 'sonner';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown, Loader2, MessageSquare, Search, X } from "lucide-react";
import { getStatusBadge } from '../../users/utils';

function UserProductsContent() {
    const [userProducts, setUserProducts] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [statusLoading, setStatusLoading] = useState(false);
    const router = useRouter();
    const searchParams = useSearchParams();
    const productId = searchParams.get('productId');

    // Add new state for filters
    const [search, setSearch] = useState("");
    const [status, setStatus] = useState("");
    const [userId, setUserId] = useState("");
    const [activeFilters, setActiveFilters] = useState(false);

    // Add debounce timer state
    const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(null);

    useEffect(() => {
        fetchUserProducts();
    }, [productId]);

    // Effect to handle filter changes with debounce
    useEffect(() => {
        // Update active filters state
        setActiveFilters(!!search || !!status || !!userId);

        // Clear existing timer
        if (debounceTimer) {
            clearTimeout(debounceTimer);
        }

        // Set new timer to apply filters after 500ms
        const timer = setTimeout(() => {
            fetchUserProducts({ search, status, userId });
        }, 500);

        setDebounceTimer(timer);

        // Cleanup function
        return () => {
            if (debounceTimer) clearTimeout(debounceTimer);
        };
    }, [search, status, userId]);

    const fetchUserProducts = async (filters = {}) => {
        try {
            setLoading(true);
            let url = '/api/user-products';

            // Build query parameters
            const params = new URLSearchParams();

            if (productId) {
                params.append('productId', productId);
            }

            if (filters) {
                Object.entries(filters).forEach(([key, value]) => {
                    if (value) params.append(key, value as string);
                });
            }

            const queryString = params.toString();
            if (queryString) {
                url += `?${queryString}`;
            }

            const response = await fetch(url);
            const data = await response.json();
            setUserProducts(data);
        } catch (error) {
            console.error('Error fetching user products:', error);
            toast.error("خطا در بارگذاری خریدهای کاربران");
        } finally {
            setLoading(false);
        }
    };

    const handleStatusChange = async (id: string, status: string) => {
        try {
            setStatusLoading(true);
            const response = await fetch(`/api/user-products/${id}/challenge-status`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ status }),
            });

            if (!response.ok) {
                throw new Error('خطا در تغییر وضعیت');
            }

            const updatedUserProduct = await response.json();

            setUserProducts(userProducts.map((item: any) =>
                item.id === id ? updatedUserProduct : item
            ));

            toast.success(`وضعیت با موفقیت به ${getStatusLabel(status)} تغییر یافت`);
        } catch (error) {
            console.error('Error updating status:', error);
            toast.error("خطا در تغییر وضعیت");
        } finally {
            (window as any).refreshPendingChallenges();
            setStatusLoading(false);
        }
    };

    const navigateToUserChat = (userId: string) => {
        router.push(`/dashboard/users/${userId}`);
    };

    const getStatusLabel = (status: string) => {
        switch (status) {
            case 'CONFIRMED': return 'تأیید شده';
            case 'FAILED': return 'ناموفق';
            case 'PENDING': return 'در انتظار تأیید';
            case 'WORKING': return 'در حال انجام';
            default: return status;
        }
    };

    const handleClearFilters = () => {
        setSearch("");
        setStatus("");
        setUserId("");
        // Note: No need to call fetchUserProducts here as it will be triggered by the useEffect
    };

    return (
        <div className="w-full max-w-7xl mx-auto py-10">
            <div className="mb-6">
                <h1 className="text-2xl font-bold">خریدهای کاربران</h1>
                {productId && (
                    <div className="mt-2">
                        <Button
                            variant="link"
                            onClick={() => router.push('/dashboard/databank/products')}
                        >
                            بازگشت به لیست محصولات
                        </Button>
                    </div>
                )}
            </div>

            {/* Filter Section */}
            <div className="bg-background border rounded-md p-4 mb-6">
                <div className="flex flex-col md:flex-row gap-4 items-end">
                    <div className="flex-1">
                        <label className="block text-sm font-medium mb-1">جستجو</label>
                        <div className="relative">
                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                            <Input
                                placeholder="جستجو بر اساس نام کاربر، نام کاربری، آیدی تلگرام یا نام محصول"
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                className="pr-3 pl-8"
                            />
                        </div>
                    </div>

                    <div className="w-full md:w-36">
                        <label className="block text-sm font-medium mb-1">وضعیت</label>
                        <select
                            value={status}
                            onChange={(e) => setStatus(e.target.value)}
                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                        >
                            <option value="">همه</option>
                            <option value="CONFIRMED">تأیید شده</option>
                            <option value="FAILED">ناموفق</option>
                            <option value="PENDING">در انتظار تأیید</option>
                            <option value="WORKING">در حال انجام</option>
                        </select>
                    </div>

                    <div className="w-full md:w-36">
                        <label className="block text-sm font-medium mb-1">شناسه کاربر</label>
                        <Input
                            placeholder="User ID"
                            value={userId}
                            onChange={(e) => setUserId(e.target.value)}
                        />
                    </div>

                    {activeFilters && (
                        <div>
                            <Button variant="outline" onClick={handleClearFilters} className="gap-1 h-10">
                                <X className="h-4 w-4" />
                                پاک کردن فیلترها
                            </Button>
                        </div>
                    )}
                </div>
            </div>

            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow className="*:!text-right">
                            <TableHead className="w-[80px]">ID</TableHead>
                            <TableHead>کاربر</TableHead>
                            <TableHead>محصول</TableHead>
                            <TableHead>وضعیت</TableHead>
                            <TableHead>تاریخ</TableHead>
                            <TableHead>عملیات</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {loading ? (
                            <TableRow>
                                <TableCell colSpan={8} className="text-center py-4">
                                    در حال بارگذاری...
                                </TableCell>
                            </TableRow>
                        ) : userProducts?.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={8} className="text-center py-4">
                                    خریدی یافت نشد
                                </TableCell>
                            </TableRow>
                        ) : (
                            userProducts?.map((item: any) => (
                                <TableRow key={item.id}>
                                    <TableCell className="font-mono text-xs">
                                        {item.id.substring(0, 8)}...
                                    </TableCell>
                                    <TableCell>
                                        {item.user.firstName || item.user.username || item.user.telegramId}
                                    </TableCell>
                                    <TableCell>{item.product.plan}</TableCell>
                                    <TableCell>{getStatusBadge(item.challengeStatus)}</TableCell>
                                    <TableCell>
                                        {new Date(item.createdAt).toLocaleString()}
                                    </TableCell>
                                    <TableCell className="space-x-2">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button
                                                    variant="outline"
                                                    size="sm"
                                                    disabled={statusLoading}
                                                >
                                                    تغییر وضعیت {statusLoading && '...'}
                                                    <ChevronDown className="mr-2 h-4 w-4" />
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent>
                                                <DropdownMenuItem onClick={() => handleStatusChange(item.id, 'CONFIRMED')}>
                                                    تأیید شده
                                                </DropdownMenuItem>
                                                <DropdownMenuItem onClick={() => handleStatusChange(item.id, 'FAILED')}>
                                                    ناموفق
                                                </DropdownMenuItem>
                                                <DropdownMenuItem onClick={() => handleStatusChange(item.id, 'PENDING')}>
                                                    در انتظار تأیید
                                                </DropdownMenuItem>
                                                <DropdownMenuItem onClick={() => handleStatusChange(item.id, 'WORKING')}>
                                                    در حال انجام
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>

                                        <Button
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => navigateToUserChat(item.user.id)}
                                            className="mr-2"
                                        >
                                            <MessageSquare className="h-4 w-4 ml-1" />
                                            چت با کاربر
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>
        </div>
    );
}


export default function UserProducts() {
    return (
        <Suspense fallback={<div className="container mx-auto py-8"><Loader2 className="h-8 w-8 animate-spin mx-auto" /></div>}>
            <UserProductsContent />
        </Suspense>
    );
}