import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Separator } from "@/components/ui/separator";
import { format } from "date-fns";

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 EditTicketDialogProps {
    isOpen: boolean;
    setIsOpen: (open: boolean) => void;
    selectedTicket: UserTicket | null;
    ticketContent: string;
    setTicketContent: (v: string) => void;
    ticketChecked: boolean;
    setTicketChecked: (v: boolean) => void;
    closeTicketDialog: () => void;
    updateTicket: () => void;
}

export default function EditTicketDialog({
    isOpen,
    setIsOpen,
    selectedTicket,
    ticketContent,
    setTicketContent,
    ticketChecked,
    setTicketChecked,
    closeTicketDialog,
    updateTicket,
}: EditTicketDialogProps) {
    return (
        <Dialog open={isOpen} onOpenChange={setIsOpen}>
            <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                    <DialogTitle>ویرایش تیکت</DialogTitle>
                    <DialogDescription>
                        جزئیات تیکت را در زیر به‌روزرسانی کنید
                    </DialogDescription>
                </DialogHeader>
                {selectedTicket && (
                    <div className="space-y-4 py-2">
                        <div className="space-y-2">
                            <Label htmlFor="user-info">کاربر</Label>
                            <Input
                                id="user-info"
                                value={`${[
                                    selectedTicket.telegramUser.firstName,
                                    selectedTicket.telegramUser.lastName
                                ].filter(Boolean).join(" ")} ${selectedTicket.telegramUser.username ? `(@${selectedTicket.telegramUser.username})` : ""}`}
                                disabled
                            />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="ticket-content">محتوا</Label>
                            <Textarea
                                id="ticket-content"
                                value={ticketContent}
                                rows={5}
                                onChange={(e) => setTicketContent(e.target.value)}
                            />
                        </div>
                        <div className="flex items-center space-x-2">
                            <Checkbox
                                id="ticket-checked"
                                checked={ticketChecked}
                                onCheckedChange={(checked) =>
                                    setTicketChecked(checked as boolean)
                                }
                            />
                            <Label htmlFor="ticket-checked">تیکت بررسی شده است</Label>
                        </div>
                        <Separator />
                        <div className="space-y-1">
                            <p className="text-sm text-muted-foreground">
                                ایجاد شده در {format(new Date(selectedTicket.createdAt), "PPP")}
                            </p>
                            <p className="text-sm text-muted-foreground">
                                آخرین به‌روزرسانی در {format(new Date(selectedTicket.updatedAt), "PPP")}
                            </p>
                        </div>
                    </div>
                )}
                <DialogFooter>
                    <Button variant="outline" onClick={closeTicketDialog}>
                        لغو
                    </Button>
                    <Button onClick={updateTicket}>ذخیره تغییرات</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}