"use client";
import { useState, useEffect } from "react";
import { format } from "date-fns";
import { Loader2, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { toast } from "sonner";
import TicketFilters from "./components/TicketFilters";
import TicketsTable from "./components/TicketsTable";
import EditTicketDialog from "./components/EditTicketDialog"; 

// انواع داده (Types)
interface TelegramUser {
    id: string;
    telegramId: string;
    username?: string;
    firstName?: string;
    lastName?: string;
    userProducts: any[];
}

interface UserTicket {
    id: string;
    content: string;
    checked: boolean;
    createdAt: string;
    updatedAt: string;
    telegramUser: TelegramUser; 
}

interface PaginationInfo {
    totalCount: number;
    totalPages: number;
    currentPage: number; 
    pageSize: number; 
}

export default function UserTicketsPage() {
    const [tickets, setTickets] = useState<UserTicket[]>([]); // لیست تیکت‌ها
    const [loading, setLoading] = useState(true); // وضعیت بارگذاری
    const [pagination, setPagination] = useState<PaginationInfo>({
        totalCount: 0,
        totalPages: 1,
        currentPage: 1,
        pageSize: 10,
    }); // اطلاعات صفحه‌بندی

    // فیلترها
    const [checkedFilter, setCheckedFilter] = useState<string | null>(null); // فیلتر بر اساس وضعیت بررسی شده (true/false/null)
    const [hasProductsFilter, setHasProductsFilter] = useState<string | null>(null); // فیلتر بر اساس داشتن محصول (true/false/null)
    const [searchTerm, setSearchTerm] = useState(""); // عبارت جستجو برای فیلتر سمت کلاینت
    // تیکت انتخاب شده برای ویرایش
    const [selectedTicket, setSelectedTicket] = useState<UserTicket | null>(null);
    const [isDialogOpen, setIsDialogOpen] = useState(false); // وضعیت نمایش دیالوگ ویرایش
    const [ticketContent, setTicketContent] = useState(""); // محتوای تیکت در دیالوگ
    const [ticketChecked, setTicketChecked] = useState(false); // وضعیت بررسی تیکت در دیالوگ

    // دریافت تیکت‌ها با اعمال فیلترها و صفحه‌بندی
    const fetchTickets = async () => {
        setLoading(true);
        try {
            const queryParams = new URLSearchParams(); // ساخت پارامترهای کوئری برای درخواست API
            if (checkedFilter !== null) queryParams.append('checked', checkedFilter);
            if (hasProductsFilter !== null) queryParams.append('hasProducts', hasProductsFilter);
            queryParams.append('page', pagination?.currentPage.toString());
            queryParams.append('limit', pagination?.pageSize.toString());

            const response = await fetch(`/api/user-ticket?${queryParams.toString()}`); // ارسال درخواست به API
            const data = await response.json();

            if (response.ok) {
                setTickets(data.tickets); // به‌روزرسانی لیست تیکت‌ها
                setPagination(data.pagination); // به‌روزرسانی اطلاعات صفحه‌بندی
            } else {
                toast(
                    data.error || "دریافت تیکت‌ها با خطا مواجه شد" // نمایش پیام خطا
                );
            }
        } catch (error) {
            console.error("دریافت تیکت‌ها با خطا مواجه شد:", error);
            toast(
                "خطای غیرمنتظره‌ای رخ داد" // نمایش پیام خطای عمومی
            );
        } finally {
            setLoading(false); // پایان وضعیت بارگذاری
        }
    };

    // بارگذاری اولیه و زمان تغییر فیلترها/صفحه‌بندی
    useEffect(() => {
        fetchTickets();
    }, [pagination.currentPage, checkedFilter, hasProductsFilter]); // این effect با تغییر این وابستگی‌ها اجرا می‌شود

    // توابع فیلتر و صفحه‌بندی
    const handlePageChange = (newPage: number) => {
        setPagination((prev) => ({ ...prev, currentPage: newPage })); // تغییر صفحه فعلی
    };

    const handlePageSizeChange = (value: string) => {
        setPagination((prev) => ({
            ...prev,
            pageSize: parseInt(value), // تغییر تعداد آیتم در هر صفحه
            currentPage: 1 // بازگشت به صفحه اول هنگام تغییر اندازه صفحه
        }));
    };

    // عملیات مربوط به تیکت‌ها
    const openTicketDialog = (ticket: UserTicket) => {
        setSelectedTicket(ticket); // تنظیم تیکت انتخاب شده
        setTicketContent(ticket.content); // تنظیم محتوای تیکت برای نمایش در دیالوگ
        setTicketChecked(ticket.checked); // تنظیم وضعیت بررسی تیکت در دیالوگ
        setIsDialogOpen(true); // باز کردن دیالوگ
    };

    const closeTicketDialog = () => {
        setSelectedTicket(null); // پاک کردن تیکت انتخاب شده
        setIsDialogOpen(false); // بستن دیالوگ
    };

    const updateTicket = async () => {
        if (!selectedTicket) return; // اگر تیکتی انتخاب نشده باشد، کاری انجام نده

        try {
            const response = await fetch(`/api/user-ticket/${selectedTicket.id}`, {
                method: "PATCH", // متد HTTP برای به‌روزرسانی
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    content: ticketContent,
                    checked: ticketChecked,
                }),
            });

            const data = await response.json();

            if (response.ok) {
                toast(
                    "تیکت با موفقیت به‌روزرسانی شد" // نمایش پیام موفقیت
                );

                // به‌روزرسانی تیکت در وضعیت محلی
                setTickets(tickets.map(t =>
                    t.id === selectedTicket.id ? { ...t, ...data } : t // تیکت به‌روز شده را جایگزین می‌کند
                ));

                closeTicketDialog(); // بستن دیالوگ
            } else {
                toast(
                    data.error || " به‌روزرسانی تیکت با خطا مواجه شد" // نمایش پیام خطا
                );
            }
        } catch (error) {
            console.error(" به‌روزرسانی تیکت با خطا مواجه شد:", error);
            toast(
                "خطای غیرمنتظره‌ای رخ داد" // نمایش پیام خطای عمومی
            );
        }
    };

    const deleteTicket = async (id: string) => {
        if (!confirm("آیا از حذف این تیکت مطمئن هستید؟")) return; // درخواست تأیید حذف

        try {
            const response = await fetch(`/api/user-ticket/${id}`, {
                method: "DELETE", // متد HTTP برای حذف
            });

            if (response.ok) {
                toast(
                    "تیکت با موفقیت حذف شد" // نمایش پیام موفقیت
                );

                // حذف تیکت از وضعیت محلی
                setTickets(tickets?.filter(t => t.id !== id));

                // اگر این آخرین آیتم در صفحه بود، به صفحه قبلی برگرد
                if (tickets.length === 1 && pagination.currentPage > 1) {
                    handlePageChange(pagination.currentPage - 1);
                } else {
                    fetchTickets(); // در غیر این صورت، لیست تیکت‌ها را دوباره دریافت کن
                }
            } else {
                const data = await response.json();
                toast(
                    data.error || "حذف تیکت با خطا مواجه شد" // نمایش پیام خطا
                );
            }
        } catch (error) {
            console.error("حذف تیکت با خطا مواجه شد:", error);
            toast(
                "خطای غیرمنتظره‌ای رخ داد", // نمایش پیام خطای عمومی
            );
        }
    };

    // فیلتر بر اساس محتوا/کاربر (سمت کلاینت)
    const filteredTickets = tickets?.filter(ticket => {
        if (!searchTerm) return true; // اگر عبارت جستجو خالی است، همه را نمایش بده

        const term = searchTerm.toLowerCase();
        const content = ticket.content.toLowerCase();
        const username = ticket.telegramUser.username?.toLowerCase() || "";
        const firstName = ticket.telegramUser.firstName?.toLowerCase() || "";
        const lastName = ticket.telegramUser.lastName?.toLowerCase() || "";

        // بررسی می‌کند که عبارت جستجو در محتوای تیکت یا نام کاربری/نام و نام خانوادگی کاربر وجود دارد
        return (
            content.includes(term) ||
            username.includes(term) ||
            firstName.includes(term) ||
            lastName.includes(term)
        );
    });

    return (
        <div className="container mx-auto py-6 space-y-6">
            <div className="flex justify-between items-center">
                <h1 className="text-3xl font-bold"> تیکت کاربران</h1>
                <Button onClick={fetchTickets} variant="outline" className="flex gap-2">
                    <RefreshCw className="h-4 w-4" />
                    به‌روزرسانی
                </Button>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>فیلترها</CardTitle>
                </CardHeader>
                <CardContent>
                    <TicketFilters
                        searchTerm={searchTerm}
                        setSearchTerm={setSearchTerm}
                        checkedFilter={checkedFilter}
                        setCheckedFilter={setCheckedFilter}
                        hasProductsFilter={hasProductsFilter}
                        setHasProductsFilter={setHasProductsFilter}
                    />
                </CardContent>
            </Card>

            <Card>
                <CardContent className="pt-6">
                    {loading ? (
                        <div className="flex justify-center items-center h-60">
                            <Loader2 className="h-8 w-8 animate-spin" />
                        </div>
                    ) : (
                        <TicketsTable
                            tickets={filteredTickets}
                            pagination={pagination}
                            handlePageChange={handlePageChange}
                            deleteTicket={deleteTicket}
                            openTicketDialog={openTicketDialog}
                        />
                    )}
                </CardContent>
            </Card>

            <EditTicketDialog
                isOpen={isDialogOpen}
                setIsOpen={setIsDialogOpen}
                selectedTicket={selectedTicket}
                ticketContent={ticketContent}
                setTicketContent={setTicketContent}
                ticketChecked={ticketChecked}
                setTicketChecked={setTicketChecked}
                closeTicketDialog={closeTicketDialog}
                updateTicket={updateTicket}
            />
        </div>
    );
}