import { auth } from "@/auth";
import { db } from "@/lib/db";
import { hasPermission } from "@/lib/permissions";
import { redirect } from "next/navigation";
import { formatDate } from "@/lib/utils";
import { AddUserButton, EditUserButton } from "./user-form";
import { ConfirmDeleteButton } from "@/components/ui/confirm-delete-button";
import { GrantSuperUserButton } from "./grant-superuser-button";
import { deleteUser } from "./actions";
import type { Metadata } from "next";

export const metadata: Metadata = { title: "User Management" };

const ROLE_LABELS: Record<string, string> = {
  TECHNICAL: "Technical",
  MANNING: "Manning",
  ACCOUNTS: "Accounts",
  MANAGER: "Manager",
  SUPERUSER: "SuperUser",
  AUDITOR: "Auditor",
  ADMIN: "Admin",
};

export default async function AdminUsersPage() {
  const session = await auth();
  if (!session?.user) redirect("/login");

  if (!hasPermission(session.user.role, "manage_users")) redirect("/dashboard");

  const users = await db.user.findMany({ orderBy: { createdAt: "desc" } });

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-neutral-900">User Management</h1>
        <AddUserButton />
      </div>

      <div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-neutral-50 border-b border-neutral-200">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Employee ID</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Name</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Email</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Role</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Created</th>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {users.map((user) => (
              <tr key={user.id} className="hover:bg-neutral-50">
                <td className="px-4 py-3 font-mono text-xs text-neutral-600">{user.employeeId}</td>
                <td className="px-4 py-3 font-medium text-neutral-900">{user.name}</td>
                <td className="px-4 py-3 text-neutral-600">{user.email}</td>
                <td className="px-4 py-3">
                  <span className="rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">
                    {ROLE_LABELS[user.role] ?? user.role}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    user.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"
                  }`}>
                    {user.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
                <td className="px-4 py-3 text-neutral-500">{formatDate(user.createdAt)}</td>
                <td className="px-4 py-3">
                  <span className="flex items-center gap-3 flex-wrap">
                    {user.role !== "SUPERUSER" && user.role !== "ADMIN" && (
                      <GrantSuperUserButton userId={user.id} />
                    )}
                    <EditUserButton user={{
                      id: user.id,
                      employeeId: user.employeeId,
                      name: user.name,
                      email: user.email,
                      role: user.role,
                      isActive: user.isActive,
                    }} />
                    <ConfirmDeleteButton onDelete={deleteUser.bind(null, user.id)} label={user.name} />
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}