import type { Metadata } from "next";
import { requirePermission } from "@/lib/auth/session";
import { prisma } from "@/lib/prisma";
import { PageHeader } from "@/components/ui/PageHeader";
import { StatCard } from "@/components/ui/StatCard";
import { AdminTabs } from "./AdminTabs";

export const metadata: Metadata = { title: "Administration" };

const statusLabel: Record<string, string> = {
  ACTIVE: "Aktiv",
  INVITED: "Eingeladen",
  SUSPENDED: "Gesperrt",
};

export default async function AdminPage() {
  const session = await requirePermission("admin.access");
  const perms = session.user.permissions ?? [];

  const [users, roles, teamCount, permissionCount] = await Promise.all([
    prisma.user.findMany({
      orderBy: { createdAt: "asc" },
      select: {
        id: true,
        name: true,
        email: true,
        status: true,
        lastLoginAt: true,
        roles: { select: { role: { select: { name: true } } } },
      },
    }),
    prisma.role.findMany({
      orderBy: { rank: "asc" },
      select: {
        id: true,
        name: true,
        description: true,
        _count: { select: { permissions: true, users: true } },
      },
    }),
    prisma.team.count(),
    prisma.permission.count(),
  ]);

  return (
    <div className="flex flex-col gap-5">
      <PageHeader
        eyebrow="System"
        title="Adminbereich"
        description="Nutzer, Rollen, Teams und Systemeinstellungen zentral verwalten."
      />

      <AdminTabs allowed={perms} />

      <section className="grid grid-cols-2 gap-4 xl:grid-cols-4">
        <StatCard label="Nutzer" value={users.length} icon="user" glow="var(--blue)" delay={0} />
        <StatCard label="Teams" value={teamCount} icon="creators" glow="var(--pink)" delay={70} />
        <StatCard label="Rollen" value={roles.length} icon="shield" glow="var(--violet)" delay={140} />
        <StatCard label="Berechtigungen" value={permissionCount} icon="settings" glow="var(--cyan)" delay={210} />
      </section>

      <section className="card" data-reveal>
        <div className="mb-4 flex items-center justify-between">
          <h2>Nutzer</h2>
          <span className="badge">{users.length} Konten</span>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>Name</th>
                <th>E-Mail</th>
                <th>Rollen</th>
                <th>Status</th>
                <th>Letzter Login</th>
              </tr>
            </thead>
            <tbody>
              {users.map((u) => (
                <tr key={u.id}>
                  <td className="font-bold">{u.name}</td>
                  <td className="text-muted">{u.email}</td>
                  <td>
                    <div className="flex flex-wrap gap-1">
                      {u.roles.map((r, i) => (
                        <span key={i} className="badge">
                          {r.role.name}
                        </span>
                      ))}
                    </div>
                  </td>
                  <td>{statusLabel[u.status] ?? u.status}</td>
                  <td className="text-muted">
                    {u.lastLoginAt
                      ? new Date(u.lastLoginAt).toLocaleString("de-DE")
                      : "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="card" data-reveal data-reveal-delay={120}>
        <h2 className="mb-4">Rollen &amp; Rechte</h2>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
          {roles.map((r) => (
            <div
              key={r.id}
              className="card-sm"
              style={{ background: "rgba(13,19,42,.4)" }}
            >
              <div className="flex items-center justify-between">
                <h3>{r.name}</h3>
                <span className="badge">{r._count.users} Nutzer</span>
              </div>
              <p className="text-muted mt-1 text-sm">{r.description}</p>
              <div className="mt-3">
                <span className="badge">{r._count.permissions} Rechte</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}