pelagia-portal/App/app/(portal)/admin/users/user-form.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { AdminDialog } from "@/components/ui/admin-dialog";
import { createUser, updateUser, toggleUserActive } from "./actions";

type UserRow = {
  id: string;
  employeeId: string;
  name: string;
  email: string;
  role: string;
  isActive: boolean;
};

const ROLES = [
  { value: "TECHNICAL", label: "Technical" },
  { value: "MANNING", label: "Manning" },
  { value: "ACCOUNTS", label: "Accounts" },
  { value: "MANAGER", label: "Manager" },
  { value: "SUPERUSER", label: "SuperUser" },
  { value: "AUDITOR", label: "Auditor" },
  { value: "ADMIN", label: "Admin" },
];

function UserFormFields({ user }: { user?: UserRow }) {
  return (
    <div className="space-y-3">
      {user ? (
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-xs font-medium text-neutral-700 mb-1">Employee ID</label>
            <p className="font-mono text-sm text-neutral-700 px-3 py-2 bg-neutral-50 rounded-lg border border-neutral-200">{user.employeeId}</p>
          </div>
          <div>
            <label className="block text-xs font-medium text-neutral-700 mb-1">Role *</label>
            <select name="role" defaultValue={user.role} required
              className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20">
              {ROLES.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
            </select>
          </div>
        </div>
      ) : (
        <div>
          <label className="block text-xs font-medium text-neutral-700 mb-1">Role *</label>
          <select name="role" defaultValue="TECHNICAL" required
            className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20">
            {ROLES.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
          </select>
        </div>
      )}
      <div>
        <label className="block text-xs font-medium text-neutral-700 mb-1">Full Name *</label>
        <input name="name" defaultValue={user?.name} required
          className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20" />
      </div>
      <div>
        <label className="block text-xs font-medium text-neutral-700 mb-1">Email *</label>
        <input name="email" type="email" defaultValue={user?.email} required
          className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20" />
      </div>
      <div>
        <label className="block text-xs font-medium text-neutral-700 mb-1">
          {user ? "New Password (leave blank to keep current)" : "Password *"}
        </label>
        <input name="password" type="password" minLength={8}
          required={!user}
          className="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20" />
      </div>
    </div>
  );
}

export function AddUserButton() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPending(true);
    setError("");
    const result = await createUser(new FormData(e.currentTarget));
    if ("error" in result) { setError(result.error); setPending(false); }
    else { setPending(false); setOpen(false); router.refresh(); }
  }

  return (
    <>
      <button onClick={() => setOpen(true)}
        className="rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-primary-700 transition-colors">
        + Add User
      </button>
      <AdminDialog title="Add User" open={open} onClose={() => setOpen(false)}>
        <form onSubmit={handleSubmit} className="space-y-4">
          <UserFormFields />
          {error && <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
          <div className="flex justify-end gap-3 pt-1">
            <button type="button" onClick={() => setOpen(false)}
              className="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50">
              Cancel
            </button>
            <button type="submit" disabled={pending}
              className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-60">
              {pending ? "Creating…" : "Create User"}
            </button>
          </div>
        </form>
      </AdminDialog>
    </>
  );
}

export function EditUserButton({ user }: { user: UserRow }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);
  const [toggling, setToggling] = useState(false);
  const [error, setError] = useState("");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPending(true);
    setError("");
    const fd = new FormData(e.currentTarget);
    fd.set("id", user.id);
    const result = await updateUser(fd);
    if ("error" in result) { setError(result.error); setPending(false); }
    else { setPending(false); setOpen(false); router.refresh(); }
  }

  async function handleToggle() {
    setToggling(true);
    await toggleUserActive(user.id);
    router.refresh();
    setToggling(false);
  }

  return (
    <>
      <div className="flex items-center gap-2">
        <button onClick={() => setOpen(true)}
          className="rounded border border-primary-200 bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 transition-colors">
          Edit
        </button>
        <button onClick={handleToggle} disabled={toggling}
          className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${user.isActive ? "border-danger-200 bg-danger-50 text-danger-700 hover:bg-danger-100" : "border-success-200 bg-success-50 text-success-700 hover:bg-success-100"}`}>
          {toggling ? "…" : user.isActive ? "Deactivate" : "Activate"}
        </button>
      </div>
      <AdminDialog title="Edit User" open={open} onClose={() => setOpen(false)}>
        <form onSubmit={handleSubmit} className="space-y-4">
          <UserFormFields user={user} />
          {error && <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
          <div className="flex justify-end gap-3 pt-1">
            <button type="button" onClick={() => setOpen(false)}
              className="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50">
              Cancel
            </button>
            <button type="submit" disabled={pending}
              className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-60">
              {pending ? "Saving…" : "Save Changes"}
            </button>
          </div>
        </form>
      </AdminDialog>
    </>
  );
}