import { Shell } from "@/components/Shell";
import { PageHeader } from "@/components/PageHeader";
import { requireRole } from "@/lib/session";
import { db, users, people, projects, projectAssignments } from "@/db";
import { asc, count, desc, eq } from "drizzle-orm";
import { getWorkamajig, syncWorkamajig } from "@/lib/workamajig";
import { revalidatePath } from "next/cache";

async function runSync() {
  "use server";
  await requireRole(["ADMIN"]);
  await syncWorkamajig(getWorkamajig());
  revalidatePath("/", "layout");
}

async function setRole(formData: FormData) {
  "use server";
  await requireRole(["ADMIN"]);
  const id = String(formData.get("id"));
  const role = String(formData.get("role")) as "STAFF" | "EDITOR" | "ADMIN";
  await db.update(users).set({ role }).where(eq(users.id, id));
  revalidatePath("/admin");
}

export default async function AdminPage() {
  await requireRole(["ADMIN"]);
  const [userRows, lastProject, [{ n: nPeople }], [{ n: nProjects }], [{ n: nAssignments }]] = await Promise.all([
    db.query.users.findMany({ orderBy: asc(users.email), with: { person: { columns: { slug: true } } } }),
    db.query.projects.findFirst({ orderBy: desc(projects.syncedAt), columns: { syncedAt: true } }),
    db.select({ n: count() }).from(people),
    db.select({ n: count() }).from(projects),
    db.select({ n: count() }).from(projectAssignments),
  ]);
  const counts = [nPeople, nProjects, nAssignments];
  return (
    <Shell>
      <PageHeader eyebrow="Admin" title={<>Keep it <span className="serif-i">moving.</span></>} />
      <section className="mx-auto max-w-5xl px-5 pb-20 space-y-12">
        <div className="card p-6">
          <h2 className="text-xl font-medium">Workamajig sync</h2>
          <p className="text-sm text-ink/70 mt-1">Mode: <code>{process.env.WORKAMAJIG_MODE ?? "mock"}</code> · {counts[0]} people · {counts[1]} projects · {counts[2]} assignments · last synced {lastProject?.syncedAt?.toLocaleString("en-IE") ?? "never"}</p>
          <form action={runSync} className="mt-4"><button className="btn btn-ink">Sync now</button></form>
        </div>
        <div>
          <h2 className="text-xl font-medium mb-3">Users &amp; roles</h2>
          <table className="w-full text-sm">
            <thead><tr className="text-left text-mist border-b border-line"><th className="py-2">Email</th><th>Profile</th><th>Role</th></tr></thead>
            <tbody>
              {userRows.map((u) => (
                <tr key={u.id} className="border-b border-line">
                  <td className="py-2">{u.email}</td>
                  <td>{u.person ? <a className="underline" href={`/people/${u.person.slug}`}>{u.person.slug}</a> : "—"}</td>
                  <td>
                    <form action={setRole} className="flex gap-2 items-center">
                      <input type="hidden" name="id" value={u.id} />
                      <select name="role" defaultValue={u.role} className="rounded-lg border border-line px-2 py-1">{["STAFF", "EDITOR", "ADMIN"].map((r) => <option key={r}>{r}</option>)}</select>
                      <button className="btn btn-ghost !py-1 !px-3 text-xs">Save</button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </Shell>
  );
}