import { useState, useEffect } from 'react'
import { createContext } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

import { API_BASE } from './config.js'

import Login from './components/login.jsx'
import MainApp from './components/MainApp.jsx'

export const ClientContext = createContext(null);

export function userContext() {}

export default function App() {
  const [loading, setLoading] = useState(true); // true while checking auth
  const [loggedIn, setLoggedIn] = useState(false);
  const [clientId, setClientId] = useState([]);

  useEffect(() => {
    async function checkAuth() {
      try {
        // This endpoint should validate the refresh token cookie and return an access token

        const res = await fetch(`${API_BASE}/auth/login_refresh_token`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "User-Agent": "react-app",
          },
          credentials: "include", // send cookies automatically
          body: JSON.stringify({
            device_id : "147ac10b-58cc-4372-a567-0e02b2c3d479", // or persistent device ID
          }),
        });

        console.log("sent checkAuth request")

        if (!res.ok) {
          console.log(res)
          console.log("checkAuth request not ok")
          // No valid refresh token → user must log in
          setLoggedIn(false);
        } else {
          // Got short-lived access token
          console.log("Got short-lived access token")
          const data = await res.json();
          console.log(data)
          localStorage.setItem("access_tokens", JSON.stringify(data.tokens)); // store for API calls
          setClientId(data.user_id)

          setLoggedIn(true);
        }
      } catch (err) {
        console.error("Auth check failed:", err);
        setLoggedIn(false);
      } finally {
        setLoading(false);
      }
    }

    checkAuth();
  }, []);

  if (loading) return <p>Loading...</p>; // can show a spinner

  // Show main app if logged in, otherwise show login
  return loggedIn ? (
    <MainApp resClientId ={clientId} />
  ) : (
    <Login onLogin={() => setLoggedIn(true)} />
  );
}

//export default App