import React from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { Layout, Menu, theme } from 'antd';
import {
  DashboardOutlined,
  AppstoreOutlined,
  KeyOutlined,
  UserOutlined,
  AuditOutlined,
  ExperimentOutlined,
} from '@ant-design/icons';
import { useState, useEffect } from 'react';

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 TokenTester from '../components/TokenTester';
import TokenTesterCallback from '../components/TokenTesterCallback';
import { AuthProvider, useAuth } from '../contexts/AuthContext';
import Login from '../components/Login';

const { Sider, Content } = Layout;

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

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

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

  return (
    <Layout style={{ height: '100%', minHeight: '600px' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} width={200}>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/kms']}
          items={menuItems}
          onClick={({ key }) => {
            navigate(key);
          }}
          style={{ height: '100%', borderRight: 0 }}
        />
      </Sider>
      <Layout style={{ background: colorBgContainer }}>
        <Content
          style={{
            margin: '16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            overflow: 'auto',
          }}
        >
          <Routes>
            <Route path="/kms" element={<Dashboard />} />
            <Route path="/kms/applications" element={<Applications />} />
            <Route path="/kms/tokens" element={<Tokens />} />
            <Route path="/kms/token-tester" element={<TokenTester />} />
            <Route path="/kms/token-tester/callback" element={<TokenTesterCallback />} />
            <Route path="/kms/users" element={<Users />} />
            <Route path="/kms/audit" element={<Audit />} />
            <Route path="*" element={<Navigate to="/kms" replace />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

const KMSApp: React.FC = () => {
  return (
    <AuthProvider>
      <KMSAppContent />
    </AuthProvider>
  );
};

export default KMSApp;