import { useState, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import axios from 'axios';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import DashboardHome from './pages/DashboardHome';
import Analytics from './pages/Analytics';
import Billing from './pages/Billing';
import Documentation from './pages/Documentation';
import Playground from './pages/Playground';

interface ApiKey {
  id: string;
  key: string;
  name: string;
  isActive: boolean;
  rateLimit: number;
  allowedOrigins: string[];
  lastUsedAt: string | null;
}

interface Tenant {
  id: string;
  name: string;
  email: string;
}

const App = () => {
  const [tenant, setTenant] = useState<Tenant | null>(null);
  const [keys, setKeys] = useState<ApiKey[]>([]);
  const [loading, setLoading] = useState(true);
  const location = useLocation();

  const fetchData = async () => {
    try {
      setLoading(true);
      const tenantRes = await axios.get('/api/auth/management/me');
      setTenant(tenantRes.data);

      if (tenantRes.data && tenantRes.data.id) {
        const keysRes = await axios.get(`/api/auth/management/keys/${tenantRes.data.id}`);
        if (Array.isArray(keysRes.data)) {
          setKeys(keysRes.data);
        }
      }
    } catch (error: any) {
      console.error('Failed to fetch dashboard data', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <div className="app-container">
      <Sidebar />
      <div className="flex-1 overflow-y-auto bg-gradient-to-br from-[#0a0a0b] via-[#0f1115] to-[#0a0a0b]">
        <Header />
        
        <main className="main-content">
          <Routes>
            <Route path="/" element={
              <DashboardHome 
                tenant={tenant} 
                keys={keys} 
                loading={loading} 
                onRefresh={fetchData} 
              />
            } />
            <Route path="/analytics" element={<Analytics />} />
            <Route path="/billing" element={<Billing />} />
            <Route path="/documentation" element={<Documentation />} />
            <Route path="/playground" element={<Playground apiKeys={keys} />} />
          </Routes>
        </main>
      </div>
    </div>
  );
};

export default App;