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

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

export function AppCard({ id, name, status, errors, version, maintenance }: AppCardProps) {
  const statusColor = maintenance ? 'gray' : status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
  const statusLabel = maintenance ? 'Maintenance' : status === 'active' ? 'Active' : status === 'warning' ? 'Warning' : 'Error'
  const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })

  return (
    <Card
      withBorder
      padding="xl"
      radius="2xl"
      className="premium-card glass"
      styles={(theme) => ({
        root: {
          backgroundColor: 'var(--mantine-color-body)',
          borderColor: scheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
          transition: 'transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
          '&:hover': {
            transform: 'translateY(-4px)',
            boxShadow: theme.shadows.md,
            borderColor: 'rgba(37, 99, 235, 0.3)',
          },
        },
      })}
    >
      <Group justify="space-between" mb="md">
        <Group gap="md">
          <Avatar
            variant="gradient"
            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
            radius="lg"
            size="lg"
          >
            <TbDeviceMobile size={26} />
          </Avatar>
          <Stack gap={2}>
            <Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
            {/* <Text size="xs" c="dimmed" fw={600} tt="uppercase">v{version}</Text> */}
          </Stack>
        </Group>
        <Badge color={statusColor} variant="dot" size="sm">
          {statusLabel}
        </Badge>
      </Group>

      <Group justify="space-between" align="center" mb="xs">
        <Text size="xs" c="dimmed" fw={500}>Open Errors</Text>
        <Badge
          color={errors > 0 ? 'red' : 'teal'}
          variant="light"
          size="sm"
          leftSection={errors > 0 ? <TbAlertTriangle size={10} /> : undefined}
        >
          {errors > 0 ? errors : 'None'}
        </Badge>
      </Group>

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