<script lang="ts">
    import AppLayout from '@/layouts/AppLayout.svelte';
    import { type BreadcrumbItem, type Permission } from '@/types';
    import SettingsLayout from '@/layouts/settings/Layout.svelte';

    import { Users, Database, Settings, FileText, Shield, Search, Filter } from 'lucide-svelte';
    import Button from '@/components/ui/button/button.svelte';
    import Card from '@/components/ui/card/card.svelte';
    import CardContent from '@/components/ui/card/card-content.svelte';
    import Input from '@/components/ui/input/input.svelte';
    import CardHeader from '@/components/ui/card/card-header.svelte';
    import CardTitle from '@/components/ui/card/card-title.svelte';
    import CardDescription from '@/components/ui/card/card-description.svelte';
    import Table from '@/components/ui/table/table.svelte';
    import TableHeader from '@/components/ui/table/table-header.svelte';
    import TableRow from '@/components/ui/table/table-row.svelte';
    import TableHead from '@/components/ui/table/table-head.svelte';
    import TableBody from '@/components/ui/table/table-body.svelte';
    import TableCell from '@/components/ui/table/table-cell.svelte';
    import Badge from '@/components/ui/badge/badge.svelte';

    let { permissions }: { permissions: Permission[] } = $props();

    let searchQuery = $state('');

    const getLevelColor = (level: 'read' | 'write' | 'delete' | 'admin' | string) => {
        switch (level) {
            case 'read':
                return 'bg-blue-100 text-blue-800 border-blue-200';
            case 'write':
                return 'bg-green-100 text-green-800 border-green-200';
            case 'delete':
                return 'bg-red-100 text-red-800 border-red-200';
            case 'admin':
                return 'bg-purple-100 text-purple-800 border-purple-200';
            default:
                return 'bg-gray-100 text-gray-800 border-gray-200';
        }
    };

    const getStatusColor = (granted: boolean) => {
        return granted ? 'bg-green-100 text-green-800 border-green-200' : 'bg-red-100 text-red-800 border-red-200';
    };

    const breadcrumbs: BreadcrumbItem[] = [
        {
            title: 'Permissions settings',
            href: '/settings/permissions',
        },
    ];
</script>

<svelte:head>
    <title>Permissions Settings</title>
</svelte:head>

<AppLayout {breadcrumbs}>
    <SettingsLayout>
        <div class="space-y-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold tracking-tight">Permissions</h1>
                    <p class="text-muted-foreground">View and manage your current permissions across different system areas.</p>
                </div>
                <Button variant="outline">
                    <Shield class="mr-2 h-4 w-4" />
                    Request Access
                </Button>
            </div>

            {permissions}
            <!-- Search and Filter -->
            <Card>
                <CardContent class="p-4">
                    <div class="flex items-center space-x-4">
                        <div class="relative flex-1">
                            <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                            <Input bind:value={searchQuery} placeholder="Search permissions..." class="pl-10" />
                        </div>
                        <Button variant="outline" size="sm">
                            <Filter class="mr-2 h-4 w-4" />
                            Filter
                        </Button>
                    </div>
                </CardContent>
            </Card>

            <!-- Detailed Permissions -->
            <Card>
                <CardHeader>
                    <CardTitle>All Permissions</CardTitle>
                    <CardDescription>Complete list of all permissions</CardDescription>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Permission Id</TableHead>
                                <TableHead>Permission</TableHead>
                                <TableHead>Description</TableHead>
                                <TableHead>Level</TableHead>
                                <TableHead>Status</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {#each permissions as permission, index (index)}
                                <TableRow>
                                    <TableCell>
                                        <span class="text-sm">{permission.display_name}</span>
                                    </TableCell>
                                    <TableCell class="font-medium">{permission.name}</TableCell>
                                    <TableCell class="text-muted-foreground">{permission.description}</TableCell>
                                    <TableCell>
                                        <Badge variant="outline" class={getLevelColor(permission.level)}>
                                            {permission.level}
                                        </Badge>
                                    </TableCell>
                                    <TableCell>
                                        <Badge variant="outline" class={getStatusColor(permission.granted)}>
                                            {permission.granted ? 'Granted' : 'Denied'}
                                        </Badge>
                                    </TableCell>
                                </TableRow>
                            {/each}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
        </div>
    </SettingsLayout>
</AppLayout>
