import { groupAccessWindows, groups, userGroupMemberships, users } from "@minecraft-account-manager/database";
import { asc, count, desc } from "drizzle-orm";
import Link from "next/link";
import { AdminModalForm } from "@/components/admin-modal-form";
import { GroupPolicyControl } from "@/components/group-policy-control";
import { db } from "@/lib/database";
import { effectiveGroupMemberCount } from "@/lib/group-management";
import { groupScheduleStatus } from "@/lib/group-schedule";
import { createGroup, setGroupAccess, setGroupAnonymizedNetworkAccess } from "./actions";

const errors: Record<string, string> = {
  "invalid-group": "Enter a group name and an optional description of no more than 500 characters.",
  "duplicate-group": "A group with that name already exists.",
  "create-failed": "The group could not be created.",
  "unknown-group": "That group no longer exists.",
  "invalid-delete": "Confirm the group deletion before continuing.",
  "protected-group": "The protected default group cannot be deleted.",
};

const savedMessages: Record<string, string> = {
  deleted: "Group deleted. Its former members now use the default group.",
  access: "Minecraft access policy updated.",
  "network-access": "VPN, proxy, and Tor policy updated.",
};

export const dynamic = "force-dynamic";

export default async function GroupsPage({ searchParams }: { searchParams: Promise<{ error?: string; saved?: string }> }) {
  const query = await searchParams;
  const [allGroups, memberships, [registeredUsers], scheduleCounts] = await Promise.all([
    db.select().from(groups).orderBy(desc(groups.isDefault), asc(groups.name)),
    db.select({ groupId: userGroupMemberships.groupId }).from(userGroupMemberships),
    db.select({ count: count() }).from(users),
    db.select({ groupId: groupAccessWindows.groupId, count: count() })
      .from(groupAccessWindows)
      .groupBy(groupAccessWindows.groupId),
  ]);
  const scheduleCountByGroup = new Map(scheduleCounts.map((schedule) => [schedule.groupId, Number(schedule.count)]));
  return (
    <main className="mx-auto max-w-6xl px-6 py-14">
      <header className="flex flex-col gap-6 border-b border-line pb-8 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">Admission policy</p>
          <h1 className="mt-4 font-display text-5xl font-black uppercase">Access groups</h1>
          <p className="mt-5 max-w-2xl leading-7 text-muted">One effective group controls Minecraft and VPN access. Every policy change asks for confirmation before it applies.</p>
        </div>
        <AdminModalForm
          action={createGroup}
          description="Create a named access group. Both policies start denied unless you explicitly enable them below."
          submitLabel="Create group"
          title="Add access group"
          triggerClassName="border border-ink bg-ink px-5 py-3 font-mono text-[10px] font-bold uppercase tracking-wider text-canvas"
          triggerLabel="Add group"
        >
          <div className="space-y-5">
            <label className="block text-sm font-bold">Name<input autoComplete="off" className="mt-2 w-full border border-line bg-canvas px-4 py-3 font-normal outline-none focus:border-accent" maxLength={50} name="name" required /></label>
            <label className="block text-sm font-bold">Description<textarea className="mt-2 min-h-28 w-full resize-y border border-line bg-canvas px-4 py-3 font-normal outline-none focus:border-accent" maxLength={500} name="description" /></label>
            <PolicyCheckbox description="Allow members to connect to Minecraft." label="Minecraft access" name="accessEnabled" />
            <PolicyCheckbox description="Allow confirmed VPN, proxy, and Tor connections." label="VPN / proxy / Tor exception" name="anonymizedNetworksAllowed" />
          </div>
        </AdminModalForm>
      </header>

      {query.error && <p className="mt-7 border-l-2 border-accent bg-panel px-5 py-4 text-sm text-accent" role="alert">{errors[query.error] ?? "The group operation failed."}</p>}
      {query.saved && <p className="mt-7 border-l-2 border-signal bg-panel px-5 py-4 text-sm" role="status">{savedMessages[query.saved] ?? "Group updated."}</p>}

      <div className="mt-9 overflow-x-auto border border-line bg-panel shadow-[8px_8px_0_var(--color-shadow)]">
        <table className="w-full min-w-[880px] border-collapse text-left">
          <caption className="sr-only">Access groups and their effective policies</caption>
          <thead className="border-b border-line font-mono text-[10px] uppercase tracking-widest text-muted">
            <tr><th className="p-4" scope="col">Name</th><th className="p-4" scope="col">Minecraft access</th><th className="p-4" scope="col">Schedule</th><th className="p-4" scope="col">VPN access</th><th className="p-4 text-right" scope="col">Users</th></tr>
          </thead>
          <tbody className="divide-y divide-line">
            {allGroups.map((group) => {
              const memberCount = effectiveGroupMemberCount(
                Number(registeredUsers?.count ?? 0),
                memberships.map((membership) => membership.groupId),
                group,
              );
              const scheduleStatus = groupScheduleStatus(scheduleCountByGroup.get(group.id) ?? 0);
              return (
                <tr className="transition-colors hover:bg-canvas/60" key={group.id}>
                  <th className="p-4 text-left" scope="row">
                    <Link className="font-display text-xl font-black uppercase underline decoration-line underline-offset-4 hover:text-accent" href={`/admin/groups/${group.id}`}>{group.name}</Link>
                    {group.isDefault && <span className="ml-3 bg-ink px-2 py-1 font-mono text-[8px] font-bold uppercase text-canvas">Default</span>}
                  </th>
                  <td className="p-4"><GroupPolicyControl action={setGroupAccess} enabled={group.accessEnabled} groupId={group.id} groupName={group.name} memberCount={memberCount} policy="Minecraft access" returnLocation="list" /></td>
                  <td className="p-4"><Link aria-label={`${scheduleStatus}. Edit schedule for ${group.name}`} className={`font-mono text-[10px] font-bold uppercase underline underline-offset-4 ${scheduleStatus === "Unrestricted" ? "text-muted" : "text-accent"}`} href={`/admin/groups/${group.id}#group-schedule`}>{scheduleStatus}</Link></td>
                  <td className="p-4"><GroupPolicyControl action={setGroupAnonymizedNetworkAccess} enabled={group.anonymizedNetworksAllowed} groupId={group.id} groupName={group.name} memberCount={memberCount} policy="VPN / proxy / Tor" returnLocation="list" /></td>
                  <td className="p-4 text-right font-mono text-sm font-bold">{memberCount}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <p className="mt-4 text-xs leading-5 text-muted">Users without an explicit assignment count toward <strong className="text-ink">everyone</strong>.</p>
    </main>
  );
}

function PolicyCheckbox({ description, label, name }: { description: string; label: string; name: string }) {
  return (
    <label className="flex cursor-pointer items-start justify-between gap-4 border border-line bg-canvas p-4">
      <span><span className="block font-mono text-xs font-bold uppercase">{label}</span><span className="mt-1 block text-xs leading-5 text-muted">{description}</span></span>
      <input className="mt-1 size-5 accent-[var(--color-accent)]" name={name} type="checkbox" value="yes" />
    </label>
  );
}