import * as React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AuthProvider, useAuth, AuthPage } from "../auth/src";
import { UploadProvider } from "./providers/UploadProvider";
import AdminLayout from "./components/AdminLayout";
import ResourceView from "./components/ResourceView";
import { getAppConfig } from "./config";
import { initializeApiClients } from "./api/client";
import { AppConfig } from "./types/config";
import { Box, Typography, Paper, CircularProgress } from "@mui/material";
import AppTheme from "../src/shared-theme/AppTheme";

const queryClient = new QueryClient();

// Create a context for the app config
export const ConfigContext = React.createContext<AppConfig | null>(null);

function Dashboard() {
  const config = React.useContext(ConfigContext);
  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Welcome to the Admin Panel
      </Typography>
      <Typography variant="body1">
        Select a resource from the sidebar to manage data.
      </Typography>

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
          gap: 3,
          mt: 4,
        }}
      >
        {config?.resources.map((res) => (
          <Paper key={res.name} sx={{ p: 3, textAlign: "center" }}>
            <Typography variant="h6">{res.pluralLabel}</Typography>
          </Paper>
        ))}
      </Box>
    </Box>
  );
}

function AdminApp() {
  const { currentUser, login, logout, loading, error } = useAuth();
  const config = React.useContext(ConfigContext);
  const [selectedResourceName, setSelectedResourceName] = React.useState<
    string | null
  >(null);

  if (!currentUser) {
    return (
      <AuthPage
        mode="login"
        login={login}
        register={async () => {}} // Disable registration for Admin
        loading={loading}
        error={error}
        onSwitchMode={() => {}}
        onBack={() => {}}
        currentUser={null}
      />
    );
  }

  const selectedResource = config?.resources.find(
    (r) => r.name === selectedResourceName
  );

  return (
    <AdminLayout
      username={currentUser.username}
      onLogout={logout}
      selectedResourceName={selectedResourceName}
      onSelectResource={setSelectedResourceName}
      resources={config?.resources || []}
    >
      {selectedResource ? (
        <ResourceView key={selectedResource.name} config={selectedResource} />
      ) : (
        <Dashboard />
      )}
    </AdminLayout>
  );
}

export default function App() {
  const [config, setConfig] = React.useState<AppConfig | null>(null);

  React.useEffect(() => {
    getAppConfig().then((cfg) => {
      initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
      setConfig(cfg);
    });
  }, []);

  if (!config) {
    return (
      <AppTheme>
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "100vh",
          }}
        >
          <CircularProgress />
        </Box>
      </AppTheme>
    );
  }

  return (
    <AppTheme>
      <QueryClientProvider client={queryClient}>
        <ConfigContext.Provider value={config}>
          <AuthProvider authBaseUrl={config.authBaseUrl}>
            <UploadProvider>
              <AdminApp />
            </UploadProvider>
          </AuthProvider>
        </ConfigContext.Provider>
      </QueryClientProvider>
    </AppTheme>
  );
}