import {
  ExternalLink,
  FolderKanban,
  ImageIcon,
  LayoutDashboard,
  LockKeyhole,
  LogOut,
  ShieldAlert,
  Shapes,
  SwatchBook,
  ArrowLeft,
} from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";

import { Container } from "@/components/layout/container";
import { MotionFade } from "@/components/motion-fade";
import { DashboardCard } from "@/components/dashboard/dashboard-card";
import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
import { ThemeToggle } from "@/components/theme-toggle";
import { Badge, type BadgeProps } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  clearAdminSessionCookie,
  getAdminLockState,
  isAdminAuthConfigured,
  isAdminAuthenticated,
  isPasswordValid,
  registerFailedAdminAttempt,
  resetAdminFailedAttempts,
  setAdminSessionCookie,
} from "@/lib/admin-auth";
import { getMaintenanceMode } from "@/lib/app-config";
import { getLocalizedPath } from "@/lib/locale";
import { getAdminMediaAssets } from "@/lib/media";
import {
  getAdminPortfolioCategories,
  getAdminPortfolioProjects,
} from "@/lib/portfolio";
import { getRootNavigation } from "@/lib/root-navigation";

type RootPageProps = {
  searchParams?: {
    error?: string;
  };
};

export const dynamic = "force-dynamic";

const copy = {
  title: "Uebersicht",
  subtitle: "Interner Bereich fuer Kennzahlen und zentrale Navigation.",
  overview: "Uebersicht",
  maintenance: "Wartungsmodus",
  maintenanceTitle: "Wartungsmodus",
  maintenanceVisitorsClosed: "Website fuer Besucher geschlossen",
  maintenanceDescription:
    "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
  maintenanceOpen: "Website fuer Besucher offen",
  maintenanceAction: "Zur Wartungsseite",
  uiKitTitle: "UI Kit",
  uiKitDescription: "Globale Referenz fuer Cards, Buttons, Inputs und Surface Levels.",
  uiKitAction: "Zur UI Kit",
  media: "Media",
  portfolio: "Portfolio",
  portfolioTitle: "Portfolio",
  portfolioDescription: "Kategorien, Projekte, Abschnitte und Dateien verwalten.",
  portfolioAction: "Zum Portfolio",
  mediaTitle: "Media Library",
  mediaDescription: "Uploads, externe URLs und Verwendungsorte zentral verwalten.",
  mediaAction: "Zur Media Library",
  loginTitle: "Root Login",
  loginText: "Nur autorisierte Nutzer duerfen diesen Bereich verwenden.",
  passwordLabel: "Passwort",
  loginButton: "Einloggen",
  invalidLogin: "Falsches Passwort.",
  lockedLogin: "Zu viele Fehlversuche. Bitte spaeter erneut versuchen.",
  configMissing: "ADMIN_PASSWORD und ADMIN_AUTH_SECRET fehlen in env.",
  basicAuthMissing: "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
  logout: "Ausloggen",
  backToSite: "Zur Website",
  uiKit: "UI Kit",
  tableTitle: "Bereiche",
  tableDescription: "Direkter Zugriff auf alle Verwaltungsbereiche mit aktuellem Status.",
  tableSection: "Bereich",
  tableSummary: "Zusammenfassung",
  tableStatus: "Status",
  tableAction: "Aktion",
  maintenanceStatusOn: "Aktiv",
  maintenanceStatusOff: "Inaktiv",
  authStatusOk: "Bereit",
  authStatusWarning: "Pruefen",
  authCard: "Root Zugang",
  authDescription: "Admin Passwort und Session Signatur sind gesetzt.",
  authDescriptionWarning: "Eine oder mehrere Root Variablen fehlen und sollten geprueft werden.",
  mediaCountDescription: "Verfuegbare Dateien fuer Portfolio und Inhalte.",
  projectCountDescription: "Gespeicherte Portfolio Projekte im System.",
  categoryCountDescription: "Portfolio Kategorien mit eigener Sortierung.",
  systemStatusTitle: "Systemstatus",
  systemStatusDescription: "Technischer Zustand des Root Bereichs und der wichtigsten Inhaltsbereiche.",
  maintenanceLabel: "Wartung",
  contentLabel: "Inhalte",
  contentDescription: "Portfolio, Media und Kategorien sind direkt aus diesem Bereich erreichbar.",
  publishedProjects: "Veroeffentlicht",
  totalProjects: "Projekte",
  totalCategories: "Kategorien",
  totalMedia: "Dateien",
};

export default async function RootPage({ searchParams }: RootPageProps) {
  const authConfigured = isAdminAuthConfigured();
  const basicConfigured = Boolean(
    process.env.ROOT_BASIC_AUTH_USER && process.env.ROOT_BASIC_AUTH_PASS,
  );
  const authenticated = isAdminAuthenticated();
  const lockState = getAdminLockState();

  async function loginAction(formData: FormData) {
    "use server";

    const password = String(formData.get("password") ?? "");
    const currentLockState = getAdminLockState();

    if (currentLockState.locked) {
      redirect("/root?error=locked");
    }

    if (!isAdminAuthConfigured() || !isPasswordValid(password)) {
      const failState = registerFailedAdminAttempt();
      if (failState.locked) {
        redirect("/root?error=locked");
      }

      redirect("/root?error=invalid");
    }

    resetAdminFailedAttempts();
    setAdminSessionCookie();
    redirect("/root");
  }

  async function logoutAction() {
    "use server";

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

  if (!authenticated) {
    return (
      <Container size="narrow" className="py-12">
        <MotionFade>
          <Card className="border-border/70 bg-card/95 shadow-sm">
            <CardHeader>
              <p className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
                <LockKeyhole className="h-4 w-4 text-brand-primary" />
                {copy.loginTitle}
              </p>
              <CardDescription>{copy.loginText}</CardDescription>
            </CardHeader>
            <CardContent>
              {!authConfigured ? (
                <p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                  {copy.configMissing}
                </p>
              ) : null}

              {!basicConfigured ? (
                <p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                  {copy.basicAuthMissing}
                </p>
              ) : null}

              {searchParams?.error === "invalid" ? (
                <p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
                  {copy.invalidLogin}
                </p>
              ) : null}

              {searchParams?.error === "locked" || lockState.locked ? (
                <p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
                  {copy.lockedLogin}
                </p>
              ) : null}

              <form action={loginAction} className="space-y-3">
                <Label htmlFor="password">{copy.passwordLabel}</Label>
                <Input id="password" type="password" name="password" required />
                <Button
                  type="submit"
                  disabled={!authConfigured || !basicConfigured || lockState.locked}
                >
                  <LockKeyhole className="h-4 w-4" />
                  {copy.loginButton}
                </Button>
              </form>
            </CardContent>
          </Card>
        </MotionFade>
      </Container>
    );
  }

  const [maintenanceEnabled, categories, projects, mediaAssets] = await Promise.all([
    getMaintenanceMode(),
    getAdminPortfolioCategories(),
    getAdminPortfolioProjects(),
    getAdminMediaAssets(),
  ]);
  const publishedProjects = projects.filter((project) => project.isPublished).length;
  const rootNavigation = getRootNavigation(copy, "overview");
  const authHealthy = authConfigured && basicConfigured;
  const sectionRows: Array<{
    label: string;
    summary: string;
    status: string;
    href: string;
    badgeVariant: BadgeProps["variant"];
    action: string;
  }> = [
    {
      label: copy.maintenanceTitle,
      summary: copy.maintenanceDescription,
      status: maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff,
      href: "/root/maintenance",
      badgeVariant: maintenanceEnabled ? "warning" : "success",
      action: copy.maintenanceAction,
    },
    {
      label: copy.mediaTitle,
      summary: `${mediaAssets.length} ${copy.totalMedia}`,
      status: copy.authStatusOk,
      href: "/root/media",
      badgeVariant: "outline" as const,
      action: copy.mediaAction,
    },
    {
      label: copy.portfolioTitle,
      summary: `${projects.length} ${copy.totalProjects} / ${categories.length} ${copy.totalCategories}`,
      status: `${publishedProjects} ${copy.publishedProjects}`,
      href: "/root/portfolio",
      badgeVariant: "outline" as const,
      action: copy.portfolioAction,
    },
    {
      label: copy.uiKitTitle,
      summary: copy.uiKitDescription,
      status: copy.authStatusOk,
      href: "/root/ui-kit",
      badgeVariant: "outline" as const,
      action: copy.uiKitAction,
    },
  ];

  return (
    <DashboardLayout
      title={copy.title}
      description={copy.subtitle}
      icon={LayoutDashboard}
      items={rootNavigation}
      sidebarFooter={
        <>
          <Button
            asChild
            variant={maintenanceEnabled ? "default" : "outline"}
            className="w-full justify-between"
          >
            <Link href="/root/maintenance">
              {copy.maintenance}
              <ShieldAlert className="h-4 w-4" />
            </Link>
          </Button>
          <Button asChild variant="outline" className="w-full justify-between">
            <Link href="/root/ui-kit">
              {copy.uiKit}
              <SwatchBook className="h-4 w-4" />
            </Link>
          </Button>
        </>
      }
      headerActions={
        <div className="flex flex-wrap items-center justify-end gap-2">
          {maintenanceEnabled ? (
            <Button asChild variant="destructive" className="hidden sm:inline-flex">
              <Link href="/root/maintenance">{copy.maintenanceVisitorsClosed}</Link>
            </Button>
          ) : null}
          <ThemeToggle ariaLabel="Theme wechseln" />
          <Button asChild variant="outline" size="sm">
            <Link href={getLocalizedPath("de")}>
              <ArrowLeft className="h-4 w-4" />
              {copy.backToSite}
            </Link>
          </Button>
          <form action={logoutAction}>
            <Button type="submit" variant="ghost" size="sm" className="text-destructive hover:bg-destructive/10 hover:text-destructive">
              <LogOut className="h-4 w-4" />
              {copy.logout}
            </Button>
          </form>
        </div>
      }
    >
      <div className="space-y-6">
        <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          <MotionFade delay={0.05}>
            <DashboardCard
              title={copy.maintenanceTitle}
              value={maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
              description={copy.maintenanceDescription}
              icon={ShieldAlert}
            />
          </MotionFade>
          <MotionFade delay={0.1}>
            <DashboardCard
              title={copy.totalMedia}
              value={String(mediaAssets.length)}
              description={copy.mediaCountDescription}
              icon={ImageIcon}
            />
          </MotionFade>
          <MotionFade delay={0.15}>
            <DashboardCard
              title={copy.totalProjects}
              value={String(projects.length)}
              description={copy.projectCountDescription}
              icon={FolderKanban}
            />
          </MotionFade>
          <MotionFade delay={0.2}>
            <DashboardCard
              title={copy.totalCategories}
              value={String(categories.length)}
              description={copy.categoryCountDescription}
              icon={Shapes}
            />
          </MotionFade>
        </section>

        <section className="grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,1fr)]">
          <MotionFade delay={0.25}>
            <Card className="border-border/70 bg-card/95 shadow-sm">
              <CardHeader>
                <CardTitle>{copy.tableTitle}</CardTitle>
                <CardDescription>{copy.tableDescription}</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>{copy.tableSection}</TableHead>
                      <TableHead>{copy.tableSummary}</TableHead>
                      <TableHead>{copy.tableStatus}</TableHead>
                      <TableHead className="text-right">{copy.tableAction}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {sectionRows.map((row) => (
                      <TableRow key={row.href}>
                        <TableCell className="font-medium">{row.label}</TableCell>
                        <TableCell className="text-muted-foreground">{row.summary}</TableCell>
                        <TableCell>
                          <Badge variant={row.badgeVariant}>{row.status}</Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <Button asChild variant="ghost" size="sm">
                            <Link href={row.href}>
                              {row.action}
                              <ExternalLink className="h-4 w-4" />
                            </Link>
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </MotionFade>

          <div className="grid gap-6">
            <MotionFade delay={0.3}>
              <Card className="border-border/70 bg-card/95 shadow-sm">
                <CardHeader>
                  <CardTitle>{copy.systemStatusTitle}</CardTitle>
                  <CardDescription>{copy.systemStatusDescription}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-lg border border-border bg-muted/40 p-4">
                    <div className="flex items-center justify-between gap-3">
                      <div>
                        <p className="text-sm font-medium text-foreground">{copy.authCard}</p>
                        <p className="mt-1 text-sm text-muted-foreground">
                          {authHealthy ? copy.authDescription : copy.authDescriptionWarning}
                        </p>
                      </div>
                      <Badge variant={authHealthy ? "success" : "warning"}>
                        {authHealthy ? copy.authStatusOk : copy.authStatusWarning}
                      </Badge>
                    </div>
                  </div>
                  <Separator />
                  <div className="space-y-3 text-sm">
                    <div className="flex items-center justify-between gap-4">
                      <span className="text-muted-foreground">{copy.maintenanceLabel}</span>
                      <Badge variant={maintenanceEnabled ? "warning" : "success"}>
                        {maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between gap-4">
                      <span className="text-muted-foreground">{copy.contentLabel}</span>
                      <span className="font-medium text-foreground">
                        {`${publishedProjects} ${copy.publishedProjects} / ${projects.length} ${copy.totalProjects}`}
                      </span>
                    </div>
                    <p className="text-muted-foreground">{copy.contentDescription}</p>
                  </div>
                </CardContent>
              </Card>
            </MotionFade>
          </div>
        </section>
      </div>
    </DashboardLayout>
  );
}