import { deletePermission, upsertPermission } from "@/actions/admin-housekeeping";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AdminHousekeeping() {
  let permissions: Awaited<
    ReturnType<typeof prisma.websiteHousekeepingPermissions.findMany>
  > = [];
  try {
    permissions = await prisma.websiteHousekeepingPermissions.findMany({
      orderBy: [{ minRank: "asc" }, { permission: "asc" }],
    });
  } catch {
    permissions = [];
  }

  const ranks = permissions.map((p) => p.minRank);
  const maxRank = ranks.length ? Math.max(...ranks) : 0;

  return (
    <main>
      <h1>Housekeeping Permissions</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Minimum rank required to access each housekeeping permission key. Saving an
        existing key overwrites its min rank and description.
      </p>

      <div className="admin-stats">
        <StatusCard label="Permissions" value={permissions.length} icon="🔑" />
        <StatusCard label="Highest min rank" value={maxRank} icon="⬆️" />
      </div>

      <section className="admin-section">
        <h2>Add / overwrite permission</h2>
        <form action={upsertPermission} className="card">
          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
            <input name="permission" placeholder="permission key" required style={{ minWidth: 200 }} />
            <input name="minRank" type="number" min={0} placeholder="Min rank" required style={{ width: 110 }} />
            <input name="description" placeholder="description" style={{ flex: 1, minWidth: 160 }} />
            <button type="submit" className="btn btn-primary">
              Save
            </button>
          </div>
        </form>
      </section>

      <section className="admin-section">
        <h2>
          Permissions <span className="admin-badge">{permissions.length}</span>
        </h2>
        {permissions.length === 0 ? (
          <p className="muted">No housekeeping permissions defined yet.</p>
        ) : (
          <div className="card" style={{ padding: 0, overflowX: "auto" }}>
            <table>
              <thead>
                <tr>
                  <th>Permission</th>
                  <th>Description</th>
                  <th style={{ width: 200 }}>Min rank</th>
                  <th style={{ width: 80 }} />
                </tr>
              </thead>
              <tbody>
                {permissions.map((p) => (
                  <tr key={String(p.id)}>
                    <td>
                      <strong>{p.permission}</strong>
                    </td>
                    <td className="muted">{p.description ?? "—"}</td>
                    <td>
                      <form action={upsertPermission} style={{ display: "flex", gap: "0.5rem" }}>
                        <input type="hidden" name="permission" value={p.permission} />
                        <input type="hidden" name="description" value={p.description ?? ""} />
                        <input
                          name="minRank"
                          type="number"
                          min={0}
                          defaultValue={p.minRank}
                          style={{ width: 90 }}
                        />
                        <button type="submit" className="btn btn-outline">
                          Save
                        </button>
                      </form>
                    </td>
                    <td>
                      <form action={deletePermission}>
                        <input type="hidden" name="id" value={String(p.id)} />
                        <button type="submit" className="btn btn-danger">
                          ✕
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}