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 { config } from "./config";
import { Box, Typography, Paper } from '@mui/material';
import AppTheme from "../src/shared-theme/AppTheme";

const queryClient = new QueryClient();

function Dashboard() {
  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 [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={function (): void {
        throw new Error("Function not implemented.");
      }} currentUser={undefined}      />
    );
  }

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

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

export default function App() {
  return (
    <AppTheme>
      <QueryClientProvider client={queryClient}>
        <AuthProvider authBaseUrl={config.authBaseUrl}>
          <UploadProvider>
            <AdminApp />
          </UploadProvider>
        </AuthProvider>
      </QueryClientProvider>
    </AppTheme>
  );
}