import type { Metadata } from "next";
import { requireSession } from "@/lib/auth/session";
import { prisma } from "@/lib/prisma";
import { ROLES, type RoleKey } from "@/lib/rbac/catalog";
import { PageHeader } from "@/components/ui/PageHeader";
import { AvatarUploader } from "@/components/ui/AvatarUploader";
import { ChangePasswordForm } from "./ChangePasswordForm";

export const metadata: Metadata = { title: "Mein Konto" };

export default async function AccountPage() {
  const session = await requireSession();
  const user = await prisma.user.findUnique({
    where: { id: session.user.id },
    select: {
      name: true,
      email: true,
      jobTitle: true,
      avatarUrl: true,
      lastLoginAt: true,
      createdAt: true,
    },
  });

  const roleLabels = (session.user.roles ?? [])
    .filter((k): k is RoleKey => k in ROLES)
    .map((k) => ROLES[k].name);

  return (
    <div className="flex flex-col gap-5">
      <PageHeader
        eyebrow="Konto"
        title="Mein Konto"
        description="Verwalte deine persönlichen Angaben und deine Sicherheitseinstellungen."
      />

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
        <div className="card flex flex-col gap-4" data-reveal>
          <h2>Profil</h2>
          <AvatarUploader
            endpoint="/api/account/avatar"
            currentUrl={user?.avatarUrl ?? null}
            name={user?.name ?? "?"}
            size={84}
          />
          <dl className="flex flex-col gap-3 text-sm">
            <div className="flex justify-between gap-4">
              <dt className="text-muted">Name</dt>
              <dd className="font-bold">{user?.name}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-muted">E-Mail</dt>
              <dd className="font-bold">{user?.email}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-muted">Funktion</dt>
              <dd className="font-bold">{user?.jobTitle ?? "—"}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-muted">Letzter Login</dt>
              <dd className="font-bold">
                {user?.lastLoginAt
                  ? new Date(user.lastLoginAt).toLocaleString("de-DE")
                  : "—"}
              </dd>
            </div>
          </dl>
          <div className="flex flex-wrap gap-2">
            {roleLabels.map((r) => (
              <span key={r} className="badge">
                {r}
              </span>
            ))}
          </div>
        </div>

        <div className="card lg:col-span-2" data-reveal data-reveal-delay={120}>
          <h2 className="mb-1">Passwort ändern</h2>
          <p className="text-muted mb-4 text-sm">
            Mindestens 10 Zeichen mit Groß- und Kleinbuchstaben sowie einer Ziffer.
          </p>
          <ChangePasswordForm />
        </div>
      </div>
    </div>
  );
}