import { useState, useRef, useEffect } from 'react';
import {
  Box,
  Chip,
  Divider,
  alpha,
  Stack,
  Popover,
} from '@mui/material';
// import { QuestionMarkSvg } from '../../../../common/icons/icons';

import { useSharedTableState } from '../../TableContext';
import { StageInfoForTooltip } from '../../../../Stages/StageInfoForTooltip';

export const ColumnTooltipBox = ({
  anchorEl,
  open,
  onClose,
  colId,
  colData,
  stageData = [],
}) => {
  const [placement, setPlacement] = useState('bottom');
  const containerRef = useRef(null);

  const { getTextSelectionHeaders } = useSharedTableState();
  const [textCol, setTextCol] = useState();

  useEffect(() => {
    const updatePlacement = () => {
      if (!anchorEl || !open) return;

      const anchorRect = anchorEl.getBoundingClientRect();
      const tooltipWidth = 400; // Примерная ширина тултипа (25rem ≈ 400px)
      const tooltipHeight = 400; // Примерная высота
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      // Проверяем, хватает ли места снизу по центру
      const spaceBottom = viewportHeight - anchorRect.bottom;
      const spaceTop = anchorRect.top;

      // Центрирование: anchorRect.left + anchorRect.width/2 - tooltipWidth/2
      const centeredLeft =
        anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
      const centeredRight = centeredLeft + tooltipWidth;

      // Проверяем, помещается ли по центру
      const fitsCentered = centeredLeft >= 0 && centeredRight <= viewportWidth;

      // Проверяем, хватает ли места снизу
      const enoughSpaceBelow = spaceBottom >= tooltipHeight + 10;
      const enoughSpaceAbove = spaceTop >= tooltipHeight + 10;

      if (enoughSpaceBelow && fitsCentered) {
        // Если есть место снизу и помещается по центру
        setPlacement('bottom');
      } else if (enoughSpaceAbove && fitsCentered) {
        // Если места снизу нет, но есть сверху и помещается по центру
        setPlacement('top');
      } else {
        // Если не помещается по центру, проверяем право и лево
        const spaceRight = viewportWidth - anchorRect.right;
        const spaceLeft = anchorRect.left;

        if (spaceRight >= tooltipWidth && spaceBottom >= tooltipHeight) {
          // Если справа есть место и снизу есть место
          setPlacement('right-start');
        } else if (spaceLeft >= tooltipWidth && spaceBottom >= tooltipHeight) {
          // Если слева есть место и снизу есть место
          setPlacement('left-start');
        } else if (spaceRight >= tooltipWidth && spaceTop >= tooltipHeight) {
          // Если справа есть место и сверху есть место
          setPlacement('right-end');
        } else if (spaceLeft >= tooltipWidth && spaceTop >= tooltipHeight) {
          // Если слева есть место и сверху есть место
          setPlacement('left-end');
        } else {
          // Если ничего не подходит, используем auto
          setPlacement('bottom');
        }
      }
    };

    if (open) {
      setTimeout(updatePlacement, 0);
      window.addEventListener('resize', updatePlacement);
      window.addEventListener('scroll', updatePlacement, true);
    }

    return () => {
      window.removeEventListener('resize', updatePlacement);
      window.removeEventListener('scroll', updatePlacement, true);
    };
  }, [anchorEl, open]);

  useEffect(() => {
    if (colId) {
      setTextCol(getTextSelectionHeaders([colId]));
    }
  }, [colId]);

  // Определяем anchorOrigin и transformOrigin в зависимости от placement
  const getPopoverOrigins = () => {
    switch (placement) {
      case 'bottom':
        return {
          anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
          transformOrigin: { vertical: 'top', horizontal: 'center' },
        };
      case 'top':
        return {
          anchorOrigin: { vertical: 'top', horizontal: 'center' },
          transformOrigin: { vertical: 'bottom', horizontal: 'center' },
        };
      case 'right-start':
        return {
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          transformOrigin: { vertical: 'top', horizontal: 'left' },
        };
      case 'right-end':
        return {
          anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
          transformOrigin: { vertical: 'bottom', horizontal: 'left' },
        };
      case 'left-start':
        return {
          anchorOrigin: { vertical: 'top', horizontal: 'left' },
          transformOrigin: { vertical: 'top', horizontal: 'right' },
        };
      case 'left-end':
        return {
          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
          transformOrigin: { vertical: 'bottom', horizontal: 'right' },
        };
      default:
        return {
          anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
          transformOrigin: { vertical: 'top', horizontal: 'center' },
        };
    }
  };

  const origins = getPopoverOrigins();

  return (
    <Popover
      open={open}
      anchorEl={anchorEl}
      onClose={onClose}
      anchorOrigin={origins.anchorOrigin}
      transformOrigin={origins.transformOrigin}
      sx={{
        pointerEvents: 'none',
        '& .MuiPopover-paper': {
          margin: '0.5rem',
          overflow: 'visible',
          borderRadius: '1rem',
          boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.15)',
          border: '1px solid',
          borderColor: 'divider',
        },
      }}
      disableRestoreFocus
      disableScrollLock
      onMouseEnter={(e) => e.stopPropagation()}
      onMouseLeave={onClose}
    >
      <Box
        ref={containerRef}
        sx={{
          pointerEvents: 'auto',
        }}
        onMouseEnter={(e) => e.stopPropagation()}
        onMouseLeave={onClose}
      >
        <Box
          sx={(theme) => ({
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem',
            background: 'white',
            borderRadius: '1rem',
            padding: '1.25rem',
            width: '30rem',
            maxWidth: '90vw',
          })}
        >
          {/* Заголовок и статус */}
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
            <Box
              sx={(theme) => ({
                color: theme.palette.text.primary,
                fontWeight: 600,
                fontSize: '1rem !important',
                lineHeight: 1.2,
              })}
              variant="subtitle2"
            >
              Настройки столбца
            </Box>
            <Stack
              sx={{
                flexDirection: 'row',
                gap: '0.5rem',
                flexWrap: 'wrap',
                paddingTop: '.5rem',
              }}
            >
              <Chip
                label={textCol}
                sx={(theme) => ({
                  borderRadius: '0.5rem',
                  height: '1.5rem',
                  fontSize: '0.688rem',
                  fontWeight: 500,
                  background: 'white',
                  border: '1px solid rgba(0, 0, 0, 0.1)',
                  '& .MuiChip-label': {
                    paddingLeft: theme.spacing(0.5),
                    paddingRight: theme.spacing(0.5),
                    paddingTop: 0,
                    paddingBottom: 0,
                  },
                })}
              />
              {colData.is_admin_only && (
                <Chip
                  label="Только для админов"
                  size="small"
                  sx={(theme) => ({
                    backgroundColor: alpha(theme.palette.warning.main, 0.1),
                    color: theme.palette.warning.main,
                    border: `1px solid ${alpha(theme.palette.warning.main, 0.3)}`,
                    borderRadius: '0.5rem',
                    height: '1.5rem',
                    fontSize: '0.688rem',
                    fontWeight: 500,
                    '& .MuiChip-label': {
                      paddingLeft: theme.spacing(0.5),
                      paddingRight: theme.spacing(0.5),
                      paddingTop: 0,
                      paddingBottom: 0,
                    },
                  })}
                />
              )}
            </Stack>
          </Box>
          {/* Информация об этапах */}
          {stageData.length > 0 && (
            <StageInfoForTooltip stageData={stageData} />
          )}
          <Divider sx={{ marginTop: '0 !important' }} />
          <Box
            sx={{
              display: 'flex',
              gap: '.5rem',
            }}
          >
            {/* <QuestionMarkSvg size="1rem" /> */}

            <Box
              sx={{
                fontWeight: '400',
                fontSize: '0.75rem',
                lineHeight: '143%',
                color: '#808192',
              }}
            >
              Для редактирования и сбрасывания используйте настройки в меню
              инструментов
            </Box>
          </Box>
        </Box>
      </Box>
    </Popover>
  );
};