import { groups, userGroupMemberships, users } from "@minecraft-account-manager/database";
import { asc, eq } from "drizzle-orm";
import Link from "next/link";
import { notFound } from "next/navigation";
import { db } from "@/lib/database";
import { addGroupMember, assignDefaultGroup, deleteGroup, removeGroupMember, setGroupAccess, setGroupAnonymizedNetworkAccess } from "../actions";

const savedMessages: Record<string, string> = {
  created: "Group created with access disabled.",
  access: "Group access policy updated.",
  "network-access": "Group VPN, proxy, and Tor policy updated.",
  "member-added": "User assigned to the group.",
  "member-removed": "User returned to the default group.",
};

export const dynamic = "force-dynamic";

export default async function GroupPage({
  params,
  searchParams,
}: {
  params: Promise<{ groupId: string }>;
  searchParams: Promise<{ saved?: string }>;
}) {
  const { groupId } = await params;
  const query = await searchParams;
  const [group] = await db.select().from(groups).where(eq(groups.id, groupId)).limit(1);
  if (!group) notFound();

  const [allUsers, memberships] = await Promise.all([
    db.select({
      id: users.id,
      firstName: users.firstName,
      discordUsername: users.discordUsername,
      discordGlobalName: users.discordGlobalName,
      discordUserId: users.discordUserId,
    }).from(users).orderBy(asc(users.discordUsername)),
    db.select({
      userId: userGroupMemberships.userId,
      groupId: userGroupMemberships.groupId,
      groupName: groups.name,
    }).from(userGroupMemberships).innerJoin(groups, eq(groups.id, userGroupMemberships.groupId)),
  ]);
  const assignmentByUser = new Map(memberships.map((membership) => [membership.userId, membership]));
  const memberCount = group.isDefault
    ? allUsers.length - assignmentByUser.size
    : memberships.filter((membership) => membership.groupId === group.id).length;

  return (
    <main className="mx-auto max-w-6xl px-6 py-12">
      <Link className="font-mono text-[10px] font-bold uppercase tracking-widest text-muted underline underline-offset-4" href="/admin/groups">← All groups</Link>
      <header className="mt-7 flex flex-col gap-6 border-b border-line pb-8 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">Access group</p>
          <div className="mt-4 flex flex-wrap items-center gap-3"><h1 className="font-display text-5xl font-black uppercase sm:text-7xl">{group.name}</h1>{group.isDefault && <span className="bg-ink px-3 py-2 font-mono text-[9px] font-bold uppercase text-canvas">Default</span>}</div>
          <p className="mt-3 max-w-2xl text-sm leading-6 text-muted">{group.description ?? "No description."}</p>
        </div>
        <div className="grid gap-6 sm:grid-cols-2">
          <form action={setGroupAccess} className="border-l-2 border-accent pl-5">
            <input name="groupId" type="hidden" value={group.id} />
            <input name="accessEnabled" type="hidden" value={group.accessEnabled ? "no" : "yes"} />
            <p className="font-mono text-[9px] font-bold uppercase tracking-widest text-muted">Minecraft admission</p>
            <p className="mt-2 font-display text-2xl font-black uppercase">{group.accessEnabled ? "Allowed" : "Denied"}</p>
            <button className="mt-3 font-mono text-[9px] font-bold uppercase text-accent underline underline-offset-4" type="submit">Turn access {group.accessEnabled ? "off" : "on"}</button>
          </form>
          <form action={setGroupAnonymizedNetworkAccess} className="border-l-2 border-accent pl-5">
            <input name="groupId" type="hidden" value={group.id} />
            <input name="anonymizedNetworksAllowed" type="hidden" value={group.anonymizedNetworksAllowed ? "no" : "yes"} />
            <p className="font-mono text-[9px] font-bold uppercase tracking-widest text-muted">VPN / proxy / Tor</p>
            <p className="mt-2 font-display text-2xl font-black uppercase">{group.anonymizedNetworksAllowed ? "Allowed" : "Denied"}</p>
            <button className="mt-3 font-mono text-[9px] font-bold uppercase text-accent underline underline-offset-4" type="submit">Turn exceptions {group.anonymizedNetworksAllowed ? "off" : "on"}</button>
          </form>
        </div>
      </header>

      {query.saved && <p className="mt-7 border-l-2 border-signal bg-panel px-5 py-4 font-mono text-xs font-bold uppercase tracking-wider" role="status">{savedMessages[query.saved] ?? "Group updated."}</p>}

      <section className="mt-10">
        <div className="flex items-end justify-between border-b border-line pb-4">
          <div><p className="font-mono text-[9px] font-bold uppercase tracking-widest text-muted">Membership</p><h2 className="mt-2 font-display text-3xl font-black uppercase">Registered users</h2></div>
          <span className="font-mono text-xs text-muted">{memberCount} members</span>
        </div>
        {group.isDefault && <p className="border-b border-line bg-panel px-5 py-4 text-sm text-muted">Users belong to <strong className="text-ink">everyone</strong> only while they have no explicit group assignment.</p>}
        <div className="divide-y divide-line">
          {allUsers.map((user) => {
            const assignment = assignmentByUser.get(user.id);
            const isMember = group.isDefault ? !assignment : assignment?.groupId === group.id;
            return (
              <article className="grid gap-4 py-5 sm:grid-cols-[1fr_auto] sm:items-center" key={user.id}>
                <div>
                  <Link className="font-mono text-sm font-bold underline decoration-line underline-offset-4 hover:decoration-accent" href={`/admin/users/${user.id}`}>{user.firstName ?? user.discordGlobalName ?? user.discordUsername}</Link>
                  <p className="mt-1 font-mono text-[10px] text-muted">@{user.discordUsername} · {user.discordUserId}</p>
                  {!isMember && assignment && <p className="mt-1 text-xs text-muted">Currently assigned to {assignment.groupName}</p>}
                </div>
                {isMember ? (
                  group.isDefault ? <span className="font-mono text-[9px] font-bold uppercase text-muted">Default assignment</span> : (
                    <form action={removeGroupMember}>
                      <input name="groupId" type="hidden" value={group.id} />
                      <input name="userId" type="hidden" value={user.id} />
                      <button className="font-mono text-[9px] font-bold uppercase text-accent underline underline-offset-4" type="submit">Return to everyone</button>
                    </form>
                  )
                ) : (
                  <form action={group.isDefault ? assignDefaultGroup : addGroupMember}>
                    <input name="groupId" type="hidden" value={group.id} />
                    <input name="userId" type="hidden" value={user.id} />
                    <button className="font-mono text-[9px] font-bold uppercase text-ink underline underline-offset-4" type="submit">Move to {group.name}</button>
                  </form>
                )}
              </article>
            );
          })}
          {!allUsers.length && <p className="py-8 text-sm text-muted">No registered users yet.</p>}
        </div>
      </section>

      {!group.isDefault && (
        <section className="mt-12 border border-accent bg-panel p-6">
          <p className="font-mono text-[10px] font-bold uppercase tracking-widest text-accent">Danger zone</p>
          <h2 className="mt-3 font-display text-2xl font-black uppercase">Delete {group.name}</h2>
          <p className="mt-3 max-w-2xl text-sm leading-6 text-muted">Deleting this group returns its {memberCount} {memberCount === 1 ? "member" : "members"} to the protected default group. This cannot be undone.</p>
          <details className="mt-5">
            <summary className="w-fit cursor-pointer font-mono text-[10px] font-bold uppercase text-accent underline underline-offset-4">Review deletion</summary>
            <form action={deleteGroup} className="mt-4 flex flex-wrap items-center gap-4">
              <input name="groupId" type="hidden" value={group.id} />
              <input name="confirmDelete" type="hidden" value="yes" />
              <button className="bg-accent px-5 py-3 font-mono text-[10px] font-bold uppercase tracking-wider text-canvas" type="submit">Delete group permanently</button>
              <span className="text-xs text-muted">Members will use everyone immediately.</span>
            </form>
          </details>
        </section>
      )}
    </main>
  );
}