"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams, usePathname } from "next/navigation";
import { AdminPageHeader } from "@/components/admin/AdminBreadcrumbs";
import { AdminDataTable, Pagination } from "@/components/admin/AdminDataTable";
import { AdminFilterBar, AdminSort } from "@/components/admin/AdminFilterBar";
import { EmptyState } from "@/components/admin/EmptyState";
import { StatusBadge } from "@/components/admin/StatusBadge";
import { apiGet, formatDate, FetchError } from "@/lib/client-api";
import { toast } from "@/components/admin/Toast";

interface AdminUserListItem {
  id: string;
  name: string;
  email: string;
  role: string;
  status: string;
  emailVerified: boolean;
  avatar: string | null;
  lastLoginAt: string | null;
  createdAt: string;
  eventCount: number;
  plan: string | null;
  planStatus: string | null;
}

interface ListResult {
  items: AdminUserListItem[];
  total: number;
  page: number;
  pageSize: number;
}

const SORT_OPTIONS = [
  { label: "Newest first", value: "newest" },
  { label: "Oldest first", value: "oldest" },
  { label: "Name A–Z", value: "name_asc" },
  { label: "Name Z–A", value: "name_desc" },
  { label: "Last login", value: "last_login" },
  { label: "Most events", value: "most_events" },
  { label: "Least events", value: "least_events" },
];

export default function AdminUsersPage() {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();

  const buildUrl = (overrides: Record<string, string | undefined>) => {
    const next = new URLSearchParams(params.toString());
    for (const [k, v] of Object.entries(overrides)) {
      if (v === undefined || v === "" || v === "all") next.delete(k);
      else next.set(k, v);
    }
    return `${pathname}?${next.toString()}`;
  };

  const [data, setData] = useState<ListResult | null>(null);
  const [loading, setLoading] = useState(true);

  const queryString = useMemo(() => params.toString(), [params]);

  useEffect(() => {
    let cancelled = false;
    apiGet<ListResult>(`/api/admin/users?${queryString}`).then(
      (res) => {
        if (!cancelled) {
          setData(res);
          setLoading(false);
        }
      },
      (err) => {
        if (!cancelled) {
          setLoading(false);
          toast(
            err instanceof FetchError ? err.message : "Failed to load users.",
            "error",
          );
        }
      },
    );
    return () => {
      cancelled = true;
    };
  }, [queryString]);

  return (
    <div className="space-y-6">
      <AdminPageHeader
        breadcrumbs={[{ label: "Admin", href: "/admin" }, { label: "Users" }]}
        title="Users"
        description="Search, filter, and manage platform users."
      />

      <div className="rounded-2xl border border-border bg-surface p-4 shadow-sm">
        <AdminFilterBar
          filters={[
            { key: "q", label: "Search", type: "search" },
            {
              key: "role",
              label: "Role",
              type: "select",
              options: [
                { label: "User", value: "user" },
                { label: "Admin", value: "admin" },
                { label: "Super admin", value: "super_admin" },
              ],
            },
            {
              key: "status",
              label: "Account status",
              type: "select",
              options: [
                { label: "Active", value: "active" },
                { label: "Suspended", value: "suspended" },
                { label: "Pending", value: "pending" },
                { label: "Deleted", value: "deleted" },
              ],
            },
            { key: "plan", label: "Plan", type: "search" },
            { key: "registrationFrom", label: "Joined from", type: "date" },
            { key: "registrationTo", label: "Joined to", type: "date" },
            { key: "lastLoginFrom", label: "Last login from", type: "date" },
            { key: "lastLoginTo", label: "Last login to", type: "date" },
          ]}
        />
        <div className="mt-3 flex items-center justify-end">
          <AdminSort options={SORT_OPTIONS} />
        </div>
      </div>

      {loading ? (
        <div className="rounded-2xl border border-border bg-surface p-8 text-center text-sm text-muted">
          Loading users…
        </div>
      ) : data && data.items.length > 0 ? (
        <>
          <AdminDataTable
            rows={data.items}
            rowKey={(u) => u.id}
            columns={[
              {
                key: "name",
                header: "Name",
                render: (u) => (
                  <Link
                    href={`/admin/users/${u.id}`}
                    className="font-medium text-foreground hover:text-primary"
                  >
                    {u.name}
                  </Link>
                ),
              },
              { key: "email", header: "Email", render: (u) => u.email },
              {
                key: "role",
                header: "Role",
                render: (u) => <StatusBadge status={u.role} tone="primary" />,
              },
              {
                key: "status",
                header: "Status",
                render: (u) => <StatusBadge status={u.status} />,
              },
              {
                key: "plan",
                header: "Plan",
                render: (u) => (
                  <span className="text-xs">
                    {u.plan ?? "—"}
                    {u.planStatus ? (
                      <span className="ml-1 text-muted">({u.planStatus})</span>
                    ) : null}
                  </span>
                ),
              },
              {
                key: "events",
                header: "Events",
                render: (u) => (
                  <span className="text-xs text-muted">{u.eventCount}</span>
                ),
              },
              {
                key: "created",
                header: "Joined",
                render: (u) => (
                  <span className="text-xs text-muted">
                    {formatDate(u.createdAt)}
                  </span>
                ),
              },
              {
                key: "login",
                header: "Last login",
                render: (u) => (
                  <span className="text-xs text-muted">
                    {formatDate(u.lastLoginAt)}
                  </span>
                ),
              },
            ]}
          />
          <Pagination
            page={data.page}
            pageSize={data.pageSize}
            total={data.total}
            onPageChange={(p) => router.push(buildUrl({ page: String(p) }))}
          />
        </>
      ) : (
        <EmptyState
          title="No users match these filters"
          description="Try adjusting your search or clearing filters."
        />
      )}
    </div>
  );
}