"use client";

import Image from "next/image";
import type { ReactElement } from "react";
import { useTranslation } from "react-i18next";

import { AdminLanguageSwitcher } from "@/components/admin/admin-language-switcher";
import { ModuleScaffold } from "@/components/admin/module-scaffold";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { authModuleMeta } from "@/modules/auth/meta";

function LoginCheckingBackdrop(): ReactElement {
  return (
    <>
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_85%_50%_at_50%_-5%,rgb(59_130_246/0.09),transparent)] dark:bg-[radial-gradient(ellipse_85%_50%_at_50%_-5%,rgb(56_189_248/0.12),transparent)]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_bottom,transparent_0%,var(--background)_100%)] opacity-90"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.35] dark:opacity-[0.2]"
        style={{
          backgroundImage: `linear-gradient(to right, var(--border) 1px, transparent 1px),
            linear-gradient(to bottom, var(--border) 1px, transparent 1px)`,
          backgroundSize: "48px 48px",
        }}
      />
    </>
  );
}

function LoginCheckingSkeletonCard(): ReactElement {
  const { t } = useTranslation("auth");

  return (
    <Card className="relative w-full max-w-[420px] rounded-2xl border border-border/70 bg-card/90 shadow-2xl shadow-black/[0.06] ring-1 ring-black/[0.03] backdrop-blur-md dark:border-border/50 dark:bg-card/85 dark:shadow-black/25 dark:ring-white/[0.06]">
      <CardHeader className="flex flex-row items-center gap-3.5 border-b border-border/60 px-6 py-6 sm:px-8">
        <Skeleton className="size-10 shrink-0 rounded-xl" />
        <div className="min-w-0 flex-1 space-y-2">
          <Skeleton className="h-5 w-32" />
          <Skeleton className="h-3.5 w-48 max-w-full" />
        </div>
      </CardHeader>
      <CardContent className="space-y-5 px-6 pb-8 pt-6 sm:px-8">
        <div className="space-y-2">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-11 w-full rounded-md" />
        </div>
        <div className="space-y-2">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-11 w-full rounded-md" />
        </div>
        <div className="space-y-2">
          <Skeleton className="h-4 w-14" />
          <div className="flex gap-3">
            <Skeleton className="h-11 min-w-0 flex-1 rounded-md" />
            <Skeleton className="h-11 w-[156px] shrink-0 rounded-xl" />
          </div>
        </div>
        <Skeleton className="mt-2 h-11 w-full rounded-md" />
      </CardContent>
      <span className="sr-only">
        {t("loginTitle", { defaultValue: authModuleMeta.title })}
      </span>
    </Card>
  );
}

/** 工作台内容区骨架（外层已由 {@link AdminShell} 提供侧栏与顶栏） */
export function AdminShellContentSkeleton(): ReactElement {
  const { t } = useTranslation("common");

  return (
    <ModuleScaffold className="gap-5">
      <span className="sr-only" role="status" aria-live="polite">
        {t("auth.checking", { defaultValue: "Checking sign-in status…" })}
      </span>
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="space-y-2">
          <Skeleton className="h-5 w-28" />
          <Skeleton className="h-3 w-36" />
        </div>
        <Skeleton className="h-8 w-16 rounded-md" />
      </div>

      <Skeleton className="h-[5.5rem] w-full rounded-xl" />

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-[11.5rem] w-full rounded-xl" />
        ))}
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
        <Skeleton className="h-72 rounded-xl xl:col-span-8" />
        <Skeleton className="h-72 rounded-xl xl:col-span-4" />
      </div>
    </ModuleScaffold>
  );
}

export function AdminAuthCheckingScreen({
  variant,
}: {
  variant: "login" | "shell";
}): ReactElement {
  const { t } = useTranslation("common");

  if (variant === "login") {
    return (
      <div
        className="relative flex h-dvh max-h-dvh w-full min-h-0 flex-col overflow-hidden lg:flex-row"
        role="status"
        aria-busy="true"
        aria-live="polite"
        aria-label={t("auth.checking", { defaultValue: "Checking sign-in status…" })}
      >
        <LoginCheckingBackdrop />

        <div className="relative z-10 flex min-h-0 max-h-[38dvh] shrink-0 items-center justify-center overflow-hidden px-6 py-4 lg:max-h-none lg:w-1/2 lg:flex-1 lg:px-10 lg:py-8">
          <Image
            src="/illustration.png"
            alt=""
            width={1024}
            height={1536}
            priority
            className="mx-auto max-h-full w-auto max-w-full object-contain opacity-95"
          />
        </div>

        <div className="relative z-10 flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 py-6 lg:w-1/2 lg:py-8">
          <div className="absolute right-4 top-4 z-20 sm:right-6 sm:top-6">
            <AdminLanguageSwitcher />
          </div>
          <LoginCheckingSkeletonCard />
        </div>
      </div>
    );
  }

  return <AdminShellContentSkeleton />;
}
