import React, { useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { useAuthStore } from './features/auth/store/useAuthStore';
import { LoginForm } from './features/auth/components/LoginForm';
import { DashboardLayout } from './layouts/DashboardLayout';
import { DashboardView } from './features/dashboard/components/DashboardView';
import { AgentsView } from './features/agents/components/AgentsView';
import { KeysView } from './features/keys/components/KeysView';
import { ActivationKeyDetailView } from './features/keys/components/ActivationKeyDetailView';
import { TelegramView } from './features/telegram/components/TelegramView';
import { PolicyView } from './features/policy/components/PolicyView';
import { MalwareReportsView } from './features/monitoring/components/MalwareReportsView';
import { VerifiedSafeFilesView } from './features/monitoring/components/VerifiedSafeFilesView';
import { PerformanceView } from './features/monitoring/components/PerformanceView';
import { SecuritySettingsView } from './features/auth/components/SecuritySettingsView';
import { PluginReleasesView } from './features/system/components/PluginReleasesView';
import { SettingsView } from './features/system/components/SettingsView';
import { LogsSectionView } from './features/monitoring/components/LogsSectionView';
import { PANEL_ROUTES } from './navigation/panelRoutes';
import './bootstrap';

function AuthenticatedApp() {
    return (
        <DashboardLayout>
            <Routes>
                <Route path="/" element={<Navigate to={PANEL_ROUTES.dashboard} replace />} />
                <Route path="/dashboard" element={<DashboardView />} />
                <Route path="/websites" element={<AgentsView />} />
                <Route path="/websites/:agentId" element={<AgentsView />} />
                <Route path="/keys" element={<KeysView />} />
                <Route path="/keys/:keyId" element={<ActivationKeyDetailView />} />
                <Route path="/telegram" element={<TelegramView />} />
                <Route path="/plugin-releases" element={<PluginReleasesView />} />
                <Route path="/security" element={<SecuritySettingsView />} />
                <Route path="/settings/maintenance" element={<SettingsView />} />
                <Route path="/settings/telegram" element={<SettingsView />} />
                <Route path="/settings/cron" element={<SettingsView />} />
                <Route path="/settings" element={<Navigate to={PANEL_ROUTES.settingsCron} replace />} />
                <Route path="/policies" element={<PolicyView />} />
                <Route path="/performance" element={<PerformanceView />} />
                <Route path="/malware" element={<MalwareReportsView />} />
                <Route path="/verified-safe" element={<VerifiedSafeFilesView />} />
                <Route path="/logs/scans" element={<LogsSectionView />} />
                <Route path="/logs" element={<LogsSectionView />} />
                <Route path="*" element={<Navigate to={PANEL_ROUTES.dashboard} replace />} />
            </Routes>
        </DashboardLayout>
    );
}

function App() {
    const { isAuthenticated, isLoading, checkAuth, user } = useAuthStore();

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

    if (isLoading && !user) {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center bg-slate-950 text-slate-100">
                <div className="w-12 h-12 border-4 border-rose-500/20 border-t-rose-500 rounded-full animate-spin"></div>
                <p className="mt-4 text-xs font-semibold uppercase tracking-widest text-slate-500 animate-pulse">
                    Restoring Session...
                </p>
            </div>
        );
    }

    return (
        <BrowserRouter>
            {isAuthenticated ? <AuthenticatedApp /> : <LoginForm />}
        </BrowserRouter>
    );
}

const container = document.getElementById('root');
if (container) {
    const root = createRoot(container);
    root.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>
    );
}