"use client";

import { FormEvent, Suspense, useEffect, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { AdminActionLink } from "@/components/admin/AdminActionLink";
import { AdminDataTable } from "@/components/admin/AdminDataTable";
import {
  AdminFilterBar,
  AdminFilterField,
  adminFilterInputClassName,
} from "@/components/admin/AdminFilterBar";
import { AdminPageIntro } from "@/components/admin/AdminPageIntro";
import { AdminPagination } from "@/components/admin/AdminPagination";
import { AdminShell } from "@/components/admin/AdminShell";
import { AdminStatusBadge } from "@/components/admin/AdminStatusBadge";
import { AdminTableSkeleton } from "@/components/admin/AdminTableSkeleton";
import { ErrorState } from "@/components/ui/ErrorState";
import { ApiError } from "@/lib/api";
import {
  buildAdminListQuery,
  parseAdminEnumParam,
  parseAdminPage,
  parseAdminSearchParam,
  parseAdminUserStatusParam,
} from "@/lib/admin-list-query";
import { adminApi, formatAdminDate } from "@/lib/api/admin";
import type { AdminPaginationMeta, AdminUserListItem } from "@/types/admin";

const ACCOUNT_TYPES = ["creator", "brand"] as const;

export function AdminUsersPage() {
  return (
    <AdminShell title="Users" subtitle="Marketplace directory">
      {() => (
        <Suspense fallback={<AdminTableSkeleton columns={6} />}>
          <UsersContent />
        </Suspense>
      )}
    </AdminShell>
  );
}

function UsersContent() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const urlSearch = parseAdminSearchParam(searchParams.get("search"));
  const urlAccountType = parseAdminEnumParam(searchParams.get("account_type"), ACCOUNT_TYPES);
  const urlStatus = parseAdminUserStatusParam(searchParams.get("status"));
  const urlPage = parseAdminPage(searchParams.get("page"));

  const [search, setSearch] = useState(urlSearch);
  const [accountType, setAccountType] = useState(urlAccountType);
  const [status, setStatus] = useState(urlStatus);
  const [users, setUsers] = useState<AdminUserListItem[]>([]);
  const [meta, setMeta] = useState<AdminPaginationMeta | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setSearch(urlSearch);
    setAccountType(urlAccountType);
    setStatus(urlStatus);
  }, [urlSearch, urlAccountType, urlStatus]);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const apiStatus = urlStatus === "all" ? undefined : urlStatus;
        const result = await adminApi.listUsers({
          page: urlPage,
          search: urlSearch || undefined,
          account_type: urlAccountType || undefined,
          status: apiStatus,
        });
        if (cancelled) return;
        setUsers(result.users);
        setMeta(result.meta);
      } catch (err) {
        if (cancelled) return;
        setError(err instanceof ApiError ? err.message : "Unable to load users.");
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();
    return () => {
      cancelled = true;
    };
  }, [urlSearch, urlAccountType, urlStatus, urlPage]);

  function replaceQuery(next: {
    search?: string;
    account_type?: string;
    status?: string;
    page?: number;
  }) {
    const query = buildAdminListQuery({
      search: next.search !== undefined ? next.search : urlSearch,
      account_type: next.account_type !== undefined ? next.account_type : urlAccountType,
      // Persist explicit status; omit only when default active to keep URLs clean
      status:
        next.status !== undefined
          ? next.status === "active"
            ? undefined
            : next.status
          : urlStatus === "active"
            ? undefined
            : urlStatus,
      page: next.page !== undefined ? next.page : urlPage,
    });
    router.replace(`${pathname}${query}`, { scroll: false });
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    replaceQuery({
      search: search.trim(),
      account_type: accountType,
      status,
      page: 1,
    });
  }

  function handleReset() {
    setSearch("");
    setAccountType("");
    setStatus("active");
    router.replace(pathname, { scroll: false });
  }

  return (
    <div className="space-y-5">
      <AdminPageIntro description="Read-only directory of creators and brands." />

      <AdminFilterBar onSubmit={handleSubmit} onReset={handleReset} disabled={loading}>
        <AdminFilterField label="Search" className="min-w-[14rem] lg:flex-[1.4]">
          <input
            className={adminFilterInputClassName}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search name, email or username"
            aria-label="Search name, email or username"
          />
        </AdminFilterField>
        <AdminFilterField label="Account type">
          <select
            className={adminFilterInputClassName}
            value={accountType}
            onChange={(e) => setAccountType(e.target.value)}
          >
            <option value="">All</option>
            <option value="creator">Creator</option>
            <option value="brand">Brand</option>
          </select>
        </AdminFilterField>
        <AdminFilterField label="Status">
          <select
            className={adminFilterInputClassName}
            value={status}
            onChange={(e) => setStatus(e.target.value)}
          >
            <option value="all">All</option>
            <option value="active">Active</option>
            <option value="deleted">Deleted</option>
          </select>
        </AdminFilterField>
      </AdminFilterBar>

      {error ? (
        <ErrorState
          title="Unable to load users"
          message={error}
          onRetry={() => replaceQuery({ page: urlPage })}
        />
      ) : loading ? (
        <AdminTableSkeleton columns={6} />
      ) : (
        <>
          <AdminDataTable
            rows={users}
            caption="Marketplace users"
            emptyTitle="No users found"
            emptyDescription="Try adjusting search or filters."
            columns={[
              {
                key: "name",
                header: "User",
                cell: (row) => (
                  <div className="min-w-[12rem]">
                    <p className="font-medium text-primary">{row.name}</p>
                    <p className="mt-0.5 text-[0.75rem] text-ink-60">{row.email}</p>
                  </div>
                ),
              },
              {
                key: "type",
                header: "Type",
                cell: (row) => <AdminStatusBadge status={row.account_type} />,
              },
              {
                key: "profile",
                header: "Profile",
                cell: (row) => (
                  <span className="text-ink-60">{row.profile_name ?? row.username ?? "—"}</span>
                ),
              },
              {
                key: "status",
                header: "Status",
                cell: (row) => <AdminStatusBadge status={row.status} />,
              },
              {
                key: "created",
                header: "Created",
                cell: (row) => (
                  <span className="whitespace-nowrap text-[0.75rem] text-ink-40">
                    {formatAdminDate(row.created_at)}
                  </span>
                ),
              },
              {
                key: "actions",
                header: "Action",
                className: "text-right",
                headerClassName: "text-right",
                cell: (row) => <AdminActionLink href={`/admin/users/${row.id}`} />,
              },
            ]}
          />
          {meta ? (
            <AdminPagination
              meta={meta}
              onPageChange={(next) => replaceQuery({ page: next })}
            />
          ) : null}
        </>
      )}
    </div>
  );
}