import React from 'react';
import { Box, Title, Tabs, Stack, Text } from '@mantine/core';
import { 
  IconApps, 
  IconKey, 
  IconTestPipe, 
  IconFileText,
  IconDashboard 
} from '@tabler/icons-react';
import Applications from './components/Applications';
import Tokens from './components/Tokens';
import TokenTester from './components/TokenTester';
import Audit from './components/Audit';
import Dashboard from './components/Dashboard';

const App: React.FC = () => {
  // Determine current route based on pathname
  const getCurrentRoute = () => {
    const path = window.location.pathname;
    if (path.includes('/applications')) return 'applications';
    if (path.includes('/tokens')) return 'tokens';
    if (path.includes('/token-tester')) return 'token-tester';
    if (path.includes('/audit')) return 'audit';
    return 'dashboard';
  };

  const [currentRoute, setCurrentRoute] = React.useState(getCurrentRoute());

  // Listen for URL changes (for when the shell navigates)
  React.useEffect(() => {
    const handlePopState = () => {
      setCurrentRoute(getCurrentRoute());
    };
    
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  const handleTabChange = (value: string | null) => {
    if (value) {
      // Use history.pushState to update URL and notify shell router
      const basePath = '/app/kms';
      const newPath = value === 'dashboard' ? basePath : `${basePath}/${value}`;
      
      // Update the URL and internal state
      window.history.pushState(null, '', newPath);
      setCurrentRoute(value);
      
      // Dispatch a custom event so shell can respond if needed
      window.dispatchEvent(new PopStateEvent('popstate', { state: null }));
    }
  };

  const renderContent = () => {
    switch (currentRoute) {
      case 'applications':
        return <Applications />;
      case 'tokens':
        return <Tokens />;
      case 'token-tester':
        return <TokenTester />;
      case 'audit':
        return <Audit />;
      default:
        return <Dashboard />;
    }
  };

  return (
    <Box w="100%">
      <Stack gap="lg">
        <div>
          <Title order={1} size="h2" mb="xs">
            Key Management System
          </Title>
          <Text c="dimmed" size="sm">
            Manage API keys, tokens, and access permissions
          </Text>
        </div>

        <Tabs value={currentRoute} onChange={handleTabChange}>
          <Tabs.List>
            <Tabs.Tab 
              value="dashboard" 
              leftSection={<IconDashboard size={16} />}
            >
              Dashboard
            </Tabs.Tab>
            <Tabs.Tab 
              value="applications" 
              leftSection={<IconApps size={16} />}
            >
              Applications
            </Tabs.Tab>
            <Tabs.Tab 
              value="tokens" 
              leftSection={<IconKey size={16} />}
            >
              Tokens
            </Tabs.Tab>
            <Tabs.Tab 
              value="token-tester" 
              leftSection={<IconTestPipe size={16} />}
            >
              Token Tester
            </Tabs.Tab>
            <Tabs.Tab 
              value="audit" 
              leftSection={<IconFileText size={16} />}
            >
              Audit Log
            </Tabs.Tab>
          </Tabs.List>

          <Box pt="md">
            {renderContent()}
          </Box>
        </Tabs>
      </Stack>
    </Box>
  );
};

export default App;