import React, { useMemo } from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button } from '@/shared/components/ui';
import { useGuidedTour } from '@/features/onboarding/hooks/useGuidedTour';
import { getTooltipPosition } from '@/features/onboarding/utils/tourTooltip';

const Overlay = styled.div`
  position: fixed;
  inset: 0;
  z-index: ${({ theme }) => theme.zIndex.modal + 5};
  pointer-events: none;
`;

const Backdrop = styled.div`
  position: absolute;
  inset: 0;
  background: ${({ theme }) => theme.colors.overlay};
  pointer-events: auto;
`;

const Spotlight = styled.div<{ $rect: DOMRect }>`
  position: fixed;
  top: ${({ $rect }) => $rect.top - 8}px;
  left: ${({ $rect }) => $rect.left - 8}px;
  width: ${({ $rect }) => $rect.width + 16}px;
  height: ${({ $rect }) => $rect.height + 16}px;
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  box-shadow: 0 0 0 9999px ${({ theme }) => theme.colors.overlay};
  border: 2px solid ${({ theme }) => theme.colors.primary};
  pointer-events: none;
  z-index: 1;
  transition: all 0.2s ease;
`;

const Tooltip = styled.div<{ $top: number; $left: number }>`
  position: fixed;
  top: ${({ $top }) => $top}px;
  left: ${({ $left }) => $left}px;
  max-width: 320px;
  padding: ${({ theme }) => theme.spacing[4]};
  background: ${({ theme }) => theme.colors.surface};
  border: 1px solid ${({ theme }) => theme.colors.border};
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  box-shadow: ${({ theme }) => theme.shadows.lg};
  pointer-events: auto;
  z-index: 2;
  text-align: start;
`;

const TooltipTitle = styled.h4`
  margin: 0 0 ${({ theme }) => theme.spacing[2]};
  font-size: ${({ theme }) => theme.typography.fontSize.base};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
`;

const TooltipBody = styled.p`
  margin: 0 0 ${({ theme }) => theme.spacing[4]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};
  line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
`;

const Actions = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[2]};
  flex-wrap: wrap;
`;

const StepIndicator = styled.span`
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  color: ${({ theme }) => theme.colors.text.secondary};
`;

export const GuidedTour: React.FC = () => {
  const { t, direction } = useLocale();
  const {
    isActive,
    currentStep,
    stepIndex,
    totalSteps,
    targetRect,
    hasMissingTarget,
    next,
    back,
    dismissForever,
  } = useGuidedTour();

  const tooltipPosition = useMemo(
    () => getTooltipPosition(targetRect, undefined, direction),
    [targetRect, direction],
  );

  if (!isActive || !currentStep) {
    return null;
  }

  return (
    <Overlay>
      <Backdrop onClick={dismissForever} aria-hidden />
      {targetRect && <Spotlight $rect={targetRect} />}
      <Tooltip
        $top={tooltipPosition.top}
        $left={tooltipPosition.left}
        role="dialog"
        aria-live="polite"
        aria-label={hasMissingTarget ? t('onboarding:tours.targetUnavailable') : undefined}
      >
        <TooltipTitle>{t(`onboarding:${currentStep.titleKey}`)}</TooltipTitle>
        <TooltipBody>
          {hasMissingTarget
            ? t('onboarding:tours.targetUnavailableBody')
            : t(`onboarding:${currentStep.bodyKey}`)}
        </TooltipBody>
        <Actions>
          <StepIndicator>
            {t('onboarding:tours.stepOf', { current: stepIndex + 1, total: totalSteps })}
          </StepIndicator>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <Button variant="ghost" size="sm" onClick={dismissForever}>
              {t('onboarding:tours.dismissForever')}
            </Button>
            {stepIndex > 0 && (
              <Button variant="secondary" size="sm" onClick={back}>
                {t('onboarding:tours.back')}
              </Button>
            )}
            <Button variant="primary" size="sm" onClick={next}>
              {stepIndex < totalSteps - 1 ? t('onboarding:tours.next') : t('onboarding:tours.done')}
            </Button>
          </div>
        </Actions>
      </Tooltip>
    </Overlay>
  );
};