import { IconCheck, IconChevronDown, IconMinus } from '@tabler/icons-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { createProjectStatus, deleteProjectStatus, removeSuccessMessage, editProjectStatusSortOrder } 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 TaskStatus = ({ task, status }) => {
  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 [newStatus, setNewStatus] = useState('');
  const [newStatusColor, setNewStatusColor] = useState('');
  const [selectedStatus, setSelectedStatus] = useState(status ? status.id : '');
  const [selectedStatusName, setSelectedStatusName] = useState(status ? status.name : '');
  const [selectedStatusColor, setSelectedStatusColor] = useState(status && status.color_code ? status.color_code : '#000000');
  const [showStatusList, setShowStatusList] = useState(false);
  const [showStatusAddInput, setShowStatusAddInput] = useState(false);
  const [showStatusEditInput, setShowStatusEditInput] = useState(false);
  const selectStatusRef = useRef(null);
  const statusInputRef = 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 (selectStatusRef.current && !selectStatusRef.current.contains(event.target)) {
        setShowStatusList(false);
        setShowStatusAddInput(false);
        setShowStatusEditInput(false);
      }
    };

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        setShowStatusList(false);
        setShowStatusAddInput(false);
        setShowStatusEditInput(false);
        setNewStatus('');
      }
    };

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

  useEffect(() => {
    setSelectedStatus(status ? status.id : '');
    setSelectedStatusName(status ? status.name : '');
    setSelectedStatusColor(status && status.color_code ? status.color_code : '#000000')
  }, [status]);

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

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

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

  const handleStatusListShow = () => {
    setShowStatusList(true);
  };

  const handleAddStatus = () => {
    if (newStatus.trim() !== '') {
      const submitData = {
        name: newStatus,
        project_id: projectId,
        color_code: newStatusColor,
        created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
      }
      dispatch(createProjectStatus(submitData)).then((response) => {

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

          const newStatuses = response.payload.data;

          setProjectStatuses(newStatuses);
          // map through the priorities and update the selected priority
          const status = newStatuses.find(status => status.id === selectedStatus);

          setSelectedStatus(status ? status.id : '');
          setSelectedStatusName(status ? status.name : '');
          setSelectedStatusColor(status && status.color_code ? status.color_code : '#000000');
          setNewStatus('');
          setShowStatusAddInput(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 handleCreateStatus = () => {
    setShowStatusEditInput(false)
    setShowStatusAddInput(true);
    setTimeout(() => {
      if (statusInputRef.current) {
        statusInputRef.current.focus();
      }
    }, 0);
  };


  const [projectStatuses, setProjectStatuses] = useState(task && task.project && task.project.projectStatuses ? task.project.projectStatuses : []);

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

  const [statusId, setStatusId] = useState(null);
  // statusEditHandler
  const statusEditHandler = (status) => {
    if (status && status.id) {
      setNewStatus(status.name);
      setNewStatusColor(status.color_code);
      setStatusId(status.id);
      setShowStatusAddInput(false);
      setShowStatusEditInput(true);
      setTimeout(() => {
        if (statusInputRef.current) {
          statusInputRef.current.focus();
        }
      }, 0);
    }

  }

  const handleUpdateStatus = () => {
    if (newStatus.trim() !== '' && newStatus !== 'Type name here') {
      const submitData = {
        id: statusId,
        name: newStatus,
        project_id: projectId,
        color_code: newStatusColor,
        created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
      }
      dispatch(createProjectStatus(submitData)).then((response) => {

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

          const newStatuses = response.payload.data;

          setProjectStatuses(newStatuses);
          // map through the priorities and update the selected priority
          const status = newStatuses.find(status => status.id === selectedStatus);

          setSelectedStatus(status ? status.id : '');
          setSelectedStatusName(status ? status.name : '');
          setSelectedStatusColor(status && status.color_code ? status.color_code : '#000000');
          setNewStatus('');
          setShowStatusEditInput(false);

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

      })
    }
  };

  const handleSelectStatus = (status) => {
    if (taskId && taskId !== 'undefined' && status) {
      dispatch(editMyTask({ id: taskId, data: { internal_status: status, 'updated_by': loggedInUser ? loggedInUser.loggedUserId : loggedUserId } }))
        .then((response) => {
          if (response.payload?.status === 200) {
            notifications.show({
              color: 'green',
              title: 'Success',
              message: 'Status updated successfully.',
              icon: <IconCheck />,
              autoClose: 3000,
            });
          }
        });
    }
    setSelectedStatus(status ? status.id : '');
    setSelectedStatusName(status ? status.name : '');
    setSelectedStatusColor(status && status.color_code ? status.color_code : '#000000');
    setShowStatusAddInput(false);
    setShowStatusList(false);
  };

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

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

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

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

            setProjectStatuses(newPriorities);

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

            setSelectedStatus(status ? status.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">
                      Ok
                    </Button>
                  </div>
                </Fragment>
              ),
            });

          }
        });

      }
    },
  });

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

    const reorderedStatuses = Array.from(projectStatuses);
    const [movedItem] = reorderedStatuses.splice(result.source.index, 1);
    reorderedStatuses.splice(result.destination.index, 0, movedItem);
    if (result.type === 'status') {

      dispatch(editProjectStatusSortOrder({
        data: {
          project_id: projectId,
          sort_order: reorderedStatuses.map((status, index) => ({
            id: status.id,
            sort_order: index + 1,
          })),
        },
      })).then((response) => {
        if (response.payload && response.payload.status === 200) {
          setProjectStatuses(reorderedStatuses);
          // 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={showStatusList && (
          (task && (task.createdBy_id == loggedInUser?.loggedUserId || task.assignedTo_id == loggedInUser?.loggedUserId)) ||
          hasPermission(loggedInUser, ['manage-tasks-by-others'], projectPermissions, 'project')
        )}
        onClose={() => setShowStatusList(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={handleStatusListShow}>
            {!selectedStatus ? (
              <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">
                <div className="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></div>
                <Text size="xs" fw={400} c="dimmed" className="whitespace-nowrap">Set Status</Text>
                <IconChevronDown color="#9CA3AF" size="14" className="flex-shrink-0" />
              </Box>
            ) : (
              <Box
                style={{ backgroundColor: `${selectedStatusColor}15`, border: `1px solid ${selectedStatusColor}30`, 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: selectedStatusColor }}></div>
                  <Text className="truncate max-w-[60px]" c={selectedStatusColor} size="xs" fw={400} title={selectedStatusName}>{selectedStatusName}</Text>
                </div>
                <IconChevronDown color={selectedStatusColor} 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('Status')}
            </span>
          </div>
          <div ref={selectStatusRef} style={{ padding: '4px 0', position: 'relative' }}>
            <LoadingOverlay visible={isLoading} zIndex={1000} overlayBlur={2} />
            <DragDropContext onDragEnd={handleDragEnd}>
              <Droppable droppableId="priorityList" type="status">
                {(provided) => (
                  <div ref={provided.innerRef} {...provided.droppableProps}>
                    {projectStatuses && projectStatuses.map((status, index) => (
                      <Draggable key={status.id} draggableId={status.id.toString()} index={index} isDragDisabled={true}>
                        {(provided) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            onClick={() => handleSelectStatus(status)}
                            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: status.color_code }} />
                            <span className="flex-grow text-[12px] truncate" style={{ color: T.text }}>{status.name}</span>
                            {selectedStatus === status.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); setShowStatusList(false); }}
              styles={{ root: { justifyContent: 'flex-start', color: T.muted, fontWeight: 500, fontSize: '12px' } }}
            >
              {translate('Add/Edit Status')}
            </Button>
          </div>
        </Popover.Dropdown>
      </Popover>

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

export default TaskStatus;