/* ============================================================
   app.jsx — роутер, AuthContext, точка входа
   ============================================================ */

const { useState, useEffect, createContext, useContext } = React;

/* ─── API base ─── */
const API_BASE = window.location.hostname === 'localhost'
  ? 'http://localhost:3000'
  : window.location.origin;

/* ─── Auth context ─── */
const AuthContext = createContext(null);

function useAuth() {
  return useContext(AuthContext);
}

/* ─── Nav context — для перехода между страницами ─── */
const NavContext = createContext(null);

function useNav() {
  return useContext(NavContext);
}

/* ─── Main App ─── */
function App() {
  const [view, setView] = useState('landing'); // landing | login | register | studio | studio-image | studio-video | studio-music | studio-history | studio-profile
  const [user, setUser] = useState(null);
  const [authLoading, setAuthLoading] = useState(true);

  /* При старте проверяем cookie — вдруг уже авторизован */
  useEffect(() => {
    fetch(`${API_BASE}/api/auth/me`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (data?.user) setUser(data.user);
      })
      .catch(() => {})
      .finally(() => setAuthLoading(false));
  }, []);

  function navigate(to) {
    setView(to);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function onLogin(userData) {
    setUser(userData);
    navigate('studio');
  }

  function onLogout() {
    fetch(`${API_BASE}/api/auth/logout`, { method: 'DELETE', credentials: 'include' })
      .catch(() => {});
    setUser(null);
    navigate('landing');
  }

  function updateUser(patch) {
    setUser(u => ({ ...u, ...patch }));
  }

  if (authLoading) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center' }}>
        <Spinner />
      </div>
    );
  }

  const nav = { navigate };
  const auth = { user, onLogin, onLogout, updateUser, API_BASE };

  return (
    <AuthContext.Provider value={auth}>
      <NavContext.Provider value={nav}>
        <ToastProvider>
          <div className="app-root">
            <Blobs />
            <ViewRouter view={view} navigate={navigate} />
          </div>
        </ToastProvider>
      </NavContext.Provider>
    </AuthContext.Provider>
  );
}

/* ─── Router ─── */
function ViewRouter({ view, navigate }) {
  const { user } = useAuth();

  /* Guard: студия только для авторизованных */
  const studioViews = ['studio', 'studio-image', 'studio-video', 'studio-music', 'studio-history', 'studio-profile', 'studio-trends', 'studio-wheel'];
  const adminViews  = ['adm-dashboard', 'adm-users', 'adm-finance', 'adm-settings', 'adm-content', 'adm-extra', 'adm-templates', 'adm-broadcast', 'adm-wheel'];

  if ((studioViews.includes(view) || adminViews.includes(view)) && !user) {
    return <LoginPage />;
  }

  if (adminViews.includes(view)) {
    return <AdminLayout page={view} />;
  }

  switch (view) {
    case 'landing':        return <LandingPage />;
    case 'login':          return <LoginPage />;
    case 'register':       return <RegisterPage />;
    case 'studio':         return <StudioLayout page="dashboard" />;
    case 'studio-image':   return <StudioLayout page="image" />;
    case 'studio-video':   return <StudioLayout page="video" />;
    case 'studio-music':   return <StudioLayout page="music" />;
    case 'studio-history': return <StudioLayout page="history" />;
    case 'studio-profile': return <StudioLayout page="profile" />;
    case 'studio-trends':  return <StudioLayout page="trends" />;
    case 'studio-wheel':   return <StudioLayout page="wheel" />;
    default:               return <LandingPage />;
  }
}

/* ─── Mount ─── */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);