import React, { useState, useEffect, useRef, Fragment } from 'react';
import TaskContent from './Task/TaskContent';
import { useSelector, useDispatch } from 'react-redux';
import { Draggable, Droppable } from 'react-beautiful-dnd';
import { Button } from '@mantine/core';
import { IconClipboardList } from '@tabler/icons-react';
import { fetchTasksBySection } from '../../../Settings/store/taskSlice';
import { translate } from '../../../../utils/i18n';

const TaskListContent = ({ listType, view, taskSection, projectId, taskSectionId, contents }) => {
  const dispatch = useDispatch();
  const [tasks, setTasks] = useState(contents || []);
  const loadMoreRef = useRef(null);

  const { loggedUserId } = useSelector((state) => state.auth.user);
  const { loggedInUser } = useSelector((state) => state.auth.session);
  const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;
  const { loadingSections, loadedSections, buttonLoadingSections, filterValues } = useSelector(state => state.settings.task);

  const offset = loadedSections?.[taskSection]?.offset || 0;
  const hasMore = loadedSections?.[taskSection]?.hasMore === true;
  const isLoading = loadingSections?.[taskSection] || false;
  const isButtonLoading = buttonLoadingSections?.[taskSection] || false;

  useEffect(() => {
    setTasks(contents || []);
  }, [contents]);

  const handleLoadMore = () => {
    dispatch(fetchTasksBySection({
      projectId,
      sectionSlug: taskSection,
      limit: 10,
      offset,
      append: true,
      userId: userId,
      search: filterValues?.name || ''
    })).then(() => {
      setTimeout(() => {
        loadMoreRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }, 150); // Delay ensures new tasks are rendered first
    });
  };

  return (
    <Fragment>
      <Droppable key={taskSection} droppableId={taskSection} type={listType}>
        {(dropProvided, snapshot) => (
          <div
            ref={dropProvided.innerRef}
            {...dropProvided.droppableProps}
            style={{ transition: 'background-color 0.3s ease' }}
            className={`w-full h-full min-h-[25px] !px-[5px] ${tasks && tasks.length === 0 ? 'border-b border-gray-200' : ''}`}
          >
            {tasks && tasks.length > 0 ? (
              tasks.map((task, taskIndex) => (
                task?.id && task?.id !== 'undefined' && (
                  <Draggable key={task.id} draggableId={task.id.toString()} index={taskIndex}>
                    {(dragProvided, dragSnapshot) => (
                      <div
                        ref={dragProvided.innerRef}
                        {...dragProvided.draggableProps}
                        {...dragProvided.dragHandleProps}
                        className={`mb-0 mt-0 single-task ${dragSnapshot.isDragging ? 'z-50' : ''}`}
                        style={{
                          ...dragProvided.draggableProps.style,
                          backgroundColor: dragSnapshot.isDragging ? '#EBF1F4' : '#ffffff',
                          transition: 'all 0.1s ease-in-out',
                          cursor: dragSnapshot.isDragging ? 'grabbing' : 'grab',
                          opacity: dragSnapshot.isDragging ? 0.9 : 1,
                          transform: dragSnapshot.isDragging
                            ? `${dragProvided.draggableProps.style?.transform} rotate(-2deg) scale(1.02)`
                            : dragProvided.draggableProps.style?.transform,
                          boxShadow: dragSnapshot.isDragging
                            ? '0 6px 12px rgba(0, 0, 0, 0.15)'
                            : 'none',
                          userSelect: 'none',
                          border: dragSnapshot.isDragging ? '1px solid #E5E5E5' : 'none',
                        }}
                      >
                        <TaskContent view={view} taskSection={taskSection} taskData={task} />
                      </div>
                    )}
                  </Draggable>
                )
              ))
            ) : (
              <div className="flex flex-col items-center justify-center py-5 gap-1">
                <IconClipboardList size={22} stroke={1.5} color="#CBD5E1" />
                <span className="text-[12px] text-[#94A3B8]">{translate('No tasks yet')}</span>
              </div>
            )}

            {/* Load More Button */}
            {hasMore && (
              <div className="text-center mt-2 mb-2">
                <Button
                  ref={loadMoreRef}
                  onClick={handleLoadMore}
                  loading={isButtonLoading}
                  loaderProps={{ type: 'dots' }}
                  disabled={isButtonLoading}
                  size="xs"
                  variant="filled"
                  color="#ED7D31"
                  className="font-semibold"
                >
                  {translate('Load More')}
                </Button>
              </div>
            )}

            {dropProvided.placeholder}
          </div>
        )}
      </Droppable>
    </Fragment>
  );
};

export default TaskListContent;