import {
  createPermission,
  deletePermission,
  updatePermission,
} from "@/actions/admin-permissions";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { Shield } from "lucide-react";

export const dynamic = "force-dynamic";

// Manages website_permissions (model WebsitePermissions) — the CMS-owned
// permission -> minimum-rank mapping. Each row names a permission and the lowest
// rank allowed to use it, with an optional description.
type PermissionRow = {
  id: bigint;
  permission: string;
  minRank: number;
  description: string | null;
};

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

  const highestRank = permissions.reduce((max, p) => Math.max(max, p.minRank), 0);

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Shield size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Permissions</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">CMS-owned permissions (<code>website_permissions</code>). Each entry maps a permission name to the minimum rank allowed to use it.</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="Permissions" value={permissions.length} icon="🔑" />
        <StatusCard label="Highest min rank" value={highestRank} icon="🎖️" />
      </div>

      <form action={createPermission} className="admin-card mb-6">
        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite permission</h3>
        <div className="flex gap-2 flex-wrap">
          <input name="permission" placeholder="permission" required maxLength={255} />
          <input
            name="minRank"
            type="number"
            min={0}
            placeholder="min rank"
            defaultValue={1}
            className="w-[110px]"
          />
          <input
            name="description"
            placeholder="description"
            className="flex-1 min-w-[160px]"
          />
          <button type="submit" className="btn btn-primary">
            Save
          </button>
        </div>
      </form>

      <section className="mt-6">
        <h2 className="admin-section-title">Permissions ({permissions.length})</h2>
        {permissions.length === 0 ? (
          <div className="admin-empty">No permissions found.</div>
        ) : (
          <div className="overflow-x-auto">
            <table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Permission</th>
                  <th>Min rank</th>
                  <th>Description</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {permissions.map((p) => (
                  <tr key={String(p.id)}>
                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{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="permission" defaultValue={p.permission} required maxLength={255} />
                      </form>
                    </td>
                    <td>
                      <input
                        form={`perm-${String(p.id)}`}
                        name="minRank"
                        type="number"
                        min={0}
                        defaultValue={p.minRank}
                        className="w-[90px]"
                      />
                    </td>
                    <td>
                      <input
                        form={`perm-${String(p.id)}`}
                        name="description"
                        defaultValue={p.description ?? ""}
                        className="w-full"
                      />
                    </td>
                    <td className="flex gap-2">
                      <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>
          </div>
        )}
      </section>
    </main>
  );
}