"use client";

import { UserDeleteDialog } from "@/components/dashboard/users/user-delete-dialog";
import { UserDisableDialog } from "@/components/dashboard/users/user-disable-dialog";
import { UserEnableDialog } from "@/components/dashboard/users/user-enable-dialog";
import { UsersActiveFilterBadges } from "@/components/dashboard/users/users-active-filter-badges";
import { UsersFilterPanel } from "@/components/dashboard/users/users-filter-panel";
import { UsersTable } from "@/components/dashboard/users/users-table";
import { FilterButton } from "@/components/ui/filter/filter-button";
import { Pagination } from "@/components/ui/pagination";
import { SearchInput } from "@/components/ui/search-input";
import {
  deleteUser,
  getUsersQueryParams,
  toggleUser,
  useUsers,
} from "@/lib/api/dashboard/users-api";
import { useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";

export function UsersPageView() {
  const searchParams = useSearchParams();
  const filtersKey = searchParams.toString();
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const [isEnableOpen, setIsEnableOpen] = useState(false);
  const [isDisableOpen, setIsDisableOpen] = useState(false);

  const params = useMemo(
    () => getUsersQueryParams(new URLSearchParams(filtersKey)),
    [filtersKey],
  );
  const { users, meta, error, isLoading, refetch } = useUsers(params);

  const closeAllDialogs = () => {
    setIsDeleteOpen(false);
    setIsDisableOpen(false);
    setIsEnableOpen(false);
  };

  const handleDeleteUser = (id: number) => {
    setSelectedUserId(id);
    closeAllDialogs();
    setIsDeleteOpen(true);
  };

  const handleDisableUser = (id: number) => {
    setSelectedUserId(id);
    closeAllDialogs();
    setIsDisableOpen(true);
  };

  const handleEnableUser = (id: number) => {
    setSelectedUserId(id);
    closeAllDialogs();
    setIsEnableOpen(true);
  };

  const handleConfirmDelete = async () => {
    if (selectedUserId == null) {
      return;
    }

    await deleteUser(selectedUserId);
    setSelectedUserId(null);
    setIsDeleteOpen(false);
  };

  const handleConfirmDisable = async () => {
    if (selectedUserId == null) {
      return;
    }

    await toggleUser(selectedUserId);
    setIsDisableOpen(false);
  };

  const handleConfirmEnable = async () => {
    if (selectedUserId == null) {
      return;
    }

    await toggleUser(selectedUserId);
    setIsEnableOpen(false);
  };

  return (
    <>
      <section className="overflow-hidden rounded-2xl border border-border bg-card">
        <div className="flex flex-wrap items-center justify-between gap-3 p-6">
          <div className="flex flex-wrap items-center gap-3">
            <SearchInput />
            <FilterButton isActive={isFilterOpen} onClick={() => setIsFilterOpen((previous) => !previous)} />
          </div>
        </div>

        {isFilterOpen ? (
          <div className="px-6 pb-6">
            <UsersFilterPanel
              key={filtersKey}
              isOpen={isFilterOpen}
              onClose={() => setIsFilterOpen(false)}
            />
          </div>
        ) : (
          <UsersActiveFilterBadges className="px-6 pb-4" />
        )}

        {isLoading ? (
          <div className="flex h-52 items-center justify-center text-sm text-muted-foreground" role="status">
            Loading...
          </div>
        ) : error ? (
          <div className="flex h-52 items-center justify-center text-sm text-muted-foreground" role="alert">
            Failed to load users
            <button type="button" className="ms-3 text-primary underline" onClick={() => refetch()}>
              Retry
            </button>
          </div>
        ) : (
          <>
            <UsersTable
              data={users || []}
              page={params.page}
              perPage={params.per_page}
              onEditRole={() => {}}
              onDelete={handleDeleteUser}
              onDisable={handleDisableUser}
              onEnable={handleEnableUser}
            />

            <Pagination
              currentPage={params.page}
              totalPages={meta.last_page}
              totalItems={meta.total}
              itemsPerPage={params.per_page}
              className="border-t border-border"
              perPageParamName="per_page"
            />
          </>
        )}
      </section>

      <UserDeleteDialog
        open={isDeleteOpen}
        onOpenChange={setIsDeleteOpen}
        onConfirmDelete={handleConfirmDelete}
      />

      <UserDisableDialog
        open={isDisableOpen}
        onOpenChange={setIsDisableOpen}
        onConfirmDisable={handleConfirmDisable}
      />

      <UserEnableDialog
        open={isEnableOpen}
        onOpenChange={setIsEnableOpen}
        onConfirmEnable={handleConfirmEnable}
      />
    </>
  );
}