import { IconCheck, IconChevronDown, IconMinus } from '@tabler/icons-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { createProjectPriority, deleteProjectPriority, removeSuccessMessage, editProjectPrioritySortOrder } from "../../Settings/store/taskSlice";
import { editMyTask } from "../../Settings/store/myTaskSlice";
import { hasPermission } from "../../ui/permissions";
import { Box, Button, Grid, Popover, Text, Title, useMantineTheme, LoadingOverlay, Divider } from "@mantine/core";
import { useHotkeys } from '@mantine/hooks';
import ProjectSettingsModal from "../../Elements/Project/ProjectSettingsModal";
import { modals } from "@mantine/modals";
import { notifications } from "@mantine/notifications";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { translate } from '../../../utils/i18n';

const T = {
  white:    '#FFFFFF',
  border:   '#E2E8F0',
  text:     '#1A202C',
  muted:    '#64748B',
  teal:     '#39758D',
  tealLt:   '#EBF1F4',
  radius:   '12px',
  radiusSm: '6px',
};

const TaskPriority = ({ task, priority }) => {
  const dispatch = useDispatch();
  const theme = useMantineTheme();
  const projectId = task.project_id;
  const taskId = task.id;
  const { loggedUserId } = useSelector((state) => state.auth.user)
  const { loggedInUser } = useSelector((state) => state.auth.session)

  const [newPriority, setNewPriority] = useState('');
  const [newPriorityColor, setNewPriorityColor] = useState('');
  const [selectedPriority, setSelectedPriority] = useState(priority ? priority.id : '');
  const [selectedPriorityName, setSelectedPriorityName] = useState(priority ? priority.name : '');
  const [selectedPriorityColor, setSelectedPriorityColor] = useState(priority && priority.color_code ? priority.color_code : '#000000');
  const [showPriorityList, setShowPriorityList] = useState(false);
  const [showPriorityAddInput, setShowPriorityAddInput] = useState(false);
  const [showPriorityEditInput, setShowPriorityEditInput] = useState(false);
  const selectPriorityRef = useRef(null);
  const priorityInputRef = useRef(null);
  const projectPermissions = task && task.project && task.project.permissions ? task.project.permissions.permissions : [];

  const [isLoading, setIsLoading] = useState(false);
  const [settingsModalOpened, setSettingsModalOpened] = useState(false);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (selectPriorityRef.current && !selectPriorityRef.current.contains(event.target)) {
        setShowPriorityList(false);
        setShowPriorityAddInput(false);
        setShowPriorityEditInput(false);
      }
    };

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        setShowPriorityList(false);
        setShowPriorityAddInput(false);
        setShowPriorityEditInput(false);
        setNewPriority('');
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.addEventListener('keydown', handleKeyDown);
    };
  }, []);

  useEffect(() => {
    setSelectedPriority(priority ? priority.id : '');
    setSelectedPriorityName(priority ? priority.name : '');
    setSelectedPriorityColor(priority && priority.color_code ? priority.color_code : '#000000')
  }, [priority]);

  useHotkeys([
    ['Escape', () => setShowPriorityList(false)]
  ]);

  const handleInputChange = (e) => {
    setNewPriority(e.target.value);
  };

  const handleColorInputChange = (e) => {
    setNewPriorityColor(e.target.value);
  };

  const handlePriorityListShow = () => {
    setShowPriorityList(true);
  };

  const handleAddPriority = () => {
    if (newPriority.trim() !== '') {
      const submitData = {
        name: newPriority,
        project_id: projectId,
        color_code: newPriorityColor,
        created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
      }
      dispatch(createProjectPriority(submitData)).then((response) => {

        if (response.payload && response.payload.data) {

          const newPriorities = response.payload.data;

          setProjectPriorities(newPriorities);
          // map through the priorities and update the selected priority
          const priority = newPriorities.find(priority => priority.id === selectedPriority);

          setSelectedPriority(priority ? priority.id : '');
          setSelectedPriorityName(priority ? priority.name : '');
          setSelectedPriorityColor(priority && priority.color_code ? priority.color_code : '#000000');
          setNewPriority('');
          setShowPriorityAddInput(false);

          notifications.show({
            color: theme.primaryColor,
            title: response.payload.message,
            icon: <IconCheck />,
            autoClose: 5000,
            // withCloseButton: true,
          });
          const timer = setTimeout(() => {
            dispatch(removeSuccessMessage());
          }, 5000); // Clear notification after 3 seconds

          return () => clearTimeout(timer);
        }

      });
    }
  };

  const handleCreatePriority = () => {
    setShowPriorityEditInput(false)
    setShowPriorityAddInput(true);
    setTimeout(() => {
      if (priorityInputRef.current) {
        priorityInputRef.current.focus();
      }
    }, 0);
  };


  const [projectPriorities, setProjectPriorities] = useState(task && task.project && task.project.projectPriorities ? task.project.projectPriorities : []);

  //useEffect
  useEffect(() => {
    setProjectPriorities(task && task.project && task.project.projectPriorities ? task.project.projectPriorities : []);
  }, [task]);

  const [priorityId, setPriorityId] = useState(null);
  // priorityEditHandler
  const priorityEditHandler = (priority) => {
    if (priority && priority.id) {
      setNewPriority(priority.name);
      setNewPriorityColor(priority.color_code);
      setPriorityId(priority.id);
      setShowPriorityAddInput(false);
      setShowPriorityEditInput(true);
      setTimeout(() => {
        if (priorityInputRef.current) {
          priorityInputRef.current.focus();
        }
      }, 0);
    }

  }

  const handleUpdatePriority = () => {
    if (newPriority.trim() !== '' && newPriority !== 'Type name here') {
      const submitData = {
        id: priorityId,
        name: newPriority,
        project_id: projectId,
        color_code: newPriorityColor,
        created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
      }
      dispatch(createProjectPriority(submitData)).then((response) => {

        if (response.payload && response.payload.status === 200) {

          const newPriorities = response.payload.data;

          setProjectPriorities(newPriorities);
          // map through the priorities and update the selected priority
          const priority = newPriorities.find(priority => priority.id === selectedPriority);

          setSelectedPriority(priority ? priority.id : '');
          setSelectedPriorityName(priority ? priority.name : '');
          setSelectedPriorityColor(priority && priority.color_code ? priority.color_code : '#000000');
          setNewPriority('');
          setShowPriorityEditInput(false);

          notifications.show({
            color: theme.primaryColor,
            title: response.payload.message,
            icon: <IconCheck />,
            autoClose: 5000,
            // withCloseButton: true,
          });
        }

      })
    }
  };

  const handleSelectPriority = (priority) => {
    if (taskId && taskId !== 'undefined' && priority) {
      dispatch(editMyTask({ id: taskId, data: { priority: priority, 'updated_by': loggedInUser ? loggedInUser.loggedUserId : loggedUserId } }))
        .then((response) => {
          if (response.payload?.status === 200) {
            notifications.show({
              color: 'green',
              title: 'Success',
              message: 'Priority updated successfully.',
              icon: <IconCheck />,
              autoClose: 3000,
            });
          }
        });
    }
    setSelectedPriority(priority ? priority.id : '');
    setSelectedPriorityName(priority ? priority.name : '');
    setSelectedPriorityColor(priority && priority.color_code ? priority.color_code : '#000000');
    setShowPriorityAddInput(false);
    setShowPriorityList(false);
  };

  const priorityDeleteHandler = () => modals.openConfirmModal({
    title: (
      <Title order={5}>{translate('You are parmanently deleting this priority')}</Title>
    ),
    size: 'sm',
    radius: 'md',
    withCloseButton: false,
    children: (
      <Text size="sm">
        {translate('Are you sure you want to delete this priority?')}
      </Text>
    ),
    labels: { confirm: translate('Confirm'), cancel: translate('Cancel') },
    onCancel: () => console.log('Cancel'),
    onConfirm: () => {
      if (priorityId && projectId) {

        dispatch(deleteProjectPriority({ data: { id: priorityId, taskId: taskId, project_id: projectId } })).then((response) => {

          if (response.payload && response.payload.status === 200) {

            // setSelectedPriority
            const newPriorities = response.payload.data;

            setProjectPriorities(newPriorities);

            // map through the priorities and update the selected priority
            const priority = newPriorities.find(priority => priority.id === selectedPriority);

            setSelectedPriority(priority ? priority.id : '');

            notifications.show({
              color: theme.primaryColor,
              title: response.payload.message,
              icon: <IconCheck />,
              autoClose: 5000,
              // withCloseButton: true,
            });

            const timer = setTimeout(() => {
              dispatch(removeSuccessMessage());
            }, 5000); // Clear notification after 3 seconds

            return () => clearTimeout(timer);

          } else {
            modals.open({
              withCloseButton: false,
              centered: true,
              children: (
                <Fragment>
                  <Text size="sm">
                    {response.payload.message}
                  </Text>
                  <div className="!grid w-full !justify-items-center">
                    <Button justify="center" onClick={() => modals.closeAll()} mt="md">
                      {translate('Okay')}
                    </Button>
                  </div>
                </Fragment>
              ),
            });

          }
        });

      }
    },
  });

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    setIsLoading(true);

    const reorderedPriorities = Array.from(projectPriorities);
    const [movedItem] = reorderedPriorities.splice(result.source.index, 1);
    reorderedPriorities.splice(result.destination.index, 0, movedItem);
    if (result.type === 'priority') {

      dispatch(editProjectPrioritySortOrder({
        data: {
          project_id: projectId,
          sort_order: reorderedPriorities.map((priority, index) => ({
            id: priority.id,
            sort_order: index + 1,
          })),
        },
      })).then((response) => {
        if (response.payload && response.payload.status === 200) {
          setProjectPriorities(reorderedPriorities);
          // setShowPriorityList(false);
          notifications.show({
            color: theme.primaryColor,
            title: response.payload.message,
            icon: <IconCheck />,
            autoClose: 5000,
            // withCloseButton: true,
          });
        }
      })
        .finally(() => {
          setIsLoading(false);
        });
    } else {
      setIsLoading(false);
    }


  };


  return (
    <Fragment>
      <Popover
        opened={showPriorityList && (
          (task && (task.createdBy_id == loggedInUser?.loggedUserId || task.assignedTo_id == loggedInUser?.loggedUserId)) ||
          hasPermission(loggedInUser, ['manage-tasks-by-others'], projectPermissions, 'project')
        )}
        onClose={() => setShowPriorityList(false)}
        width={240}
        position="bottom"
        shadow={false}
        offset={6}
        withinPortal={true}
      >
        <Popover.Target>
          <Box className="priority-btn cursor-pointer w-full inline-flex items-center justify-center" onClick={handlePriorityListShow}>
            {!selectedPriority ? (
              <Box className="h-[24px] px-2 py-0 items-center gap-1.5 inline-flex border border-gray-200 rounded-full bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors">
                <IconMinus color="#9CA3AF" size="14" className="flex-shrink-0" />
                <Text size="xs" fw={400} c="dimmed" className="whitespace-nowrap">Set Priority</Text>
              </Box>
            ) : (
              <Box
                style={{ backgroundColor: `${selectedPriorityColor}15`, border: `1px solid ${selectedPriorityColor}40`, height: '24px' }}
                className="px-2 py-0 rounded-full items-center justify-between gap-1 inline-flex cursor-pointer hover:opacity-80 transition-opacity"
              >
                <div className="flex items-center gap-1.5 overflow-hidden">
                  <div className="w-1.5 h-1.5 flex-shrink-0 rounded-full" style={{ backgroundColor: selectedPriorityColor }}></div>
                  <Text className="truncate max-w-[60px]" c={selectedPriorityColor} size="xs" fw={400} title={selectedPriorityName}>{selectedPriorityName}</Text>
                </div>
                <IconChevronDown color={selectedPriorityColor} size="14" opacity={0.7} className="flex-shrink-0" />
              </Box>
            )}
          </Box>
        </Popover.Target>
        <Popover.Dropdown style={{
          padding: 0,
          border: `1px solid ${T.border}`,
          borderRadius: T.radius,
          boxShadow: '0 8px 32px rgba(0,0,0,.12)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: '10px 14px 8px', borderBottom: `1px solid ${T.border}` }}>
            <span style={{ fontSize: '12px', fontWeight: 700, color: T.text, display: 'flex', alignItems: 'center', gap: '6px' }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: T.teal, flexShrink: 0 }} />
              {translate('Priority')}
            </span>
          </div>
          <div ref={selectPriorityRef} style={{ padding: '4px 0', position: 'relative' }}>
            <LoadingOverlay visible={isLoading} zIndex={1000} overlayBlur={2} />
            <DragDropContext onDragEnd={handleDragEnd}>
              <Droppable droppableId="priorityList" type="priority">
                {(provided) => (
                  <div ref={provided.innerRef} {...provided.droppableProps}>
                    {projectPriorities && projectPriorities.map((priority, index) => (
                      <Draggable key={priority.id} draggableId={priority.id.toString()} index={index} isDragDisabled={true}>
                        {(provided) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            onClick={() => handleSelectPriority(priority)}
                            className="flex items-center gap-2 px-3 py-[7px] cursor-pointer hover:bg-[#EBF1F4] transition-colors"
                          >
                            <div className="w-3 h-3 flex-shrink-0 rounded-full" style={{ backgroundColor: priority.color_code }} />
                            <span className="flex-grow text-[12px] truncate" style={{ color: T.text }}>{priority.name}</span>
                            {selectedPriority === priority.id && <IconCheck size={12} color={T.teal} />}
                          </div>
                        )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </DragDropContext>
          </div>
          <div style={{ borderTop: `1px solid ${T.border}`, padding: '6px 8px' }}>
            <Button
              variant="subtle"
              size="xs"
              fullWidth
              onClick={() => { setSettingsModalOpened(true); setShowPriorityList(false); }}
              styles={{ root: { justifyContent: 'flex-start', color: T.muted, fontWeight: 500, fontSize: '12px' } }}
            >
              {translate('Add/Edit Priority')}
            </Button>
          </div>
        </Popover.Dropdown>
      </Popover>

      {settingsModalOpened && (
        <ProjectSettingsModal
          project_id={projectId}
          opened={settingsModalOpened}
          onClose={() => setSettingsModalOpened(false)}
          isSettings={true}
        />
      )}
    </Fragment>
  );
};

export default TaskPriority;