import { 
  Paper, 
  Stack, 
  Text, 
  Group, 
  ThemeIcon, 
  Box,
  Badge,
  useMantineTheme
} from '@mantine/core'
import { LineChart, BarChart } from '@mantine/charts'
import { TbTimeline, TbChartBar, TbArrowUpRight } from 'react-icons/tb'

interface ChartProps {
  data?: any[]
  isLoading?: boolean
}

export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
  const theme = useMantineTheme()
  
  return (
    <Paper withBorder p="xl" radius="2xl" className="glass h-full">
      <Stack gap="md" h="100%">
        <Group justify="space-between">
          <Group gap="sm">
            <ThemeIcon variant="light" size="lg" radius="md" color="blue">
              <TbTimeline size={20} />
            </ThemeIcon>
            <Box>
              <Text fw={700} size="sm">DAILY ACTIVITY - ALL VILLAGES</Text>
              <Text size="xs" c="dimmed">Trend over the last 7 days</Text>
            </Box>
          </Group>
          <Badge variant="light" color="blue" size="sm" rightSection={<TbArrowUpRight size={12} />}>
            {isLoading ? '...' : 'Live'}
          </Badge>
        </Group>

        <Box h={300} mt="lg">
          <LineChart
            h={300}
            data={data}
            dataKey="date"
            series={[{ name: 'logs', color: '#2563EB' }]}
            curveType="monotone"
            tickLine="none"
            gridAxis="x"
            withTooltip
            tooltipAnimationDuration={200}
            styles={{
              root: {
                '.recharts-line-curve': {
                  strokeWidth: 3,
                  filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))'
                }
              }
            }}
          />
        </Box>
      </Stack>
    </Paper>
  )
}

export function VillageComparisonBarChart({ data = [], isLoading }: ChartProps) {
  const theme = useMantineTheme()

  return (
    <Paper withBorder p="xl" radius="2xl" className="glass h-full">
      <Stack gap="md" h="100%">
        <Group justify="space-between">
          <Group gap="sm">
            <ThemeIcon variant="light" size="lg" radius="md" color="brand-purple">
              <TbChartBar size={20} />
            </ThemeIcon>
            <Box>
              <Text fw={700} size="sm">USAGE COMPARISON BETWEEN VILLAGES</Text>
              <Text size="xs" c="dimmed">Most active village deployments</Text>
            </Box>
          </Group>
        </Group>

        <Box h={300} mt="lg">
          <BarChart
            h={300}
            data={data}
            dataKey="village"
            series={[{ name: 'activity', color: 'indigo.6' }]}
            withTooltip
            tickLine="none"
            gridAxis="y"
            barProps={{
                radius: [8, 8, 4, 4],
            }}
            styles={{
                bar: {
                    fill: 'url(#barGradient)',
                }
            }}
          >
            <defs>
              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#2563EB" stopOpacity={1} />
                <stop offset="100%" stopColor="#7C3AED" stopOpacity={0.8} />
              </linearGradient>
            </defs>
          </BarChart>
        </Box>
      </Stack>
    </Paper>
  )
}