import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Trash2, Edit } from "lucide-react";
import { CorsEntry } from "@/lib/features/cors/corsSlice";

interface CorsTableProps {
    data: CorsEntry[];
    type: "whitelist" | "blacklist";
    onDelete: (id: string) => void;
    onEdit: (entry: CorsEntry) => void;
    onToggleActive: (id: string, currentStatus: boolean) => void;
}

export function CorsTable({ data, type, onDelete, onEdit, onToggleActive }: CorsTableProps) {
    return (
        <div className="rounded-md border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Origin</TableHead>
                        <TableHead>{type === "whitelist" ? "Açıklama" : "Sebep"}</TableHead>
                        <TableHead>Durum</TableHead>
                        <TableHead>Oluşturan</TableHead>
                        <TableHead className="text-right">İşlemler</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {data.length === 0 ? (
                        <TableRow>
                            <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
                                Kayıt bulunamadı.
                            </TableCell>
                        </TableRow>
                    ) : (
                        data.map((entry) => (
                            <TableRow key={entry.id}>
                                <TableCell className="font-medium">{entry.origin}</TableCell>
                                <TableCell>
                                    {type === "whitelist" ? entry.description : entry.reason}
                                </TableCell>
                                <TableCell>
                                    <div className="flex items-center gap-2">
                                        <Switch
                                            checked={entry.is_active}
                                            onCheckedChange={() => onToggleActive(entry.id, entry.is_active)}
                                        />
                                        <span className="text-sm text-muted-foreground">
                                            {entry.is_active ? "Aktif" : "Pasif"}
                                        </span>
                                    </div>
                                </TableCell>
                                <TableCell className="text-muted-foreground text-sm">
                                    {entry.created_by}
                                </TableCell>
                                <TableCell className="text-right space-x-2">
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => onEdit(entry)}
                                        title="Düzenle"
                                    >
                                        <Edit className="h-4 w-4" />
                                        <span className="sr-only">Düzenle</span>
                                    </Button>
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                                        onClick={() => onDelete(entry.id)}
                                        title="Sil"
                                    >
                                        <Trash2 className="h-4 w-4" />
                                        <span className="sr-only">Sil</span>
                                    </Button>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}