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

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

// Callback-based status picker (used in "create task" flows where there is no taskId yet)
const Status = ({ editStatusHandler, status }) => {
  const { projectStatuses, projectInfo } = useSelector((state) => state.settings.task);
  const { loggedInUser } = useSelector((state) => state.auth.session);
  const projectPermissions = useProjectPermissions(projectInfo?.id);
  const canComplete = hasPermission(loggedInUser, ['complete-task'], projectPermissions, 'project');

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

  const handleSelect = (s) => {
    if (s.is_complete_status == 1 && !canComplete) return;
    setSelectedStatus(s.id);
    setSelectedStatusName(s.name);
    setSelectedStatusColor(s.color_code || '#000000');
    setOpen(false);
    if (editStatusHandler) editStatusHandler(s);
  };

  return (
    <Popover
      opened={open}
      onClose={() => setOpen(false)}
      width={240}
      position="bottom"
      shadow={false}
      offset={6}
      zIndex={300}
    >
      <Popover.Target>
        <Tooltip label={translate('Status')} position="top" withArrow>
          {!selectedStatus ? (
            <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">
              <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={() => setOpen(true)}
              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 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" 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>
        <ScrollArea.Autosize mah={170} style={{ padding: '4px 0' }}>
          {projectStatuses && projectStatuses.map((s) => {
            const isCompleteLocked = s.is_complete_status == 1 && !canComplete;
            const row = (
              <div
                key={s.id}
                onClick={() => handleSelect(s)}
                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: s.color_code }} />
                <span className="flex-grow text-[12px] truncate" style={{ color: T.text }}>{s.name}</span>
                {selectedStatus === s.id && <IconCheck size={12} color={T.teal} />}
              </div>
            );
            return isCompleteLocked ? (
              <Tooltip key={s.id} label={translate("You don't have permission to mark tasks as complete")} position="left" withArrow>
                {row}
              </Tooltip>
            ) : row;
          })}
        </ScrollArea.Autosize>
      </Popover.Dropdown>
    </Popover>
  );
};

export default Status;