import React from 'react';
import { __ } from '@wordpress/i18n';

/**
 * ScoreGauge — score-proportional spectrum arc gauge.
 *
 * The colored gradient fills `score`% of the arc via a dash-offset stroke
 * inside an SVG mask over a linear rainbow; the light track shows the rest.
 *
 * <ScoreGauge score={74} label="Needs focus" accent="#f97316" />
 */
const ARC_PATH =
  'M36.3719632,152.500824 C29.139439,139.99827 25,125.482544 25,110 ' +
  'C25,63.0557963 63.0557963,25 110,25 C156.944204,25 195,63.0557963 195,110 ' +
  'C195,125.482544 190.860561,139.99827 183.628037,152.500824';
const ARC_LENGTH = 356;

let gaugeInstance = 0;

const ScoreGauge = ({
  score = null,
  label = '',
  accent = '#f97316',
  width = 240,
  subtitle = null,
  className = '',
}) => {
  const height = Math.round(width * (188 / 240)); // includes chip clearance below the arc mouth
  const normalized = Math.max(0, Math.min(100, Number(score) || 0));
  const hasScore = score !== null && score !== undefined;
  const maskId = React.useMemo(() => `prorankScoreMask-${++gaugeInstance}`, []);
  const overlayTop = Math.round(width * (92 / 240));

  return (
    <div className={`pr:flex pr:flex-col pr:items-center ${className}`}>
      <div className="pr:relative" style={{ width, height }} role="img" aria-label={__('Score gauge', 'prorank-seo')}>
        <svg width={width} height={height} viewBox="0 0 220 166" style={{ position: 'absolute', inset: 0 }}>
          <path d={ARC_PATH} fill="none" stroke="#eceff3" strokeWidth="50" />
        </svg>
        <svg width={width} height={height} viewBox="0 0 220 166" style={{ position: 'absolute', inset: 0 }}>
          <defs>
            <mask id={maskId}>
              <path
                d={ARC_PATH}
                fill="none"
                stroke="#ffffff"
                strokeWidth="50"
                strokeDasharray={ARC_LENGTH}
                strokeDashoffset={hasScore ? ARC_LENGTH * (1 - normalized / 100) : ARC_LENGTH}
              />
            </mask>
          </defs>
          <g mask={`url(#${maskId})`}>
            <foreignObject x="0" y="0" width="220" height="166">
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  background:
                    'linear-gradient(90deg, #d65e44 0%, #df9d3c 30%, #d9c843 50%, #9abe45 72%, #54a45a 100%)',
                }}
              />
            </foreignObject>
          </g>
        </svg>
        <div className="pr:absolute pr:inset-x-0 pr:flex pr:flex-col pr:items-center" style={{ top: overlayTop }}>
          <span
            className="pr:font-medium pr:text-slate-800 pr:leading-none pr:tabular-nums"
            style={{ fontSize: Math.round(width * 0.2) }}
          >
            {hasScore ? score : '—'}
          </span>
          {label && (
            <span
              className={`pr:mt-2 pr:inline-flex pr:items-center pr:rounded-md pr:font-semibold pr:text-white ${width < 220 ? 'pr:px-3 pr:py-0.5 pr:text-xs' : 'pr:px-4 pr:py-1 pr:text-sm'}`}
              style={{ background: accent }}
            >
              {label}
            </span>
          )}
        </div>
      </div>
      {subtitle && <p className="pr:mt-3 pr:text-sm pr:text-slate-500 pr:text-center">{subtitle}</p>}
    </div>
  );
};

export default ScoreGauge;