monitoring-app/src/frontend/routes/apps.$appId.logs.tsx

import { useState } from 'react'
import useSWR from 'swr'
import {
  ActionIcon,
  Avatar,
  Badge,
  Code,
  Group,
  Loader,
  Pagination,
  Paper,
  ScrollArea,
  Stack,
  Table,
  Text,
  TextInput,
  Title,
  Tooltip,
} from '@mantine/core'
import { useMediaQuery } from '@mantine/hooks'
import { createFileRoute, useParams } from '@tanstack/react-router'
import {
  TbAlertCircle,
  TbHistory,
  TbHome2,
  TbSearch,
  TbX,
} from 'react-icons/tb'
import { API_URLS } from '../config/api'

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

interface LogEntry {
  id: string
  createdAt: string
  action: string
  desc: string
  username: string
  village: string
}

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

const ACTION_COLOR: Record<string, string> = {
  LOGIN: 'teal',
  LOGOUT: 'gray',
  CREATE: 'blue',
  UPDATE: 'yellow',
  DELETE: 'red',
}

function getActionColor(action: string) {
  return ACTION_COLOR[action.toUpperCase()] ?? 'brand-blue'
}

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

  const isDesaPlus = appId === 'desa-plus'
  const isMobile = useMediaQuery('(max-width: 768px)')

  const apiUrl = isDesaPlus ? API_URLS.getLogsAllVillages(page, searchQuery) : null
  const { data: response, error, isLoading } = useSWR(apiUrl, fetcher)
  const logs: LogEntry[] = response?.data?.log || []

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

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

  if (!isDesaPlus) {
    return (
      <Paper withBorder radius="2xl" className="glass" p="xl">
        <Stack align="center" gap="xs" py="xl">
          <TbHistory size={36} style={{ opacity: 0.25 }} />
          <Text fw={600} size="sm">Activity Logs — Coming Soon</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">
      <Group justify="space-between" align="flex-start">
        <Stack gap={4}>
          <Title order={3}>Activity Logs</Title>
          <Text size="sm" c="dimmed">
            {isLoading
              ? 'Loading logs...'
              : `${(response?.data?.total ?? 0).toLocaleString()} events across all villages`}
          </Text>
        </Stack>
      </Group>

      <Paper withBorder p="md" className="glass">
        <TextInput
          placeholder="Search by action or village... (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) => handleSearchChange(e.currentTarget.value)}
          radius="md"
        />
      </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 logs from the API.</Text>
          </Stack>
        </Paper>
      ) : logs.length === 0 ? (
        <Paper withBorder radius="2xl" className="glass" p="md">
          <Stack align="center" gap="xs" py="xl">
            <TbHistory size={32} style={{ opacity: 0.25 }} />
            <Text size="sm" c="dimmed">
              {searchQuery ? 'No activity found for this search.' : 'No activity logs yet.'}
            </Text>
          </Stack>
        </Paper>
      ) : (
        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
            <Table
              className="data-table"
              verticalSpacing="sm"
              horizontalSpacing="lg"
              highlightOnHover
              withColumnBorders={false}
              style={{
                tableLayout: isMobile ? 'auto' : 'fixed',
                width: '100%',
                minWidth: isMobile ? 900 : 'unset',
              }}
            >
              <Table.Thead>
                <Table.Tr>
                  <Table.Th style={{ width: isMobile ? undefined : '18%' }}>Timestamp</Table.Th>
                  <Table.Th style={{ width: isMobile ? undefined : '22%' }}>User & Village</Table.Th>
                  <Table.Th style={{ width: isMobile ? undefined : '14%' }}>Action</Table.Th>
                  <Table.Th>Description</Table.Th>
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {logs.map((log) => (
                  <Table.Tr key={log.id}>
                    <Table.Td>
                      {log.createdAt.endsWith('lalu') ? (
                        <Text size="xs" fw={600}>{log.createdAt}</Text>
                      ) : (
                        <Stack gap={0}>
                          <Text size="xs" fw={600}>
                            {log.createdAt.split(' ').slice(1).join(' ')}
                          </Text>
                          <Text size="xs" c="dimmed">
                            {log.createdAt.split(' ')[0]}
                          </Text>
                        </Stack>
                      )}
                    </Table.Td>
                    <Table.Td>
                      <Stack gap={4} style={{ overflow: 'hidden' }}>
                        <Group gap={6} wrap="nowrap">
                          <Avatar size="xs" radius="xl" color="brand-blue" variant="light">
                            {log.username.charAt(0)}
                          </Avatar>
                          <Text size="xs" fw={600} truncate="end">{log.username}</Text>
                        </Group>
                        <Group gap={6} wrap="nowrap">
                          <TbHome2 size={12} color="gray" />
                          <Text size="xs" c="dimmed" truncate="end">{log.village}</Text>
                        </Group>
                      </Stack>
                    </Table.Td>
                    <Table.Td>
                      <Badge
                        variant="light"
                        color={getActionColor(log.action)}
                        size="sm"
                        tt="capitalize"
                      >
                        {log.action}
                      </Badge>
                    </Table.Td>
                    <Table.Td>
                      <Code
                        color="brand-blue"
                        bg="rgba(37, 99, 235, 0.05)"
                        fw={600}
                        style={{ fontSize: 11, display: 'block', whiteSpace: 'normal' }}
                      >
                        {log.desc}
                      </Code>
                    </Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
            </Table>
          </ScrollArea>
        </Paper>
      )}

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