page.tsx

"use client";

import { BreadcrumbsMenu } from "@/components/BreadcrumbsMenu";
import { ConfirmModal } from "@/components/ConfirmModal";
import { ErrorScreen } from "@/components/ErrorScreen";
import { ImportProcessTable } from "@/components/ImportProcessTable";
import { LoadingScreen } from "@/components/LoadingScreen";
import { ProjectForm } from "@/components/ProjectForm";
import { CardList } from "@/components/cards/CardList";
import { RecipeCard } from "@/components/cards/RecipeCard";
import {
  Box,
  Button,
  Container,
  Divider,
  Stack,
  Typography,
} from "@mui/material";
import { useState } from "react";
import AddIcon from "@mui/icons-material/Add";
import { RecipeModal } from "@/components/RecipeModal";
import { useGetProject } from "@/hooks/useGetProject";
import { useApiDeleteRecipe, useApiRunRecipe } from "@/api/cubicweb";

export default function Project({
  params: { eid },
}: {
  params: { eid: string };
}) {
  const parsedEid = parseInt(eid);

  const { data, loading, error, refresh } = useGetProject(parsedEid);
  const [selectedRecipeEid, setSelectedRecipeEid] = useState<
    number | undefined
  >();
  const [modal, setModal] = useState<{
    visible: boolean;
    text?: string;
    eid?: number;
    type?: "delete" | "run";
  }>({ visible: false });
  const [recipeModalOpen, setRecipeModalOpen] = useState(false);
  const deleteRecipe = useApiDeleteRecipe();
  const runRecipe = useApiRunRecipe();

  if (isNaN(parsedEid)) {
    return <ErrorScreen message={`Projet '${eid}' inconnu`} />;
  }

  if (error) {
    return <ErrorScreen message={error} />;
  }

  if (loading) {
    return <LoadingScreen />;
  }

  if (!data) {
    return <ErrorScreen />;
  }

  return (
    <Container>
      <BreadcrumbsMenu page="Projet" />
      <Stack spacing={2} alignItems={"center"}>
        <Box width="100%">
          <Typography variant="h3">Projet: {data.name}</Typography>
        </Box>
        <Box width={"80%"} minWidth={300}>
          <ProjectForm project={data} />
        </Box>
        <Divider sx={{ width: "100%" }} />
        <Stack width="100%" direction={"row"} alignItems={"center"}>
          <Box flex={1}>
            <Stack>
              <Typography variant="h4">Recettes</Typography>
              <Typography>
                Cliquez sur une recette pour filtrer les import process
              </Typography>
            </Stack>
          </Box>
          <Box>
            <Button
              startIcon={<AddIcon />}
              onClick={() => setRecipeModalOpen(true)}
            >
              Ajouter
            </Button>
          </Box>
        </Stack>
        <CardList loading={false} emptyText="Aucune recette">
          {data.import_recipes?.map((d, i) => (
            <RecipeCard
              key={i}
              name={d.name}
              processType={d.process_type}
              dataserviceName={d.dataservice.name}
              onOpen={() => {
                if (selectedRecipeEid !== d.eid) {
                  setSelectedRecipeEid(d.eid);
                } else {
                  setSelectedRecipeEid(undefined);
                }
              }}
              selected={selectedRecipeEid === d.eid}
              onDelete={() =>
                setModal({
                  visible: true,
                  text: `Voulez vous vraiment supprimer la recette '${d.name}' ?`,
                  eid: d.eid,
                  type: "delete",
                })
              }
              onRun={() =>
                setModal({
                  visible: true,
                  text: `Voulez vous vraiment lancer la recette '${d.name}' ?`,
                  eid: d.eid,
                  type: "run",
                })
              }
            />
          ))}
        </CardList>
        <Box width="100%">
          <Typography variant="h4">Import process</Typography>
        </Box>
        <ImportProcessTable
          projectEid={parsedEid}
          recipeEid={selectedRecipeEid}
          showProjectColumn={false}
        />
      </Stack>
      <ConfirmModal
        open={modal.visible}
        text={modal?.text ?? ""}
        onClose={() => setModal((prev) => ({ ...prev, visible: false }))}
        onAccept={async () => {
          if (modal.eid) {
            if (modal.type === "delete") {
              await deleteRecipe(modal.eid);
              const recipeList = data.import_recipes;
              recipeList?.splice(
                recipeList?.findIndex((p) => p.eid === modal.eid),
                1,
              );
            } else {
              await runRecipe(modal.eid, parsedEid);
            }
          }
        }}
      />
      <RecipeModal
        projectEid={parsedEid}
        open={recipeModalOpen}
        onClose={() => setRecipeModalOpen(false)}
        onSuccess={refresh}
      />
    </Container>
  );
}