import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { format } from "date-fns";
import { PANEL_SETTING } from "@/config/panelSetting";

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;
}
interface TicketsTableProps {
    tickets: UserTicket[];
    pagination: PaginationInfo;
    handlePageChange: (page: number) => void;
    deleteTicket: (id: string) => void;
    openTicketDialog: (ticket: UserTicket) => void;
}

export default function TicketsTable({
    tickets,
    pagination,
    handlePageChange,
    deleteTicket,
    openTicketDialog,
}: TicketsTableProps) {
    if (!tickets || tickets.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center h-60">
                <p className="text-muted-foreground">تیکتی یافت نشد</p>
            </div>
        );
    }
    return (
        <>
            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow className="*:text-right">
                            <TableHead className="w-[50px]">وضعیت</TableHead>
                            <TableHead>کاربر</TableHead>
                            <TableHead className="max-w-[400px]">محتوا</TableHead>
                            {PANEL_SETTING.template === "prop_firms" &&
                                <TableHead>محصولات</TableHead>
                            }
                            <TableHead>تاریخ ایجاد</TableHead>
                            <TableHead className="text-right">عملیات</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {tickets.map((ticket) => (
                            <TableRow key={ticket.id}>
                                <TableCell>
                                    <div className="flex justify-center">
                                        <Checkbox
                                            checked={ticket.checked}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                openTicketDialog(ticket);
                                            }}
                                        />
                                    </div>
                                </TableCell>
                                <TableCell>
                                    <div className="font-medium">
                                        {ticket.telegramUser.username ? `@${ticket.telegramUser.username}` : 'نام کاربری ندارد'}
                                    </div>
                                    <div className="text-sm text-muted-foreground">
                                        {[ticket.telegramUser.firstName, ticket.telegramUser.lastName]
                                            .filter(Boolean)
                                            .join(" ") || "نامشخص"}
                                    </div>
                                </TableCell>
                                <TableCell className="max-w-[400px]">
                                    <div className="truncate">
                                        {ticket.content}
                                    </div>
                                </TableCell>
                                {PANEL_SETTING.template === "prop_firms" &&
                                    <TableCell>
                                        {ticket.telegramUser?.userProducts?.length > 0 ? (
                                            <Badge variant="default">
                                                {ticket.telegramUser?.userProducts?.length} محصول
                                            </Badge>
                                        ) : (
                                            <Badge variant="outline">هیچ</Badge>
                                        )}
                                    </TableCell>
                                }
                                <TableCell>
                                    {format(new Date(ticket.createdAt), "d MMM, yyyy")}
                                    <div className="text-xs text-muted-foreground">
                                        {format(new Date(ticket.createdAt), "h:mm a")}
                                    </div>
                                </TableCell>
                                <TableCell className="text-right">
                                    <div className="flex gap-2">
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => openTicketDialog(ticket)}
                                        >
                                            ویرایش
                                        </Button>
                                        <Button
                                            variant="destructive"
                                            size="sm"
                                            onClick={() => deleteTicket(ticket.id)}
                                        >
                                            حذف
                                        </Button>
                                        <Button variant="default" size="sm">
                                            <Link href={`/dashboard/users/${ticket.telegramUser.id}`}>
                                                گفتگو
                                            </Link>
                                        </Button>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
            <div className="flex items-center justify-between space-x-2 py-4">
                <div className="flex items-center space-x-2">
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handlePageChange(pagination.currentPage - 1)}
                        disabled={pagination.currentPage === 1}
                    >
                        <ChevronRight className="h-4 w-4" />
                        <span className="sr-only">صفحه قبل</span>
                    </Button>
                    <p className="text-sm font-medium">
                        صفحه {pagination.currentPage} از {pagination.totalPages}
                    </p>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handlePageChange(pagination.currentPage + 1)}
                        disabled={pagination.currentPage === pagination.totalPages}
                    >
                        <ChevronLeft className="h-4 w-4" />
                        <span className="sr-only">صفحه بعد</span>
                    </Button>
                </div>
            </div>
        </>
    );
}