import { DashboardLayout } from '@/frontend/components/DashboardLayout'
import {
  Box,
  Container,
  Divider,
  Group,
  Stack,
  Text,
  Title
} from '@mantine/core'
import { createFileRoute, Outlet, useNavigate, useParams } from '@tanstack/react-router'

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

function AppDetailLayout() {
  const { appId } = useParams({ from: '/apps/$appId' })
  const navigate = useNavigate()

  // Format app ID for display (e.g., desa-plus -> Desa+)
  const appName = appId
    .split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
    .replace('Plus', '+')

  return (
    <DashboardLayout>
      <Container size="xl" py="lg">
        <Stack gap="md">
          <Group justify="space-between" align="flex-end">
            <Stack gap={4}>
              <Title order={1} className="gradient-text" style={{ fontSize: '2.5rem' }}>{appName}</Title>
              <Text c="dimmed" size="sm" fw={500}>Application ID: <span style={{ fontFamily: 'monospace' }}>{appId}</span></Text>
            </Stack>
          </Group>

          <Divider />

          <Box>
            <Outlet />
          </Box>
        </Stack>
      </Container>
    </DashboardLayout>
  )
}