import { Boxes, FolderKanban, ImageIcon, Layers3, Plus, Tags } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";

import { PortfolioSubnav } from "@/components/root/portfolio-subnav";
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
import { MotionFade } from "@/components/motion-fade";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
import {
  getAdminPortfolioCategories,
  getAdminPortfolioProjects,
} from "@/lib/portfolio";

export const dynamic = "force-dynamic";

const copy = {
  title: "Portfolio",
  subtitle: "Verwaltung fuer Kategorien, Projekte und Inhalte.",
  overview: "Uebersicht",
  maintenance: "Wartungsmodus",
  uiKit: "UI Kit",
  siteSettings: "SEO",
  portfolio: "Portfolio",
  logout: "Ausloggen",
  backToSite: "Zur Website",
  totalCategories: "Kategorien",
  totalProjects: "Projekte",
  publishedProjects: "Veroeffentlicht",
  categoriesAction: "Kategorien verwalten",
  projectsAction: "Projekte verwalten",
  newProject: "Neues Projekt",
  newCategory: "Neue Kategorie",
  media: "Media",
};

export default async function RootPortfolioPage() {
  if (!isAdminAuthenticated()) {
    redirect("/root");
  }

  async function logoutAction() {
    "use server";

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

  const [categories, projects] = await Promise.all([
    getAdminPortfolioCategories(),
    getAdminPortfolioProjects(),
  ]);
  const publishedProjects = projects.filter((project) => project.isPublished).length;

  return (
    <RootDashboardShell
      copy={copy}
      active="portfolio"
      portfolioChild="overview"
      logoutAction={logoutAction}
      headerTitle={copy.title}
      headerDescription={copy.subtitle}
      toolbar={<PortfolioSubnav active="overview" />}
      headerActions={
        <div className="flex flex-wrap gap-3">
          <Button asChild>
            <Link href="/root/portfolio/projects/new">
              <Plus className="h-4 w-4" />
              {copy.newProject}
            </Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="/root/portfolio/categories">
              <Tags className="h-4 w-4" />
              {copy.newCategory}
            </Link>
          </Button>
        </div>
      }
    >
      <div className="space-y-6">
        <section className="grid gap-4 md:grid-cols-3">
          {[
            {
              icon: Layers3,
              label: copy.totalCategories,
              value: categories.length,
            },
            {
              icon: FolderKanban,
              label: copy.totalProjects,
              value: projects.length,
            },
            {
              icon: Boxes,
              label: copy.publishedProjects,
              value: publishedProjects,
            },
          ].map((item, index) => {
            const Icon = item.icon;

            return (
              <MotionFade key={item.label} delay={index * 0.05}>
                <AppCard level={2}>
                  <CardContent className="flex items-center gap-4 p-6">
                    <div className="flex h-12 w-12 items-center justify-center rounded-pill bg-surface-1">
                      <Icon className="h-5 w-5 text-brand-primary" />
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">{item.label}</p>
                      <p className="text-3xl font-semibold text-foreground">{item.value}</p>
                    </div>
                  </CardContent>
                </AppCard>
              </MotionFade>
            );
          })}
        </section>

        <section className="grid gap-4 lg:grid-cols-3">
          <MotionFade delay={0.18}>
            <AppCard>
              <CardHeader>
                <CardTitle>{copy.totalCategories}</CardTitle>
                <CardDescription>Sortieren, aktivieren und neue Portfolio Gruppen anlegen.</CardDescription>
              </CardHeader>
              <CardContent>
                <Button asChild variant="outline">
                  <Link href="/root/portfolio/categories">{copy.categoriesAction}</Link>
                </Button>
              </CardContent>
            </AppCard>
          </MotionFade>

          <MotionFade delay={0.22}>
            <AppCard>
              <CardHeader>
                <CardTitle>{copy.totalProjects}</CardTitle>
                <CardDescription>Entwuerfe, veroeffentlichte Projekte und flexible Abschnitte pflegen.</CardDescription>
              </CardHeader>
              <CardContent className="flex gap-3">
                <Button asChild variant="outline">
                  <Link href="/root/portfolio/projects">{copy.projectsAction}</Link>
                </Button>
                <Button asChild>
                  <Link href="/root/portfolio/projects/new">{copy.newProject}</Link>
                </Button>
              </CardContent>
            </AppCard>
          </MotionFade>

          <MotionFade delay={0.26}>
            <AppCard>
              <CardHeader>
                <CardTitle>{copy.media}</CardTitle>
                <CardDescription>Alle Cover und Projektdateien an einem Ort pruefen.</CardDescription>
              </CardHeader>
              <CardContent>
                <Button asChild variant="outline">
                  <Link href="/root/media">
                    <ImageIcon className="h-4 w-4" />
                    {copy.media}
                  </Link>
                </Button>
              </CardContent>
            </AppCard>
          </MotionFade>
        </section>
      </div>
    </RootDashboardShell>
  );
}