import { formatDiscordNickname } from "@minecraft-account-manager/minecraft";
import { ipIntelligence, ipObservations, minecraftAccounts } from "@minecraft-account-manager/database";
import { and, desc, eq, isNull } from "drizzle-orm";
import { logout } from "@/app/auth/actions";
import { db } from "@/lib/database";
import { requireCurrentUser } from "@/lib/auth/user-session";
import { intelligenceSummary } from "@/lib/event-ip-summary";
import {
  addMinecraftAccount,
  confirmDashboardNickname,
  removeMinecraftAccount,
  setPrimaryAccount,
  updateFirstName,
} from "./actions";

const errorMessages: Record<string, string> = {
  "invalid-name": "Enter a valid name between 1 and 50 characters.",
  "invalid-username": "Java usernames use 3–16 letters, numbers, or underscores.",
  "already-registered": "That Minecraft account is already registered.",
  "unknown-account": "That account is no longer available.",
  "nickname-not-configured": "Discord nickname updates are not configured.",
  "nickname-update-failed": "Discord rejected the nickname update. An admin may need to adjust bot permissions.",
  "vpn-blocked": "Turn off your VPN, proxy, or Tor connection before adding a Minecraft account.",
  "ip-check-unavailable": "We could not verify your network, so account addition is temporarily blocked.",
};

export default async function AccountPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | undefined>>;
}) {
  const user = await requireCurrentUser("/account");
  const query = await searchParams;
  const [accounts, observations] = await Promise.all([
    db
      .select()
      .from(minecraftAccounts)
      .where(and(eq(minecraftAccounts.userId, user.id), isNull(minecraftAccounts.deletedAt)))
      .orderBy(desc(minecraftAccounts.isPrimary), minecraftAccounts.username),
    db
      .select({
        id: ipObservations.id,
        ipAddress: ipObservations.ipAddress,
        source: ipObservations.source,
        classification: ipObservations.classification,
        observedAt: ipObservations.observedAt,
        intelligence: ipIntelligence.rawResponse,
      })
      .from(ipObservations)
      .leftJoin(ipIntelligence, eq(ipIntelligence.ipAddress, ipObservations.ipAddress))
      .where(eq(ipObservations.userId, user.id))
      .orderBy(desc(ipObservations.observedAt))
      .limit(20),
  ]);
  const primary = accounts.find((account) => account.isPrimary);
  const desiredNickname = user.firstName && primary
    ? formatDiscordNickname(user.firstName, primary.username)
    : null;

  return (
    <main className="min-h-screen bg-canvas px-6 py-10 text-ink sm:py-16">
      <section className="mx-auto max-w-6xl">
        <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">Account registry</p>
            <h1 className="mt-4 font-display text-5xl font-black uppercase sm:text-7xl">{user.firstName ?? user.discordUsername}</h1>
          </div>
          <form action={logout}><button className="font-mono text-xs font-bold uppercase tracking-wider underline underline-offset-4" type="submit">Sign out</button></form>
        </header>

        {query.error && (
          <p className="mt-8 border-l-2 border-accent bg-panel px-5 py-4 text-sm text-accent">
            {errorMessages[query.error] ?? "The requested change could not be completed."}
          </p>
        )}
        {query.nicknameUpdated && <p className="mt-8 border-l-2 border-signal bg-panel px-5 py-4 font-mono text-xs font-bold uppercase tracking-wider">Discord nickname updated</p>}

        {query.confirmNickname && desiredNickname && (
          <section className="mt-8 border border-accent bg-panel p-6 shadow-[6px_6px_0_var(--color-accent)] sm:flex sm:items-center sm:justify-between sm:gap-8">
            <div>
              <p className="font-mono text-[10px] font-bold uppercase tracking-widest text-accent">Confirm Discord change</p>
              <p className="mt-2 text-sm text-muted">Your community nickname will become</p>
              <p className="mt-1 font-display text-2xl font-black">{desiredNickname}</p>
            </div>
            <form action={confirmDashboardNickname} className="mt-5 sm:mt-0">
              <button className="border border-ink bg-ink px-5 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas" type="submit">Confirm update</button>
            </form>
          </section>
        )}

        <div className="mt-12 grid gap-10 lg:grid-cols-[1.35fr_0.65fr]">
          <div className="space-y-10">
            <section>
              <div className="flex items-end justify-between border-b border-line pb-4">
                <div><p className="font-mono text-[10px] font-bold uppercase tracking-widest text-muted">Whitelist identities</p><h2 className="mt-2 font-display text-3xl font-black uppercase">Minecraft accounts</h2></div>
                <span className="font-mono text-xs text-muted">{accounts.length} active</span>
              </div>

              <div className="divide-y divide-line">
                {accounts.map((account) => (
                  <article className="grid gap-4 py-6 sm:grid-cols-[1fr_auto] sm:items-center" key={account.id}>
                    <div>
                      <div className="flex flex-wrap items-center gap-3">
                        <h3 className="font-mono text-lg font-bold">{account.username}</h3>
                        {account.isPrimary && <span className="bg-accent px-2 py-1 font-mono text-[9px] font-bold uppercase tracking-widest text-canvas">Primary</span>}
                        <span className="border border-line px-2 py-1 font-mono text-[9px] uppercase tracking-wider text-muted">{account.validationStatus === "verified" ? "UUID verified" : "User confirmed"}</span>
                      </div>
                      <p className="mt-2 break-all font-mono text-[10px] text-muted">{account.minecraftUuid ?? "UUID will be learned at game login"}</p>
                    </div>
                    <div className="flex gap-4">
                      {!account.isPrimary && <form action={setPrimaryAccount}><input name="accountId" type="hidden" value={account.id} /><button className="font-mono text-[10px] font-bold uppercase tracking-wider underline underline-offset-4" type="submit">Make primary</button></form>}
                      <form action={removeMinecraftAccount}><input name="accountId" type="hidden" value={account.id} /><button className="font-mono text-[10px] font-bold uppercase tracking-wider text-accent underline underline-offset-4" type="submit">Remove</button></form>
                    </div>
                  </article>
                ))}
                {accounts.length === 0 && <p className="py-8 text-muted">No active Minecraft accounts. Add one before joining the server.</p>}
              </div>

              {query.unverified ? (
                <form action={addMinecraftAccount} className="border-l-2 border-accent bg-panel p-6">
                  <h3 className="font-display text-xl font-black uppercase">Mojang couldn’t verify “{query.unverified}”</h3>
                  <p className="mt-2 text-sm leading-6 text-muted">Continue only if you are certain the spelling is correct.</p>
                  <input name="username" type="hidden" value={query.unverified} /><input name="confirmUnverified" type="hidden" value="yes" />
                  <button className="mt-5 border border-ink bg-ink px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-wider text-canvas" type="submit">Add anyway</button>
                  <a className="ml-5 font-mono text-[10px] font-bold uppercase underline" href="/account">Cancel</a>
                </form>
              ) : (
                <form action={addMinecraftAccount} className="flex flex-col gap-3 border-t border-line pt-6 sm:flex-row">
                  <input className="min-w-0 flex-1 border border-line bg-panel px-4 py-3 font-mono text-sm outline-none focus:border-accent" maxLength={16} minLength={3} name="username" pattern="[A-Za-z0-9_]{3,16}" placeholder="Minecraft username" required />
                  <button className="border border-ink bg-ink px-5 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas" type="submit">Add account</button>
                </form>
              )}
            </section>

            <section>
              <p className="font-mono text-[10px] font-bold uppercase tracking-widest text-muted">Recent security activity</p>
              <h2 className="mt-2 border-b border-line pb-4 font-display text-3xl font-black uppercase">Access addresses</h2>
              {observations.length ? (
                <div className="divide-y divide-line font-mono text-xs">
                  {observations.map((observation) => {
                    const summary = intelligenceSummary(observation.intelligence);
                    return <div className="grid grid-cols-[1fr_auto] gap-4 py-4" key={observation.id}><div><p>{observation.ipAddress}</p><p className="mt-1 text-[10px] text-muted">{summary.location ?? "Location unavailable"} · {summary.classification ?? observation.classification}</p></div><span className="text-muted">{observation.source} · {observation.observedAt.toISOString()}</span></div>;
                  })}
                </div>
              ) : <p className="py-6 text-sm text-muted">No web or game access addresses have been recorded yet.</p>}
            </section>
          </div>

          <aside>
            <form action={updateFirstName} className="border border-line bg-panel p-6 shadow-[6px_6px_0_var(--color-shadow)]">
              <p className="font-mono text-[10px] font-bold uppercase tracking-widest text-accent">Profile</p>
              <label className="mt-5 block font-mono text-xs font-bold uppercase tracking-wider" htmlFor="firstName">What we call you</label>
              <input className="mt-3 w-full border border-line bg-canvas px-4 py-3 outline-none focus:border-accent" defaultValue={user.firstName ?? ""} id="firstName" maxLength={50} name="firstName" required />
              {desiredNickname && <p className="mt-4 text-xs leading-5 text-muted">Discord preview: <strong className="text-ink">{desiredNickname}</strong></p>}
              <button className="mt-6 border border-ink px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-wider" type="submit">Save name</button>
            </form>
          </aside>
        </div>
      </section>
    </main>
  );
}