import React, { useState, useEffect } from 'react';
import {
  Container,
  Title,
  Text,
  Card,
  SimpleGrid,
  Group,
  Badge,
  Button,
  Stack,
  Progress,
  ActionIcon,
  Paper,
  Divider,
  Alert,
} from '@mantine/core';
import {
  IconRocket,
  IconChartLine,
  IconUsers,
  IconRefresh,
  IconCheck,
  IconInfoCircle,
} from '@tabler/icons-react';

const DemoApp: React.FC = () => {
  const [progress, setProgress] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
    }, 100);
    return () => clearInterval(timer);
  }, []);

  const handleRefresh = () => {
    setIsLoading(true);
    setTimeout(() => setIsLoading(false), 1500);
  };

  const stats = [
    { label: 'Active Users', value: '1,234', icon: IconUsers, color: 'blue' },
    { label: 'Total Revenue', value: '$45,678', icon: IconChartLine, color: 'green' },
    { label: 'Projects', value: '89', icon: IconRocket, color: 'orange' },
  ];

  const features = [
    { title: 'Real-time Analytics', description: 'Monitor your data in real-time' },
    { title: 'Team Collaboration', description: 'Work together seamlessly' },
    { title: 'Cloud Integration', description: 'Connect with cloud services' },
    { title: 'Custom Reports', description: 'Generate detailed reports' },
  ];

  return (
    <Container size="xl" py="xl">
      <Stack gap="xl">
        <Group justify="space-between" align="center">
          <div>
            <Title order={1}>Demo Application</Title>
            <Text c="dimmed" size="lg" mt="xs">
              A sample federated application showcasing module federation
            </Text>
          </div>
          <ActionIcon
            size="lg"
            variant="light"
            loading={isLoading}
            onClick={handleRefresh}
          >
            <IconRefresh size={18} />
          </ActionIcon>
        </Group>

        <Alert icon={<IconInfoCircle size={16} />} title="Welcome!" color="blue" variant="light">
          This is a demo application loaded via Module Federation. It demonstrates how 
          microfrontends can be seamlessly integrated into the shell application.
        </Alert>

        <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
          {stats.map((stat) => (
            <Paper key={stat.label} p="md" radius="md" withBorder>
              <Group justify="space-between">
                <div>
                  <Text c="dimmed" size="sm" fw={500} tt="uppercase">
                    {stat.label}
                  </Text>
                  <Text fw={700} size="xl">
                    {stat.value}
                  </Text>
                </div>
                <stat.icon size={24} color={`var(--mantine-color-${stat.color}-6)`} />
              </Group>
            </Paper>
          ))}
        </SimpleGrid>

        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section withBorder inheritPadding py="xs">
            <Group justify="space-between">
              <Text fw={500}>System Performance</Text>
              <Badge color="green" variant="light">
                Healthy
              </Badge>
            </Group>
          </Card.Section>

          <Card.Section inheritPadding py="md">
            <Stack gap="xs">
              <Text size="sm" c="dimmed">
                CPU Usage: {progress.toFixed(1)}%
              </Text>
              <Progress value={progress} size="sm" color="blue" animated />
            </Stack>
          </Card.Section>
        </Card>

        <div>
          <Title order={2} mb="md">Features</Title>
          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
            {features.map((feature, index) => (
              <Card key={index} shadow="sm" padding="lg" radius="md" withBorder>
                <Group mb="xs">
                  <IconCheck size={16} color="var(--mantine-color-green-6)" />
                  <Text fw={500}>{feature.title}</Text>
                </Group>
                <Text size="sm" c="dimmed">
                  {feature.description}
                </Text>
              </Card>
            ))}
          </SimpleGrid>
        </div>

        <Divider />

        <Group justify="center">
          <Button variant="outline" size="md">
            View Documentation
          </Button>
          <Button size="md">
            Get Started
          </Button>
        </Group>
      </Stack>
    </Container>
  );
};

export default DemoApp;