import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Edit, Trash2, ShieldAlert } from "lucide-react";
import { User } from "@/lib/features/auth/authSlice";
import { getAvatarUrl } from "@/lib/utils";

interface UserTableProps {
    users: User[];
    onEdit: (user: User) => void;
    onDelete: (id: string) => void;
    onHardDelete: (id: string) => void;
}

export function UserTable({ users, onEdit, onDelete, onHardDelete }: UserTableProps) {
    return (
        <div className="rounded-md border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead className="w-14">Avatar</TableHead>
                        <TableHead>Username</TableHead>
                        <TableHead>Email</TableHead>
                        <TableHead>Roller</TableHead>
                        <TableHead className="text-right">İşlemler</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {users.length === 0 ? (
                        <TableRow>
                            <TableCell colSpan={5} className="h-24 text-center">
                                Kullanıcı bulunamadı.
                            </TableCell>
                        </TableRow>
                    ) : (
                        users.map((user) => (
                            <TableRow key={user.id}>
                                <TableCell>
                                    <Avatar className="h-9 w-9">
                                        <AvatarImage src={getAvatarUrl(user.avatar_url)} alt={user.username} />
                                        <AvatarFallback className="text-xs">
                                            {user.username?.slice(0, 2).toUpperCase() || "?"}
                                        </AvatarFallback>
                                    </Avatar>
                                </TableCell>
                                <TableCell className="font-medium">{user.username}</TableCell>
                                <TableCell>{user.email}</TableCell>
                                <TableCell>
                                    {user.roles?.map((r) => r.name).join(", ") || "-"}
                                </TableCell>
                                <TableCell className="text-right">
                                    <div className="inline-flex rounded-md border border-input bg-background [&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button]:border-r [&>button:last-child]:border-r-0 [&>button]:border-input">
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => onEdit(user)}
                                            className="h-9 w-9"
                                            title="Düzenle"
                                        >
                                            <Edit className="h-4 w-4" />
                                            <span className="sr-only">Düzenle</span>
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="h-9 w-9 text-orange-500 hover:text-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/20"
                                            onClick={() => onDelete(user.id)}
                                            title="Sil (Soft)"
                                        >
                                            <Trash2 className="h-4 w-4" />
                                            <span className="sr-only">Sil</span>
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
                                            onClick={() => onHardDelete(user.id)}
                                            title="Kalıcı Sil (Hard)"
                                        >
                                            <ShieldAlert className="h-4 w-4" />
                                            <span className="sr-only">Kalıcı Sil</span>
                                        </Button>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}