import { useState, useEffect } from 'react';
import { 
  Container, 
  Title, 
  Text, 
  SimpleGrid,
  Paper,
  Group,
  ThemeIcon,
  Loader,
  Center,
  Stack
} from '@mantine/core';
import { 
  IconUsers, 
  IconWebhook, 
  IconBrandWhatsapp, 
  IconFileText 
} from '@tabler/icons-react';
import { apiClient } from '../lib/api';

interface Stats {
  users: number;
  hooks: number;
  accounts: number;
  eventLogs: number;
}

function StatCard({ 
  title, 
  value, 
  icon: Icon, 
  color 
}: { 
  title: string; 
  value: number; 
  icon: any; 
  color: string;
}) {
  return (
    <Paper withBorder p="md" radius="md">
      <Group justify="space-between">
        <div>
          <Text c="dimmed" tt="uppercase" fw={700} fz="xs">
            {title}
          </Text>
          <Text fw={700} fz="xl" mt="md">
            {value.toLocaleString()}
          </Text>
        </div>
        <ThemeIcon 
          color={color} 
          variant="light" 
          size={60} 
          radius="md"
        >
          <Icon size={32} stroke={1.5} />
        </ThemeIcon>
      </Group>
    </Paper>
  );
}

export default function DashboardPage() {
  const [stats, setStats] = useState<Stats>({
    users: 0,
    hooks: 0,
    accounts: 0,
    eventLogs: 0
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadStats();
  }, []);

  const loadStats = async () => {
    try {
      setLoading(true);
      const [users, hooks, accounts, eventLogs] = await Promise.all([
        apiClient.getUsers(),
        apiClient.getHooks(),
        apiClient.getAccounts(),
        apiClient.getEventLogs({ limit: 1000, offset: 0 })
      ]);

      setStats({
        users: users?.length || 0,
        hooks: hooks?.length || 0,
        accounts: accounts?.length || 0,
        eventLogs: eventLogs?.length || 0
      });
    } catch (err) {
      console.error('Failed to load stats:', err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <Container size="xl" py="xl">
        <Center h={400}>
          <Loader size="lg" />
        </Center>
      </Container>
    );
  }

  return (
    <Container size="xl" py="xl">
      <Stack gap="xl">
        <div>
          <Title order={2}>Dashboard</Title>
          <Text c="dimmed" size="sm">Welcome to WhatsHooked Admin Panel</Text>
        </div>

        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
          <StatCard
            title="Total Users"
            value={stats.users}
            icon={IconUsers}
            color="blue"
          />
          <StatCard
            title="Active Hooks"
            value={stats.hooks}
            icon={IconWebhook}
            color="teal"
          />
          <StatCard
            title="WhatsApp Accounts"
            value={stats.accounts}
            icon={IconBrandWhatsapp}
            color="green"
          />
          <StatCard
            title="Event Logs"
            value={stats.eventLogs}
            icon={IconFileText}
            color="violet"
          />
        </SimpleGrid>
      </Stack>
    </Container>
  );
}
