'use client';

import React, { useEffect, useMemo, useState } from 'react';
import {
    User, Crown, Home, ShoppingBag, Wallet, MapPin,
    Headphones, IdCard, LogOut, TrendingUp,
    Plus, Hash, Clock, AlertCircle, Eye, Reply,
    CreditCard, Box, Shield, ShieldAlert, Mail, CheckCircle, ShieldX, CircleCheck, Search, Send, X, LoaderCircle
} from 'lucide-react';
import { useRouter } from "next/navigation";
import { logoutUser } from "@/public/src/services/auth/api";
import {
    closeUserTicket,
    createUserTicket,
    getAdminTicketById,
    getAdminTickets,
    getUserTicketById,
    getUserTickets,
    sendAdminTicketMessage,
    sendUserTicketMessage,
    TicketDetail,
    TicketListItem,
    TicketPriority,
    TicketStatus,
    updateAdminTicket,
} from "@/public/src/services/tickets/api";
import NotLogin from '@/components/Notlogin';

const sampleOrders = [
    { id: "PR-10452", status: "در حال پردازش", statusColor: "amber", total: "500,000", regDate: "15 دی 1404", deliveryDate: "20 دی 1404", delivered: false },
    { id: "PR-10451", status: "تحویل شده", statusColor: "green", total: "120,000", regDate: "10 دی 1404", deliveryDate: "12 دی 1404", delivered: true },
];

const sampleAddresses = [
    { id: "addr1", text: "شیراز، بلوار معالی آباد، خیابان پزشکان، ساختمان پارس، واحد 4", receiver: "علی محمدی", phone: "09123456789", isDefault: true },
    { id: "addr2", text: "تهران، خیابان سعدی جنوبی، کوچه ناظم‌الاطباء، پلاک 20", receiver: "دفتر تهران", phone: "021-33900000", isDefault: false },
];

const statusLabels: Record<TicketStatus, string> = {
    waiting_for_admin: "در انتظار پاسخ پشتیبانی",
    waiting_for_user: "در انتظار پاسخ کاربر",
    closed: "بسته شده",
};

const priorityLabels: Record<TicketPriority, string> = {
    low: "کم",
    normal: "عادی",
    high: "زیاد",
    urgent: "فوری",
};

type TicketCounts = {
    total: number;
    waiting_for_admin: number;
    waiting_for_user: number;
    closed: number;
};

export default function DashboardPage() {
    const [activeTab, setActiveTab] = useState('dash');
    const router = useRouter();
    const [success, setSuccess] = useState<"" | "login" | "register">("");
    const [authorized, setAuthorized] = useState<boolean | null>(null);
    const [token, setToken] = useState("");
    const [userInfo, setUserInfo] = useState({
        fullName: "کاربر پارس شاپ",
        username: "user",
        phone: "شماره ثبت نشده",
        role: "user" as "user" | "admin",
    });
    const [ticketCounts, setTicketCounts] = useState({
        total: 0,
        waiting_for_admin: 0,
        waiting_for_user: 0,
        closed: 0,
    });
    const [userTickets, setUserTickets] = useState<TicketListItem[]>([]);
    const [userTicketsLoading, setUserTicketsLoading] = useState(false);
    const [userTicketsError, setUserTicketsError] = useState("");
    const [selectedUserTicketId, setSelectedUserTicketId] = useState("");
    const [selectedUserTicket, setSelectedUserTicket] = useState<TicketDetail | null>(null);
    const [ticketDetailLoading, setTicketDetailLoading] = useState(false);
    const [ticketReply, setTicketReply] = useState("");
    const [ticketReplyLoading, setTicketReplyLoading] = useState(false);
    const [ticketStatusFilter, setTicketStatusFilter] = useState<"" | TicketStatus>("");
    const [ticketPage, setTicketPage] = useState(1);
    const [ticketTotalPages, setTicketTotalPages] = useState(1);
    const [isCreateTicketOpen, setIsCreateTicketOpen] = useState(false);
    const [createTicketLoading, setCreateTicketLoading] = useState(false);
    const [createTicketError, setCreateTicketError] = useState("");
    const [createTicketForm, setCreateTicketForm] = useState({
        subject: "",
        priority: "normal" as TicketPriority,
        message: "",
    });
    const [adminTickets, setAdminTickets] = useState<TicketListItem[]>([]);
    const [adminTicketsLoading, setAdminTicketsLoading] = useState(false);
    const [adminTicketsError, setAdminTicketsError] = useState("");
    const [adminStatusFilter, setAdminStatusFilter] = useState<"" | TicketStatus>("");
    const [adminPriorityFilter, setAdminPriorityFilter] = useState<"" | TicketPriority>("");
    const [adminSearch, setAdminSearch] = useState("");
    const [adminPage, setAdminPage] = useState(1);
    const [adminTotalPages, setAdminTotalPages] = useState(1);
    const [selectedAdminTicketId, setSelectedAdminTicketId] = useState("");
    const [selectedAdminTicket, setSelectedAdminTicket] = useState<TicketDetail | null>(null);
    const [adminReply, setAdminReply] = useState("");
    const [adminReplyLoading, setAdminReplyLoading] = useState(false);
    const [adminUpdateLoading, setAdminUpdateLoading] = useState(false);
    const [adminTicketForm, setAdminTicketForm] = useState({
        status: "waiting_for_user" as TicketStatus,
        priority: "normal" as TicketPriority,
        assignedAdminId: "",
    });
    const ticketStatValue = useMemo(() => `${ticketCounts.total.toLocaleString('fa-IR')} مورد`, [ticketCounts.total]);

    useEffect(() => {
        const token = localStorage.getItem("accessToken");
        const role = localStorage.getItem("role");
        const params = new URLSearchParams(window.location.search);
        const currentTab = params.get("tab");
        const currentSuccess = params.get("success");

        if (currentTab && ['dash', 'orders', 'wallet', 'address', 'tickets', 'profile'].includes(currentTab)) {
            setActiveTab(currentTab);
        }
        if (currentSuccess === "login" || currentSuccess === "register") {
            setSuccess(currentSuccess);
        }

        if (token && (role === "user" || role === "admin")) {
            setToken(token);
            setUserInfo({
                fullName: localStorage.getItem("fullName") || localStorage.getItem("username") || "کاربر پارس شاپ",
                username: localStorage.getItem("username") || "user",
                phone: localStorage.getItem("phone") || "شماره ثبت نشده",
                role: role,
            });
            setAuthorized(true);
        } else {
            setAuthorized(false);
        }
    }, []);

    useEffect(() => {
        if (!token) {
            return;
        }
        loadTicketCounts();
    }, [token, userInfo.role]);

    useEffect(() => {
        if (!token || activeTab !== 'tickets') {
            return;
        }
        if (userInfo.role === "admin") {
            loadAdminTickets();
            return;
        }
        loadUserTickets();
    }, [token, activeTab, userInfo.role, ticketStatusFilter, ticketPage, adminStatusFilter, adminPriorityFilter, adminSearch, adminPage]);

    useEffect(() => {
        if (!token) {
            return;
        }
        if (userInfo.role === "admin") {
            if (selectedAdminTicketId) {
                loadAdminTicketDetail(selectedAdminTicketId);
            }
            return;
        }
        if (selectedUserTicketId) {
            loadUserTicketDetail(selectedUserTicketId);
        }
    }, [token, userInfo.role, selectedUserTicketId, selectedAdminTicketId]);

    const handleLogout = async () => {
        const token = localStorage.getItem("accessToken");
        try {
            if (token) {
                await logoutUser(token);
            }
        } catch (error) {
            console.error("Logout failed:", error);
        } finally {
            localStorage.removeItem("accessToken");
            localStorage.removeItem("refreshToken");
            localStorage.removeItem("username");
            localStorage.removeItem("fullName");
            localStorage.removeItem("phone");
            localStorage.removeItem("role");
            setAuthorized(false);
            router.push("/");
        }
    };

    const loadTicketCounts = async () => {
        try {
            if (userInfo.role === "admin") {
                const [allRes, adminWaitRes, userWaitRes, closedRes] = await Promise.all([
                    getAdminTickets(token, { page: 1, limit: 1 }),
                    getAdminTickets(token, { status: "waiting_for_admin", page: 1, limit: 1 }),
                    getAdminTickets(token, { status: "waiting_for_user", page: 1, limit: 1 }),
                    getAdminTickets(token, { status: "closed", page: 1, limit: 1 }),
                ]);
                setTicketCounts({
                    total: allRes.pagination.total,
                    waiting_for_admin: adminWaitRes.pagination.total,
                    waiting_for_user: userWaitRes.pagination.total,
                    closed: closedRes.pagination.total,
                });
                return;
            }

            const [allRes, adminWaitRes, userWaitRes, closedRes] = await Promise.all([
                getUserTickets(token, { page: 1, limit: 1 }),
                getUserTickets(token, { status: "waiting_for_admin", page: 1, limit: 1 }),
                getUserTickets(token, { status: "waiting_for_user", page: 1, limit: 1 }),
                getUserTickets(token, { status: "closed", page: 1, limit: 1 }),
            ]);
            setTicketCounts({
                total: allRes.pagination.total,
                waiting_for_admin: adminWaitRes.pagination.total,
                waiting_for_user: userWaitRes.pagination.total,
                closed: closedRes.pagination.total,
            });
        } catch (error) {
            console.error("Ticket count load failed:", error);
        }
    };

    const loadUserTickets = async () => {
        setUserTicketsLoading(true);
        setUserTicketsError("");
        try {
            const response = await getUserTickets(token, {
                status: ticketStatusFilter || undefined,
                page: ticketPage,
                limit: 10,
            });
            setUserTickets(response.items);
            setTicketTotalPages(response.pagination.totalPages || 1);
            if (!selectedUserTicketId && response.items[0]) {
                setSelectedUserTicketId(response.items[0].id);
            }
            if (!response.items.length) {
                setSelectedUserTicketId("");
                setSelectedUserTicket(null);
            }
        } catch (error: any) {
            setUserTicketsError(error?.message || "دریافت تیکت‌ها انجام نشد.");
        } finally {
            setUserTicketsLoading(false);
        }
    };

    const loadUserTicketDetail = async (ticketId: string) => {
        setTicketDetailLoading(true);
        try {
            const detail = await getUserTicketById(token, ticketId);
            setSelectedUserTicket(detail);
        } catch (error) {
            console.error("User ticket detail failed:", error);
        } finally {
            setTicketDetailLoading(false);
        }
    };

    const loadAdminTickets = async () => {
        setAdminTicketsLoading(true);
        setAdminTicketsError("");
        try {
            const response = await getAdminTickets(token, {
                status: adminStatusFilter || undefined,
                priority: adminPriorityFilter || undefined,
                search: adminSearch || undefined,
                page: adminPage,
                limit: 10,
            });
            setAdminTickets(response.items);
            setAdminTotalPages(response.pagination.totalPages || 1);
            if (!selectedAdminTicketId && response.items[0]) {
                setSelectedAdminTicketId(response.items[0].id);
            }
            if (!response.items.length) {
                setSelectedAdminTicketId("");
                setSelectedAdminTicket(null);
            }
        } catch (error: any) {
            setAdminTicketsError(error?.message || "دریافت تیکت‌های ادمین انجام نشد.");
        } finally {
            setAdminTicketsLoading(false);
        }
    };

    const loadAdminTicketDetail = async (ticketId: string) => {
        setTicketDetailLoading(true);
        try {
            const detail = await getAdminTicketById(token, ticketId);
            setSelectedAdminTicket(detail);
            setAdminTicketForm({
                status: detail.status,
                priority: detail.priority,
                assignedAdminId: detail.assignedAdmin?.id || "",
            });
        } catch (error) {
            console.error("Admin ticket detail failed:", error);
        } finally {
            setTicketDetailLoading(false);
        }
    };

    const handleCreateTicket = async () => {
        if (!createTicketForm.subject.trim() || !createTicketForm.message.trim()) {
            setCreateTicketError("موضوع و متن پیام را کامل کنید.");
            return;
        }
        setCreateTicketLoading(true);
        setCreateTicketError("");
        try {
            const detail = await createUserTicket(token, {
                subject: createTicketForm.subject.trim(),
                priority: createTicketForm.priority,
                message: createTicketForm.message.trim(),
            });
            setIsCreateTicketOpen(false);
            setCreateTicketForm({ subject: "", priority: "normal", message: "" });
            setSelectedUserTicketId(detail.id);
            setSelectedUserTicket(detail);
            setTicketPage(1);
            await Promise.all([loadUserTickets(), loadTicketCounts()]);
        } catch (error: any) {
            setCreateTicketError(error?.message || "ثبت تیکت انجام نشد.");
        } finally {
            setCreateTicketLoading(false);
        }
    };

    const handleSendUserReply = async () => {
        if (!selectedUserTicket || !ticketReply.trim()) return;
        setTicketReplyLoading(true);
        try {
            const detail = await sendUserTicketMessage(token, selectedUserTicket.id, ticketReply.trim());
            setSelectedUserTicket(detail);
            setTicketReply("");
            await Promise.all([loadUserTickets(), loadTicketCounts()]);
        } catch (error) {
            console.error("User reply failed:", error);
        } finally {
            setTicketReplyLoading(false);
        }
    };

    const handleCloseTicket = async () => {
        if (!selectedUserTicket) return;
        try {
            const detail = await closeUserTicket(token, selectedUserTicket.id);
            setSelectedUserTicket(detail);
            await Promise.all([loadUserTickets(), loadTicketCounts()]);
        } catch (error) {
            console.error("Close ticket failed:", error);
        }
    };

    const handleAdminReply = async () => {
        if (!selectedAdminTicket || !adminReply.trim()) return;
        setAdminReplyLoading(true);
        try {
            const detail = await sendAdminTicketMessage(token, selectedAdminTicket.id, adminReply.trim());
            setSelectedAdminTicket(detail);
            setAdminReply("");
            await Promise.all([loadAdminTickets(), loadTicketCounts()]);
        } catch (error) {
            console.error("Admin reply failed:", error);
        } finally {
            setAdminReplyLoading(false);
        }
    };

    const handleAdminUpdate = async () => {
        if (!selectedAdminTicket) return;
        setAdminUpdateLoading(true);
        try {
            const detail = await updateAdminTicket(token, selectedAdminTicket.id, {
                status: adminTicketForm.status,
                priority: adminTicketForm.priority,
                assignedAdminId: adminTicketForm.assignedAdminId.trim() || undefined,
            });
            setSelectedAdminTicket(detail);
            await Promise.all([loadAdminTickets(), loadTicketCounts()]);
        } catch (error) {
            console.error("Admin update failed:", error);
        } finally {
            setAdminUpdateLoading(false);
        }
    };

    const menuItems = [
        { id: 'dash', label: 'پیشخوان', icon: Home },
        { id: 'orders', label: 'سفارش‌های من', icon: ShoppingBag },
        { id: 'wallet', label: 'کیف پول', icon: Wallet },
        { id: 'address', label: 'آدرس‌ها', icon: MapPin },
        { id: 'tickets', label: 'تیکت پشتیبانی', icon: Headphones },
        { id: 'profile', label: 'مشخصات حساب', icon: IdCard },
    ];

    if (authorized === null) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gray-50" dir="rtl">
                <p className="text-gray-600">در حال بررسی دسترسی...</p>
            </div>
        );
    }

    if (!authorized) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4" dir="rtl">
               <NotLogin/>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
            <div className="container mx-auto px-4 max-w-6xl">
                {success === "login" && <div className="mb-4 flex items-center gap-2 p-3 bg-[#d2f6dca3] text-green-700 rounded-xl text-sm"><CheckCircle className="w-4 h-4 text-green-600" /><span>ورود با موفقیت انجام شد</span></div>}
                {success === "register" && <div className="mb-4 flex items-center gap-2 p-3 bg-[#d2f6dca3] text-green-700 rounded-xl text-sm"><CheckCircle className="w-4 h-4 text-green-600" /><span>ثبت نام با موفقیت انجام شد</span></div>}

                <div className="flex flex-col lg:flex-row gap-8">
                    <aside className="w-full lg:w-[280px] bg-white rounded-2xl shadow-sm flex-shrink-0 h-fit">
                        <div className="p-6 flex flex-col items-center border-b border-gray-100">
                            <div className="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 mb-4">
                                <User size={32} strokeWidth={1.5} />
                            </div>
                            <div className="text-lg font-bold text-gray-800 mb-1">{userInfo.fullName}</div>
                            <div className="text-sm text-gray-500 mb-4 " dir="ltr">{userInfo.phone}</div>
                            <div className="w-full flex flex-col items-center">
                                <div className="inline-flex items-center gap-1.5 px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-bold mb-3">
                                    <Crown size={14} /> حساب فعال
                                </div>
                                <div className="w-full">
                                    <div className="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden mb-1.5">
                                        <div className="h-full bg-yellow-400 rounded-full transition-all duration-500" style={{ width: '75%' }}></div>
                                    </div>
                                    <div className="text-[10px] text-gray-400 text-center">75٪ تا سطح بعدی</div>
                                </div>
                            </div>
                        </div>
                        <ul className="p-4 flex flex-col gap-1">
                            {menuItems.map((item) => (
                                <li key={item.id}>
                                    <button onClick={() => setActiveTab(item.id)} className={`w-full cursor-pointer flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all duration-200 ${activeTab === item.id ? 'bg-[#1a2332] text-white shadow-md' : 'text-gray-600 hover:bg-gray-50 hover:text-[#ffb900]'}`}>
                                        <item.icon size={18} className={activeTab === item.id ? 'text-white' : 'text-gray-400'} />
                                        {item.label}
                                    </button>
                                </li>
                            ))}
                            <li className="mt-2 pt-2 border-t border-gray-100">
                                <button onClick={handleLogout} className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-red-500 hover:bg-red-50 transition-colors">
                                    <LogOut size={18} /> خروج
                                </button>
                            </li>
                        </ul>
                    </aside>

                    <main className="flex-1 overflow-hidden">
                        {activeTab === 'dash' && (
                            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
                                <h2 className="text-2xl font-bold text-gray-800 mb-6">خوش آمدید</h2>
                                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
                                    <DashboardStat icon={<Wallet size={24} />} color="bg-blue-50 text-blue-600" label="موجودی کیف پول" value="1,500,000 تومان" />
                                    <DashboardStat icon={<ShoppingBag size={24} />} color="bg-green-50 text-green-600" label="سفارشات جاری" value="2 مورد" />
                                    <DashboardStat icon={<Headphones size={24} />} color="bg-orange-50 text-orange-600" label="تیکت‌ها" value={ticketStatValue} />
                                    <DashboardStat icon={<TrendingUp size={24} />} color="bg-purple-50 text-purple-600" label="امتیاز وفاداری" value="2,340 امتیاز" />
                                </div>
                            </div>
                        )}

                        {activeTab === 'tickets' && (
                            userInfo.role === "admin" ? (
                                <AdminTicketsView
                                    tickets={adminTickets}
                                    loading={adminTicketsLoading}
                                    error={adminTicketsError}
                                    counts={ticketCounts}
                                    statusFilter={adminStatusFilter}
                                    priorityFilter={adminPriorityFilter}
                                    search={adminSearch}
                                    onStatusFilterChange={(value) => { setAdminStatusFilter(value); setAdminPage(1); }}
                                    onPriorityFilterChange={(value) => { setAdminPriorityFilter(value); setAdminPage(1); }}
                                    onSearchChange={(value) => { setAdminSearch(value); setAdminPage(1); }}
                                    selectedTicketId={selectedAdminTicketId}
                                    onSelectTicket={setSelectedAdminTicketId}
                                    selectedTicket={selectedAdminTicket}
                                    detailLoading={ticketDetailLoading}
                                    reply={adminReply}
                                    onReplyChange={setAdminReply}
                                    onReplySubmit={handleAdminReply}
                                    replyLoading={adminReplyLoading}
                                    ticketForm={adminTicketForm}
                                    onTicketFormChange={setAdminTicketForm}
                                    onTicketUpdate={handleAdminUpdate}
                                    updateLoading={adminUpdateLoading}
                                    page={adminPage}
                                    totalPages={adminTotalPages}
                                    onPrevPage={() => setAdminPage((prev) => Math.max(1, prev - 1))}
                                    onNextPage={() => setAdminPage((prev) => Math.min(adminTotalPages, prev + 1))}
                                />
                            ) : (
                                <UserTicketsView
                                    tickets={userTickets}
                                    loading={userTicketsLoading}
                                    error={userTicketsError}
                                    counts={ticketCounts}
                                    statusFilter={ticketStatusFilter}
                                    onStatusFilterChange={(value) => { setTicketStatusFilter(value); setTicketPage(1); }}
                                    selectedTicketId={selectedUserTicketId}
                                    onSelectTicket={setSelectedUserTicketId}
                                    selectedTicket={selectedUserTicket}
                                    detailLoading={ticketDetailLoading}
                                    reply={ticketReply}
                                    onReplyChange={setTicketReply}
                                    onReplySubmit={handleSendUserReply}
                                    replyLoading={ticketReplyLoading}
                                    onCloseTicket={handleCloseTicket}
                                    onOpenCreateTicket={() => setIsCreateTicketOpen(true)}
                                    page={ticketPage}
                                    totalPages={ticketTotalPages}
                                    onPrevPage={() => setTicketPage((prev) => Math.max(1, prev - 1))}
                                    onNextPage={() => setTicketPage((prev) => Math.min(ticketTotalPages, prev + 1))}
                                />
                            )
                        )}

                        {activeTab === 'address' && (
                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                {sampleAddresses.map((address) => (
                                    <div key={address.id} className={`bg-white p-6 rounded-2xl border-2 ${address.isDefault ? 'border-[#ffd230]' : 'border-gray-200'}`}>
                                        <div className="text-gray-800 leading-relaxed font-medium mb-4 text-sm sm:text-base">{address.text}</div>
                                        <div className="flex flex-col gap-2 text-sm text-gray-500 mb-6">
                                            <div className="flex items-center gap-2"><User size={16} /> گیرنده: {address.receiver}</div>
                                            <div className="flex items-center gap-2"><Headphones size={16} /> تماس: {address.phone}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}

                        {activeTab === 'orders' && (
                            <div className="space-y-4">
                                {sampleOrders.map((order) => (
                                    <div key={order.id} className="bg-white rounded-2xl border border-gray-100 shadow-sm">
                                        <div className="p-6 flex items-center justify-between border-b border-gray-100">
                                            <div>
                                                <h3 className="text-lg font-bold text-gray-800">{order.id}</h3>
                                                <p className="text-sm text-gray-500 mt-1">ثبت سفارش: {order.regDate}</p>
                                            </div>
                                            <span className={`px-3 py-1 rounded-full text-xs font-bold ${order.statusColor === 'amber' ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700'}`}>{order.status}</span>
                                        </div>
                                        <div className="p-6 flex flex-col lg:flex-row gap-6">
                                            <div className="w-full lg:w-64 bg-gray-50 rounded-xl p-4 flex flex-col gap-3 text-sm text-gray-600">
                                                <div className="flex items-center gap-2"><Clock size={16} className="text-gray-400" /> تاریخ ثبت: {order.regDate}</div>
                                                <div className="flex items-center gap-2">{order.delivered ? <CircleCheck size={16} className="text-green-500" /> : <Box size={16} className="text-blue-500" />}{order.delivered ? 'تحویل شده:' : 'تحویل تا:'} {order.deliveryDate}</div>
                                                <div className="flex items-center gap-2 border-t border-gray-200 pt-3 mt-1 font-bold text-gray-800"><CreditCard size={16} className="text-gray-400" /> مبلغ کل: {order.total} تومان</div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}

                        {activeTab === 'wallet' && (
                            <div className="bg-gray-800 text-white p-6 sm:p-8 rounded-2xl mb-8">
                                <span className="text-gray-300 text-sm mb-2 block">موجودی فعلی حساب شما:</span>
                                <div className="text-3xl sm:text-4xl font-bold text-yellow-400">1,500,000 <span className="text-lg font-normal text-white">تومان</span></div>
                            </div>
                        )}

                        {activeTab === 'profile' && (
                            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                                <h2 className="text-xl font-bold text-gray-800 mb-6 border-b border-gray-100 pb-4">اطلاعات شخصی</h2>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                                    <ProfileField label="نام و نام خانوادگی" value={userInfo.fullName} />
                                    <ProfileField label="شماره موبایل" value={userInfo.phone} />
                                    <ProfileField label="نام کاربری" value={userInfo.username} />
                                    <ProfileField label="نقش" value={userInfo.role} />
                                </div>
                                <div className="space-y-4">
                                    <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border border-gray-100 rounded-xl bg-gray-50">
                                        <div className="flex items-center gap-4">
                                            <div className="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center"><Shield size={20} /></div>
                                            <div><h3 className="font-bold text-gray-800 text-sm">تغییر رمز عبور</h3><p className="text-xs text-gray-500 mt-1">آخرین تغییر: 2 ماه پیش</p></div>
                                        </div>
                                    </div>
                                    <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border border-gray-100 rounded-xl bg-gray-50">
                                        <div className="flex items-center gap-4">
                                            <div className="w-10 h-10 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center"><ShieldAlert size={20} /></div>
                                            <div><h3 className="font-bold text-gray-800 text-sm">احراز هویت دو مرحله‌ای</h3><p className="text-xs mt-1 text-gray-500">وضعیت: <span className="text-red-500 font-bold">غیرفعال</span></p></div>
                                        </div>
                                    </div>
                                    <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl bg-gray-50">
                                        <div className="flex items-center gap-4">
                                            <div className="w-10 h-10 rounded-full bg-green-50 text-green-600 flex items-center justify-center"><Mail size={20} /></div>
                                            <div><h3 className="font-bold text-gray-800 text-sm">اطلاع‌رسانی ایمیلی</h3><p className="text-xs text-gray-500 mt-1">دریافت ایمیل برای هشدارهای امنیتی</p></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}
                    </main>
                </div>
            </div>

            {isCreateTicketOpen && (
                <CreateTicketModal
                    form={createTicketForm}
                    onChange={setCreateTicketForm}
                    onClose={() => setIsCreateTicketOpen(false)}
                    onSubmit={handleCreateTicket}
                    loading={createTicketLoading}
                    error={createTicketError}
                />
            )}
        </div>
    );
}

function DashboardStat({ icon, color, label, value }: { icon: React.ReactNode; color: string; label: string; value: string }) {
    return (
        <div className="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm flex flex-col items-center gap-4 hover:shadow-md transition-shadow">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}>{icon}</div>
            <div className='flex flex-col items-center'>
                <h4 className="text-xs text-gray-500 mb-1">{label}</h4>
                <strong className="text-lg text-gray-800">{value}</strong>
            </div>
        </div>
    );
}

function TicketSummaryCard({ value, label, color }: { value: string; label: string; color: string }) {
    return (
        <div className="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm flex flex-col items-center justify-center">
            <span className={`text-3xl font-bold mb-2 ${color}`}>{value}</span>
            <div className="text-sm text-gray-500">{label}</div>
        </div>
    );
}

function UserTicketsView(props: {
    tickets: TicketListItem[];
    loading: boolean;
    error: string;
    counts: TicketCounts;
    statusFilter: "" | TicketStatus;
    onStatusFilterChange: (value: "" | TicketStatus) => void;
    selectedTicketId: string;
    onSelectTicket: (id: string) => void;
    selectedTicket: TicketDetail | null;
    detailLoading: boolean;
    reply: string;
    onReplyChange: (value: string) => void;
    onReplySubmit: () => void;
    replyLoading: boolean;
    onCloseTicket: () => void;
    onOpenCreateTicket: () => void;
    page: number;
    totalPages: number;
    onPrevPage: () => void;
    onNextPage: () => void;
}) {
    return (
        <div className="animate-in fade-in duration-500">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                <h1 className="text-2xl font-bold text-gray-800 m-0">تیکت‌های پشتیبانی</h1>
                <button onClick={props.onOpenCreateTicket} className="bg-[#1a2332] hover:bg-[#ffb900] text-white px-5 py-2.5 rounded-xl flex items-center gap-2 transition-colors text-sm font-medium">
                    <Plus size={18} /> تیکت جدید
                </button>
            </div>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                <TicketSummaryCard value={props.counts.total.toLocaleString('fa-IR')} label="کل تیکت‌ها" color="text-gray-800" />
                <TicketSummaryCard value={props.counts.waiting_for_admin.toLocaleString('fa-IR')} label="در انتظار پشتیبانی" color="text-amber-600" />
                <TicketSummaryCard value={props.counts.waiting_for_user.toLocaleString('fa-IR')} label="در انتظار شما" color="text-blue-700" />
                <TicketSummaryCard value={props.counts.closed.toLocaleString('fa-IR')} label="بسته شده" color="text-gray-700" />
            </div>
            <div className="mb-6 overflow-x-auto pb-2">
                <div className="flex gap-2 min-w-max">
                    <FilterButton active={props.statusFilter === ""} onClick={() => props.onStatusFilterChange("")}>همه تیکت‌ها</FilterButton>
                    <FilterButton active={props.statusFilter === "waiting_for_admin"} onClick={() => props.onStatusFilterChange("waiting_for_admin")}>در انتظار پشتیبانی</FilterButton>
                    <FilterButton active={props.statusFilter === "waiting_for_user"} onClick={() => props.onStatusFilterChange("waiting_for_user")}>در انتظار شما</FilterButton>
                    <FilterButton active={props.statusFilter === "closed"} onClick={() => props.onStatusFilterChange("closed")}>بسته شده</FilterButton>
                </div>
            </div>
            <div className="grid grid-cols-1 xl:grid-cols-[420px_1fr] gap-6">
                <div className="space-y-4">
                    {props.loading ? <LoadingCard text="در حال دریافت تیکت‌ها..." /> : props.error ? <ErrorCard text={props.error} /> : props.tickets.length === 0 ? <EmptyCard title="تیکتی پیدا نشد" description="با فیلتر فعلی تیکتی وجود ندارد." /> : (
                        <>
                            {props.tickets.map((ticket) => (
                                <button key={ticket.id} onClick={() => props.onSelectTicket(ticket.id)} className={`w-full text-right bg-white p-5 rounded-2xl border shadow-sm transition ${props.selectedTicketId === ticket.id ? 'border-[#ffb900] shadow-md' : 'border-gray-100 hover:shadow-md'}`}>
                                    <div className="flex items-start justify-between gap-3 mb-3">
                                        <div>
                                            <h3 className="text-base font-bold text-gray-800">{ticket.subject}</h3>
                                            <div className="text-xs text-gray-400 mt-2">{ticket.ticketNumber}</div>
                                        </div>
                                        <StatusBadge status={ticket.status} />
                                    </div>
                                    <div className="flex flex-wrap items-center gap-2 text-xs text-gray-500">
                                        <PriorityBadge priority={ticket.priority} />
                                        <span>{formatDateTime(ticket.lastMessageAt || ticket.createdAt)}</span>
                                        <span>{ticket.messagesCount} پیام</span>
                                    </div>
                                    <div className="mt-3 text-sm text-gray-600 line-clamp-2">{ticket.lastMessage?.message || "بدون پیام"}</div>
                                </button>
                            ))}
                            <Pager page={props.page} totalPages={props.totalPages} onPrev={props.onPrevPage} onNext={props.onNextPage} />
                        </>
                    )}
                </div>
                <div>
                    {props.detailLoading ? <LoadingCard text="در حال دریافت جزئیات تیکت..." /> : !props.selectedTicket ? <EmptyCard title="یک تیکت را انتخاب کنید" description="برای دیدن جزئیات گفتگو، یکی از تیکت‌ها را انتخاب کنید." /> : (
                        <TicketConversationCard ticket={props.selectedTicket} reply={props.reply} onReplyChange={props.onReplyChange} onReplySubmit={props.onReplySubmit} replyLoading={props.replyLoading} onCloseTicket={props.selectedTicket.status === "closed" ? undefined : props.onCloseTicket} />
                    )}
                </div>
            </div>
        </div>
    );
}

function AdminTicketsView(props: {
    tickets: TicketListItem[];
    loading: boolean;
    error: string;
    counts: TicketCounts;
    statusFilter: "" | TicketStatus;
    priorityFilter: "" | TicketPriority;
    search: string;
    onStatusFilterChange: (value: "" | TicketStatus) => void;
    onPriorityFilterChange: (value: "" | TicketPriority) => void;
    onSearchChange: (value: string) => void;
    selectedTicketId: string;
    onSelectTicket: (id: string) => void;
    selectedTicket: TicketDetail | null;
    detailLoading: boolean;
    reply: string;
    onReplyChange: (value: string) => void;
    onReplySubmit: () => void;
    replyLoading: boolean;
    ticketForm: { status: TicketStatus; priority: TicketPriority; assignedAdminId: string };
    onTicketFormChange: React.Dispatch<React.SetStateAction<{ status: TicketStatus; priority: TicketPriority; assignedAdminId: string }>>;
    onTicketUpdate: () => void;
    updateLoading: boolean;
    page: number;
    totalPages: number;
    onPrevPage: () => void;
    onNextPage: () => void;
}) {
    return (
        <div className="animate-in fade-in duration-500">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                <h1 className="text-2xl font-bold text-gray-800 m-0">مدیریت تیکت‌ها</h1>
            </div>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                <TicketSummaryCard value={props.counts.total.toLocaleString('fa-IR')} label="کل تیکت‌ها" color="text-gray-800" />
                <TicketSummaryCard value={props.counts.waiting_for_admin.toLocaleString('fa-IR')} label="در انتظار پشتیبانی" color="text-amber-600" />
                <TicketSummaryCard value={props.counts.waiting_for_user.toLocaleString('fa-IR')} label="در انتظار کاربر" color="text-blue-700" />
                <TicketSummaryCard value={props.counts.closed.toLocaleString('fa-IR')} label="بسته شده" color="text-gray-700" />
            </div>
            <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm mb-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div className="relative">
                        <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                        <input value={props.search} onChange={(e) => props.onSearchChange(e.target.value)} placeholder="جستجو در موضوع یا شماره تیکت" className="w-full pr-10 px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]" />
                    </div>
                    <select value={props.statusFilter} onChange={(e) => props.onStatusFilterChange(e.target.value as "" | TicketStatus)} className="px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]">
                        <option value="">همه وضعیت‌ها</option>
                        {Object.entries(statusLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                    </select>
                    <select value={props.priorityFilter} onChange={(e) => props.onPriorityFilterChange(e.target.value as "" | TicketPriority)} className="px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]">
                        <option value="">همه اولویت‌ها</option>
                        {Object.entries(priorityLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                    </select>
                </div>
            </div>
            <div className="grid grid-cols-1 xl:grid-cols-[420px_1fr] gap-6">
                <div className="space-y-4">
                    {props.loading ? <LoadingCard text="در حال دریافت تیکت‌ها..." /> : props.error ? <ErrorCard text={props.error} /> : props.tickets.length === 0 ? <EmptyCard title="تیکتی پیدا نشد" description="نتیجه‌ای با فیلترهای انتخاب‌شده وجود ندارد." /> : (
                        <>
                            {props.tickets.map((ticket) => (
                                <button key={ticket.id} onClick={() => props.onSelectTicket(ticket.id)} className={`w-full text-right bg-white p-5 rounded-2xl border shadow-sm transition ${props.selectedTicketId === ticket.id ? 'border-[#ffb900] shadow-md' : 'border-gray-100 hover:shadow-md'}`}>
                                    <div className="flex items-start justify-between gap-3 mb-3">
                                        <div>
                                            <h3 className="text-base font-bold text-gray-800">{ticket.subject}</h3>
                                            <div className="text-xs text-gray-400 mt-2">{ticket.ticketNumber}</div>
                                        </div>
                                        <StatusBadge status={ticket.status} />
                                    </div>
                                    <div className="flex flex-wrap items-center gap-2 text-xs text-gray-500">
                                        <PriorityBadge priority={ticket.priority} />
                                        <span>{ticket.assignedAdmin?.fullName || "بدون ادمین مسئول"}</span>
                                    </div>
                                    <div className="mt-3 text-sm text-gray-600 line-clamp-2">{ticket.lastMessage?.message || "بدون پیام"}</div>
                                </button>
                            ))}
                            <Pager page={props.page} totalPages={props.totalPages} onPrev={props.onPrevPage} onNext={props.onNextPage} />
                        </>
                    )}
                </div>
                <div className="space-y-6">
                    {props.detailLoading ? <LoadingCard text="در حال دریافت جزئیات تیکت..." /> : !props.selectedTicket ? <EmptyCard title="یک تیکت را انتخاب کنید" description="برای دیدن پیام‌ها و تنظیمات، یک تیکت را از لیست انتخاب کنید." /> : (
                        <>
                            <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
                                <div className="flex items-center justify-between gap-4 mb-6">
                                    <div>
                                        <div className="text-xs text-gray-400 mb-2">{props.selectedTicket.ticketNumber}</div>
                                        <h3 className="text-lg font-bold text-gray-800">{props.selectedTicket.subject}</h3>
                                    </div>
                                    <div className="flex gap-2 flex-wrap">
                                        <StatusBadge status={props.selectedTicket.status} />
                                        <PriorityBadge priority={props.selectedTicket.priority} />
                                    </div>
                                </div>
                                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
                                    <select value={props.ticketForm.status} onChange={(e) => props.onTicketFormChange((prev) => ({ ...prev, status: e.target.value as TicketStatus }))} className="px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]">
                                        {Object.entries(statusLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                                    </select>
                                    <select value={props.ticketForm.priority} onChange={(e) => props.onTicketFormChange((prev) => ({ ...prev, priority: e.target.value as TicketPriority }))} className="px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]">
                                        {Object.entries(priorityLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                                    </select>
                                    <input value={props.ticketForm.assignedAdminId} onChange={(e) => props.onTicketFormChange((prev) => ({ ...prev, assignedAdminId: e.target.value }))} placeholder="assignedAdminId" className="px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]" />
                                </div>
                                <button onClick={props.onTicketUpdate} disabled={props.updateLoading} className="bg-[#1a2332] text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-[#ffb900] disabled:opacity-60">
                                    {props.updateLoading ? "در حال ذخیره..." : "ذخیره تنظیمات"}
                                </button>
                            </div>
                            <TicketConversationCard ticket={props.selectedTicket} reply={props.reply} onReplyChange={props.onReplyChange} onReplySubmit={props.onReplySubmit} replyLoading={props.replyLoading} adminMode />
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}

function ProfileField({ label, value }: { label: string; value: string }) {
    return (
        <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
            <div className="w-full px-4 py-2 border border-gray-100 bg-gray-50 text-gray-700 rounded-xl">{value}</div>
        </div>
    );
}

function TicketConversationCard({ ticket, reply, onReplyChange, onReplySubmit, replyLoading, onCloseTicket, adminMode = false }: {
    ticket: TicketDetail;
    reply: string;
    onReplyChange: (value: string) => void;
    onReplySubmit: () => void;
    replyLoading: boolean;
    onCloseTicket?: () => void;
    adminMode?: boolean;
}) {
    const closed = ticket.status === "closed";

    return (
        <div className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
            <div className="flex items-center justify-between gap-4 mb-6">
                <div>
                    <div className="text-xs text-gray-400 mb-2">{ticket.ticketNumber}</div>
                    <h3 className="text-lg font-bold text-gray-800">{ticket.subject}</h3>
                </div>
                <div className="flex flex-wrap gap-2">
                    <StatusBadge status={ticket.status} />
                    <PriorityBadge priority={ticket.priority} />
                </div>
            </div>
            {!adminMode && onCloseTicket && (
                <div className="mb-4">
                    <button onClick={onCloseTicket} className="px-4 py-2 rounded-xl text-sm font-medium border border-red-200 text-red-500 hover:bg-red-50">بستن تیکت</button>
                </div>
            )}
            <div className="space-y-4 max-h-[460px] overflow-y-auto mb-6">
                {ticket.messages.map((message) => (
                    <div key={message.id} className={`flex ${message.senderType === 'user' ? 'justify-end' : 'justify-start'}`}>
                        <div className={`max-w-[85%] rounded-2xl p-4 ${message.senderType === 'user' ? 'bg-[#1a2332] text-white' : 'bg-gray-50 text-gray-800 border border-gray-100'}`}>
                            <div className={`text-xs mb-2 ${message.senderType === 'user' ? 'text-gray-300' : 'text-gray-500'}`}>{message.sender.fullName} • {message.senderType === 'user' ? 'کاربر' : 'پشتیبانی'}</div>
                            <div className="text-sm leading-7">{message.message}</div>
                            <div className={`text-[11px] mt-3 ${message.senderType === 'user' ? 'text-gray-300' : 'text-gray-400'}`}>{formatDateTime(message.createdAt)}</div>
                        </div>
                    </div>
                ))}
            </div>
            <div className="border-t border-gray-100 pt-4">
                <textarea value={reply} onChange={(e) => onReplyChange(e.target.value)} disabled={closed} rows={4} placeholder={closed ? "این تیکت بسته شده و ارسال پیام غیرفعال است." : adminMode ? "پاسخ پشتیبانی را بنویسید..." : "پیام خود را بنویسید..."} className="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900] resize-none disabled:bg-gray-50 disabled:text-gray-400" />
                <div className="flex items-center justify-between mt-3 gap-4">
                    <div className="text-xs text-gray-500">{closed ? "برای ادامه گفتگو باید تیکت جدید ثبت شود." : "آخرین بروزرسانی: " + formatDateTime(ticket.updatedAt)}</div>
                    <button onClick={onReplySubmit} disabled={closed || replyLoading || !reply.trim()} className="bg-[#1a2332] text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-[#ffb900] disabled:opacity-60 flex items-center gap-2">
                        {replyLoading ? <LoaderCircle size={16} className="animate-spin" /> : <Send size={16} />}
                        ارسال پیام
                    </button>
                </div>
            </div>
        </div>
    );
}

function CreateTicketModal({ form, onChange, onClose, onSubmit, loading, error }: {
    form: { subject: string; priority: TicketPriority; message: string };
    onChange: React.Dispatch<React.SetStateAction<{ subject: string; priority: TicketPriority; message: string }>>;
    onClose: () => void;
    onSubmit: () => void;
    loading: boolean;
    error: string;
}) {
    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[#1A2332]/40 backdrop-blur-sm" dir="rtl">
            <div className="absolute inset-0" onClick={onClose}></div>
            <div className="relative w-full max-w-2xl bg-white rounded-3xl shadow-2xl p-8">
                <button onClick={onClose} className="absolute left-5 top-4 text-gray-400 hover:text-gray-700"><X size={20} /></button>
                <h3 className="text-xl font-bold text-gray-800 mb-2">ثبت تیکت جدید</h3>
                <p className="text-sm text-gray-500 mb-6">موضوع و متن درخواستت را کامل وارد کن تا سریع‌تر بررسی شود.</p>
                <div className="space-y-4">
                    <input value={form.subject} onChange={(e) => onChange((prev) => ({ ...prev, subject: e.target.value }))} placeholder="موضوع تیکت" className="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]" />
                    <select value={form.priority} onChange={(e) => onChange((prev) => ({ ...prev, priority: e.target.value as TicketPriority }))} className="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900]">
                        {Object.entries(priorityLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
                    </select>
                    <textarea value={form.message} onChange={(e) => onChange((prev) => ({ ...prev, message: e.target.value }))} rows={6} placeholder="متن پیام" className="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm outline-none focus:border-[#ffb900] resize-none" />
                    {error && <div className="text-sm text-red-500">{error}</div>}
                    <div className="flex gap-3">
                        <button onClick={onSubmit} disabled={loading} className="bg-[#1a2332] text-white px-5 py-3 rounded-xl text-sm font-medium hover:bg-[#ffb900] disabled:opacity-60">{loading ? "در حال ثبت..." : "ثبت تیکت"}</button>
                        <button onClick={onClose} className="border border-gray-200 text-gray-600 px-5 py-3 rounded-xl text-sm font-medium hover:bg-gray-50">بستن</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

function StatusBadge({ status }: { status: TicketStatus }) {
    return <span className={`px-3 py-1 rounded-full text-xs font-medium ${status === "waiting_for_admin" ? 'bg-amber-100 text-amber-800' : status === "waiting_for_user" ? 'bg-blue-100 text-blue-700' : 'bg-gray-200 text-gray-700'}`}>{statusLabels[status]}</span>;
}

function PriorityBadge({ priority }: { priority: TicketPriority }) {
    return <span className={`px-2.5 py-1 rounded-full text-[11px] font-medium ${priority === "low" ? 'bg-emerald-100 text-emerald-700' : priority === "normal" ? 'bg-gray-100 text-gray-700' : priority === "high" ? 'bg-orange-100 text-orange-700' : 'bg-red-100 text-red-700'}`}>{priorityLabels[priority]}</span>;
}

function FilterButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
    return <button onClick={onClick} className={`${active ? 'bg-gray-800 text-white' : 'bg-white border border-gray-200 text-gray-600'} px-5 py-2 rounded-full text-sm font-medium transition-colors`}>{children}</button>;
}

function Pager({ page, totalPages, onPrev, onNext }: { page: number; totalPages: number; onPrev: () => void; onNext: () => void }) {
    return <div className="flex items-center justify-between pt-2"><button onClick={onPrev} disabled={page <= 1} className="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-600 disabled:opacity-50">قبلی</button><span className="text-xs text-gray-500">صفحه {page.toLocaleString('fa-IR')} از {totalPages.toLocaleString('fa-IR')}</span><button onClick={onNext} disabled={page >= totalPages} className="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-600 disabled:opacity-50">بعدی</button></div>;
}

function LoadingCard({ text }: { text: string }) {
    return <div className="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm text-center text-gray-500 flex items-center justify-center gap-2"><LoaderCircle size={18} className="animate-spin" />{text}</div>;
}

function ErrorCard({ text }: { text: string }) {
    return <div className="bg-red-50 text-red-600 p-5 rounded-2xl border border-red-100 text-sm">{text}</div>;
}

function EmptyCard({ title, description }: { title: string; description: string }) {
    return <div className="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm text-center"><div className="w-14 h-14 mx-auto rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mb-4"><Headphones size={24} /></div><h3 className="text-lg font-bold text-gray-800 mb-2">{title}</h3><p className="text-sm text-gray-500 leading-7">{description}</p></div>;
}

function formatDateTime(value?: string | null) {
    if (!value) return "ثبت نشده";
    return new Intl.DateTimeFormat("fa-IR", { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
}