import { IconCheck, IconChevronDown, IconMinus, IconSettings } from '@tabler/icons-react';
import React, { useState, Fragment } from 'react';
import { useSelector } from "react-redux";
import { Box, Popover, ScrollArea, Text, Tooltip } from "@mantine/core";
import { __ } from '@wordpress/i18n';
import { hasPermission, useProjectPermissions } from '../../../../ui/permissions';
import ProjectSettingsModal from '../../ProjectSettingsModal';

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

// Callback-based priority picker (used in "create task" flows where there is no taskId yet)
const Priority = ({ editPriorityHandler, priority }) => {
  const { projectPriorities, projectInfo } = useSelector((state) => state.settings.task);
  const { loggedInUser } = useSelector((state) => state.auth.session);
  const projectPermissions = useProjectPermissions(projectInfo?.id);
  const projectId = projectInfo?.id;

  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 [open, setOpen] = useState(false);
  const [settingsModalOpened, setSettingsModalOpened] = useState(false);

  const handleSelect = (p) => {
    setSelectedPriority(p.id);
    setSelectedPriorityName(p.name);
    setSelectedPriorityColor(p.color_code || '#000000');
    setOpen(false);
    if (editPriorityHandler) editPriorityHandler(p);
  };

  return (
    <Fragment>
      <Popover
        opened={open}
        onChange={setOpen}
        onClose={() => setOpen(false)}
        width={240}
        position="bottom"
        shadow={false}
        offset={6}
        zIndex={300}
      >
        <Popover.Target>
          <Tooltip label={__( 'Priority', 'lazytasks-project-task-management' )} position="top" withArrow>
            {!selectedPriority ? (
              <Box onClick={() => setOpen(true)} 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 cursor-pointer hover:bg-gray-100 transition-colors">
                <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', 'lazytasks-project-task-management')}</Text>
              </Box>
            ) : (
              <Box
                onClick={() => setOpen(true)}
                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 cursor-pointer hover:bg-gray-50 transition-colors"
              >
                <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 }} />
              {__( 'Priority', 'lazytasks-project-task-management' )}
            </span>
          </div>
          <ScrollArea.Autosize mah={170} style={{ padding: '4px 0' }}>
            {projectPriorities && projectPriorities.map((p) => (
              <div
                key={p.id}
                onClick={() => handleSelect(p)}
                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: p.color_code }} />
                <span className="flex-grow text-[12px] truncate" style={{ color: T.text }}>{p.name}</span>
                {selectedPriority === p.id && <IconCheck size={12} color={T.teal} />}
              </div>
            ))}
          </ScrollArea.Autosize>
          {hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project') && (
            <div
              onClick={() => { setSettingsModalOpened(true); setOpen(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>{__( 'Manage priorities', 'lazytasks-project-task-management' )}</span>
            </div>
          )}
        </Popover.Dropdown>
      </Popover>

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

export default Priority;