import Link from "next/link";
import { AlertTriangle, Database, LockKeyhole, Plus, Search, Shield, UsersRound } from "lucide-react";
import { redirect } from "next/navigation";
import { AppShell } from "@/components/app-shell";
import { Avatar } from "@/components/avatar";
import { StatusBadge } from "@/components/status-badge";
import { SYSTEM_PERMISSIONS } from "@/lib/access";
import { prisma } from "@/lib/prisma";
import { getShellContext } from "@/lib/shell";
import { requireCurrentUser, userIsAdmin } from "@/lib/session";
import { requireInitialSetup } from "@/lib/setup";
import { DataTable, EmptyState, MetricTile, PageHeader, Panel, StatusDot, Tabs } from "@/components/ui";
import { getAppSettings, type AppSettings } from "@/lib/settings";
import { updateInstanceSettings, updateSecuritySettings } from "@/lib/settings-actions";
import { banUser, createInstanceInvite, disableUser, enableUser, expireStaleInvites, grantAdminRole, removeUserFriendships, revokeAdminRole, revokeInvite } from "@/lib/admin-actions";
import { deleteRoom } from "@/lib/room-actions";
import { isInviteExpired } from "@/lib/invites";

export const dynamic = "force-dynamic";

const adminTabs = ["Users", "Rooms", "Roles", "Invites", "Instance", "Security"];

export default async function AdminPage({ searchParams }: { searchParams: Promise<{ tab?: string; q?: string; saved?: string }> }) {
  await requireInitialSetup();
  const user = await requireCurrentUser();

  if (!userIsAdmin(user)) {
    redirect("/dashboard");
  }

  const { tab = "Users", q = "", saved } = await searchParams;
  const activeTab = adminTabs.includes(tab) ? tab : "Users";
  const query = q.trim().toLowerCase();
  const shell = await getShellContext(user);

  const [users, rooms, roles, pendingRequests, appSettings, invites, auditEvents] = await Promise.all([
    prisma.user.findMany({
      include: {
        roles: { include: { role: true } },
        _count: { select: { ownedRooms: true, roomMembers: true, sentFriends: true, gotFriends: true } }
      },
      orderBy: { createdAt: "asc" }
    }),
    prisma.room.findMany({
      include: { owner: true, _count: { select: { members: true, mediaSources: true } } },
      orderBy: { updatedAt: "desc" }
    }),
    prisma.role.findMany({
      include: { _count: { select: { users: true, permissions: true } } },
      orderBy: { name: "asc" }
    }),
    prisma.friendship.count({ where: { status: "PENDING" } }),
    getAppSettings(),
    prisma.invite.findMany({ include: { room: true, creator: true }, orderBy: { createdAt: "desc" }, take: 50 }),
    prisma.auditEvent.findMany({ include: { actor: true, room: true }, orderBy: { createdAt: "desc" }, take: 20 })
  ]);
  const filteredUsers = query
    ? users.filter((account) =>
        [account.username, account.displayName || "", ...account.roles.map((role) => role.role.name)].join(" ").toLowerCase().includes(query)
      )
    : users;
  const filteredRooms = query
    ? rooms.filter((room) =>
        [room.name, room.slug, room.visibility, room.owner?.username || "", room.owner?.displayName || ""].join(" ").toLowerCase().includes(query)
      )
    : rooms;
  const filteredRoles = query
    ? roles.filter((role) => [role.name, role.description || "", role.scope].join(" ").toLowerCase().includes(query))
    : roles;

  return (
    <AppShell active="Admin" {...shell}>
      <PageHeader
        title="Admin"
        description="Operational management for accounts, rooms, roles, instance state, and security controls."
        meta={
          <>
            <StatusDot tone="good" label="admin session" />
            <StatusDot tone="good" label={`${users.length} users`} />
            <StatusDot tone={pendingRequests > 0 ? "warn" : "neutral"} label={`${pendingRequests} pending requests`} />
          </>
        }
        actions={
          <>
            <Link className="button" href="/admin?tab=Invites"><Plus size={16} /> Invite</Link>
            <Link className="button" href="/admin?tab=Security"><Shield size={16} /> Audit</Link>
          </>
        }
      />

      <section className="metrics-grid">
        <MetricTile label="Users" value={users.length} detail="local accounts" tone="good" />
        <MetricTile label="Rooms" value={rooms.length} detail="persistent room records" tone="info" />
        <MetricTile label="Roles" value={roles.length} detail="system and room scopes" />
        <MetricTile label="Permissions" value={SYSTEM_PERMISSIONS.length} detail="known permission keys" tone="warn" />
      </section>

      <Panel
        title="Admin Workspace"
        eyebrow="Management"
        actions={
          <form className="toolbar" action="/admin">
            <input type="hidden" name="tab" value={activeTab} />
            <label className="search-field">
              <Search size={15} />
              <input name="q" placeholder={`Search ${activeTab.toLowerCase()}`} defaultValue={q} />
            </label>
          </form>
        }
      >
        <Tabs active={activeTab} items={adminTabs.map((item) => ({ label: item, href: `/admin?tab=${encodeURIComponent(item)}` }))} />

        {activeTab === "Users" ? <UsersTable users={filteredUsers} currentUserId={user.id} /> : null}
        {activeTab === "Rooms" ? <RoomsTable rooms={filteredRooms} /> : null}
        {activeTab === "Roles" ? <RolesTable roles={filteredRoles} /> : null}
        {activeTab === "Invites" ? <InvitesPanel pendingRequests={pendingRequests} invites={invites} rooms={rooms} /> : null}
        {activeTab === "Instance" ? <InstancePanel userCount={users.length} roomCount={rooms.length} settings={appSettings} saved={saved} /> : null}
        {activeTab === "Security" ? <SecurityPanel settings={appSettings} saved={saved} auditEvents={auditEvents} /> : null}
      </Panel>
    </AppShell>
  );
}

function UsersTable({
  users,
  currentUserId
}: {
  users: Array<{
    id: string;
    username: string;
    displayName: string | null;
    avatarUrl: string | null;
    disabledAt: Date | null;
    createdAt: Date;
    roles: Array<{ roleId: string; role: { name: string } }>;
    _count: { ownedRooms: number; roomMembers: number; sentFriends: number; gotFriends: number };
  }>;
  currentUserId: string;
}) {
  return (
    <DataTable>
      <table className="table">
        <thead>
          <tr>
            <th>User</th>
            <th>Roles</th>
            <th>Rooms</th>
            <th>Friends</th>
            <th>Created</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {users.map((account) => (
            <tr key={account.id}>
              <td>
                <div className="row-main">
                  <Avatar name={account.displayName || account.username} src={account.avatarUrl} size={30} />
                  <div className="row-title">
                    <strong>{account.displayName || account.username}</strong>
                    <span>@{account.username}</span>
                  </div>
                </div>
              </td>
              <td>
                <div className="status-row">
                  {account.roles.length === 0 ? <StatusBadge>user</StatusBadge> : null}
                  {account.roles.map((userRole) => (
                    <StatusBadge key={userRole.roleId} tone={userRole.role.name === "admin" ? "good" : undefined}>
                      {userRole.role.name}
                    </StatusBadge>
                  ))}
                </div>
              </td>
              <td>{account._count.ownedRooms + account._count.roomMembers}</td>
              <td>{account._count.sentFriends + account._count.gotFriends}</td>
              <td>{account.disabledAt ? <StatusBadge tone="danger">disabled</StatusBadge> : formatDate(account.createdAt)}</td>
              <td>
                <div className="row-actions">
                  {account.roles.some((role) => role.role.name === "admin") ? (
                    <form action={revokeAdminRole}>
                      <input type="hidden" name="userId" value={account.id} />
                      <button className="button compact-button" type="submit" disabled={account.id === currentUserId}>Revoke admin</button>
                    </form>
                  ) : (
                    <form action={grantAdminRole}>
                      <input type="hidden" name="userId" value={account.id} />
                      <button className="button compact-button" type="submit">Make admin</button>
                    </form>
                  )}
                  {account.disabledAt ? (
                    <form action={enableUser}>
                      <input type="hidden" name="userId" value={account.id} />
                      <button className="button compact-button" type="submit">Enable</button>
                    </form>
                  ) : (
                    <form action={disableUser}>
                      <input type="hidden" name="userId" value={account.id} />
                      <button className="button compact-button danger" type="submit" disabled={account.id === currentUserId}>Disable</button>
                    </form>
                  )}
                  <form action={removeUserFriendships}>
                    <input type="hidden" name="userId" value={account.id} />
                    <button className="button compact-button danger" type="submit" disabled={account.id === currentUserId || account._count.sentFriends + account._count.gotFriends === 0}>
                      Remove friends
                    </button>
                  </form>
                  <form action={banUser}>
                    <input type="hidden" name="userId" value={account.id} />
                    <button className="button compact-button danger" type="submit" disabled={account.id === currentUserId || Boolean(account.disabledAt)}>
                      Ban
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </DataTable>
  );
}

function RoomsTable({
  rooms
}: {
  rooms: Array<{
    id: string;
    slug: string;
    name: string;
    visibility: string;
    isPersonal: boolean;
    updatedAt: Date;
    owner: { username: string; displayName: string | null } | null;
    _count: { members: number; mediaSources: number };
  }>;
}) {
  return (
    <DataTable>
      <table className="table">
        <thead>
          <tr>
            <th>Room</th>
            <th>Owner</th>
            <th>Access</th>
            <th>State</th>
            <th>Updated</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {rooms.map((room) => (
            <tr key={room.id}>
              <td>
                <div className="row-title">
                  <strong>{room.name}</strong>
                  <span>/{room.slug}</span>
                </div>
              </td>
              <td>{room.owner?.displayName || room.owner?.username || "Unassigned"}</td>
              <td><StatusBadge>{room.visibility.toLowerCase().replace("_", " ")}</StatusBadge></td>
              <td>{room._count.members + 1} users / {room._count.mediaSources} media</td>
              <td>{formatDate(room.updatedAt)}</td>
              <td>
                <div className="row-actions">
                  <Link className="button compact-button" href={`/rooms/${encodeURIComponent(room.slug)}`}>Open</Link>
                  {!room.isPersonal ? (
                    <form action={deleteRoom}>
                      <input type="hidden" name="roomId" value={room.id} />
                      <button className="button compact-button danger" type="submit">Delete</button>
                    </form>
                  ) : (
                    <StatusBadge>personal</StatusBadge>
                  )}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </DataTable>
  );
}

function RolesTable({
  roles
}: {
  roles: Array<{
    id: string;
    name: string;
    description: string | null;
    scope: string;
    _count: { users: number; permissions: number };
  }>;
}) {
  return roles.length === 0 ? (
    <EmptyState title="No roles defined" />
  ) : (
    <div className="split-grid">
      <Panel title="Roles" eyebrow="Assignments">
        {roles.map((role) => (
          <div className="row" key={role.id}>
            <div className="row-title">
              <strong>{role.name}</strong>
              <span>{role.description || `${role.scope.toLowerCase()} role`}</span>
            </div>
            <StatusBadge>{role._count.users} users / {role._count.permissions} permissions</StatusBadge>
          </div>
        ))}
      </Panel>
      <Panel title="Permissions" eyebrow="Known keys">
        {SYSTEM_PERMISSIONS.map((permission) => (
          <div className="row" key={permission}>
            <div className="row-title">
              <strong>{permission}</strong>
              <span>Assignable to system roles</span>
            </div>
            <StatusBadge>Enabled</StatusBadge>
          </div>
        ))}
      </Panel>
    </div>
  );
}

function InvitesPanel({
  pendingRequests,
  invites,
  rooms
}: {
  pendingRequests: number;
  invites: Array<{
    id: string;
    code: string;
    status: string;
    expiresAt: Date | null;
    createdAt: Date;
    room: { id: string; name: string; slug: string } | null;
    creator: { username: string; displayName: string | null } | null;
  }>;
  rooms: Array<{ id: string; name: string; slug: string }>;
}) {
  const expiredInviteCount = invites.filter((invite) => invite.status === "ACTIVE" && isInviteExpired(invite.expiresAt)).length;

  return (
    <div className="split-grid">
      <Panel title="Create Invite" eyebrow="Access">
        <form className="form compact-form" action={createInstanceInvite}>
          <label>
            Room access
            <select className="input" name="roomId" defaultValue="">
              <option value="">Instance registration only</option>
              {rooms.map((room) => (
                <option value={room.id} key={room.id}>{room.name} /{room.slug}</option>
              ))}
            </select>
          </label>
          <label>
            Expires after days
            <input className="input" name="expiresDays" type="number" min="0" max="365" defaultValue="7" />
          </label>
          <button className="button primary" type="submit">Create invite</button>
        </form>
      </Panel>
      <Panel title="Invites" eyebrow={`${invites.length} recent`}>
        {expiredInviteCount > 0 ? (
          <form action={expireStaleInvites} className="inline-form">
            <button className="button compact-button" type="submit">Mark {expiredInviteCount} expired</button>
          </form>
        ) : null}
        {invites.length === 0 ? (
          <EmptyState title="No invites yet" description="Create an invite to allow registration or room access workflows." />
        ) : (
          <div className="settings-list">
            {invites.map((invite) => {
              const expired = isInviteExpired(invite.expiresAt);
              const label = expired && invite.status === "ACTIVE" ? "expired" : invite.status.toLowerCase();
              return (
                <div className="setting-row" key={invite.id}>
                  <span>
                    <strong>{invite.code}</strong>
                    <small>
                      {invite.room ? `${invite.room.name} /${invite.room.slug}` : "Instance invite"} - created {formatDate(invite.createdAt)}
                      {invite.expiresAt ? ` - expires ${formatDate(invite.expiresAt)}` : " - no expiry"}
                    </small>
                  </span>
                  <StatusBadge tone={invite.status === "ACTIVE" && !expired ? "good" : "warn"}>{label}</StatusBadge>
                  {invite.status === "ACTIVE" && !expired ? (
                    <form action={revokeInvite}>
                      <input type="hidden" name="inviteId" value={invite.id} />
                      <button className="button compact-button danger" type="submit">Revoke</button>
                    </form>
                  ) : null}
                </div>
              );
            })}
          </div>
        )}
      </Panel>
      <Panel title="Friend Requests" eyebrow="Instance">
        <div className="setting-row">
          <UsersRound size={16} />
          <span>
            <strong>{pendingRequests} pending friend requests</strong>
            <small>Handled by each receiving user in People.</small>
          </span>
        </div>
      </Panel>
    </div>
  );
}

function InstancePanel({ userCount, roomCount, settings, saved }: { userCount: number; roomCount: number; settings: AppSettings; saved?: string }) {
  return (
    <div className="split-grid">
      <Panel title="Instance Settings" eyebrow="Site-wide">
        {saved ? <p className="form-success">Instance settings saved.</p> : null}
        <form className="form compact-form" action={updateInstanceSettings}>
          <label>
            Instance name
            <input className="input" name="instanceName" defaultValue={settings.instanceName} maxLength={80} />
          </label>
          <label>
            Description
            <textarea className="input textarea" name="instanceDescription" defaultValue={settings.instanceDescription} maxLength={240} />
          </label>
          <label>
            Default room visibility
            <select className="input" name="defaultRoomVisibility" defaultValue={settings.defaultRoomVisibility}>
              <option value="FRIENDS">Friends-only</option>
              <option value="PUBLIC">Public</option>
              <option value="EXPLICIT">Explicit members</option>
              <option value="ROLE_RESTRICTED">Role restricted</option>
            </select>
          </label>
          <label>
            Avatar upload limit in MB
            <input className="input" name="maxAvatarUploadMb" type="number" min="1" max="10" defaultValue={settings.maxAvatarUploadMb} />
          </label>
          <fieldset className="checkbox-grid">
            <legend>Allowed media providers</legend>
            {["YOUTUBE", "TWITCH", "DIRECT"].map((provider) => (
              <label key={provider}>
                <input name="allowedProviders" type="checkbox" value={provider} defaultChecked={settings.allowedProviders.includes(provider)} />
                {provider}
              </label>
            ))}
          </fieldset>
          <button className="button primary" type="submit">Save instance settings</button>
        </form>
      </Panel>
      <Panel title="Runtime" eyebrow="Container">
        <div className="settings-list">
          <Setting icon={<Database size={16} />} label="Database" value="Postgres via DATABASE_URL" />
          <Setting icon={<Shield size={16} />} label="Sessions" value="Signed HTTP-only cookie" />
          <Setting icon={<UsersRound size={16} />} label="Accounts" value={`${userCount} users`} />
          <Setting icon={<Database size={16} />} label="Rooms" value={`${roomCount} rooms`} />
        </div>
      </Panel>
      <Panel title="Health" eyebrow="Status">
        <div className="settings-list">
          <StatusDot tone="good" label="Admin page rendered" />
          <StatusDot tone="good" label="Database query succeeded" />
          <StatusDot tone="info" label="Socket endpoint configured at /api/socket" />
        </div>
      </Panel>
    </div>
  );
}

function SecurityPanel({
  settings,
  saved,
  auditEvents
}: {
  settings: AppSettings;
  saved?: string;
  auditEvents: Array<{
    id: string;
    action: string;
    createdAt: Date;
    actor: { username: string; displayName: string | null } | null;
    room: { slug: string; name: string } | null;
  }>;
}) {
  return (
    <div className="split-grid">
      <Panel title="Security Controls" eyebrow="Policy">
        {saved ? <p className="form-success">Security settings saved.</p> : null}
        <form className="form compact-form" action={updateSecuritySettings}>
          <label>
            Registration mode
            <select className="input" name="registrationMode" defaultValue={settings.registrationMode}>
              <option value="OPEN">Open registration</option>
              <option value="INVITE_ONLY">Invite only</option>
              <option value="DISABLED">Disabled</option>
            </select>
          </label>
          <div className="settings-list">
            <Setting icon={<LockKeyhole size={16} />} label="Password storage" value="bcrypt hash" />
            <Setting icon={<Shield size={16} />} label="Admin check" value="Server-side role lookup" />
            <Setting icon={<AlertTriangle size={16} />} label="Registration mode" value={settings.registrationMode.toLowerCase().replace("_", " ")} />
          </div>
          <button className="button primary" type="submit">Save security settings</button>
        </form>
      </Panel>
      <Panel title="Danger Zone" eyebrow="Destructive">
        <div className="settings-list">
          <StatusDot tone="good" label="User disable actions enabled" />
          <StatusDot tone="good" label="Non-personal room deletion enabled" />
          <StatusDot tone="good" label="Registration mode controls enabled" />
        </div>
      </Panel>
      <Panel title="Audit Events" eyebrow="Recent">
        {auditEvents.length === 0 ? (
          <EmptyState title="No audit events yet" description="Admin, room, queue, and chat actions will appear here." />
        ) : (
          <div className="settings-list">
            {auditEvents.map((event) => (
              <div className="setting-row" key={event.id}>
                <span>
                  <strong>{event.action}</strong>
                  <small>{event.actor?.displayName || event.actor?.username || "System"} - {event.room?.slug || "instance"} - {formatDate(event.createdAt)}</small>
                </span>
              </div>
            ))}
          </div>
        )}
      </Panel>
    </div>
  );
}

function Setting({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <div className="setting-row">
      {icon}
      <span>
        <strong>{label}</strong>
        <small>{value}</small>
      </span>
    </div>
  );
}

function formatDate(date: Date) {
  return new Intl.DateTimeFormat("en", { month: "short", day: "numeric", year: "numeric" }).format(date);
}