import { usePermissionModules } from '@/hooks/permissions/usePermissionModules'
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { ConfigDrawer } from '@/components/config-drawer'
import { Header } from '@/components/layout/header'
import { Main } from '@/components/layout/main'
import { ProfileDropdown } from '@/components/profile-dropdown'
import { Search } from '@/components/search'
import { ThemeSwitch } from '@/components/theme-switch'

export function Permissions() {
  const { data: modules, isLoading, isError } = usePermissionModules()

  return (
    <>
      <Header fixed>
        <Search className='me-auto' />
        <ThemeSwitch />
        <ConfigDrawer />
        <ProfileDropdown />
      </Header>

      <Main className='flex flex-1 flex-col gap-4 sm:gap-6'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>دسترسی‌ها</h2>
          <p className='text-muted-foreground'>
            فهرست دسترسی‌هایی که می‌توان به نقش‌ها اختصاص داد.
          </p>
        </div>

        {isLoading ? (
          <div>در حال دریافت...</div>
        ) : isError ? (
          <div className='text-sm text-destructive'>
            دریافت دسترسی‌ها ممکن نشد.
          </div>
        ) : (
          <div className='grid gap-4'>
            {modules?.map((module) => (
              <Card key={module.key}>
                <CardHeader>
                  <CardTitle>{module.label}</CardTitle>
                  <CardDescription>{module.key}</CardDescription>
                </CardHeader>
                <CardContent className='space-y-4'>
                  {module.actions.length > 0 && (
                    <div className='space-y-2'>
                      <p className='text-sm font-medium'>عملیات</p>
                      <div className='flex flex-wrap gap-2'>
                        {module.actions.map((action) => (
                          <Badge key={action.name} variant='secondary'>
                            {action.label}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}

                  {module.fields.length > 0 && (
                    <div className='space-y-3'>
                      <p className='text-sm font-medium'>فیلدها</p>
                      {module.fields.map((field) => (
                        <div key={field.key} className='space-y-2'>
                          <p className='text-sm text-muted-foreground'>
                            {field.label}
                          </p>
                          <div className='flex flex-wrap gap-2'>
                            {field.permissions.map((permission) => (
                              <Badge key={permission.name} variant='outline'>
                                {permission.label}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </Main>
    </>
  )
}