import {
  ActionIcon,
  Avatar,
  Badge,
  Box,
  Button,
  Divider,
  Group,
  Loader,
  Modal,
  Pagination,
  Paper,
  ScrollArea,
  Select,
  SimpleGrid,
  Stack,
  Switch,
  Table,
  Text,
  TextInput,
  ThemeIcon,
  Title,
  Tooltip,
} from '@mantine/core'
import { useDisclosure, useDebouncedValue, useMediaQuery } from '@mantine/hooks'
import { notifications } from '@mantine/notifications'
import { createFileRoute, useParams } from '@tanstack/react-router'
import { useEffect, useState } from 'react'
import {
  TbAlertCircle,
  TbArrowDown,
  TbArrowsSort,
  TbArrowUp,
  TbBriefcase,
  TbCircleCheck,
  TbCircleX,
  TbHome2,
  TbId,
  TbMail,
  TbPhone,
  TbPlus,
  TbSearch,
  TbUsers,
  TbX,
} from 'react-icons/tb'
import useSWR from 'swr'
import { API_URLS } from '../config/api'

export const Route = createFileRoute('/apps/$appId/users/')({
  component: UsersIndexPage,
})

interface APIUser {
  id: string
  name: string
  nik: string
  phone: string
  email: string
  gender: string
  isWithoutOTP: boolean
  isActive: boolean
  isApprover: boolean
  role: string
  village: string
  group: string
  position?: string
  idUserRole: string
  idVillage: string
  idGroup: string
  idPosition: string
}

interface BaseUserForm {
  name: string
  nik: string
  phone: string
  email: string
  gender: string
  idUserRole: string
  idVillage: string
  idGroup: string
  idPosition: string
}

const FIELD_LABELS: Record<string, string> = {
  name: 'Full Name',
  nik: 'NIK',
  phone: 'Phone Number',
  email: 'Email Address',
  gender: 'Gender',
  idUserRole: 'User Role',
  idVillage: 'Village',
  idGroup: 'Group',
}

const REQUIRED_FIELDS = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']

const fetcher = (url: string) => fetch(url).then((res) => res.json())

interface UserFormFieldsProps {
  values: BaseUserForm
  onChange: (updates: Partial<BaseUserForm>) => void
  villageSearch: string
  onVillageSearchChange: (v: string) => void
  rolesOptions: { value: string; label: string }[]
  villagesOptions: { value: string; label: string }[]
  groupsOptions: { value: string; label: string }[]
  positionsOptions: { value: string; label: string }[]
}

function UserFormFields({
  values,
  onChange,
  onVillageSearchChange,
  rolesOptions,
  villagesOptions,
  groupsOptions,
  positionsOptions,
}: UserFormFieldsProps) {
  return (
    <>
      <Box>
        <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
          Personal Information
        </Text>
        <SimpleGrid cols={2} spacing="md">
          <TextInput
            label="Full Name"
            placeholder="Enter full name"
            required
            value={values.name}
            onChange={(e) => onChange({ name: e.target.value })}
          />
          <TextInput
            label="NIK"
            placeholder="16-digit identity number"
            required
            value={values.nik}
            onChange={(e) => onChange({ nik: e.target.value })}
          />
        </SimpleGrid>

        <SimpleGrid cols={2} spacing="md" mt="sm">
          <TextInput
            label="Email Address"
            placeholder="email@example.com"
            required
            value={values.email}
            onChange={(e) => onChange({ email: e.target.value })}
          />
          <TextInput
            label="Phone Number"
            placeholder="628xxxxxxxxxx"
            required
            value={values.phone}
            onChange={(e) => onChange({ phone: e.target.value })}
          />
        </SimpleGrid>

        <Select
          label="Gender"
          placeholder="Select gender"
          data={[
            { value: 'M', label: 'Male' },
            { value: 'F', label: 'Female' },
          ]}
          mt="sm"
          required
          value={values.gender}
          onChange={(v) => onChange({ gender: v || '' })}
        />
      </Box>

      <Divider label="Role & Organization" labelPosition="center" my="sm" />

      <Box>
        <Select
          label="User Role"
          placeholder="Select user role"
          data={rolesOptions}
          required
          value={values.idUserRole}
          onChange={(v) => onChange({ idUserRole: v || '' })}
        />

        <Select
          label="Village"
          placeholder="Type to search village..."
          searchable
          onSearchChange={onVillageSearchChange}
          data={villagesOptions}
          mt="sm"
          required
          value={values.idVillage}
          onChange={(v) => onChange({ idVillage: v || '', idGroup: '', idPosition: '' })}
        />

        <SimpleGrid cols={2} spacing="md" mt="sm">
          <Select
            label="Group"
            placeholder={values.idVillage ? 'Select group' : 'Select village first'}
            data={groupsOptions}
            disabled={!values.idVillage}
            required
            value={values.idGroup}
            onChange={(v) => onChange({ idGroup: v || '', idPosition: '' })}
          />
          <Select
            label="Position"
            placeholder={values.idGroup ? 'Select position' : 'Select group first'}
            data={positionsOptions}
            disabled={!values.idGroup}
            value={values.idPosition || ''}
            onChange={(v) => onChange({ idPosition: v || '' })}
          />
        </SimpleGrid>
      </Box>
    </>
  )
}

function UsersIndexPage() {
  const { appId } = useParams({ from: '/apps/$appId/users/' })
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState('')
  const [searchQuery, setSearchQuery] = useState('')
  const [debouncedSearch] = useDebouncedValue(search, 400)
  const [filterStatus, setFilterStatus] = useState<string | null>(null)
  const [filterRole, setFilterRole] = useState<string | null>(null)
  const [filterVillageSearch, setFilterVillageSearch] = useState('')
  const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
  const [sortBy, setSortBy] = useState<string | null>(null)
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')

  const handleSort = (col: string) => {
    if (sortBy === col) {
      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
    } else {
      setSortBy(col)
      setSortDir('asc')
    }
    setPage(1)
  }

  const isDesaPlus = appId === 'desa-plus'

  const filterStatusParam = filterStatus === 'active' ? 'true' : filterStatus === 'inactive' ? 'false' : undefined
  const apiUrl = isDesaPlus
    ? API_URLS.getUsers(
        page,
        searchQuery,
        filterStatusParam,
        filterRole ?? undefined,
        filterVillageId ?? undefined,
        sortBy ?? undefined,
        sortBy ? sortDir : undefined,
      )
    : null

  const { data: response, error, isLoading, mutate } = useSWR(apiUrl, fetcher)
  const users: APIUser[] = response?.data?.user || []

  useEffect(() => {
    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
      setSearchQuery(debouncedSearch)
      setPage(1)
    }
  }, [debouncedSearch])

  useEffect(() => {
    setPage(1)
  }, [filterStatus, filterRole, filterVillageId])

  const handleClearSearch = () => {
    setSearch('')
    setSearchQuery('')
    setPage(1)
  }

  // --- ADD USER LOGIC ---
  const [opened, { open, close }] = useDisclosure(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [villageSearch, setVillageSearch] = useState('')
  const [form, setForm] = useState<BaseUserForm>({
    name: '',
    nik: '',
    phone: '',
    email: '',
    gender: '',
    idUserRole: '',
    idVillage: '',
    idGroup: '',
    idPosition: '',
  })

  const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
  const [editForm, setEditForm] = useState({
    id: '',
    name: '',
    nik: '',
    phone: '',
    email: '',
    gender: '',
    idUserRole: '',
    idVillage: '',
    idGroup: '',
    idPosition: '',
    isActive: true,
    isWithoutOTP: false,
    isApprover: false,
  })

  // Options Data (Shared for both Add and Edit modals)
  const isAnyModalOpened = opened || editOpened
  const targetVillageId = opened ? form.idVillage : editForm.idVillage
  const targetGroupId = opened ? form.idGroup : editForm.idGroup

  const { data: rolesResp } = useSWR(isDesaPlus ? API_URLS.listRole() : null, fetcher)
  const { data: filterVillagesResp } = useSWR(
    isDesaPlus && filterVillageSearch.length >= 1 ? API_URLS.getVillages(1, filterVillageSearch) : null,
    fetcher
  )
  const { data: villagesResp } = useSWR(
    isAnyModalOpened && villageSearch.length >= 1 ? API_URLS.getVillages(1, villageSearch) : null,
    fetcher
  )
  const { data: groupsResp } = useSWR(
    isAnyModalOpened && targetVillageId ? API_URLS.listGroup(targetVillageId) : null,
    fetcher
  )
  const { data: positionsResp } = useSWR(
    isAnyModalOpened && targetGroupId ? API_URLS.listPosition(targetGroupId) : null,
    fetcher
  )

  const rolesOptions = (rolesResp?.data || []).map((r: any) => ({ value: r.id, label: r.name }))
  const filterVillagesOptions = (filterVillagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
  const villagesOptions = (villagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
  const groupsOptions = (groupsResp?.data || []).map((g: any) => ({ value: g.id, label: g.name }))
  const positionsOptions = (positionsResp?.data || []).map((p: any) => ({ value: p.id, label: p.name }))

  const getMissingFields = (data: BaseUserForm) =>
    REQUIRED_FIELDS.filter((f) => !data[f as keyof BaseUserForm]).map((f) => FIELD_LABELS[f] ?? f)

  const handleCreateUser = async () => {
    const missing = getMissingFields(form)
    if (missing.length > 0) {
      notifications.show({
        title: 'Validation Error',
        message: `Please fill in: ${missing.join(', ')}`,
        color: 'red',
      })
      return
    }

    setIsSubmitting(true)
    try {
      const res = await fetch(API_URLS.createUser(), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })

      const result = await res.json()

      if (result.success) {
        await fetch(API_URLS.createLog(), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` }),
        }).catch(console.error)

        notifications.show({
          title: 'Success',
          message: 'User has been created successfully.',
          color: 'teal',
          icon: <TbCircleCheck size={18} />,
        })
        mutate()
        close()
        setForm({ name: '', nik: '', phone: '', email: '', gender: '', idUserRole: '', idVillage: '', idGroup: '', idPosition: '' })
      } else {
        notifications.show({
          title: 'Error',
          message: result.message || 'Failed to create user.',
          color: 'red',
          icon: <TbCircleX size={18} />,
        })
      }
    } catch {
      notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleEditOpen = (user: APIUser) => {
    setEditForm({
      id: user.id,
      name: user.name,
      nik: user.nik,
      phone: user.phone,
      email: user.email,
      gender: user.gender,
      idUserRole: user.idUserRole,
      idVillage: user.idVillage,
      idGroup: user.idGroup,
      idPosition: user.idPosition,
      isActive: user.isActive,
      isWithoutOTP: user.isWithoutOTP,
      isApprover: user.isApprover,
    })
    setVillageSearch(user.village)
    openEdit()
  }

  const handleUpdateUser = async () => {
    const missing = getMissingFields(editForm)
    if (missing.length > 0) {
      notifications.show({
        title: 'Validation Error',
        message: `Please fill in: ${missing.join(', ')}`,
        color: 'red',
      })
      return
    }

    setIsSubmitting(true)
    try {
      const res = await fetch(API_URLS.editUser(), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(editForm),
      })

      const result = await res.json()

      if (result.success) {
        await fetch(API_URLS.createLog(), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` }),
        }).catch(console.error)

        notifications.show({
          title: 'Success',
          message: 'User has been updated successfully.',
          color: 'teal',
          icon: <TbCircleCheck size={18} />,
        })
        mutate()
        closeEdit()
      } else {
        notifications.show({
          title: 'Error',
          message: result.message || 'Failed to update user.',
          color: 'red',
          icon: <TbCircleX size={18} />,
        })
      }
    } catch {
      notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
    } finally {
      setIsSubmitting(false)
    }
  }

  const getRoleColor = (role: string) => {
    const r = role.toLowerCase()
    if (r.includes('super')) return 'red'
    if (r.includes('admin')) return 'brand-blue'
    if (r.includes('developer')) return 'violet'
    return 'gray'
  }

  const isMobile = useMediaQuery('(max-width: 768px)')

  const sharedFormProps = {
    villageSearch,
    onVillageSearchChange: setVillageSearch,
    rolesOptions,
    villagesOptions,
    groupsOptions,
    positionsOptions,
  }

  if (!isDesaPlus) {
    return (
      <Paper withBorder radius="2xl" className="glass" p="xl">
        <Stack align="center" gap="xs" py="xl">
          <TbUsers size={40} style={{ opacity: 0.25 }} />
          <Text fw={600} size="sm">User Management</Text>
          <Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
        </Stack>
      </Paper>
    )
  }

  return (
    <Stack gap="xl" py="md">
      {/* Add User Modal */}
      <Modal
        opened={opened}
        onClose={close}
        title={<Text fw={700} size="lg">Add New User</Text>}
        radius="md"
        size="lg"
        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
      >
        <Stack gap="md">
          <UserFormFields
            values={form}
            onChange={(updates) => setForm((f) => ({ ...f, ...updates }))}
            {...sharedFormProps}
          />

          <Button
            fullWidth
            mt="lg"
            radius="md"
            variant="gradient"
            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
            loading={isSubmitting}
            onClick={handleCreateUser}
          >
            Register User
          </Button>
        </Stack>
      </Modal>

      {/* Edit User Modal */}
      <Modal
        opened={editOpened}
        onClose={closeEdit}
        title={<Text fw={700} size="lg">Edit User</Text>}
        radius="md"
        size="lg"
        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
      >
        <Stack gap="md">
          <UserFormFields
            values={editForm}
            onChange={(updates) => setEditForm((f) => ({ ...f, ...updates }))}
            {...sharedFormProps}
          />

          <Divider label="System Access" labelPosition="center" my="sm" />

          <SimpleGrid cols={2} spacing="xl">
            <Switch
              label="Account Active"
              description="Enable or disable user access"
              checked={editForm.isActive}
              onChange={(event) => setEditForm((f) => ({ ...f, isActive: event.currentTarget.checked }))}
            />
            <Switch
              label="Without OTP"
              description="Bypass login OTP verification"
              checked={editForm.isWithoutOTP}
              onChange={(event) => setEditForm((f) => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
            />
            <Switch
              label="Approver"
              description="Grant approver privileges to this user"
              checked={editForm.isApprover}
              onChange={(event) => setEditForm((f) => ({ ...f, isApprover: event.currentTarget.checked }))}
            />
          </SimpleGrid>

          <Button
            fullWidth
            mt="lg"
            radius="md"
            variant="gradient"
            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
            loading={isSubmitting}
            onClick={handleUpdateUser}
          >
            Update User
          </Button>
        </Stack>
      </Modal>

      {/* Header */}
      <Group justify="space-between" align="flex-start">
        <Stack gap={4}>
          <Title order={3}>User Management</Title>
          <Text size="sm" c="dimmed">
            {isLoading ? 'Loading users...' : `${response?.data?.total ?? 0} users registered in the Desa+ system`}
          </Text>
        </Stack>
        <Button
          variant="gradient"
          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
          leftSection={<TbPlus size={18} />}
          size="sm"
          onClick={open}
        >
          Add User
        </Button>
      </Group>

      {/* Search / Filter */}
      <Paper withBorder p="md" className="glass">
        <Stack gap="sm">
          <TextInput
            placeholder="Search name, NIK, or email... (min. 3 characters)"
            leftSection={<TbSearch size={16} />}
            size="sm"
            rightSection={
              search ? (
                <Tooltip label="Clear search" withArrow>
                  <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
                    <TbX size={16} />
                  </ActionIcon>
                </Tooltip>
              ) : null
            }
            value={search}
            onChange={(e) => setSearch(e.currentTarget.value)}
            radius="md"
          />
          <Group gap="sm" wrap="nowrap">
            <Select
              size="sm"
              placeholder="Status"
              data={[
                { value: 'active', label: 'Active' },
                { value: 'inactive', label: 'Inactive' },
              ]}
              value={filterStatus}
              onChange={setFilterStatus}
              radius="md"
              clearable
              style={{ flex: 1 }}
            />
            <Select
              size="sm"
              placeholder="Role"
              data={rolesOptions}
              value={filterRole}
              onChange={setFilterRole}
              radius="md"
              clearable
              style={{ flex: 1 }}
            />
            <Select
              size="sm"
              placeholder="Search village..."
              searchable
              onSearchChange={setFilterVillageSearch}
              data={filterVillagesOptions}
              value={filterVillageId}
              onChange={setFilterVillageId}
              radius="md"
              clearable
              style={{ flex: 1 }}
            />
          </Group>
        </Stack>
      </Paper>

      {isLoading ? (
        <Group justify="center" py="xl">
          <Loader type="dots" />
        </Group>
      ) : error ? (
        <Paper withBorder radius="2xl" className="glass" p="md">
          <Stack align="center" gap="xs" py="xl">
            <TbAlertCircle size={32} style={{ opacity: 0.4, color: 'var(--mantine-color-red-6)' }} />
            <Text size="sm" c="dimmed">Failed to load users from the API.</Text>
          </Stack>
        </Paper>
      ) : users.length === 0 ? (
        <Paper withBorder radius="2xl" className="glass" p="md">
          <Stack align="center" gap="xs" py="xl">
            <TbUsers size={32} style={{ opacity: 0.25 }} />
            <Text size="sm" c="dimmed">
              {searchQuery || filterStatus || filterRole || filterVillageId ? 'No users match your filters.' : 'No users found.'}
            </Text>
          </Stack>
        </Paper>
      ) : (
        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
            <Table
              className="data-table"
              verticalSpacing="md"
              horizontalSpacing="md"
              highlightOnHover
              withColumnBorders={false}
              style={{
                tableLayout: isMobile ? 'auto' : 'fixed',
                width: '100%',
                minWidth: isMobile ? 900 : 'unset',
              }}
            >
              <Table.Thead>
                <Table.Tr>
                  {[
                    { label: 'User & ID', col: 'name', width: '28%' },
                    { label: 'Contact', col: null, width: '25%' },
                    { label: 'Organization', col: null, width: '22%' },
                    { label: 'Role', col: 'idUserRole', width: '15%' },
                    { label: 'Status', col: 'isActive', width: '10%' },
                  ].map(({ label, col, width }) => (
                    <Table.Th
                      key={label}
                      style={{ width: isMobile ? undefined : width, cursor: col ? 'pointer' : undefined, userSelect: 'none' }}
                      onClick={col ? () => handleSort(col) : undefined}
                    >
                      <Group gap={4} wrap="nowrap">
                        <span>{label}</span>
                        {col && (
                          sortBy === col
                            ? sortDir === 'asc'
                              ? <TbArrowUp size={13} />
                              : <TbArrowDown size={13} />
                            : <TbArrowsSort size={13} style={{ opacity: 0.35 }} />
                        )}
                      </Group>
                    </Table.Th>
                  ))}
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {users.map((user) => (
                  <Table.Tr
                    key={user.id}
                    style={{ cursor: 'pointer' }}
                    onClick={() => handleEditOpen(user)}
                  >
                    <Table.Td>
                      <Group gap="md" wrap="nowrap">
                        <Avatar
                          size="lg"
                          radius="md"
                          variant="light"
                          color={getRoleColor(user.role)}
                          style={{ flexShrink: 0 }}
                        >
                          {user.name.charAt(0)}
                        </Avatar>
                        <Stack gap={2} style={{ overflow: 'hidden' }}>
                          <Text fw={700} size="sm" truncate="end">{user.name}</Text>
                          <Group gap={4} wrap="nowrap">
                            <TbId size={12} color="var(--mantine-color-dimmed)" />
                            <Text size="xs" c="dimmed" truncate="end">{user.nik}</Text>
                          </Group>
                        </Stack>
                      </Group>
                    </Table.Td>
                    <Table.Td>
                      <Stack gap={4} style={{ overflow: 'hidden' }}>
                        <Group gap={8} wrap="nowrap" align="center">
                          <ThemeIcon size={18} variant="transparent" color="gray">
                            <TbMail size={14} />
                          </ThemeIcon>
                          <Text size="xs" fw={500} truncate="end">{user.email}</Text>
                        </Group>
                        <Group gap={8} wrap="nowrap" align="center">
                          <ThemeIcon size={18} variant="transparent" color="gray">
                            <TbPhone size={14} />
                          </ThemeIcon>
                          <Text size="xs" c="dimmed" truncate="end">{user.phone}</Text>
                        </Group>
                      </Stack>
                    </Table.Td>
                    <Table.Td>
                      <Stack gap={4}>
                        <Group gap={8} wrap="nowrap" align="center">
                          <ThemeIcon size={18} variant="light" color="blue" radius="sm">
                            <TbHome2 size={12} />
                          </ThemeIcon>
                          <Text size="xs" fw={700} truncate="end">{user.village}</Text>
                        </Group>
                        <Group gap={8} wrap="nowrap" align="center">
                          <ThemeIcon size={18} variant="transparent" color="gray">
                            <TbBriefcase size={12} />
                          </ThemeIcon>
                          <Text size="xs" c="dimmed" truncate="end">{user.group} · {user.position || 'Staff'}</Text>
                        </Group>
                      </Stack>
                    </Table.Td>
                    <Table.Td>
                      <Badge
                        variant="light"
                        color={getRoleColor(user.role)}
                        radius="md"
                        size="sm"
                        styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
                      >
                        {user.role}
                      </Badge>
                    </Table.Td>
                    <Table.Td>
                      <Stack gap={4}>
                        <Group gap="xs" wrap="nowrap">
                          <Box
                            style={{
                              width: 8,
                              height: 8,
                              borderRadius: '50%',
                              background: user.isActive ? '#10b981' : '#ef4444',
                              boxShadow: user.isActive ? '0 0 8px #10b981' : undefined,
                            }}
                          />
                          <Text size="xs" fw={800} c={user.isActive ? 'teal.4' : 'red.5'}>
                            {user.isActive ? 'ACTIVE' : 'INACTIVE'}
                          </Text>
                        </Group>
                        {user.isWithoutOTP && (
                          <Badge variant="light" color="orange" size="xs" radius="sm">
                            NO OTP
                          </Badge>
                        )}
                      </Stack>
                    </Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
            </Table>
          </ScrollArea>
        </Paper>
      )}

      {!isLoading && !error && response?.data?.totalPage > 1 && (
        <Group justify="center">
          <Pagination
            value={page}
            onChange={setPage}
            total={response.data.totalPage}
            size="sm"
            radius="md"
            withEdges={false}
            siblings={1}
            boundaries={1}
          />
        </Group>
      )}
    </Stack>
  )
}