import { auth } from "@/lib/auth";
import { redirect } from "@/i18n/navigation";
import { getTranslations, setRequestLocale } from "next-intl/server";
import Badge from "@/components/ui/Badge";
import ProfileSettingsForms from "@/components/profile/ProfileSettingsForms";
import DevModePanel from "@/components/profile/DevModePanel";
import { formatUserName, userInitial } from "@/lib/user-display";
import { canUseDevMode, isImpersonating } from "@/lib/session-utils";

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

  const t = await getTranslations("profile");
  const session = await auth();
  if (!session?.user?.id) {
    redirect({ href: "/login", locale });
    return null;
  }

  const role = session.user.role;
  const permissions: string[] = session.user.permissions ?? [];
  const displayName =
    session.user.firstName && session.user.lastName
      ? formatUserName({
          firstName: session.user.firstName,
          lastName: session.user.lastName,
        })
      : session.user.name?.trim() || t("unnamed");
  const initial =
    session.user.firstName && session.user.lastName
      ? userInitial({
          firstName: session.user.firstName,
          lastName: session.user.lastName,
        })
      : displayName[0]?.toUpperCase() ?? "?";
  const roleLabel = role?.name?.replace(/_/g, " ") ?? t("noRoleAssigned");
  const showDevMode = canUseDevMode(session);
  const impersonating = isImpersonating(session);

  return (
    <div className="w-full space-y-5 sm:space-y-6">
      <div>
        <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">{t("title")}</h1>
        <p className="mt-1 text-sm text-[var(--text-muted)]">{t("subtitle")}</p>
      </div>

      <section className="relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg-elevated)]">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_0%_0%,var(--accent-muted),transparent_55%)]" />
        <div className="relative p-5 sm:p-6">
          <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6">
            <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl border border-[var(--accent)]/25 bg-[var(--accent-muted)] text-2xl font-bold text-[var(--accent)] sm:h-[4.5rem] sm:w-[4.5rem] sm:text-3xl">
              {initial}
            </div>

            <div className="min-w-0 flex-1">
              <h2 className="truncate text-xl font-semibold tracking-tight sm:text-2xl">
                {displayName}
              </h2>
              {session.user.username && (
                <p className="mt-1 truncate text-sm text-[var(--text-muted)]">
                  @{session.user.username}
                </p>
              )}
              <p className="mt-1 truncate text-sm text-[var(--text-muted)]">
                {session.user.email}
              </p>
              <div className="mt-3.5 flex flex-wrap items-center gap-2">
                {role ? (
                  <Badge variant="role" role={role.name}>
                    {roleLabel}
                  </Badge>
                ) : (
                  <Badge>{roleLabel}</Badge>
                )}
                {impersonating && (
                  <Badge variant="danger">{t("debuggingUser")}</Badge>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {!impersonating && (
        <ProfileSettingsForms
          initialFirstName={session.user.firstName ?? ""}
          initialLastName={session.user.lastName ?? ""}
          initialUsername={session.user.username ?? ""}
          email={session.user.email ?? ""}
        />
      )}

      {showDevMode && (
        <DevModePanel
          userId={session.user.id}
          permissions={permissions}
          isImpersonating={impersonating}
        />
      )}
    </div>
  );
}