import type { User } from 'oidc-client-ts';
import { useEffect, useState } from 'react';
import './App.css';
import { AppSidebar } from './AppSidebar';
import { getUser, handleCallback, logout } from './auth/authService';
import LoginModal from './components/LoginModal';
import { Map } from './components/Map';
import { Parameters } from './components/Parameters';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
import { Button } from './components/ui/button';
import { Separator } from './components/ui/separator';
import { SidebarInset, SidebarProvider, SidebarTrigger } from './components/ui/sidebar';

function App() {
  const [listingData, setListingData] = useState({});
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    // Check if this is a callback from Authentik (after login)
    if (window.location.pathname === '/callback') {
      handleCallback().then(() => {
        window.location.href = '/'; // Redirect to home after login
      });
      return;
    }

    // Load user data
    getUser().then(setUser);
  }, []);

  const [isParametersModalOpen, setIsParametersModalOpen] = useState(true)
  const [error, setError] = useState('')
  const fetchData = async () => {

    try {
      const accessToken = user?.access_token;
      const response = await fetch('/api/listing_geojson',
        {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${accessToken}`, // Pass the token
            'Content-Type': 'application/json',
          },
        }
      );
      if (!response.ok) throw new Error('Error: ' + response.json());
      const data: Response = await response.json();
      return data;
    } catch (err) {
      setError('Failed to fetch data: ' + err);
      alert(error)
    } finally {
    }
  };
  const onSubmit = async () => {
    // Fetch listing data
    const data = await fetchData();
    if (data) {
      setListingData(data);
    }
    setIsParametersModalOpen(false)

  }

  if (!user) {
    return <LoginModal isOpen={user === null} />
  }
  return (
    <>
      <SidebarProvider defaultOpen={false}>
        <AppSidebar />
        <SidebarInset>
          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator
              orientation="vertical"
              className="mr-2 data-[orientation=vertical]:h-4"
            />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href="#">
                    Building Your Application
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </header>
          <div className="flex flex-col h-screen w-full">
            <div className="flex gap-2 p-2 bg-gray-100">
              <h1>Welcome, {user.profile.name}!</h1>
              <Button onClick={logout}>Logout</Button>
              <Parameters onSubmit={onSubmit} isOpen={isParametersModalOpen} />
            </div>
            {Object.keys(listingData).length > 0 &&
              <div className="flex-1 w-full relative" style={{ minHeight: 0, marginBottom: '8rem' }}>
                <Map listingData={listingData} />
              </div>
            }
          </div>



        </SidebarInset>
      </SidebarProvider>
    </>
  )
}

export default App