import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box } from '@mantine/core'
import { Link } from '@tanstack/react-router'
import { TbDeviceMobile, TbActivity, TbAlertTriangle, TbChevronRight } from 'react-icons/tb'

interface AppCardProps {
  id: string
  name: string
  status: 'active' | 'warning' | 'error'
  users: number
  errors: number
  version: string
}

export function AppCard({ id, name, status, users, errors, version }: AppCardProps) {
  const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'

  return (
    <Card
      withBorder
      padding="xl"
      radius="2xl"
      className="premium-card glass"
      styles={(theme) => ({
        root: {
          backgroundColor: 'rgba(30, 41, 59, 0.4)',
          borderColor: 'rgba(255,255,255,0.08)',
          transition: 'transform 0.2s ease, box-shadow 0.2s ease',
          '&:hover': {
            transform: 'translateY(-4px)',
            boxShadow: '0 12px 24px -8px rgba(0, 0, 0, 0.4)',
            borderColor: 'rgba(37, 99, 235, 0.3)',
          },
        },
      })}
    >
      <Group justify="space-between" mb="lg">
        <Group gap="md">
          <Avatar
            variant="gradient"
            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
            radius="lg"
            size="lg"
          >
            <TbDeviceMobile size={26} />
          </Avatar>
          <Stack gap={0}>
            <Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
            <Text size="xs" c="dimmed" fw={600}>BUILD v{version}</Text>
          </Stack>
        </Group>
        <Badge color={statusColor} variant="dot" size="sm">
          {status.toUpperCase()}
        </Badge>
      </Group>

      <Stack gap="md" mt="sm">
        <Box>
          <Group justify="space-between" mb={6}>
            <Group gap="xs">
              <TbActivity size={16} color="#2563EB" />
              <Text size="xs" fw={700} c="dimmed">USER ADOPTION</Text>
            </Group>
            <Text size="sm" fw={700}>{users.toLocaleString()}</Text>
          </Group>
          <Progress value={85} size="sm" color="brand-blue" radius="xl" />
        </Box>

        <Box>
          <Group justify="space-between" mb={6}>
            <Group gap="xs">
              <TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
              <Text size="xs" fw={700} c="dimmed">HEALTH INCIDENTS</Text>
            </Group>
            <Text size="sm" fw={700} color={errors > 0 ? 'red' : 'dimmed'}>{errors}</Text>
          </Group>
          <Progress value={errors > 0 ? 30 : 0} size="sm" color="red" radius="xl" />
        </Box>
      </Stack>

      <Button
        component={Link}
        to={`/apps/${id}`}
        variant="light"
        color="brand-blue"
        fullWidth
        mt="xl"
        radius="md"
        rightSection={<TbChevronRight size={16} />}
        styles={{
          root: {
            height: '44px',
            '&:hover': {
              backgroundColor: 'rgba(37, 99, 235, 0.15)',
            }
          }
        }}
      >
        Center Intelligence
      </Button>
    </Card>
  )
}