import {notFound, redirect} from "next/navigation";
import {auth} from "@/auth";
import {prisma} from "@/lib/db/prisma";
import {InviteStaffForm} from "./invite-staff-form";

export default async function StaffPage({params}: {params: Promise<{tenantSlug: string; locale: string}>}) {
  const {tenantSlug, locale} = await params;
  const session = await auth();
  if (!session?.user?.id) redirect(`/${locale}/auth/sign-in`);

  const tenant = await prisma.tenant.findUnique({where: {slug: tenantSlug}});
  if (!tenant) notFound();

  const memberships = await prisma.membership.findMany({
    where: {tenantId: tenant.id},
    include: {user: {select: {firstName: true, lastName: true, email: true, status: true}}}
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Staff</h1>
          <p className="mt-1 text-slate-500">{memberships.length} member{memberships.length !== 1 ? "s" : ""}</p>
        </div>
      </div>

      <InviteStaffForm tenantSlug={tenantSlug} />

      <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200">
              <th className="px-3 py-3 text-left font-semibold">Name</th>
              <th className="px-3 py-3 text-left font-semibold">Email</th>
              <th className="px-3 py-3 text-left font-semibold">Role</th>
              <th className="px-3 py-3 text-left font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {memberships.map((m) => {
              const name = m.user.firstName ? `${m.user.firstName} ${m.user.lastName ?? ""}` : m.user.email;
              return (
                <tr key={m.id} className="border-b border-slate-100 hover:bg-slate-50">
                  <td className="px-3 py-3">
                    <div className="flex items-center gap-2">
                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-700">
                        {name.charAt(0).toUpperCase()}
                      </div>
                      <span className="font-medium">{name}</span>
                    </div>
                  </td>
                  <td className="px-3 py-3">{m.user.email}</td>
                  <td className="px-3 py-3">
                    <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 capitalize">
                      {m.role.replace(/_/g, " ")}
                    </span>
                  </td>
                  <td className="px-3 py-3">
                    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${m.user.status === "ACTIVE" ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-500"}`}>
                      {m.user.status}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}