import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { Users, Shield, KeyRound, ArrowRight } from "lucide-react";
import { Link, redirect } from "@/i18n/navigation";
import DashboardAccountCard from "@/components/dashboard/DashboardAccountCard";
import { formatUserName } from "@/lib/user-display";
import { usesBusinessPanelNav } from "@/lib/session-utils";

export default async function DashboardPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);

  const t = await getTranslations("dashboard");
  const session = await auth();

  if (usesBusinessPanelNav(session)) {
    redirect({ href: "/dashboard/business", locale });
    return null;
  }

  const [userCount, roleCount, permCount] = await Promise.all([
    prisma.user.count(),
    prisma.role.count(),
    prisma.permission.count(),
  ]);

  const roleName: string = (session?.user as any).role?.name ?? "USER";
  const permissions: string[] = (session?.user as any).permissions ?? [];
  const firstName = session?.user.firstName ?? session?.user.name?.split(" ")[0] ?? "there";
  const userName =
    session?.user.firstName && session?.user.lastName
      ? formatUserName({
          firstName: session.user.firstName,
          lastName: session.user.lastName,
        })
      : session?.user.name ?? "";
  const username = session?.user.username ?? "";
  const userId = session?.user.id ?? "";
  const userEmail = session?.user.email ?? "";

  const stats = [
    { label: t("totalUsers"), value: userCount, icon: Users, href: "/dashboard/users" as const },
    { label: t("roles"), value: roleCount, icon: Shield, href: "/dashboard/roles" as const },
    { label: t("permissions"), value: permCount, icon: KeyRound, href: "/dashboard/roles" as const },
  ];

  return (
    <div className="w-full space-y-6 sm:space-y-8">
      <div>
        <h1 className="text-xl font-semibold tracking-tight sm:text-2xl lg:text-3xl">
          {t("greeting", { name: firstName })}
        </h1>
        <p className="mt-1.5 text-sm text-[var(--text-muted)] sm:text-base">{t("overview")}</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {stats.map((stat) => (
          <Link
            key={stat.label}
            href={stat.href}
            className="group cursor-pointer rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4 transition-all hover:border-[var(--accent)]/30 sm:p-5"
          >
            <div className="flex items-start justify-between">
              <div className="w-10 h-10 rounded-lg bg-[var(--accent-muted)] border border-[var(--accent)]/20 flex items-center justify-center">
                <stat.icon className="w-5 h-5 text-[var(--accent)]" />
              </div>
              <ArrowRight className="w-4 h-4 text-[var(--text-faint)] group-hover:text-[var(--accent)] group-hover:translate-x-0.5 transition-all rtl:rotate-180" />
            </div>
            <p className="text-3xl font-semibold mt-4 tracking-tight">{stat.value}</p>
            <p className="text-sm text-[var(--text-muted)] mt-0.5">{stat.label}</p>
          </Link>
        ))}
      </div>

      <DashboardAccountCard
        title={t("yourAccount")}
        name={userName}
        username={username}
        email={userEmail}
        userId={userId}
        roleName={roleName}
        permissions={permissions}
        permissionsGrantedLabel={t("permissionsGranted", { count: permissions.length })}
        activePermissionsLabel={t("activePermissions")}
        moreLabel={t("more", { count: permissions.length - 8 })}
      />
    </div>
  );
}