import {notFound} from "next/navigation";
import Link from "next/link";
import {prisma} from "@/lib/db/prisma";

type TenantUsersPageProps = {
  params: Promise<{tenantId: string}>;
};

export default async function TenantUsersPage({params}: TenantUsersPageProps) {
  const {tenantId} = await params;

  const tenant = await prisma.tenant.findUnique({
    where: {id: tenantId},
    select: {name: true, slug: true}
  });

  if (!tenant) notFound();

  const memberships = await prisma.membership.findMany({
    where: {tenantId},
    include: {
      user: {
        select: {
          id: true,
          firstName: true,
          lastName: true,
          email: true,
          phone: true,
          status: true,
          lastLoginAt: true
        }
      }
    },
    orderBy: {createdAt: "asc"}
  });

  return (
    <div className="space-y-6 p-6">
      <div>
        <Link href={`/super-admin/tenants/${tenantId}`} className="mb-2 inline-flex text-sm text-slate-500 hover:text-slate-700 transition">
          ← Back to {tenant.name}
        </Link>
        <h1 className="text-2xl font-bold text-slate-900">Users of {tenant.name}</h1>
        <p className="mt-1 text-slate-500">{memberships.length} members</p>
      </div>

      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        <table className="min-w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200 bg-slate-50">
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Name</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Email</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Phone</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Role</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">User Status</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Last Login</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {memberships.map((m) => (
              <tr key={m.id} className="hover:bg-slate-50 transition">
                <td className="px-4 py-3 font-medium text-slate-900">
                  {m.user.firstName ? `${m.user.firstName} ${m.user.lastName ?? ""}`.trim() : "—"}
                </td>
                <td className="px-4 py-3 text-slate-600">{m.user.email}</td>
                <td className="px-4 py-3 text-slate-500">{m.user.phone ?? "—"}</td>
                <td className="px-4 py-3">
                  <span className="rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
                    {m.role.replace(/_/g, " ")}
                  </span>
                </td>
                <td className="px-4 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-red-100 text-red-700"
                    }`}
                  >
                    {m.user.status}
                  </span>
                </td>
                <td className="px-4 py-3 text-slate-500">
                  {m.user.lastLoginAt ? new Date(m.user.lastLoginAt).toLocaleDateString() : "Never"}
                </td>
              </tr>
            ))}
            {memberships.length === 0 && (
              <tr>
                <td className="px-4 py-8 text-center text-slate-400" colSpan={6}>
                  No users found.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}