import React, { useState } from 'react';
import {
  SimpleGrid,
  Card,
  Text,
  ActionIcon,
  Group,
  Stack,
  Title,
  Badge,
} from '@mantine/core';
import { useNavigate } from 'react-router-dom';
import {
  IconStar,
  IconStarFilled,
  IconDashboard,
  IconKey,
} from '@tabler/icons-react';
import Breadcrumbs from '../components/Breadcrumbs';

interface App {
  id: string;
  name: string;
  description: string;
  icon: React.ComponentType<any>;
  path: string;
  category: string;
}

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const [favoriteApps, setFavoriteApps] = useState<string[]>(['demo']);

  const availableApps: App[] = [
    {
      id: 'demo',
      name: 'Demo App',
      description: 'Sample microfrontend application for testing module federation',
      icon: IconDashboard,
      path: '/app/demo',
      category: 'Development',
    },
    {
      id: 'kms',
      name: 'Key Management System',
      description: 'Manage API keys, tokens, and access permissions for applications',
      icon: IconKey,
      path: '/app/kms',
      category: 'Security',
    },
  ];

  const toggleFavorite = (appId: string) => {
    setFavoriteApps(prev =>
      prev.includes(appId)
        ? prev.filter(id => id !== appId)
        : [...prev, appId]
    );
  };

  const favoriteAppsList = availableApps.filter(app => favoriteApps.includes(app.id));
  const otherApps = availableApps.filter(app => !favoriteApps.includes(app.id));

  const AppTile: React.FC<{ app: App }> = ({ app }) => {
    const IconComponent = app.icon;
    
    return (
      <Card
        shadow="sm"
        padding="lg"
        radius="md"
        withBorder
        style={{ cursor: 'pointer', height: '100%' }}
        onClick={() => navigate(app.path)}
      >
        <Group justify="space-between" align="flex-start" mb="xs">
          <IconComponent size={32} color="var(--mantine-color-blue-6)" />
          <ActionIcon
            variant="subtle"
            onClick={(e) => {
              e.stopPropagation();
              toggleFavorite(app.id);
            }}
          >
            {favoriteApps.includes(app.id) ? (
              <IconStarFilled size={16} color="gold" />
            ) : (
              <IconStar size={16} />
            )}
          </ActionIcon>
        </Group>

        <Stack gap="xs">
          <Text fw={500} size="lg">
            {app.name}
          </Text>
          <Text size="sm" c="dimmed">
            {app.description}
          </Text>
          <Badge variant="light" size="sm">
            {app.category}
          </Badge>
        </Stack>
      </Card>
    );
  };

  return (
    <Stack gap="xl">
      <Breadcrumbs />
      
      {favoriteAppsList.length > 0 && (
        <div>
          <Group mb="md">
            <IconStarFilled size={20} color="gold" />
            <Title order={2}>Favorite Applications</Title>
          </Group>
          <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="md">
            {favoriteAppsList.map(app => (
              <AppTile key={app.id} app={app} />
            ))}
          </SimpleGrid>
        </div>
      )}

      <div>
        <Title order={2} mb="md">
          All Applications
        </Title>
        <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="md">
          {otherApps.map(app => (
            <AppTile key={app.id} app={app} />
          ))}
        </SimpleGrid>
      </div>
    </Stack>
  );
};

export default HomePage;