import { redirect } from "next/navigation";

import { MotionFade } from "@/components/motion-fade";
import { PortfolioProjectForm } from "@/components/root/portfolio-project-form";
import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
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 { 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: "SEO",
  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;
  };
  searchParams?: {
    success?: string;
    error?: string;
  };
};

export default async function RootPortfolioProjectPage({
  params,
  searchParams,
}: 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/projects?error=Project+not+found.");
  }

  return (
    <RootDashboardShell
      copy={copy}
      active="portfolio"
      portfolioChild="projects"
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
      toolbar={<PortfolioSubnav active="projects" />}
    >
      <div className="space-y-6">
        {searchParams?.success ? (
          <MotionFade delay={0.1}>
            <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
              {searchParams.success}
            </p>
          </MotionFade>
        ) : null}

        {searchParams?.error ? (
          <MotionFade delay={0.12}>
            <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
              {searchParams.error}
            </p>
          </MotionFade>
        ) : null}

        <MotionFade delay={0.15}>
          <PortfolioProjectForm
            action={saveProjectAction}
            categories={categories}
            mediaOptions={mediaOptions}
            project={project}
            redirectPath={`/root/portfolio/projects/${project.id}`}
            submitLabel={copy.saveProject}
          />
        </MotionFade>

        <MotionFade delay={0.2}>
          <AppCard>
            <CardContent className="flex items-center justify-between gap-4 p-6">
              <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>
              <form action={deleteProjectAction}>
                <input type="hidden" name="id" value={project.id} />
                <Button type="submit" variant="destructive">
                  {copy.deleteProject}
                </Button>
              </form>
            </CardContent>
          </AppCard>
        </MotionFade>
      </div>
    </RootDashboardShell>
  );
}