"use client";

import { useState } from "react";
import {
  keepPreviousData,
  useQuery,
  useQueryClient,
} from "@tanstack/react-query";
import {
  getCoreRowModel,
  useReactTable,
  type PaginationState,
  type RowSelectionState,
} from "@tanstack/react-table";
import { Button, DataTable } from "@common/components";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore } from "@/shared/lib";
import { columns } from "../model/group-users-table-columns";
import { GroupUsersApi } from "../api/group-users-service";
import { AdditionalUserDialog } from "./additional-user-dialog";

type GroupUsersSectionProps = {
  groupId?: string;
};

function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
  const queryClient = useQueryClient();
  const alert = useAlertStore((state) => state.setMessage);

  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const { data: groupUsersList } = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
    queryFn: () =>
      GroupUsersApi.findPageGroupUser({
        keyword: groupId,
        page: pagination.pageIndex,
        size: pagination.pageSize,
      }),
    enabled: !!groupId,
    placeholderData: keepPreviousData,
  });

  const table = useReactTable({
    data: groupUsersList?.content ?? [],
    columns,
    rowCount: groupUsersList?.totalElements ?? 0,
    state: { pagination, rowSelection },
    manualPagination: true,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    getCoreRowModel: getCoreRowModel(),
    onPaginationChange: setPagination,
    onRowSelectionChange: setRowSelection,
    getRowId: (row) => row.userUnqId,
  });

  const handleDeleteSelected = async () => {
    const selectedRows = Object.keys(rowSelection);
    if (selectedRows.length === 0 || !groupId) return;

    try {
      const usersToDelete = selectedRows.map((userUnqId) => ({
        mode: "D",
        groupId,
        userUnqId,
      }));

      await GroupUsersApi.saveGroupUser(usersToDelete);
      queryClient.invalidateQueries({
        queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId],
      });
      alert("사용자 삭제를 완료했습니다.", () => {
        setRowSelection({});
      });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="flex-1">
      <div className="card card-border">
        <div className="card-header">
          <h3 className="text-2xl font-medium text-label">그룹 사용자 목록</h3>
          <div className="flex gap-2">
            <AdditionalUserDialog groupId={groupId} />
            <Button
              color="red"
              disabled={table.getSelectedRowModel().rows.length === 0}
              onClick={handleDeleteSelected}
            >
              선택삭제
            </Button>
          </div>
        </div>
        <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
          <DataTable table={table} viewPagination />
        </div>
      </div>
    </div>
  );
}

export { GroupUsersSection };