okay now make it so droppable in between anywhere like like right now when i drag and drop the block goes to the end and then it is draggable and droppable again to in between i want it to be put anywhere forom the start and everything should work as epected only
"""
// App.js
import React, { useState, useCallback, useRef } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import Header from './Header';
import WorkoutBlocks from './WorkoutBlocks';
import Graph from './Graph';
import ColumnsList from './ColumnsList';

function App() {
  const [graphBlocks, setGraphBlocks] = useState([]);
  const idRef = useRef(0); // Persistent ID counter

  // Function to add a new block to the Graph
  const addBlockToGraph = useCallback((block) => {
    if (!block.type || !block.height) {
      console.error('Invalid block:', block);
      return;
    }
    const newBlock = { ...block, id: idRef.current++ };
    setGraphBlocks((prevBlocks) => [...prevBlocks, newBlock]);
  }, []);

  // Function to move (rearrange) a block within the Graph
  const moveGraphBlock = useCallback((dragIndex, hoverIndex) => {
    setGraphBlocks((prevBlocks) => {
      const updatedBlocks = [...prevBlocks];
      const [removed] = updatedBlocks.splice(dragIndex, 1);
      updatedBlocks.splice(hoverIndex, 0, removed);
      return updatedBlocks;
    });
  }, []);

  // Function to remove a block from the Graph
  const removeBlockFromGraph = useCallback((id) => {
    setGraphBlocks((prevBlocks) => prevBlocks.filter((block) => block.id !== id));
  }, []);

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="justify-center min-h-screen bg-[#F8F8F8] w-full p-4">
        <Header />

        {/* Main content */}
        <div className="flex justify-between mx-6 my-3 items-start">
          {/* Workout blocks card */}
          <WorkoutBlocks />

          {/* Graph and Columns List */}
          <div className="w-full ml-6">
            <Graph
              blocks={graphBlocks}
              addBlockToGraph={addBlockToGraph}
              moveBlock={moveGraphBlock}
              removeBlock={removeBlockFromGraph}
            />
            <ColumnsList blocks={graphBlocks} />
          </div>
        </div>
      </div>
    </DndProvider>
  );
}

export default App;
"""
"""
// ColumnsList.js
import React from 'react';

const ColumnsList = ({ blocks }) => {
  return (
    <div className="mt-4 overflow-y-auto max-h-full bg-white rounded-lg shadow-md p-4">
      <h3 className="text-lg font-semibold mb-2">Current Columns</h3>
      {blocks.length === 0 ? (
        <p className="text-gray-500">No columns added yet.</p>
      ) : (
        <ul className="space-y-2">
          {blocks.map((block, index) => (
            <li key={block.id} className="flex items-center">
              <span className="mr-2 font-medium">Column {index + 1}:</span>
              <span>{block.type}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ColumnsList;
"""
"""
// Graph.js
import React from 'react';
import { useDrop } from 'react-dnd';
import GraphBlock from './GraphBlock';

const Graph = ({ blocks, addBlockToGraph, moveBlock, removeBlock }) => {
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'WORKOUT_BLOCK',
    drop: (item, monitor) => {
      addBlockToGraph(item);
      return { name: 'Graph' };
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  });

  const isActive = isOver && canDrop;

  return (
    <div
      ref={drop}
      className={`graph-container relative w-full h-[300px] bg-[#EAEAEA] rounded-lg shadow-md p-4 mb-4
        ${isActive ? 'bg-[#D3D3D3]' : ''}
      `}
    >
      {/* Bar Graph */}
      <div className="absolute inset-0 flex items-end space-x-2 px-2">
        {blocks.map((block, index) => (
          <GraphBlock
            key={block.id}
            id={block.id}
            index={index}
            block={block}
            moveBlock={moveBlock}
            removeBlock={removeBlock}
            totalBlocks={blocks.length}
          />
        ))}
      </div>

      {/* X-Axis Labels */}
      <div className="absolute bottom-0 w-full flex justify-between text-xs mt-1">
        {blocks.map((_, index) => (
          <span key={index}>{index + 1} km</span>
        ))}
      </div>

      {/* Y-Axis Labels */}
      <div className="absolute left-0 top-0 h-full flex flex-col justify-between text-xs mr-1">
        <span>100%</span>
        <span>75%</span>
        <span>50%</span>
        <span>25%</span>
        <span>0%</span>
      </div>
    </div>
  );
};

export default Graph;
"""
"""
// GraphBlock.js
import React, { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';

const GraphBlock = ({ id, index, block, moveBlock, removeBlock, totalBlocks }) => {
  const ref = useRef(null);

  const [, drop] = useDrop({
    accept: 'GRAPH_BLOCK',
    hover(item, monitor) {
      if (!ref.current) {
        return;
      }

      const dragIndex = item.index;
      const hoverIndex = index;

      // Prevent self-dragging
      if (dragIndex === hoverIndex) {
        return;
      }

      // Calculate the middle position
      const hoverBoundingRect = ref.current.getBoundingClientRect();
      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;

      // Determine mouse position
      const clientOffset = monitor.getClientOffset();
      const hoverClientX = clientOffset.x - hoverBoundingRect.left;

      // Only move if the mouse has crossed half of the item's width
      if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
        return;
      }
      if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
        return;
      }

      // Perform the move
      moveBlock(dragIndex, hoverIndex);

      // Update the dragged item's index
      item.index = hoverIndex;
    },
  });

  const [{ isDragging }, drag] = useDrag({
    type: 'GRAPH_BLOCK',
    item: { type: 'GRAPH_BLOCK', id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  // Connect drag and drop
  drag(drop(ref));

  const handleRemove = () => {
    removeBlock(id);
  };

  // Safety check
  if (!block) {
    console.error(`GraphBlock with id ${id} is undefined`);
    return null;
  }

  return (
    <div
      ref={ref}
      className={`relative bg-[#4339F280] rounded cursor-move flex flex-col items-center`}
      style={{
        width: `calc(${100 / totalBlocks}% - 8px)`, // Even width distribution
        height: `${block.height}%`,
        marginRight: index !== totalBlocks - 1 ? '8px' : '0',
        opacity: isDragging ? 0.5 : 1,
        transition: 'opacity 0.2s',
      }}
    >
      {/* Remove Button */}
      <button
        onClick={handleRemove}
        className="absolute top-0 right-0 bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs"
      >
        &times;
      </button>
      {/* Display Block Type */}
      <div className="text-xs text-white">{block.type}</div>
    </div>
  );
};

export default GraphBlock;
"""
"""
// WorkoutBlocks.js
import React from 'react';
import { useDrag } from 'react-dnd';
import { FiInfo } from 'react-icons/fi';

const WorkoutBlock = ({ children, type, height }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'WORKOUT_BLOCK',
    item: { type, height },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag}
      className={`relative bg-gray-200 rounded-lg overflow-hidden h-20 cursor-pointer ${
        isDragging ? 'opacity-50' : 'opacity-100'
      }`}
    >
      {children}
    </div>
  );
};

const WorkoutBlocks = () => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md max-w-sm w-full">
      <div className="flex justify-between items-center mb-3">
        <h2 className="text-lg font-semibold">Click or drag the blocks to build workout</h2>
        <FiInfo className="text-gray-400 text-2xl" />
      </div>

      <hr className="border-gray-300 mb-4" />

      <div className="grid grid-cols-2 gap-3">
        <WorkoutBlock type="block50" height={50}>
          <div className="absolute bottom-0 w-full h-1/2" style={{ background: '#4339F280' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="block75" height={75}>
          <div className="absolute bottom-0 w-full h-3/4" style={{ background: '#4339F280' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="block30" height={30}>
          <div className="absolute bottom-0 w-full h-1/3" style={{ background: '#4339F280' }}></div>
        </WorkoutBlock>

        {/* Single block with two columns */}
        <WorkoutBlock type="block60_40" height={60}>
          <div className="flex h-full gap-1 transform scale-y-[-1] ">
            <div className="w-1/2 h-3/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/2 h-2/5" style={{ background: '#4339F280' }}></div>
          </div>
        </WorkoutBlock>

        {/* Single block with four columns */}
        <WorkoutBlock type="block80_60_40_20" height={80}>
          <div className="flex h-full gap-1 transform scale-y-[-1]">
            <div className="w-1/4 h-1/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-2/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-3/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-4/5" style={{ background: '#4339F280' }}></div>
          </div>
        </WorkoutBlock>

        {/* Another single block with reversed four columns */}
        <WorkoutBlock type="block20_40_60_80" height={20}>
          <div className="flex h-full gap-1 transform scale-y-[-1] ">
            <div className="w-1/4 h-4/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-3/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-2/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-1/5" style={{ background: '#4339F280' }}></div>
          </div>
        </WorkoutBlock>
      </div>
    </div>
  );
};

export default WorkoutBlocks;