import { IconCheck, IconChevronDown, IconDeviceFloppy, IconEdit, IconMinus, IconTrash, IconArrowsMove, IconSettings } from '@tabler/icons-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { useDispatch, useSelector } from "react-redux";
import {
  createProjectPriority,
  deleteProjectPriority,
  editTask,
  removeSuccessMessage,
  editProjectPrioritySortOrder
} from "../../../../Settings/store/taskSlice";
import { useParams } from "react-router-dom";
import { hasPermission, useProjectPermissions } from "../../../../ui/permissions";
import {
  Box,
  Button,
  Grid,
  Popover,
  Text,
  Title, Tooltip,
  useMantineTheme,
  LoadingOverlay,
  Divider,
  ScrollArea
} from "@mantine/core";

const T = {
  white:    '#FFFFFF',
  border:   '#E2E8F0',
  text:     '#1A202C',
  muted:    '#64748B',
  teal:     '#39758D',
  tealLt:   '#EBF1F4',
  radius:   '12px',
  radiusSm: '6px',
};
import ProjectSettingsModal from "../../ProjectSettingsModal";
import { useHotkeys } from '@mantine/hooks';
import { modals } from "@mantine/modals";
import { notifications } from "@mantine/notifications";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { translate } from '../../../../../utils/i18n';

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

  const { projectInfo, projectPriorities } = useSelector((state) => state.settings.task);
  const projectPermissions = useProjectPermissions(projectInfo?.id);

  const [newPriority, setNewPriority] = useState('');
  const [newPriorityColor, setNewPriorityColor] = useState('#346A80');
  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 [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() !== '' && newPriority !== 'Type name here') {
      const submitData = {
        name: newPriority,
        project_id: projectId,
        color_code: newPriorityColor,
        created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
      }
      dispatch(createProjectPriority(submitData))
      setNewPriority('');
    }
    setShowPriorityAddInput(false);
  };

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

  const [priorityId, setPriorityId] = useState(null);
  // priorityEditHandler
  const priorityEditHandler = (priority) => {
    setShowPriorityAddInput(false);
    if (priority && priority.id) {
      setNewPriority(priority.name);
      setNewPriorityColor(priority.color_code);
      setShowPriorityEditInput(true);
      setPriorityId(priority.id);
      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.data) {
          const newPriorities = response.payload.data;
          // 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 timer = setTimeout(() => {
            dispatch(removeSuccessMessage());
          }, 5000); // Clear notification after 3 seconds

          return () => clearTimeout(timer);

        }

      })
    }
  };

  const handleSelectPriority = (priority) => {
    if (!hasAccess) return;
    if (taskId && taskId !== 'undefined' && priority) {
      dispatch(editTask({ 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}>You are parmanently deleting this priority</Title>
    ),
    size: 'sm',
    radius: 'md',
    withCloseButton: false,
    children: (
      <Text size="sm">
        Are you sure you want to delete this priority?
      </Text>
    ),
    labels: { confirm: 'Confirm', cancel: '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;

            // 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());
            }, 3000); // 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">
                      Ok
                    </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) {
          // setShowPriorityList(false);
          notifications.show({
            color: theme.primaryColor,
            title: response.payload.message,
            icon: <IconCheck />,
            autoClose: 5000,
            // withCloseButton: true,
          });
        }
      })
        .finally(() => {
          setIsLoading(false);
        });
    } else {
      setIsLoading(false);
    }


  };

  // Check permission — creator/assignee bypass
  const isCreatorOrAssignee = (createdBy_id != null && createdBy_id == loggedUserId) ||
    (assignedTo_id != null && assignedTo_id == loggedUserId);
  const hasAccess = isCreatorOrAssignee || hasPermission(
    loggedInUser,
    ['manage-tasks-by-others'],
    projectPermissions, 'project'
  );
  const isDisabled = disabled || !hasAccess;

  return (
    <Fragment>
      <Popover
        opened={showPriorityList}
        onChange={setShowPriorityList}
        onClose={() => setShowPriorityList(false)}
        width={240}
        position="bottom"
        shadow={false}
        offset={6}
        zIndex={300}
        disabled={isDisabled}
      >
        <Popover.Target>
          <Tooltip label={hasAccess ? translate('Priority') : `${translate('Priority')}: ${translate('Only the task creator or assignee can perform this action')}`} position="top" withArrow>
            {!selectedPriority ? (
              <Box onClick={isDisabled ? undefined : handlePriorityListShow} className={`w-[115px] justify-center h-[28px] py-0 items-center gap-1.5 inline-flex border border-gray-200 rounded-full bg-gray-50 px-3 transition-colors ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-gray-100'}`}>
                <IconMinus color="#9CA3AF" size="16" className="flex-shrink-0" />
                <Text size="sm" fw={400} c="dimmed" className="whitespace-nowrap flex-grow text-center">Set Priority</Text>
              </Box>
            ) : (
              <Box
                onClick={isDisabled ? undefined : handlePriorityListShow}
                style={{ backgroundColor: `transparent`, border: `1px solid ${selectedPriorityColor}40`, height: '28px' }}
                className={`w-[115px] px-3 py-0 rounded-full items-center justify-between gap-1 inline-flex transition-colors ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-gray-50'}`}
              >
                <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"
                    c={selectedPriorityColor}
                    size="sm"
                    fw={400}
                    title={selectedPriorityName}
                  >
                    {selectedPriorityName}
                  </Text>
                </div>
                <IconChevronDown color={selectedPriorityColor} size="16" opacity={0.7} className="flex-shrink-0" />
              </Box>
            )}
          </Tooltip>
        </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 style={{ position: 'relative' }}>
            <LoadingOverlay visible={isLoading} zIndex={1000} overlayBlur={2} />
            <ScrollArea.Autosize mah={170} style={{ padding: '4px 0' }}>
              {projectPriorities && projectPriorities.map((priority) => (
                <div
                  key={priority.id}
                  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>
              ))}
            </ScrollArea.Autosize>
          </div>
          {hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project') && (
            <div
              onClick={() => { setSettingsModalOpened(true); setShowPriorityList(false); }}
              className="flex items-center gap-2 cursor-pointer hover:bg-[#F1F5F9] transition-colors"
              style={{ borderTop: `1px solid ${T.border}`, padding: '8px 12px', color: T.muted, fontSize: '12px', fontWeight: 500 }}
            >
              <IconSettings size={14} stroke={1.5} />
              <span>{translate('Manage priorities')}</span>
            </div>
          )}
        </Popover.Dropdown>

      </Popover>

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

export default TaskPriority;