import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { useQuery } from "@tanstack/react-query"
import { useState } from "react"
import {
    getPostCategories,
    getPostCategoryViews,
} from "@/features/blog/services/blog.service"

export default function PostCategoryViewsPage() {
    const [selectedCategory, setSelectedCategory] = useState<string>("")

    const { data: categories } = useQuery({
        queryKey: ["postCategories"],
        queryFn: () => getPostCategories(true),
    })

    const { data: views, isLoading } = useQuery({
        queryKey: ["postCategoryViews", selectedCategory],
        queryFn: () => getPostCategoryViews(selectedCategory),
        enabled: !!selectedCategory,
    })

    return (
        <div className="space-y-6">
            <h2 className="text-3xl font-bold tracking-tight">Kategori Görüntülenmeleri</h2>

            <div className="w-[300px]">
                <Select
                    onValueChange={setSelectedCategory}
                    value={selectedCategory}
                >
                    <SelectTrigger>
                        <SelectValue placeholder="Kategori Seçiniz" />
                    </SelectTrigger>
                    <SelectContent>
                        {categories?.map((cat) => (
                            <SelectItem key={cat.id} value={cat.id}>
                                {cat.title}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </div>

            {selectedCategory && (
                <Card>
                    <CardHeader>
                        <CardTitle>Görüntülenme Listesi - Toplam: {views?.length || 0}</CardTitle>
                    </CardHeader>
                    <CardContent>
                        {isLoading ? (
                            <div>Yükleniyor...</div>
                        ) : (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>IP Adresi</TableHead>
                                        <TableHead>User Agent</TableHead>
                                        <TableHead>Tarih</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {views?.map((item) => (
                                        <TableRow key={item.id}>
                                            <TableCell className="font-medium">{item.ip_address}</TableCell>
                                            <TableCell className="text-xs text-muted-foreground truncate max-w-[300px]" title={item.user_agent}>
                                                {item.user_agent}
                                            </TableCell>
                                            <TableCell>
                                                {new Date(item.created_at).toLocaleString()}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                    {views?.length === 0 && (
                                        <TableRow>
                                            <TableCell colSpan={3} className="text-center py-4">
                                                Henüz görüntülenme yok.
                                            </TableCell>
                                        </TableRow>
                                    )}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                </Card>
            )}
        </div>
    )
}
