import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { Info, X } from 'lucide-react';
import { IconButton } from '@/components/ui/icon-button';
import { getScoreStrokeColor } from '@/lib/score-colors';
import { __, sprintf } from '../lib/i18n';
import {
  formatCriterionWeight,
  getVisibilityScoreCriteria,
  type VisibilityScoreBreakdownMap,
  type VisibilityScoreCriterion,
} from '../lib/visibility-score-criteria';

const TOOLTIP_WIDTH = 224;
const TOOLTIP_GAP = 8;
const TOOLTIP_VIEWPORT_PAD = 8;

interface VisibilityScoreBreakdownModalProps {
  breakdown: Partial<VisibilityScoreBreakdownMap>;
  totalScore: number;
  totalVisits?: number;
  uniquePages?: number;
  rangeDays?: number;
  onClose: () => void;
}

function getTooltipCoords(trigger: HTMLElement): { top: number; left: number; placeAbove: boolean } {
  const rect = trigger.getBoundingClientRect();
  const maxLeft = Math.max(
    TOOLTIP_VIEWPORT_PAD,
    window.innerWidth - TOOLTIP_WIDTH - TOOLTIP_VIEWPORT_PAD,
  );
  const placeAbove = rect.top >= 96;
  return {
    top: placeAbove ? rect.top - TOOLTIP_GAP : rect.bottom + TOOLTIP_GAP,
    left: Math.min(Math.max(TOOLTIP_VIEWPORT_PAD, rect.left + rect.width / 2 - TOOLTIP_WIDTH / 2), maxLeft),
    placeAbove,
  };
}

function CriterionInfoTooltip({
  description,
  details,
}: {
  description: string;
  details?: string;
}) {
  const [open, setOpen] = useState(false);
  const [coords, setCoords] = useState({ top: 0, left: 0, placeAbove: true });
  const triggerRef = useRef<HTMLButtonElement>(null);
  const ariaLabel = details ? `${description} ${details}` : description;

  const show = () => {
    if (triggerRef.current) {
      setCoords(getTooltipCoords(triggerRef.current));
    }
    setOpen(true);
  };

  const hide = () => setOpen(false);

  useEffect(() => {
    if (!open) {
      return;
    }
    const sync = () => {
      if (triggerRef.current) {
        setCoords(getTooltipCoords(triggerRef.current));
      }
    };
    window.addEventListener('resize', sync);
    return () => window.removeEventListener('resize', sync);
  }, [open]);

  return (
    <span className="inline-flex shrink-0">
      <IconButton
        ref={triggerRef}
        type="button"
        className="h-auto w-auto min-h-0 min-w-0 border-0 bg-transparent p-0 shadow-none hover:bg-transparent"
        onMouseEnter={show}
        onMouseLeave={hide}
        onFocus={show}
        onBlur={hide}
        onClick={(event) => {
          event.stopPropagation();
          if (open) {
            hide();
          } else {
            show();
          }
        }}
        aria-label={ariaLabel}
      >
        <Info className="h-3.5 w-3.5" aria-hidden="true" />
      </IconButton>
      {open &&
        createPortal(
          <div
            role="tooltip"
            className="w-56 rounded-lg bg-gray-900 px-3 py-2 text-left text-xs leading-relaxed text-white shadow-lg"
            style={{
              position: 'fixed',
              top: coords.top,
              left: coords.left,
              width: TOOLTIP_WIDTH,
              transform: coords.placeAbove ? 'translateY(-100%)' : undefined,
              zIndex: 100001,
              pointerEvents: 'none',
            }}
          >
            <p>{description}</p>
            {details ? <p className="mt-1 text-gray-300">{details}</p> : null}
          </div>,
          document.body,
        )}
    </span>
  );
}

function CriterionRow({ item }: { item: VisibilityScoreCriterion }) {
  const color = getScoreStrokeColor(item.score);

  return (
    <div className="min-w-0">
      <div className="mb-1.5 flex items-center justify-between gap-3">
        <div className="flex min-w-0 items-center gap-1.5">
          <span className="truncate text-sm font-medium text-gray-800">{item.label}</span>
          <CriterionInfoTooltip description={item.description} details={item.details || undefined} />
          <span className="truncate text-xs text-gray-400">{formatCriterionWeight(item.weight)}</span>
        </div>
        <span className="shrink-0 text-sm font-semibold tabular-nums text-gray-900">{item.score}</span>
      </div>
      <div className="h-1.5 w-full rounded-full bg-gray-100">
        <div
          className="h-1.5 rounded-full transition-all duration-500"
          style={{ width: `${item.score}%`, backgroundColor: color }}
        />
      </div>
    </div>
  );
}

export function VisibilityScoreBreakdownModal({
  breakdown,
  totalScore,
  totalVisits,
  uniquePages,
  rangeDays,
  onClose,
}: VisibilityScoreBreakdownModalProps) {
  const criteria = getVisibilityScoreCriteria(breakdown);
  const scoreColor = getScoreStrokeColor(totalScore);
  const hasSummary =
    typeof totalVisits === 'number' &&
    typeof uniquePages === 'number' &&
    typeof rangeDays === 'number';

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onClose]);

  return createPortal(
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="visibility-score-breakdown-title"
      onClick={onClose}
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 100000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 24,
        background: 'rgba(0, 0, 0, 0.5)',
        backdropFilter: 'blur(4px)',
      }}
    >
        <div
          className="relative w-full max-w-2xl overflow-hidden rounded-xl bg-white shadow-2xl"
          onClick={(event) => event.stopPropagation()}
        >
          <div className="flex items-start justify-between gap-4 px-6 pt-5 pb-4">
            <div>
              <h3
                id="visibility-score-breakdown-title"
                className="text-lg font-semibold text-gray-900"
              >
                {__('Visibility Score Breakdown', 'llmagnet-llm-txt-generator')}
              </h3>
              <p className="mt-0.5 text-sm text-gray-500">
                {__('How is the score calculated?', 'llmagnet-llm-txt-generator')}
              </p>
            </div>
            <button
              type="button"
              onClick={onClose}
              className="border-0 bg-white p-1 text-black transition-colors hover:text-gray-700"
              aria-label={__('Close', 'llmagnet-llm-txt-generator')}
            >
              <X className="h-5 w-5" />
            </button>
          </div>

          <div className="grid grid-cols-1 gap-x-8 gap-y-5 px-6 pb-5 sm:grid-cols-2">
            {criteria.map((item) => (
              <CriterionRow key={item.key} item={item} />
            ))}
          </div>

          <div className="flex flex-wrap items-center justify-between gap-2 border-t border-gray-100 px-6 py-4">
            <div>
              <span className="text-sm font-medium text-gray-700">
                {__('Total Score', 'llmagnet-llm-txt-generator')}
              </span>
              {hasSummary && (
                <p className="mt-0.5 text-xs text-gray-400">
                  {sprintf(
                    __('Based on %1$d visits across %2$d pages in the last %3$d days', 'llmagnet-llm-txt-generator'),
                    totalVisits,
                    uniquePages,
                    rangeDays,
                  )}
                </p>
              )}
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-2xl font-semibold tabular-nums" style={{ color: scoreColor }}>
                {totalScore}
              </span>
              <span className="text-sm text-gray-400">/100</span>
            </div>
          </div>
        </div>
    </div>,
    document.body,
  );
}