pelagia-portal/App/app/(portal)/admin/accounts/account-form.tsx

"use client";

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

type ParentOption = { id: string; code: string; name: string; parentId: string | null };

type AccountRow = {
  id: string;
  code: string;
  name: string;
  description: string | null;
  parentId: string | null;
  isActive: boolean;
};

const INPUT = "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";

function AccountFormFields({
  account,
  allAccounts,
}: {
  account?: AccountRow;
  allAccounts: ParentOption[];
}) {
  // Only allow parent to be a top-level (parentId == null) or sub-category (parentId != null but has no grandparent)
  // i.e. depth 0 or depth 1 nodes can be parents
  const topLevel = allAccounts.filter((a) => a.parentId === null && (!account || a.id !== account.id));
  const subLevel = allAccounts.filter((a) => a.parentId !== null && (!account || a.id !== account.id));

  return (
    <div className="space-y-3">
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="block text-xs font-medium text-neutral-700 mb-1">Code * <span className="font-normal text-neutral-400">(6 digits)</span></label>
          <input
            name="code"
            defaultValue={account?.code}
            required
            maxLength={6}
            pattern="\d{6}"
            placeholder="e.g. 100101"
            className={INPUT}
          />
        </div>
        <div>
          <label className="block text-xs font-medium text-neutral-700 mb-1">Name *</label>
          <input name="name" defaultValue={account?.name} required className={INPUT} />
        </div>
      </div>
      <div>
        <label className="block text-xs font-medium text-neutral-700 mb-1">Parent Category</label>
        <select name="parentId" defaultValue={account?.parentId ?? ""} className={INPUT}>
          <option value="">— Top-level category —</option>
          {topLevel.length > 0 && (
            <optgroup label="Top categories">
              {topLevel.map((a) => (
                <option key={a.id} value={a.id}>{a.code} — {a.name}</option>
              ))}
            </optgroup>
          )}
          {subLevel.length > 0 && (
            <optgroup label="Sub-categories">
              {subLevel.map((a) => (
                <option key={a.id} value={a.id}>{a.code} — {a.name}</option>
              ))}
            </optgroup>
          )}
        </select>
      </div>
      <div>
        <label className="block text-xs font-medium text-neutral-700 mb-1">Description</label>
        <input name="description" defaultValue={account?.description ?? ""} className={INPUT} placeholder="Optional" />
      </div>
    </div>
  );
}

export function AddAccountButton({ allAccounts }: { allAccounts: ParentOption[] }) {
  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 createAccount(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 Accounting Code
      </button>
      <AdminDialog title="Add Accounting Code" open={open} onClose={() => setOpen(false)}>
        <form onSubmit={handleSubmit} className="space-y-4">
          <AccountFormFields allAccounts={allAccounts} />
          {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 Accounting Code"}
            </button>
          </div>
        </form>
      </AdminDialog>
    </>
  );
}

export function EditAccountButton({
  account,
  allAccounts,
  open: controlledOpen,
  onOpenChange,
}: {
  account: AccountRow;
  allAccounts: ParentOption[];
  open?: boolean;
  onOpenChange?: (v: boolean) => void;
}) {
  const router = useRouter();
  const [internalOpen, setInternalOpen] = useState(false);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : internalOpen;
  const setOpen = isControlled ? (onOpenChange ?? (() => {})) : setInternalOpen;

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

  return (
    <>
      {!isControlled && (
        <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>
      )}
      <AdminDialog title="Edit Accounting Code" open={open} onClose={() => setOpen(false)}>
        <form onSubmit={handleSubmit} className="space-y-4">
          <AccountFormFields account={account} allAccounts={allAccounts} />
          {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>
    </>
  );
}