sass-mohfarawati/app/_admin/portfolio/projects/[id]/page.tsx

import { redirect } from "next/navigation";

import { MotionFade } from "@/components/motion-fade";
import { PortfolioProjectForm } from "@/components/admin/portfolio-project-form";
import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
import { readFlash } from "@/lib/admin-feedback";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
import { getAdminAppPath } from "@/lib/admin-routing";
import { getMediaOptions } from "@/lib/media";
import {
  getActivePortfolioCategories,
  getAdminPortfolioProjectById,
} from "@/lib/portfolio";

import { deleteProjectAction, saveProjectAction } from "../../actions";

export const dynamic = "force-dynamic";

const copy = {
  title: "Portfolio Projekt bearbeiten",
  subtitle: "Projektstatus, Inhalte und Dateien anpassen.",
  overview: "Uebersicht",
  maintenance: "Wartungsmodus",
  uiKit: "UI Kit",
  media: "Media",
  siteSettings: "Settings",
  portfolio: "Portfolio",
  logout: "Ausloggen",
  backToSite: "Zur Website",
  saveProject: "Projekt speichern",
  dangerZone: "Gefahrenbereich",
  dangerText: "Projektdaten werden aus der Datenbank entfernt. Hochgeladene Dateien bleiben auf dem Speicher erhalten.",
  deleteProject: "Projekt loeschen",
};

type AdminPortfolioProjectPageProps = {
  params: Promise<{
    id: string;
  }>;
  searchParams?: Promise<{ success?: string; error?: string }>;
};

export default async function AdminPortfolioProjectPage({
  params,
  searchParams,
}: AdminPortfolioProjectPageProps) {
  const flash = readFlash(await searchParams);

  if (!(await isAdminAuthenticated())) {
    redirect(getAdminAppPath("/"));
  }

  async function logoutAction() {
    "use server";

    await clearAdminSessionCookie();
    redirect(getAdminAppPath("/"));
  }

  const { id } = await params;

  const [categories, mediaOptions, project] = await Promise.all([
    getActivePortfolioCategories(),
    getMediaOptions(),
    getAdminPortfolioProjectById(id),
  ]);

  if (!project) {
    redirect(getAdminAppPath("/portfolio"));
  }

  return (
    <AdminDashboardShell
      copy={copy}
      active="portfolio"
      flash={flash}
      portfolioChild="projects"
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
    >
      <div className="space-y-6">
        <MotionFade delay={0.15}>
          <PortfolioProjectForm
            action={saveProjectAction}
            categories={categories}
            mediaOptions={mediaOptions}
            project={project}
            formId="portfolio-project-form"
            redirectPath={getAdminAppPath(`/portfolio/projects/${project.id}`)}
          />
        </MotionFade>

        <MotionFade delay={0.2}>
          <AppCard level={2} layer="single">
            <CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-center lg:justify-between">
              <div>
                <p className="text-sm font-medium text-foreground">{copy.dangerZone}</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  {copy.dangerText}
                </p>
              </div>
              <Dialog>
                <DialogTrigger asChild>
                  <Button type="button" variant="destructive">
                    {copy.deleteProject}
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>{copy.deleteProject}</DialogTitle>
                    <DialogDescription>
                      This action permanently removes the project data from the database.
                    </DialogDescription>
                  </DialogHeader>
                  <DialogFooter>
                    <form action={deleteProjectAction}>
                      <input type="hidden" name="id" value={project.id} />
                      <Button type="submit" variant="destructive">
                        Confirm Delete
                      </Button>
                    </form>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </CardContent>
          </AppCard>
        </MotionFade>
      </div>
    </AdminDashboardShell>
  );
}