import { IconCheck, IconChevronDown, 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 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 projectId = projectInfo?.id;

  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 [settingsModalOpened, setSettingsModalOpened] = 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 (
    <Fragment>
      <Popover
        opened={open}
        onChange={setOpen}
        onClose={() => setOpen(false)}
        width={240}
        position="bottom"
        shadow={false}
        offset={6}
        zIndex={300}
      >
        <Popover.Target>
          <Tooltip label={__( 'Status', 'lazytasks-project-task-management' )} 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', 'lazytasks-project-task-management')}</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 }} />
              {__( 'Status', 'lazytasks-project-task-management' )}
            </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={__( "You don't have permission to mark tasks as complete", "lazytasks-project-task-management" )} position="left" withArrow>
                  {row}
                </Tooltip>
              ) : row;
            })}
          </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 statuses', 'lazytasks-project-task-management' )}</span>
            </div>
          )}
        </Popover.Dropdown>
      </Popover>

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

export default Status;