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 {
  createProjectStatus,
  deleteProjectStatus,
  editTask,
  removeSuccessMessage,
  editProjectStatusSortOrder,
  completeTask,
  activateTask,
  updateTaskStatus,
} from "../../../../Settings/store/taskSlice";
import { useParams } from "react-router-dom";
import { hasPermission, useProjectPermissions } from "../../../../ui/permissions";
import {
  Box,
  Button,
  Grid,
  List,
  Popover,
  ScrollArea,
  Text,
  TextInput,
  Title, Tooltip,
  useMantineTheme,
  LoadingOverlay,
  Divider
} 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 TaskStatus = ({ taskId, status, disabled, taskDbStatus, createdBy_id, assignedTo_id }) => {
  const dispatch = useDispatch();
  const theme = useMantineTheme();
  const params = useParams();
  const { loggedUserId } = useSelector((state) => state.auth.user)
  const { loggedInUser } = useSelector((state) => state.auth.session)

  const { projectInfo, projectStatuses: taskProjectStatuses, task: drawerTask, taskListSections, childColumns, columns } = useSelector((state) => state.settings.task);
  const projectId = params.id || drawerTask?.project_id || projectInfo?.id;
  const projectPermissions = useProjectPermissions(projectInfo?.id);
  const { projectStatuses: projectSliceStatuses } = useSelector((state) => state.settings.project);

  const projectStatuses = (taskProjectStatuses && taskProjectStatuses.length > 0) ? taskProjectStatuses : projectSliceStatuses;

  const [newStatus, setNewStatus] = useState('');
  const [newStatusColor, setNewStatusColor] = useState('#346A80');
  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 [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() !== '' && newStatus !== 'Type name here') {
      const submitData = {
        name: newStatus,
        project_id: projectId,
        color_code: newStatusColor,
        created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
      }
      dispatch(createProjectStatus(submitData))
      setNewStatus('');
    }
    setShowStatusAddInput(false);
  };

  const handleCreateStatus = () => {
    setNewStatus('');
    setShowStatusAddInput(true);
    setTimeout(() => {
      if (statusInputRef.current) {
        statusInputRef.current.focus();
      }
    }, 0);
  };

  const [statusId, setStatusId] = useState(null);
  // status Edit Handler
  const statusEditHandler = (status) => {
    setShowStatusAddInput(false);
    if (status && status.id) {
      setNewStatus(status.name);
      setNewStatusColor(status.color_code);
      setShowStatusEditInput(true);
      setStatusId(status.id);
      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.data) {
          const newStatuses = response.payload.data;
          // map through the priorities and update the selected status
          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 timer = setTimeout(() => {
            dispatch(removeSuccessMessage());
          }, 5000); // Clear notification after 3 seconds

          return () => clearTimeout(timer);

        }

      })
    }
  };

  const handleSelectStatus = (status) => {
    if (!hasAccess) return;
    if (!taskId || taskId === 'undefined' || !status) return;

    const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;
    const completeStatus = projectStatuses?.find(s => s.is_complete_status == 1);

    // Find loaded subtasks for this task to cascade badge
    const taskSlug = Object.values(columns || {}).flat().find(t => t.id === taskId)?.slug;
    const subtasks = taskSlug ? (childColumns?.[taskSlug] || []) : [];

    setSelectedStatus(status.id);
    setSelectedStatusName(status.name);
    setSelectedStatusColor(status.color_code || '#000000');
    setShowStatusAddInput(false);
    setShowStatusList(false);

    if (completeStatus && status.id === completeStatus.id) {
      // Selecting the designated complete status → fire completion workflow
      const fireComplete = () => {
        dispatch(completeTask({
          id: taskId,
          data: { project_id: projectId, type: 'task', updated_by: userId },
        })).then((response) => {
          if (response.payload?.status === 200) {
            dispatch(updateTaskStatus({ id: taskId, data: { status_id: completeStatus.id, updated_by: userId } }));
            subtasks.forEach(subtask => {
              dispatch(updateTaskStatus({ id: subtask.id, data: { status_id: completeStatus.id, updated_by: userId } }));
            });
          }
        });
      };

      if (subtasks.length > 0) {
        modals.openConfirmModal({
          title: <Title order={5}>Mark as Complete</Title>,
          centered: true,
          children: (
            <Text size="sm">
              This will also mark all {subtasks.length} subtask(s) as complete.
            </Text>
          ),
          labels: { confirm: 'Complete', cancel: 'Cancel' },
          confirmProps: { color: 'orange' },
          onConfirm: fireComplete,
        });
      } else {
        fireComplete();
      }
    } else if (taskDbStatus === 'COMPLETED' && (!completeStatus || status.id !== completeStatus.id)) {
      // Task is completed and user picks a non-complete status → reopen with section picker
      const regularSections = Object.values(taskListSections || {}).filter(
        s => s.mark_is_complete === 'regular'
      );
      modals.open({
        title: <Title order={5}>{translate('Select Section')}</Title>,
        centered: true,
        withCloseButton: true,
        children: (
          <Fragment>
            <Divider mb="sm" />
            {regularSections.length === 0 ? (
              <Text size="sm" c="dimmed" ta="center" py="md">
                {translate('No regular sections available. Create one first.')}
              </Text>
            ) : (
              <ScrollArea className={regularSections.length > 5 ? 'h-[240px]' : ''} scrollbarSize={2}>
                <List spacing="xs" size="sm" listStyleType="none">
                  {regularSections.map((section) => (
                    <List.Item
                      key={section.id}
                      className="cursor-pointer hover:bg-gray-100 rounded transition-colors px-2 py-1"
                      onClick={() => {
                        modals.closeAll();
                        modals.openConfirmModal({
                          title: <Title order={5}>{translate('Reopen Task')}</Title>,
                          centered: true,
                          zIndex: 10001,
                          children: (
                            <Fragment>
                              <Divider size="xs" mb="md" />
                              <Text size="sm">
                                Move this task to <b>{section.name}</b> and set status to <b>{status.name}</b>?
                              </Text>
                              {subtasks.length > 0 && (
                                <Text size="sm" c="dimmed" mt="xs">
                                  All {subtasks.length} subtask(s) will also be re-opened with the same status.
                                </Text>
                              )}
                            </Fragment>
                          ),
                          labels: { confirm: translate('Yes, reopen it'), cancel: translate('Cancel') },
                          confirmProps: { color: 'orange' },
                          onConfirm: () => {
                            dispatch(activateTask({
                              id: taskId,
                              data: { project_id: projectId, task_section_id: section.id, updated_by: userId },
                            })).then((response) => {
                              if (response.payload?.status === 200) {
                                dispatch(updateTaskStatus({ id: taskId, data: { status_id: status.id, updated_by: userId } }));
                                subtasks.forEach(subtask => {
                                  dispatch(updateTaskStatus({ id: subtask.id, data: { status_id: status.id, updated_by: userId } }));
                                });
                              }
                            });
                          },
                        });
                      }}
                    >
                      <Text size="sm">{section.name}</Text>
                    </List.Item>
                  ))}
                </List>
              </ScrollArea>
            )}
          </Fragment>
        ),
      });
    } else {
      // Normal: just update internal_status
      dispatch(editTask({ id: taskId, data: { internal_status: status, updated_by: userId } }))
        .then((response) => {
          if (response.payload?.status === 200) {
            notifications.show({
              color: 'green',
              title: 'Success',
              message: 'Status updated successfully.',
              icon: <IconCheck />,
              autoClose: 3000,
            });
          }
        });
    }
  };

  const statusDeleteHandler = () => modals.openConfirmModal({
    title: (
      <Title order={5}>You are parmanently deleting this status</Title>
    ),
    size: 'sm',
    radius: 'md',
    withCloseButton: false,
    children: (
      <Text size="sm">
        Are you sure you want to delete this status?
      </Text>
    ),
    labels: { confirm: 'Confirm', cancel: '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 newStatuses = response.payload.data;

            // map through the priorities and update the selected status
            const status = newStatuses.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());
            }, 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 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) {
          // setShowStatusList(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 canComplete = hasPermission(loggedInUser, ['complete-task'], projectPermissions, 'project');
  const isDisabled = disabled || !hasAccess;


  return (
    <Fragment>
      <Popover
        opened={showStatusList}
        onChange={setShowStatusList}
        onClose={() => setShowStatusList(false)}
        width={240}
        position="bottom"
        shadow={false}
        offset={6}
        zIndex={300}
        disabled={isDisabled}
      >
        <Popover.Target>
          <Tooltip label={hasAccess ? translate('Status') : `${translate('Status')}: ${translate('Only the task creator or assignee can perform this action')}`} position="top" withArrow>
            {!selectedStatus ? (
              <Box onClick={isDisabled ? undefined : handleStatusListShow} 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'}`}>
                <div className="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></div>
                <Text size="sm" fw={400} c="dimmed" className="whitespace-nowrap flex-grow text-center">Set Status</Text>
                <IconChevronDown color="#9CA3AF" size="16" className="flex-shrink-0" />
              </Box>
            ) : (
              <Box
                onClick={isDisabled ? undefined : handleStatusListShow}
                style={{ backgroundColor: `${selectedStatusColor}15`, border: `1px solid ${selectedStatusColor}30`, height: '28px' }}
                className={`w-[115px] px-3 py-0 rounded-full items-center justify-between gap-1.5 inline-flex transition-opacity ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:opacity-80'}`}
              >
                <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"
                    c={selectedStatusColor}
                    size="sm"
                    fw={400}
                    title={selectedStatusName}
                  >
                    {selectedStatusName}
                  </Text>
                </div>
                <IconChevronDown color={selectedStatusColor} 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('Status')}
            </span>
          </div>
          <div style={{ position: 'relative' }}>
            <LoadingOverlay visible={isLoading} zIndex={1000} overlayBlur={2} />
            <ScrollArea.Autosize mah={170} style={{ padding: '4px 0' }}>
              {projectStatuses && projectStatuses.map((status) => {
                const isCompleteLocked = status.is_complete_status == 1 && !canComplete;
                const row = (
                  <div
                    key={status.id}
                    onClick={() => { if (!isCompleteLocked) handleSelectStatus(status); }}
                    className={`flex items-center gap-2 px-3 py-[7px] transition-colors ${isCompleteLocked ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-[#EBF1F4]'}`}
                  >
                    <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>
                );
                return isCompleteLocked ? (
                  <Tooltip key={status.id} label={translate("You don't have permission to mark tasks as complete")} position="left" withArrow>
                    {row}
                  </Tooltip>
                ) : row;
              })}
            </ScrollArea.Autosize>
          </div>
          {hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project') && (
            <div
              onClick={() => { setSettingsModalOpened(true); setShowStatusList(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 statuses')}</span>
            </div>
          )}
        </Popover.Dropdown>
      </Popover>

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

export default TaskStatus;