import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
    DashboardOutlined,
    SafetyCertificateOutlined,
    AppstoreOutlined,
    SettingOutlined,
    FileProtectOutlined,
    LockOutlined
} from '@ant-design/icons';

import Dashboard from './components/pages/Dashboard';
import PluginManager from './components/pages/PluginManager';
import FilePermissions from './components/pages/FilePermissions';
import CodeSigner from './components/pages/CodeSigner';
import TwoFactorAuth from './components/pages/TwoFactorAuth';
// import MainSecurity from './components/pages/MainSecurity';
// import Settings from './components/pages/Settings';

const { Content, Sider } = Layout;

const App = () => {
    const menuItems = [
        {
            key: '/',
            icon: <DashboardOutlined />,
            label: <Link to="/">Dashboard</Link>
        },
        {
            key: '/plugins',
            icon: <AppstoreOutlined />,
            label: <Link to="/plugins">Plugin Manager</Link>
        },
        {
            key: '/file-permissions',
            icon: <FileProtectOutlined />,
            label: <Link to="/file-permissions">File Permissions</Link>
        },
        {
            key: '/code-signer',
            icon: <SafetyCertificateOutlined />,
            label: <Link to="/code-signer">Code Signer</Link>
        },
        {
            key: '/two-factor-auth',
            icon: <LockOutlined />,
            label: <Link to="/two-factor-auth">Two-Factor Auth</Link>
        },
        {
            key: '/settings',
            icon: <SettingOutlined />,
            label: <Link to="/settings">Settings</Link>
        }
    ];

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider theme="light" width={200}>
                <div style={{
                    height: '64px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderBottom: '1px solid #f0f0f0'
                }}>
                    <SafetyCertificateOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
                    <span style={{ marginLeft: '8px', fontSize: '18px', fontWeight: 500 }}>
                        Safe Sites
                    </span>
                </div>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['/']}
                    style={{ height: '100%', borderRight: 0 }}
                    items={menuItems}
                />
            </Sider>
            <Layout style={{ padding: '0 24px 24px' }}>
                <Content style={{ padding: 24, margin: 0, minHeight: 280 }}>
                    <Routes>
                        <Route path="/" element={<Dashboard />} />
                        <Route path="/main-security" element={<MainSecurity />} />
                        <Route path="/plugins" element={<PluginManager />} />
                        <Route path="/file-permissions" element={<FilePermissions />} />
                        <Route path="/code-signer" element={<CodeSigner />} />
                        <Route path="/two-factor-auth" element={<TwoFactorAuth />} />
                        {/* <Route path="/settings" element={<Settings />} /> */}
                    </Routes>
                </Content>
            </Layout>
        </Layout>
    );
};

export default App;