import React, { useState } from 'react';
import { LayoutDashboard, Shield, Settings, Database, AlertCircle } from 'lucide-react';
import Dashboard from './components/Dashboard';
import CVEList from './components/CVEList';
import SourcesConfig from './components/SourcesConfig';
import RulesConfig from './components/RulesConfig';

function App() {
  const [activeTab, setActiveTab] = useState<string>('dashboard');

  const navigation = [
    { id: 'dashboard', name: 'Dashboard', icon: <LayoutDashboard className="h-5 w-5" /> },
    { id: 'cve', name: 'CVE Management', icon: <Shield className="h-5 w-5" /> },
    { id: 'sources', name: 'Data Sources', icon: <Database className="h-5 w-5" /> },
    { id: 'rules', name: 'Rules', icon: <Settings className="h-5 w-5" /> },
  ];

  return (
    <div className="min-h-screen bg-gray-100 flex">
      {/* Sidebar */}
      <div className="w-64 bg-white shadow-md hidden md:block">
        <div className="h-16 flex items-center px-6 border-b border-gray-200">
          <AlertCircle className="h-6 w-6 mr-2 text-blue-600" />
          <span className="font-bold text-lg">GLPI CVE Plugin</span>
        </div>
        <nav className="mt-6 px-3">
          {navigation.map((item) => (
            <button
              key={item.id}
              onClick={() => setActiveTab(item.id)}
              className={`flex items-center px-3 py-2 mt-1 rounded-md w-full text-left ${
                activeTab === item.id
                  ? 'bg-blue-50 text-blue-700'
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <span className="mr-3">{item.icon}</span>
              {item.name}
            </button>
          ))}
        </nav>
      </div>

      {/* Mobile navbar */}
      <div className="md:hidden w-full bg-white p-4 flex border-b border-gray-200">
        <div className="flex items-center">
          <AlertCircle className="h-6 w-6 mr-2 text-blue-600" />
          <span className="font-bold text-lg">GLPI CVE Plugin</span>
        </div>
      </div>

      {/* Mobile navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2 md:hidden">
        {navigation.map((item) => (
          <button
            key={item.id}
            onClick={() => setActiveTab(item.id)}
            className={`flex flex-col items-center px-3 py-2 text-sm ${
              activeTab === item.id ? 'text-blue-700' : 'text-gray-600'
            }`}
          >
            {item.icon}
            <span className="mt-1">{item.name}</span>
          </button>
        ))}
      </div>

      {/* Main content */}
      <div className="flex-1 min-h-screen md:ml-64">
        {activeTab === 'dashboard' && <Dashboard />}
        {activeTab === 'cve' && <CVEList />}
        {activeTab === 'sources' && <SourcesConfig />}
        {activeTab === 'rules' && <RulesConfig />}
      </div>
    </div>
  );
}

export default App;