import Link from "next/link";
import { getServerSession } from "next-auth";
import { authOptions } from "../../lib/auth/options";
import { prisma } from "../../lib/db/prisma";
import { TeamActions } from "./team-actions";
import { TeamForm } from "./team-form";

export default async function TeamsPage() {
  const session = await getServerSession(authOptions);
  const where = session?.user.systemRole === "SYSTEM_ADMIN" ? {} : { organizationId: session?.user.organizationId! };
  const [teams, users] = await Promise.all([
    prisma.team.findMany({ where, include: { users: true }, orderBy: { name: "asc" } }),
    prisma.user.findMany({ where, orderBy: { name: "asc" } })
  ]);

  return (
    <div>
      <h1 className="text-3xl font-semibold">Teams</h1>
      <p className="mt-2 text-slate-600">Create teams, assign users, and review team membership.</p>
      <section className="mt-6 grid gap-5 lg:grid-cols-[1fr_360px]">
        <div className="grid gap-3">
          {teams.map((team) => (
            <article className="rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm" key={team.id}>
              <div className="flex items-center justify-between">
                <Link className="font-semibold hover:text-brand-primary" href={`/admin/teams/${team.id}`}>{team.name}</Link>
                <span className="text-sm text-slate-500">{team.users.length} users</span>
              </div>
              <p className="mt-2 text-sm text-slate-600">{team.users.map((user) => user.name ?? user.email).join(", ") || "No users assigned"}</p>
              <div className="mt-4 flex items-center gap-2">
                <Link className="rounded-lg border border-slate-300 px-3 py-1 text-xs font-semibold" href={`/admin/teams/${team.id}`}>Edit</Link>
                <TeamActions id={team.id} userCount={team.users.length} />
              </div>
            </article>
          ))}
        </div>
        <TeamForm users={users} />
      </section>
    </div>
  );
}