import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, Layout, Menu, theme } from 'antd';
import {
  DashboardOutlined,
  AppstoreOutlined,
  KeyOutlined,
  UserOutlined,
  AuditOutlined,
  LoginOutlined,
} from '@ant-design/icons';
import { useState } from 'react';
import './App.css';

// Components
import Dashboard from './components/Dashboard';
import Applications from './components/Applications';
import Tokens from './components/Tokens';
import Users from './components/Users';
import Audit from './components/Audit';
import Login from './components/Login';
import { AuthProvider, useAuth } from './contexts/AuthContext';

const { Header, Sider, Content } = Layout;

const AppContent: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { user, logout } = useAuth();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  if (!user) {
    return <Login />;
  }

  const menuItems = [
    {
      key: '/',
      icon: <DashboardOutlined />,
      label: 'Dashboard',
    },
    {
      key: '/applications',
      icon: <AppstoreOutlined />,
      label: 'Applications',
    },
    {
      key: '/tokens',
      icon: <KeyOutlined />,
      label: 'Tokens',
    },
    {
      key: '/users',
      icon: <UserOutlined />,
      label: 'Users',
    },
    {
      key: '/audit',
      icon: <AuditOutlined />,
      label: 'Audit Log',
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/']}
          items={menuItems}
          onClick={({ key }) => {
            window.location.pathname = key;
          }}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ paddingLeft: 16, fontSize: '18px', fontWeight: 'bold' }}>
            KMS - Key Management System
          </div>
          <div style={{ paddingRight: 16, display: 'flex', alignItems: 'center', gap: 16 }}>
            <span>Welcome, {user.email}</span>
            <LoginOutlined 
              onClick={logout} 
              style={{ cursor: 'pointer', fontSize: '16px' }}
              title="Logout"
            />
          </div>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/applications" element={<Applications />} />
            <Route path="/tokens" element={<Tokens />} />
            <Route path="/users" element={<Users />} />
            <Route path="/audit" element={<Audit />} />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

const App: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm,
      }}
    >
      <AuthProvider>
        <Router>
          <AppContent />
        </Router>
      </AuthProvider>
    </ConfigProvider>
  );
};

export default App;
