import React, {useEffect, useState} from 'react';
import {APIProvider, useAPI} from './providers/APIProvider';
import {LoadTestProvider} from './providers/LoadTestProvider';
import APITester from './components/APITester';
import LoadTestManager from './components/LoadTestManager';
import {monacoConfig} from '@/config/monaco.js';
import LoginDialog from '@/components/LoginDialog.jsx';

window.MonacoEnvironment = monacoConfig;

const App = ({ options = { type: 'api', contextPath: '/' } }) => {
  const [showLogin, setShowLogin] = useState(false);

  return (
      <APIProvider contextPath={options.contextPath}>
        <AppContent options={options} showLogin={showLogin} setShowLogin={setShowLogin} />
      </APIProvider>
  );
};

const AppContent = ({ options, showLogin, setShowLogin }) => {
  const { isAuthenticated, setIsAuthenticated } = useAPI();

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await fetch('/api/account', {
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        });

        if (response.status !== 200) {
          setShowLogin(true);
          setIsAuthenticated(false);
          return;
        }

        const data = await response.json();
        setIsAuthenticated(!!data.authorities);
        if (!data.authorities) {
          setShowLogin(true);
        }
      } catch (error) {
        console.error('Auth check failed:', error);
        setShowLogin(true);
        setIsAuthenticated(false);
      }
    };

    checkAuth();
  }, [setIsAuthenticated]);

  if (!isAuthenticated) {
    return <LoginDialog open={showLogin} onOpenChange={setShowLogin} />;
  }

  return (
      <LoadTestProvider contextPath={options.contextPath}>
        <div className="flex flex-col h-screen bg-background">
          {options.type === 'api' ? (
              <APITester />
          ) : (
              <LoadTestManager />
          )}
        </div>
      </LoadTestProvider>
  );
};


// const App = ({ options = { type: 'api', contextPath: '/' } }) => {
//
//   const [isAuthenticated, setIsAuthenticated] = useState(false);
//   const [showLogin, setShowLogin] = useState(false);
//
//   useEffect(() => {
//     // Check authentication status
//     const checkAuth = async () => {
//       try {
//         const response = await fetch('/api/accouont', {
//           headers: {
//             'X-Requested-With': 'XMLHttpRequest'
//           }
//         });
//
//         if (response.status !== 200) {
//           setShowLogin(true);
//           return;
//         }
//
//         const data = await response.json();
//         console.log(data);
//         setIsAuthenticated(data.authorities);
//         if (!data.authorities) {
//           setShowLogin(true);
//         }
//       } catch (error) {
//         console.error('Auth check failed:', error);
//         setShowLogin(true);
//       }
//     };
//
//     checkAuth();
//   }, []);
//
//   if (!isAuthenticated) {
//     return <LoginDialog open={showLogin} onOpenChange={setShowLogin} />;
//   }
//
//   return (
//       <APIProvider contextPath={options.contextPath}>
//         <LoadTestProvider contextPath={options.contextPath}>
//           <div className="flex flex-col h-screen bg-background">
//             {options.type === 'api' ? (
//                 <APITester />
//             ) : (
//                 <LoadTestManager />
//             )}
//           </div>
//         </LoadTestProvider>
//       </APIProvider>
//   );
// };

export default App
