import {
  createPermission,
  deletePermission,
  updatePermission,
} from "@/actions/admin-permissions";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

// Manages website_permissions (model WebsitePermissions) — the CMS-owned
// rank-permission mapping AtomCMS exposes in admin. Each row is a key with an
// optional value and comment; those are the only editable columns on the table.
type PermissionRow = {
  id: bigint;
  key: string;
  value: string | null;
  comment: string | null;
};

export default async function AdminPermissions() {
  let permissions: PermissionRow[] = [];
  try {
    permissions = await prisma.websitePermissions.findMany({
      select: { id: true, key: true, value: true, comment: true },
      orderBy: { key: "asc" },
      take: 500,
    });
  } catch {
    permissions = [];
  }

  return (
    <main>
      <h1>Permissions</h1>
      <p className="muted">
        CMS-owned rank permissions (<code>website_permissions</code>). Each entry
        maps a permission key to its value/name and an optional comment.
      </p>

      <form action={createPermission} className="card" style={{ marginBottom: "1.5rem" }}>
        <h3 style={{ marginTop: 0 }}>Add / overwrite permission</h3>
        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
          <input name="key" placeholder="key" required maxLength={255} />
          <input
            name="value"
            placeholder="value / name"
            maxLength={255}
            style={{ flex: 1, minWidth: 160 }}
          />
          <input name="comment" placeholder="comment" maxLength={255} />
          <button type="submit" className="btn btn-primary">
            Save
          </button>
        </div>
      </form>

      {permissions.length === 0 ? (
        <p className="muted">No permissions found.</p>
      ) : (
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead>
            <tr style={{ textAlign: "left", color: "var(--muted)" }}>
              <th>ID</th>
              <th>Key</th>
              <th>Value</th>
              <th>Comment</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {permissions.map((p) => (
              <tr key={String(p.id)} style={{ borderTop: "1px solid var(--border)" }}>
                <td>{String(p.id)}</td>
                <td>
                  <form
                    id={`perm-${String(p.id)}`}
                    action={updatePermission}
                    style={{ display: "contents" }}
                  >
                    <input type="hidden" name="id" value={String(p.id)} />
                    <input name="key" defaultValue={p.key} required maxLength={255} />
                  </form>
                </td>
                <td>
                  <input
                    form={`perm-${String(p.id)}`}
                    name="value"
                    defaultValue={p.value ?? ""}
                    maxLength={255}
                    style={{ width: "100%" }}
                  />
                </td>
                <td>
                  <input
                    form={`perm-${String(p.id)}`}
                    name="comment"
                    defaultValue={p.comment ?? ""}
                    maxLength={255}
                    style={{ width: "100%" }}
                  />
                </td>
                <td style={{ display: "flex", gap: "0.5rem" }}>
                  <button
                    type="submit"
                    form={`perm-${String(p.id)}`}
                    className="btn btn-primary"
                  >
                    Save
                  </button>
                  <form action={deletePermission}>
                    <input type="hidden" name="id" value={String(p.id)} />
                    <button type="submit" className="btn btn-danger">
                      Delete
                    </button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </main>
  );
}