import { useState } from 'react'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { MoreHorizontal, Pencil, Trash2, Plus } from "lucide-react"
import { useRateLimits, useDeleteRateLimit } from "../hooks/useRateLimit"
import { RateLimitForm } from "./RateLimitForm"
import type { RateLimitRule } from "@/types/api"
import { showConfirm, showToast } from "@/lib/sweetalert"

export function RateLimitList() {
  const [selectedRule, setSelectedRule] = useState<RateLimitRule | undefined>(undefined)
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  // Backend returns flat array
  const { data, isLoading, isError } = useRateLimits()
  const deleteRule = useDeleteRateLimit()

  const handleDelete = async (id: string) => {
    const confirmed = await showConfirm(
      "Kuralı Sil?",
      "Bu hız sınırı kuralını silmek istediğinize emin misiniz?",
      "Evet, Sil"
    )
    if (confirmed) {
      deleteRule.mutate(id, {
        onSuccess: () => showToast("Kural başarıyla silindi.", "success"),
        onError: () => showToast("Silme işlemi başarısız.", "error")
      })
    }
  }

  const openEditModal = (rule: RateLimitRule) => {
    setSelectedRule(rule)
    setIsDialogOpen(true)
  }

  const openCreateModal = () => {
    setSelectedRule(undefined)
    setIsDialogOpen(true)
  }

  const handleFormSuccess = () => {
    setIsDialogOpen(false)
  }

  if (isLoading) return <div>Yükleniyor...</div>
  if (isError) return <div>Hata oluştu.</div>

  const rules = Array.isArray(data) ? data : []

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-end">
        <Button onClick={openCreateModal}>
          <Plus className="mr-2 h-4 w-4" /> Yeni Limit Kuralı
        </Button>
      </div>

      <div className="rounded-md border bg-white dark:bg-gray-800">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Ad</TableHead>
              <TableHead>Açıklama</TableHead>
              <TableHead>Limit</TableHead>
              <TableHead>Süre (Sn)</TableHead>
              <TableHead>Durum</TableHead>
              <TableHead className="text-right">İşlemler</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rules.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                  Tanımlı hız sınırı kuralı bulunamadı.
                </TableCell>
              </TableRow>
            ) : (
              rules.map((rule) => (
                <TableRow key={rule.id}>
                  <TableCell className="font-medium font-mono">{rule.name}</TableCell>
                  <TableCell className="text-muted-foreground">{rule.description || "-"}</TableCell>
                  <TableCell>
                    <Badge variant="outline" className="font-mono">
                      {rule.max_requests} istek
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="font-mono bg-blue-50 dark:bg-blue-900/20">
                      {rule.window_seconds}s
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {rule.is_active ? (
                      <Badge className="bg-green-600 hover:bg-green-700">Aktif</Badge>
                    ) : (
                      <Badge variant="secondary">Pasif</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                          <span className="sr-only">Menü</span>
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>İşlemler</DropdownMenuLabel>
                        <DropdownMenuItem onClick={() => openEditModal(rule)}>
                          <Pencil className="mr-2 h-4 w-4" /> Düzenle
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem onClick={() => handleDelete(rule.id)} className="text-red-600 focus:text-red-600">
                          <Trash2 className="mr-2 h-4 w-4" /> Sil
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>{selectedRule ? "Kuralı Düzenle" : "Yeni Limit Kuralı"}</DialogTitle>
            <DialogDescription>
              API endpoint'leri için hız sınırlarını yapılandırın.
            </DialogDescription>
          </DialogHeader>
          <RateLimitForm rule={selectedRule} onSuccess={handleFormSuccess} />
        </DialogContent>
      </Dialog>
    </div>
  )
}
