import { redirect } from "next/navigation";

import { MotionFade } from "@/components/motion-fade";
import { PortfolioProjectForm } from "@/components/root/portfolio-project-form";
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
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 { 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 RootPortfolioProjectPageProps = {
  params: {
    id: string;
  };
};

export default async function RootPortfolioProjectPage({
  params,
}: RootPortfolioProjectPageProps) {
  if (!isAdminAuthenticated()) {
    redirect("/root");
  }

  async function logoutAction() {
    "use server";

    clearAdminSessionCookie();
    redirect("/root");
  }

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

  if (!project) {
    redirect("/root/portfolio?error=Project+not+found.");
  }

  return (
    <RootDashboardShell
      copy={copy}
      active="portfolio"
      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={`/root/portfolio/projects/${project.id}`}
          />
        </MotionFade>

        <MotionFade delay={0.2}>
          <AppCard level={2}>
            <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>
    </RootDashboardShell>
  );
}