import { IconCheck, IconChevronDown, IconMinus } from '@tabler/icons-react';
import React, { useState, Fragment } from 'react';
import { useSelector } from "react-redux";
import { Box, Button, Popover, ScrollArea, Text, Tooltip } from "@mantine/core";
import { translate } from '../../../../../utils/i18n';

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 } = useSelector((state) => state.settings.task);

  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 handleSelect = (p) => {
    setSelectedPriority(p.id);
    setSelectedPriorityName(p.name);
    setSelectedPriorityColor(p.color_code || '#000000');
    setOpen(false);
    if (editPriorityHandler) editPriorityHandler(p);
  };

  return (
    <Popover
      opened={open}
      onClose={() => setOpen(false)}
      width={240}
      position="bottom"
      shadow={false}
      offset={6}
      zIndex={300}
    >
      <Popover.Target>
        <Tooltip label={translate('Priority')} 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</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 }} />
            {translate('Priority')}
          </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>
      </Popover.Dropdown>
    </Popover>
  );
};

export default Priority;