import { useEffect, useState } from "react";
import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
import { Button, Input, Label } from "@common/components";
import { LwpoCodeApi, type LwpoCodeParams } from "@/entities/code";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore, useDataTable } from "@/shared/lib";
import { columns } from "../model/lwpocode-table-columns";
import { LwpoCodeManagementDialog } from "./lwpocode-dialog";

type LwpoCodeSectionProps = {
  upCd?: string;
};

function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
  const alert = useAlertStore((state) => state.setMessage);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [lwpoCodeQuery, setLwpoCodeQuery] = useState<LwpoCodeParams>({
    lwpoCdNm: "",
  });
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });

  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination],
    queryFn: () =>
      LwpoCodeApi.getLwpoCodeList({
        ...lwpoCodeQuery,
        upCd,
        page: pagination.pageIndex,
        size: pagination.pageSize,
      }),
    enabled: !!upCd,
    placeholderData: keepPreviousData,
  });

  const { mutateAsync: codeRefreshAll } = useMutation({
    mutationFn: LwpoCodeApi.codeRefreshAll,
    onSuccess: () => {
      alert("코드 갱신이 완료되었습니다.");
    },
  });

  const { tableComponent } = useDataTable({
    query,
    tableOptions: {
      columns,
      state: { pagination },
      manualPagination: true,
      enableMultiRowSelection: false,
      getCoreRowModel: getCoreRowModel(),
      onPaginationChange: setPagination,
      getRowId: (row) => row.lwpoCd,
    },
    dataTableOptions: { viewPagination: true },
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    query.refetch();
  };

  useEffect(() => {
    setPagination({ ...pagination, pageIndex: 0 });
  }, [upCd]);

  return (
    <div className="flex-1">
      <div className="card card-border">
        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
          <Label htmlFor="" className="mr-2 text-label">
            하위코드명
          </Label>
          <Input
            className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
            value={lwpoCodeQuery.lwpoCdNm}
            onChange={(e) =>
              setLwpoCodeQuery({
                ...lwpoCodeQuery,
                lwpoCdNm: e.target.value,
              })
            }
          />
          <Button className="h-[3.2rem]" type="submit">
            조회
          </Button>
        </form>
      </div>
      <div className="card card-border">
        <div className="card-header">
          <h3 className="text-2xl font-medium text-label">하위코드 목록</h3>
          <div className="flex items-center gap-2">
            <Button color="emerald" onClick={() => codeRefreshAll()}>
              코드갱신
            </Button>
            <LwpoCodeManagementDialog
              open={dialogOpen}
              onOpenChange={setDialogOpen}
            >
              <Button>등록</Button>
            </LwpoCodeManagementDialog>
          </div>
        </div>
        <div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
          {tableComponent}
        </div>
      </div>
    </div>
  );
}

export { LwpoCodeSection };