import { getRouteApi } from '@tanstack/react-router'
import { useRoles } from '@/hooks/roles/useRoles'
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'
import { RolesDialogs } from './components/roles-dialogs'
import { RolesPrimaryButtons } from './components/roles-primary-buttons'
import { RolesProvider } from './components/roles-provider'
import { RolesTable } from './components/roles-table'

const route = getRouteApi('/_authenticated/roles/')

export function Roles() {
  const search = route.useSearch()
  const navigate = route.useNavigate()
  const { data, isLoading, isError } = useRoles({
    page: search.page ?? 1,
    per_page: search.pageSize ?? 10,
  })

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

      <Main className='flex flex-1 flex-col gap-4 sm:gap-6'>
        <div className='flex flex-wrap items-end justify-between gap-2'>
          <div>
            <h2 className='text-2xl font-bold tracking-tight'>لیست نقش‌ها</h2>
            <p className='text-muted-foreground'>
              نقش‌ها و دسترسی هر نقش را از اینجا مدیریت کنید.
            </p>
          </div>
          <RolesPrimaryButtons />
        </div>

        {isLoading ? (
          <div>در حال دریافت...</div>
        ) : isError ? (
          <div className='text-sm text-destructive'>
            دریافت نقش‌ها ممکن نشد.
          </div>
        ) : (
          <RolesTable
            data={data?.data.roles ?? []}
            paginationData={data?.data.pagination}
            search={search}
            navigate={navigate}
          />
        )}
      </Main>

      <RolesDialogs />
    </RolesProvider>
  )
}