import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { router } from '@inertiajs/react';
import { Pencil, Shield, UserCog } from 'lucide-react';
import type { AdminUserDetail } from './types';

export default function PermissionsTab({ user }: { user: AdminUserDetail }) {
    return (
        <>
            {/* Role card */}
            <div className="pf-glass rounded-xl p-5">
                <div className="mb-4 flex items-center gap-2.5">
                    <Shield className="text-primary/70 h-4 w-4" />
                    <p className="text-foreground text-sm font-semibold">
                        Assigned role
                    </p>
                </div>
                {user.role ? (
                    <div className="flex items-center gap-3">
                        <Badge
                            variant="secondary"
                            className="px-3 py-1 font-mono text-sm"
                        >
                            {user.role}
                        </Badge>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => router.visit('/admin/roles')}
                            className="text-muted-foreground hover:text-foreground h-7 text-xs"
                        >
                            View roles
                        </Button>
                    </div>
                ) : (
                    <p className="text-muted-foreground dark:text-muted-foreground/60 text-sm italic">
                        No role assigned
                    </p>
                )}
            </div>

            {/* Edit prompt */}
            <div className="border-border rounded-xl border border-dashed p-6 text-center">
                <UserCog className="text-muted-foreground dark:text-muted-foreground/25 mx-auto mb-2 h-8 w-8" />
                <p className="text-muted-foreground dark:text-muted-foreground/60 text-sm">
                    Change this admin's role and access level via the edit form.
                </p>
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => router.visit(`/admin/users/${user.id}/edit`)}
                    className="mt-3"
                >
                    <Pencil className="mr-1.5 h-3.5 w-3.5" />
                    Edit permissions
                </Button>
            </div>
        </>
    );
}