import { useState } from "react";
import {
  useBucketList,
  useBuckets,
  useCreateBucket,
  useUpdateBucket,
} from "../../hooks/useDirectory";
import { useAllEmployees } from "../../hooks/useEmployees";
import BucketList from "./BucketList";
import BucketForm from "./BucketForm";
import AssignEmployees from "./AssignedBucket";
import AssignedBucket from "./AssignedBucket";
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";

const ManageBucket1 = () => {
  const { data, isError, isLoading, error } = useBucketList();
  const { employeesList } = useAllEmployees(false);
  const [action, setAction] = useState(null); // "create" | "edit" | null
  const [selectedBucket, setSelectedBucket] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");
  const { setContactOpen, setDeleteBucket } = useDirectoryContext();

  const handleClose = () => {
    setAction(null);
    setSelectedBucket(null);
  };
  const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
    handleClose();
  });
  const { mutate: updateBucket, isPending: updating } = useUpdateBucket(() => {
    handleClose();
  });


  const handleSubmit = (BucketPayload) => {
    if (selectedBucket) {
      updateBucket({
        bucketId: selectedBucket.id,
        BucketPayload: { ...BucketPayload, id: selectedBucket.id },
      });
    } else createBucket(BucketPayload);
  };


  return (
    <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
      <div className="d-flex justify-content-center">
        <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
      </div>

      {action ? (
        <>
          {action && (
            <div>
              <BucketForm
                selectedBucket={selectedBucket}
                mode={action} // pass create | edit
                onSubmit={handleSubmit}
                onCancel={() => {
                  setAction(null);
                  setSelectedBucket(null);
                }}
                isPending={creating || updating}
              />
              {action === "edit" && (
                <AssignedBucket
                selectedBucket={selectedBucket}
                handleClose={handleClose}
              />)}
            </div>
          )}
        </>
      ) : (
        <>
          <div className="d-flex justify-content-between align-items-center gap-2 my-2">
            <input
              type="search"
              className="form-control form-control-sm w-25"
              placeholder="Search..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
            <button
              className="btn btn-sm btn-primary"
              onClick={() => setAction("create")}
            >
              <i className="bx bx-plus-circle me-2"></i>
              Add Bucket
            </button>
          </div>

          <BucketList
            buckets={data}
            loading={isLoading}
            searchTerm={searchTerm}
            onDelete={(id) => setDeleteBucket({ isOpen: true, bucketId: id })}
            onEdit={(b) => {
              setAction("edit")
              setSelectedBucket(b)
            }}
          />
        </>
      )}

    </div>
  );
};
export default ManageBucket1;