import { useState } from 'react'
import useSWR from 'swr'
import {
  Badge,
  Container,
  Group,
  Stack,
  Text,
  Title,
  Paper,
  Button,
  ActionIcon,
  TextInput,
  Table,
  Avatar,
  Box,
  Pagination,
  ThemeIcon,
  ScrollArea,
  Tooltip,
} from '@mantine/core'
import { useMediaQuery } from '@mantine/hooks'
import { createFileRoute, useParams } from '@tanstack/react-router'
import {
  TbPlus,
  TbSearch,
  TbUsers,
  TbX,
  TbMail,
  TbPhone,
  TbId,
  TbBriefcase,
  TbHome2,
  TbCircleCheck,
  TbCircleX,
} from 'react-icons/tb'
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
  isWithoutOTP: boolean
  isActive: boolean
  role: string
  village: string
  group: string
  position?: string
}

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

function UsersIndexPage() {
  const { appId } = useParams({ from: '/apps/$appId/users/' })
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState('')
  const [searchQuery, setSearchQuery] = useState('')

  const isDesaPlus = appId === 'desa-plus'
  const apiUrl = isDesaPlus ? API_URLS.getUsers(page, searchQuery) : null

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

  const handleSearchChange = (val: string) => {
    setSearch(val)
    if (val.length >= 3 || val.length === 0) {
      setSearchQuery(val)
      setPage(1)
    }
  }

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

  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)')

  if (!isDesaPlus) {
    return (
      <Container size="xl" py="xl">
        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
          <TbUsers size={48} color="gray" opacity={0.5} />
          <Title order={3} mt="md">User Management</Title>
          <Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
        </Paper>
      </Container>
    )
  }

  return (
    <Stack gap="xl" py="md">
      <Paper withBorder radius="2xl" p="xl" className="glass" style={{ borderLeft: '6px solid #2563EB' }}>
        <Stack gap="lg">
          <Group justify="space-between" align="center">
            <Stack gap={4}>
              <Group gap="xs">
                <ThemeIcon variant="light" color="brand-blue" size="lg" radius="md">
                  <TbUsers size={22} />
                </ThemeIcon>
                <Title order={3}>User Management</Title>
              </Group>
              <Text size="sm" c="dimmed" ml={40}>
                {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} />}
              radius="md"
              size="md"
            >
              Add User
            </Button>
          </Group>

          <TextInput
            placeholder="Search name, NIK, or email..."
            leftSection={<TbSearch size={18} />}
            size="md"
            rightSection={
              search ? (
                <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="md">
                  <TbX size={18} />
                </ActionIcon>
              ) : null
            }
            value={search}
            onChange={(e) => handleSearchChange(e.currentTarget.value)}
            radius="md"
            style={{ maxWidth: 500 }}
            ml={40}
          />
        </Stack>
      </Paper>

      {isLoading ? (
        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
          <Text c="dimmed">Loading user data...</Text>
        </Paper>
      ) : error ? (
        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
          <Text c="red">Failed to load data from API.</Text>
        </Paper>
      ) : users.length === 0 ? (
        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
          <TbUsers size={40} color="gray" opacity={0.4} />
          <Text c="dimmed" mt="md">No users match your criteria.</Text>
        </Paper>
      ) : (
        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
            <Table 
              verticalSpacing="lg" 
              horizontalSpacing="xl" 
              highlightOnHover 
              withColumnBorders={false}
              style={{ 
                tableLayout: isMobile ? 'auto' : 'fixed', 
                width: '100%',
                minWidth: isMobile ? 900 : 'unset'
              }}
            >
              <Table.Thead bg="rgba(0,0,0,0.05)">
                <Table.Tr>
                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '28%' }}>User & ID</Table.Th>
                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '25%' }}>Contact Detail</Table.Th>
                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '25%' }}>Organization</Table.Th>
                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '12%' }}>Role</Table.Th>
                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '10%' }}>Status</Table.Th>
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {users.map((user) => (
                  <Table.Tr key={user.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                    <Table.Td>
                      <Group gap="md" wrap="nowrap">
                        <Avatar 
                          size="lg" 
                          radius="md" 
                          variant="light"
                          color={getRoleColor(user.role)}
                          style={{ border: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}
                        >
                          {user.name.charAt(0)}
                        </Avatar>
                        <Stack gap={2} style={{ overflow: 'hidden' }}>
                          <Text fw={700} size="sm" truncate="end" style={{ color: 'var(--mantine-color-white)' }}>{user.name}</Text>
                          <Group gap={4} wrap="nowrap">
                            <TbId size={12} color="var(--mantine-color-dimmed)" />
                            <Text size="xs" c="dimmed" style={{ letterSpacing: '0.5px' }} 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="filled" 
                        color={getRoleColor(user.role)} 
                        radius="md" 
                        size="sm"
                        fullWidth={false}
                        styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
                      >
                        {user.role}
                      </Badge>
                    </Table.Td>
                    <Table.Td>
                      <Stack gap={4}>
                        <Group gap="xs" wrap="nowrap">
                          {user.isActive ? (
                            <Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#10b981', boxShadow: '0 0 8px #10b981' }} />
                          ) : (
                            <Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#ef4444' }} />
                          )}
                          <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 > 0 && (
        <Group justify="center" mt="xl">
          <Pagination
            value={page}
            onChange={setPage}
            total={response.data.totalPage}
            radius="md"
            withEdges={false}
            siblings={1}
            boundaries={1}
          />
        </Group>
      )}
    </Stack>
  )
}
