import { Navigate } from "react-router";
import Error from "~/components/error";
import Loader from "~/components/loader";
import { MainLayout } from "~/layout";
import { AUTH_ERROR, useUser } from "~/lib/api";
import { forceReload } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import { Github } from "lucide-react";
import BottomNavigation from "~/components/bottom-nav";

export default function Repas() {
  const { user, isLoading, error } = useUser();

  if (isLoading) {
    return <Loader />;
  }
  if (error?.message === AUTH_ERROR) {
    return <Navigate to="/login" replace />;
  }
  if (error) {
    return <Error message={error.message} />;
  }

  return (
    <MainLayout
      header={
        <h1 className="text-2xl font-bold" onClick={forceReload}>
          Khollis&eacute; - {user.className} ⚔️
        </h1>
      }
    >
      {/* Under construction message */}
      <div className="text-center mt-10">
        <h2 className="text-xl font-semibold">
          ⚠️ Cette fonctionnalité n’est pas encore implémentée.
        </h2>
        <p className="mt-4">
          Vous pouvez contribuer au développement du projet ici :
        </p>
        <Button
          className="mt-4"
          variant="default"
          onClick={() => window.open(import.meta.env.VITE_GITHUB_URL, "_blank")}
        >
          <Github />
          Contribuer sur GitHub
        </Button>
      </div>

      <BottomNavigation activeId="repas" />
    </MainLayout>
  );
}