import { useState } from 'react';
import { Info } from 'lucide-react';
import { IconButton } from '@/components/ui/icon-button';
import { cn } from '@/lib/utils';
import { clampScore, getScoreStrokeColor } from '@/lib/score-colors';
import { __, sprintf } from '../lib/i18n';

const scoreInfoIconButtonClass =
  'h-auto w-auto min-h-0 min-w-0 border-0 bg-transparent p-0 shadow-none hover:bg-transparent';

interface ScoreGaugeProps {
  score: number;
  label?: string;
  size?: 'hero' | 'compact';
  infoText?: string;
  className?: string;
}

export function ScoreGauge({
  score,
  label,
  size = 'compact',
  infoText,
  className,
}: ScoreGaugeProps) {
  const [showTooltip, setShowTooltip] = useState(false);
  const clamped = clampScore(score);
  const stroke = getScoreStrokeColor(clamped);
  const isHero = size === 'hero';
  const svgSize = isHero ? 120 : 64;
  const radius = isHero ? 46 : 26;
  const strokeWidth = isHero ? 10 : 6;
  const circumference = 2 * Math.PI * radius;
  const filled = (clamped / 100) * circumference;
  const center = svgSize / 2;

  return (
    <div className={cn('flex flex-col items-center', className)}>
      <div className="relative">
        <svg
          width={svgSize}
          height={svgSize}
          viewBox={`0 0 ${svgSize} ${svgSize}`}
          role="img"
          aria-label={
            label
              ? sprintf(
                  /* translators: 1: label, 2: score out of 100 */
                  __('%1$s score %2$d out of 100', 'llmagnet-llm-txt-generator'),
                  label,
                  clamped,
                )
              : sprintf(
                  /* translators: %d: score out of 100 */
                  __('Score %d out of 100', 'llmagnet-llm-txt-generator'),
                  clamped,
                )
          }
        >
          <circle
            cx={center}
            cy={center}
            r={radius}
            fill="none"
            stroke="#e5e7eb"
            strokeWidth={strokeWidth}
          />
          <circle
            cx={center}
            cy={center}
            r={radius}
            fill="none"
            stroke={stroke}
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            strokeDasharray={`${filled} ${circumference - filled}`}
            transform={`rotate(-90 ${center} ${center})`}
            style={{ transition: 'stroke-dasharray 0.5s ease' }}
          />
          <text
            x={center}
            y={isHero ? center - 2 : center + 1}
            textAnchor="middle"
            className="fill-gray-900"
            style={{ fontSize: isHero ? 28 : 16, fontWeight: 700 }}
          >
            {clamped}
          </text>
          {isHero && (
            <text
              x={center}
              y={center + 18}
              textAnchor="middle"
              className="fill-gray-400"
              style={{ fontSize: 11 }}
            >
              / 100
            </text>
          )}
        </svg>
      </div>

      {label && (
        <div className="mt-2 flex items-center gap-1">
          <span
            className={cn(
              'font-medium text-gray-600',
              isHero ? 'text-sm' : 'text-xs',
            )}
          >
            {label}
          </span>
          {infoText && (
            <div className="relative">
              <IconButton
                type="button"
                className={scoreInfoIconButtonClass}
                onMouseEnter={() => setShowTooltip(true)}
                onMouseLeave={() => setShowTooltip(false)}
                onFocus={() => setShowTooltip(true)}
                onBlur={() => setShowTooltip(false)}
                onClick={() => setShowTooltip((v) => !v)}
                aria-label={infoText}
              >
                <Info className="h-3.5 w-3.5" aria-hidden="true" />
              </IconButton>
              {showTooltip && (
                <div
                  role="tooltip"
                  className="absolute z-50 bottom-full left-1/2 mb-2 w-52 -translate-x-1/2 rounded-lg bg-gray-900 px-3 py-2 text-xs leading-relaxed text-white shadow-lg"
                >
                  {infoText}
                </div>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

interface ScoreBarProps {
  label: string;
  score: number;
  infoText?: string;
}

export function ScoreBar({ label, score, infoText }: ScoreBarProps) {
  const [showTooltip, setShowTooltip] = useState(false);
  const clamped = clampScore(score);
  const color = getScoreStrokeColor(clamped);

  return (
    <div>
      <div className="mb-1 flex items-center justify-between gap-2">
        <div className="flex min-w-0 items-center gap-1">
          <span className="truncate text-xs font-medium text-gray-700">{label}</span>
          {infoText && (
            <div className="relative shrink-0">
              <IconButton
                type="button"
                className={scoreInfoIconButtonClass}
                onMouseEnter={() => setShowTooltip(true)}
                onMouseLeave={() => setShowTooltip(false)}
                onFocus={() => setShowTooltip(true)}
                onBlur={() => setShowTooltip(false)}
                aria-label={infoText}
              >
                <Info className="h-3 w-3" aria-hidden="true" />
              </IconButton>
              {showTooltip && (
                <div
                  role="tooltip"
                  className="absolute z-50 bottom-full left-0 mb-2 w-52 rounded-lg bg-gray-900 px-3 py-2 text-xs leading-relaxed text-white shadow-lg"
                >
                  {infoText}
                </div>
              )}
            </div>
          )}
        </div>
        <span className="shrink-0 text-xs font-semibold tabular-nums text-gray-800">{clamped}</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: `${clamped}%`, backgroundColor: color }}
        />
      </div>
    </div>
  );
}

export function ScoreScaleLegend({ className }: { className?: string }) {
  return (
    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500', className)}>
      <span className="font-medium text-gray-600">{__('Score scale', 'llmagnet-llm-txt-generator')}</span>
      <span className="inline-flex items-center gap-1.5">
        <span className="h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
        90–100
      </span>
      <span className="inline-flex items-center gap-1.5">
        <span className="h-2 w-2 rounded-full bg-orange-500" aria-hidden="true" />
        50–89
      </span>
      <span className="inline-flex items-center gap-1.5">
        <span className="h-2 w-2 rounded-full bg-red-500" aria-hidden="true" />
        0–49
      </span>
    </div>
  );
}