'use client';

import React, { useMemo } from 'react';
import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
import BusinessRuleLink from './BusinessRuleLink';
import { FiInfo } from 'react-icons/fi';
import { hexToRgba, scoreToColorHex, clampPercent, red, yellow, green, green1, green2, green3, green4, green5 } from '../colors';

type TopMover = { label?: string; uid?: string };

// color helpers moved to ../utils/color

export default function GaugeCard({
  title,
  description,
  percent = 0,
  label,
  topMovers,
  topMoversTitle,
  tooltipText,
  selfCheck,
}: {
  title: string;
  description?: string;
  percent?: number;
  label?: string;
  topMovers?: TopMover[];
  topMoversTitle?: string;
  tooltipText?: string;
  selfCheck?: boolean;
}) {
  const pct = clampPercent(percent);
  const displayLabel = label || '';
  const shadeFor = (p: number) => {
    if (p < 20) return green5;
    if (p < 40) return green4;
    if (p < 60) return green3;
    if (p < 80) return green2;
    return green1;
  };
  const headerTint = hexToRgba(selfCheck ? shadeFor(pct) : scoreToColorHex(pct), 0.06);

  // Technical evidence tiers from backend thresholds
  const tickLabels = useMemo(() => ({
    type: 'outer' as const,
    hideMinMax: true,
    defaultTickLineConfig: {
      length: 7,
      width: 1,
      distanceFromArc: 3,
      color: 'var(--icon-button-secondary)'
    },
    defaultTickValueConfig: {
      style: {
        fontSize: '10px',
        fill: 'var(--text-secondary)'
      }
    },
    ticks: [
      { value: 16, valueConfig: { formatTextValue: () => 'Low' } },
      { value: 50, valueConfig: { formatTextValue: () => 'Moderate' } },
      { value: 83, valueConfig: { formatTextValue: () => 'High' } },
    ]
  }), []);

  return (
    <div
      className={'rounded-md border flex flex-col min-h-full'}
      style={{
        backgroundColor: 'var(--content-card-background)',
        borderColor: 'var(--icon-button-secondary)',
        backgroundImage: `linear-gradient(${headerTint}, ${headerTint})`,
      }}
    >
      <div className="mb-3 flex items-start justify-between gap-2 pt-5 px-5">
        <div>
          <div className={'font-semibold sm:text-xl text-base'} style={{ color: 'var(--text-main)' }}>{title}</div>
          <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
        </div>
        {(tooltipText || description) && (
          <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>
            <FiInfo />
            <div className="hidden group-hover:block absolute z-30 right-0 top-full mt-2 w-80">
              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
                <div style={{ fontWeight: 600 }}>{title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Score: {pct}%</div>
                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
              </div>
            </div>
          </span>
        )}
      </div>
      <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 200 }}>
        <div className="relative group" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 390 }}>
          <GaugeComponent
            type="semicircle"
            style={{ width: 'calc(100% - 16px)', height: '100%', marginLeft: 8, marginRight: 8 }}
            marginInPercent={{ top: 0.08, bottom: 0.0, left: 0.1, right: 0.1 }}
            value={pct}
            minValue={0}
            maxValue={100}
            labels={{
              valueLabel: {
                // Hide center text; show tier labels around the arc instead
                formatTextValue: () => displayLabel,
                matchColorWithArc: true,
                style: {
                  textShadow: 'none'
                }
              },
              tickLabels: tickLabels,
            }}
          arc={{
            padding: 0.02,
            subArcs: selfCheck
              ? [
                  { limit: 20, color: green5 },
                  { limit: 40, color: green4 },
                  { limit: 60, color: green3 },
                  { limit: 80, color: green2 },
                  { limit: 100, color: green1 },
                ]
              : [
                  { limit: 33, color: red },
                  { limit: 66, color: yellow },
                  { limit: 100, color: green },
                ],
          }}
            pointer={{ type: 'blob', elastic: true, animationDelay: 0 }}
          />
          {(tooltipText || description) && (
            <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
                <div style={{ fontWeight: 600 }}>{title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Score: {pct}%</div>
                <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
              </div>
            </div>
          )}
        </div>
      </div>
      {Array.isArray(topMovers) && topMovers.length > 0 && (
        <div className="mt-4 text-center">
          <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{topMoversTitle || 'Top Score Movers'}</div>
          <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
            {topMovers.map((t, idx: number) => (
              <React.Fragment key={idx}>
                <BusinessRuleLink uid={t?.uid} label={t?.label || ''} />
                {idx < topMovers.length - 1 && <span className="mx-2">|</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}