import { GraduationCap } from "lucide-react";
import { UserRole } from "@prisma/client";

import { requireRole } from "@/lib/auth-utils";
import { prisma } from "@/lib/prisma";
import { ErzieherList } from "./_components/erzieher-list";

export const metadata = { title: "ErzieherInnen · Kita-Planer" };

export default async function ErzieherPage() {
  const session = await requireRole([UserRole.ADMIN]);

  const educators = await prisma.educator.findMany({
    where: { kitaId: session.user.kitaId! },
    select: {
      id: true,
      firstName: true,
      lastName: true,
      active: true,
    },
    orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
  });
  const activeCount = educators.filter((educator) => educator.active).length;

  return (
    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
        <div>
          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
            VERWALTUNG · TEAM
          </p>
          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
            ErzieherInnen{" "}
            <em className="font-normal italic text-[var(--accent-deep)]">
              verwalten
            </em>
          </h1>
          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
            Stammdaten des Kita-Personals für interne Planung und spätere
            Notdienst-Alarmierung.
          </p>
        </div>
        <div className="flex shrink-0 flex-wrap gap-2">
          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
            <GraduationCap className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
            {educators.length} im Team
          </span>
          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
            {activeCount} aktiv
          </span>
        </div>
      </header>

      <ErzieherList educators={educators} />
    </div>
  );
}