pelagia-portal/App/app/(portal)/admin/terms/terms-table.tsx

"use client";

import { useState } from "react";
import { useTableControls } from "@/components/ui/use-table-controls";
import { TableControls, SortableTh } from "@/components/ui/table-controls";
import { RowActionsMenu, RowActionsItem, RowActionsDestructiveItem, RowActionsSeparator } from "@/components/ui/row-actions-menu";
import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import { AddTermButton, EditTermButton, type TermRow } from "./terms-form";
import { deleteTerm, toggleTermActive } from "./actions";

const CHIPS = ["Active", "Inactive"];

function TermActionsMenu({ term, categoryNames }: { term: TermRow; categoryNames: string[] }) {
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [toggleOpen, setToggleOpen] = useState(false);

  return (
    <>
      <RowActionsMenu>
        <RowActionsItem onClick={() => setEditOpen(true)}>Edit</RowActionsItem>
        <RowActionsItem onClick={() => setToggleOpen(true)}>
          {term.isActive ? "Deactivate" : "Activate"}
        </RowActionsItem>
        <RowActionsSeparator />
        <RowActionsDestructiveItem onClick={() => setDeleteOpen(true)}>Delete</RowActionsDestructiveItem>
      </RowActionsMenu>

      <EditTermButton term={term} categoryNames={categoryNames} open={editOpen} onOpenChange={setEditOpen} />
      <DeleteConfirmDialog
        open={deleteOpen}
        onOpenChange={setDeleteOpen}
        label={term.text}
        onConfirm={() => deleteTerm(term.id)}
      />
      <ConfirmDialog
        open={toggleOpen}
        onOpenChange={setToggleOpen}
        title={term.isActive ? "Deactivate clause?" : "Activate clause?"}
        description={
          term.isActive
            ? "It will no longer be suggested in the PO Terms & Conditions editor."
            : "It will be suggested in the PO Terms & Conditions editor again."
        }
        confirmLabel={term.isActive ? "Deactivate" : "Activate"}
        onConfirm={() => toggleTermActive(term.id)}
      />
    </>
  );
}

export function TermsTable({ terms, categoryNames }: { terms: TermRow[]; categoryNames: string[] }) {
  const { search, setSearch, sortKey, sortDir, toggleSort, activeFilters, toggleFilter, filtered } =
    useTableControls<TermRow>({
      rows: terms,
      defaultSortKey: "categoryName",
      searchText: (t) => [t.categoryName, t.text, t.isActive ? "active" : "inactive"].join(" "),
      chipMatch: (t, chip) => {
        if (chip.toLowerCase() === "active") return t.isActive;
        if (chip.toLowerCase() === "inactive") return !t.isActive;
        return false;
      },
      sortValue: (t, key) => {
        if (key === "isActive") return t.isActive ? "Active" : "Inactive";
        if (key === "isDefault") return t.isDefault ? "Yes" : "No";
        const val = t[key as keyof TermRow];
        return typeof val === "string" || typeof val === "boolean" ? val : String(val ?? "");
      },
    });

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-neutral-900">Terms &amp; Conditions</h1>
          <p className="text-sm text-neutral-500 mt-0.5">Categories &amp; clauses that populate the PO Terms &amp; Conditions editor</p>
        </div>
        <AddTermButton categoryNames={categoryNames} />
      </div>

      <TableControls
        search={search}
        onSearch={setSearch}
        searchPlaceholder="Search category or clause…"
        chips={CHIPS}
        activeFilters={activeFilters}
        onToggleFilter={toggleFilter}
      />

      <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>
              <SortableTh sortKey="categoryName" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof TermRow)}>Category</SortableTh>
              <SortableTh sortKey="text" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof TermRow)}>Clause</SortableTh>
              <SortableTh sortKey="isDefault" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof TermRow)}>Default</SortableTh>
              <SortableTh sortKey="isActive" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof TermRow)}>Status</SortableTh>
              <th className="px-4 py-3 w-10"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {filtered.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-8 text-center text-neutral-400">
                  No clauses yet. Add one to populate the PO Terms &amp; Conditions editor.
                </td>
              </tr>
            )}
            {filtered.map((term) => (
              <tr key={term.id} className="hover:bg-neutral-50">
                <td className="px-4 py-3 font-medium text-neutral-900 whitespace-nowrap">{term.categoryName}</td>
                <td className="px-4 py-3 text-neutral-600 max-w-xl whitespace-pre-wrap">{term.text}</td>
                <td className="px-4 py-3">
                  {term.isDefault ? <span className="text-xs font-medium text-primary-700">Default</span> : <span className="text-neutral-300">—</span>}
                </td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    term.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"
                  }`}>
                    {term.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <TermActionsMenu term={term} categoryNames={categoryNames} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}