import { cn } from '@/lib/utils';
import { __, sprintf } from '../lib/i18n';

/**
 * Shared color-coded AI visibility score badge (adoption plan Phase 0.4).
 *
 * Used by the list-table column, Gutenberg panel, dashboard widget and
 * Elementor surfaces. Color bands are Lighthouse-style:
 * 0-49 red, 50-89 orange, 90-100 green; `null` renders a gray em dash
 * (score never computed yet).
 */
export interface ScoreBadgeProps {
  score: number | null;
  size?: 'sm' | 'md';
  showFixButton?: boolean;
  /** Drawer deep-link (Admin_WP_Helper::drawer_url). Renders the Fix button as a link. */
  fixUrl?: string;
  /** Alternative click handler when no URL navigation is wanted. */
  onFixClick?: () => void;
  className?: string;
}

interface BandStyle {
  pill: string;
  dot: string;
}

function getBand(score: number): BandStyle {
  if (score >= 90) {
    return { pill: 'bg-green-50 text-green-700 border-green-200', dot: 'bg-green-500' };
  }
  if (score >= 50) {
    return { pill: 'bg-orange-50 text-orange-700 border-orange-200', dot: 'bg-orange-500' };
  }
  return { pill: 'bg-red-50 text-red-700 border-red-200', dot: 'bg-red-500' };
}

export function ScoreBadge({
  score,
  size = 'md',
  showFixButton = false,
  fixUrl,
  onFixClick,
  className,
}: ScoreBadgeProps) {
  const sizeClasses =
    size === 'sm' ? 'h-5 px-1.5 text-xs gap-1' : 'h-6 px-2 text-sm gap-1.5';
  const dotSize = size === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2';

  if (score === null) {
    return (
      <span
        className={cn(
          'inline-flex items-center rounded-full border border-gray-200 bg-gray-50 font-medium text-gray-400',
          sizeClasses,
          className
        )}
        aria-label={__('AI visibility score not calculated yet', 'llmagnet-llm-txt-generator')}
        title={__('Score not calculated yet', 'llmagnet-llm-txt-generator')}
      >
        &mdash;
      </span>
    );
  }

  const clamped = Math.max(0, Math.min(100, Math.round(score)));
  const band = getBand(clamped);
  const fixVisible = showFixButton && clamped < 100 && (fixUrl || onFixClick);

  return (
    <span className={cn('inline-flex items-center gap-1.5', className)}>
      <span
        className={cn('inline-flex items-center rounded-full border font-semibold', band.pill, sizeClasses)}
        aria-label={sprintf(
          /* translators: %d: score from 0 to 100. */
          __('AI visibility score %d of 100', 'llmagnet-llm-txt-generator'),
          clamped
        )}
      >
        <span className={cn('rounded-full', band.dot, dotSize)} aria-hidden="true" />
        {clamped}
      </span>
      {fixVisible &&
        (fixUrl ? (
          <a
            href={fixUrl}
            className={cn(
              'font-medium text-purple-700 underline-offset-2 hover:underline',
              size === 'sm' ? 'text-xs' : 'text-sm'
            )}
            title={__('Open LLMagnet to improve this score', 'llmagnet-llm-txt-generator')}
            onClick={onFixClick}
          >
            {__('Fix', 'llmagnet-llm-txt-generator')}
          </a>
        ) : (
          <button
            type="button"
            className={cn(
              'font-medium text-purple-700 underline-offset-2 hover:underline',
              size === 'sm' ? 'text-xs' : 'text-sm'
            )}
            title={__('Open LLMagnet to improve this score', 'llmagnet-llm-txt-generator')}
            onClick={onFixClick}
          >
            {__('Fix', 'llmagnet-llm-txt-generator')}
          </button>
        ))}
    </span>
  );
}