"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Ticket, ticketsApi } from "@/lib/api"
import { toast } from "sonner"
import Link from "next/link"
import { Plus, Trash2, Eye, ChevronLeft, ChevronRight } from "lucide-react"
import { format } from "date-fns"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Skeleton } from "@/components/ui/skeleton"
import { useTranslation } from "@/lib/i18n"

const ITEMS_PER_PAGE = 10

export default function AdminTicketsPage() {
    const { t } = useTranslation()
    const [tickets, setTickets] = useState<Ticket[]>([])
    const [loading, setLoading] = useState(true)
    const [deleteId, setDeleteId] = useState<string | null>(null)
    const [createOpen, setCreateOpen] = useState(false)
    const [creating, setCreating] = useState(false)
    const [newTicket, setNewTicket] = useState({ subject: "", message: "", priority: "medium" })

    // Pagination state
    const [currentPage, setCurrentPage] = useState(1)
    const totalPages = Math.ceil(tickets.length / ITEMS_PER_PAGE)
    const paginatedTickets = tickets.slice(
        (currentPage - 1) * ITEMS_PER_PAGE,
        currentPage * ITEMS_PER_PAGE
    )

    const fetchTickets = async () => {
        try {
            setLoading(true)
            const data = await ticketsApi.listAll()
            setTickets(data)
        } catch (error) {
            console.error("Failed to fetch tickets", error)
            toast.error(t("ticketsPage.errors.fetchFailed"))
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        fetchTickets()
    }, [])

    const handleDelete = async () => {
        if (!deleteId) return
        try {
            await ticketsApi.delete(deleteId)
            toast.success(t("ticketsPage.messages.deleted"))
            setDeleteId(null)
            fetchTickets()
        } catch (error) {
            console.error("Failed to delete ticket", error)
            toast.error(t("ticketsPage.errors.deleteFailed"))
        }
    }

    const handleCreate = async () => {
        if (!newTicket.subject.trim()) {
            toast.error(t("ticketsPage.errors.subjectRequired"))
            return
        }
        try {
            setCreating(true)
            await ticketsApi.create(newTicket.subject, newTicket.priority)
            toast.success(t("ticketsPage.messages.created"))
            setCreateOpen(false)
            setNewTicket({ subject: "", message: "", priority: "medium" })
            fetchTickets()
        } catch (error) {
            console.error("Failed to create ticket", error)
            toast.error(t("ticketsPage.errors.createFailed"))
        } finally {
            setCreating(false)
        }
    }

    const getStatusBadge = (status: string) => {
        const labels: Record<string, string> = {
            open: t("ticketsPage.status.open"),
            in_progress: t("ticketsPage.status.inProgress"),
            closed: t("ticketsPage.status.closed"),
        }
        switch (status) {
            case "open": return <Badge variant="default" className="bg-green-500">{labels.open}</Badge>
            case "in_progress": return <Badge variant="secondary" className="bg-yellow-500 text-white">{labels.in_progress}</Badge>
            case "closed": return <Badge variant="outline">{labels.closed}</Badge>
            default: return <Badge variant="outline">{status}</Badge>
        }
    }

    const getPriorityBadge = (priority: string) => {
        const labels: Record<string, string> = {
            high: t("ticketsPage.priority.high"),
            medium: t("ticketsPage.priority.medium"),
            low: t("ticketsPage.priority.low"),
        }
        switch (priority) {
            case "high": return <Badge variant="destructive">{labels.high}</Badge>
            case "medium": return <Badge variant="secondary">{labels.medium}</Badge>
            case "low": return <Badge variant="outline">{labels.low}</Badge>
            default: return <Badge variant="outline">{priority}</Badge>
        }
    }

    // Skeleton loader component
    const SkeletonRow = () => (
        <TableRow>
            <TableCell><Skeleton className="h-4 w-16" /></TableCell>
            <TableCell><Skeleton className="h-4 w-48" /></TableCell>
            <TableCell><Skeleton className="h-4 w-24" /></TableCell>
            <TableCell><Skeleton className="h-5 w-16" /></TableCell>
            <TableCell><Skeleton className="h-5 w-14" /></TableCell>
            <TableCell><Skeleton className="h-4 w-24" /></TableCell>
            <TableCell className="text-right"><Skeleton className="h-8 w-16 ml-auto" /></TableCell>
        </TableRow>
    )

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">{t("ticketsPage.title")}</h1>
                    <p className="text-muted-foreground">{t("ticketsPage.description")}</p>
                </div>
                <Button onClick={() => setCreateOpen(true)}>
                    <Plus className="h-4 w-4 mr-2" />
                    {t("ticketsPage.newTicket")}
                </Button>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>{t("ticketsPage.allTickets")}</CardTitle>
                    <CardDescription>{t("ticketsPage.allTicketsDescription")}</CardDescription>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>{t("ticketsPage.table.id")}</TableHead>
                                <TableHead>{t("ticketsPage.table.subject")}</TableHead>
                                <TableHead>{t("ticketsPage.table.user")}</TableHead>
                                <TableHead>{t("ticketsPage.table.status")}</TableHead>
                                <TableHead>{t("ticketsPage.table.priority")}</TableHead>
                                <TableHead>{t("ticketsPage.table.created")}</TableHead>
                                <TableHead className="text-right">{t("ticketsPage.table.actions")}</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {loading ? (
                                <>
                                    <SkeletonRow />
                                    <SkeletonRow />
                                    <SkeletonRow />
                                    <SkeletonRow />
                                    <SkeletonRow />
                                </>
                            ) : paginatedTickets.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                                        {t("ticketsPage.noTickets")}
                                    </TableCell>
                                </TableRow>
                            ) : (
                                paginatedTickets.map((ticket) => (
                                    <TableRow key={ticket.id}>
                                        <TableCell className="font-mono text-xs max-w-[80px] truncate" title={ticket.id}>
                                            {ticket.id.substring(0, 8)}...
                                        </TableCell>
                                        <TableCell className="font-medium max-w-[200px] truncate" title={ticket.subject}>
                                            {ticket.subject}
                                        </TableCell>
                                        <TableCell className="text-sm" title={ticket.userId}>
                                            {(ticket as any).userFullName || (ticket as any).userName || ticket.userId?.substring(0, 8) + "..."}
                                        </TableCell>
                                        <TableCell>{getStatusBadge(ticket.status)}</TableCell>
                                        <TableCell>{getPriorityBadge(ticket.priority)}</TableCell>
                                        <TableCell>{format(new Date(ticket.createdAt), "MMM d, yyyy")}</TableCell>
                                        <TableCell className="text-right">
                                            <div className="flex justify-end gap-2">
                                                <Link href={`./tickets/${ticket.id}`}>
                                                    <Button variant="ghost" size="icon" title={t("ticketsPage.view")}>
                                                        <Eye className="h-4 w-4" />
                                                    </Button>
                                                </Link>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    onClick={() => setDeleteId(ticket.id)}
                                                    className="text-destructive hover:text-destructive"
                                                    title={t("ticketsPage.delete")}
                                                >
                                                    <Trash2 className="h-4 w-4" />
                                                </Button>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>

                    {/* Pagination */}
                    {!loading && totalPages > 1 && (
                        <div className="flex items-center justify-between mt-4 pt-4 border-t">
                            <p className="text-sm text-muted-foreground">
                                {t("ticketsPage.pagination.showing", {
                                    start: (currentPage - 1) * ITEMS_PER_PAGE + 1,
                                    end: Math.min(currentPage * ITEMS_PER_PAGE, tickets.length),
                                    total: tickets.length
                                })}
                            </p>
                            <div className="flex gap-2">
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                    disabled={currentPage === 1}
                                >
                                    <ChevronLeft className="h-4 w-4" />
                                </Button>
                                <span className="flex items-center px-3 text-sm">
                                    {currentPage} / {totalPages}
                                </span>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                                    disabled={currentPage === totalPages}
                                >
                                    <ChevronRight className="h-4 w-4" />
                                </Button>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>

            {/* Delete Dialog */}
            <Dialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>{t("ticketsPage.deleteDialog.title")}</DialogTitle>
                        <DialogDescription>
                            {t("ticketsPage.deleteDialog.description")}
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button variant="outline" onClick={() => setDeleteId(null)}>{t("ticketsPage.deleteDialog.cancel")}</Button>
                        <Button variant="destructive" onClick={handleDelete}>{t("ticketsPage.deleteDialog.confirm")}</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* Create Dialog */}
            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>{t("ticketsPage.createDialog.title")}</DialogTitle>
                        <DialogDescription>
                            {t("ticketsPage.createDialog.description")}
                        </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                        <div className="space-y-2">
                            <Label htmlFor="subject">{t("ticketsPage.createDialog.subject")}</Label>
                            <Input
                                id="subject"
                                value={newTicket.subject}
                                onChange={(e) => setNewTicket(prev => ({ ...prev, subject: e.target.value }))}
                                placeholder={t("ticketsPage.createDialog.subjectPlaceholder")}
                            />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="priority">{t("ticketsPage.createDialog.priority")}</Label>
                            <Select
                                value={newTicket.priority}
                                onValueChange={(value) => setNewTicket(prev => ({ ...prev, priority: value }))}
                            >
                                <SelectTrigger>
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="low">{t("ticketsPage.priority.low")}</SelectItem>
                                    <SelectItem value="medium">{t("ticketsPage.priority.medium")}</SelectItem>
                                    <SelectItem value="high">{t("ticketsPage.priority.high")}</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                    </div>
                    <DialogFooter>
                        <Button variant="outline" onClick={() => setCreateOpen(false)}>{t("ticketsPage.createDialog.cancel")}</Button>
                        <Button onClick={handleCreate} disabled={creating}>
                            {creating ? t("ticketsPage.createDialog.creating") : t("ticketsPage.createDialog.create")}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    )
}
