import React, { useState } from 'react';
import Sidebar from './components/Sidebar';
import TenantManager from './components/TenantManager';
import EndpointManager from './components/EndpointManager';
import DebugTabs from './components/DebugTabs';
import Auth from './components/Auth';
import Settings from './components/Settings';
import './index.css';

function App() {
  const [activeTab, setActiveTab] = useState('debug');
  const [showSettings, setShowSettings] = useState(false);
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('api_debug_user');
    return saved ? JSON.parse(saved) : null;
  });

  const handleLogout = () => {
    localStorage.removeItem('api_debug_token');
    localStorage.removeItem('api_debug_user');
    setUser(null);
  };

  if (!user) {
    return <Auth onLogin={setUser} />;
  }

  return (
    <div className="app-container">
      <Sidebar
        currentTab={activeTab}
        setTab={setActiveTab}
        onLogout={handleLogout}
        onSettings={() => setShowSettings(true)}
      />
      <main className="main-content" style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: activeTab === 'tenants' ? 'flex' : 'none', flexDirection: 'column', flex: 1, minHeight: 0 }}><TenantManager /></div>
        <div style={{ display: activeTab === 'endpoints' ? 'flex' : 'none', flexDirection: 'column', flex: 1, minHeight: 0 }}><EndpointManager /></div>
        <div style={{ display: activeTab === 'debug' ? 'flex' : 'none', flexDirection: 'column', flex: 1, minHeight: 0 }}><DebugTabs /></div>
      </main>
      {showSettings && <Settings onClose={() => setShowSettings(false)} />}
    </div>
  );
}

export default App;