'use client';

import React, { useMemo } from 'react';
// Link not required for hash-only navigation
import { FiInfo } from 'react-icons/fi';
import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
import { clampPercent, hexToRgba, scoreToColorHex, red, yellow, green } from '../colors';

export default function RoleOverviewCard({
  title,
  matchLabel,
  roleName,
}: {
  title: string;
  matchLabel?: string;
  roleName?: string;
}) {
  const pct = useMemo(() => {
    const raw = String(matchLabel || '').toLowerCase();
    let mapped = 0;
    if (raw.includes('optimal')) mapped = 100;
    else if (raw.includes('strong')) mapped = 75;
    else if (raw.includes('partial')) mapped = 50;
    else if (raw.includes('weak')) mapped = 25;
    else mapped = 0; // incompatible or unknown
    return clampPercent(mapped);
  }, [matchLabel]);

  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
  const displayLabel = String(matchLabel || '').trim();

  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: () => 'Weak' } },
      { value: 50, valueConfig: { formatTextValue: () => 'Partial' } },
      { value: 83, valueConfig: { formatTextValue: () => 'Strong' } },
    ]
  }), []);

  return (
    <div
      className={'rounded-md border flex flex-col h-full'}
      style={{
        backgroundColor: 'var(--content-card-background)',
        borderColor: 'var(--icon-button-secondary)',
        backgroundImage: `linear-gradient(${headerTint}, ${headerTint})`,
      }}
    >
      <div className="mb-3  px-5 pt-5 flex items-start justify-between gap-2">
        <div>
          <div className={'font-semibold text-xl'} style={{ color: 'var(--text-main)' }}>{title}</div>
          <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>How well the candidate aligns with the target role based on KYD evidence.</div>
        </div>
        <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)' }}>Alignment reflects how well the candidate matches the target role based on KYD evidence.</div>
            </div>
          </div>
        </span>
      </div>
      <div className="flex-grow flex flex-col items-center justify-center pb-5" 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: {
                formatTextValue: () => displayLabel,
                matchColorWithArc: true,
                style: {
                  textShadow: 'none'
                }
              },
              tickLabels: tickLabels,
            }}
            arc={{
              padding: 0.02,
              gradient: true,
              colorArray: [red, yellow, green],
            }}
            pointer={{ type: 'arrow', elastic: true, animationDelay: 0 }}
          />
          <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)' }}>Alignment reflects how well the candidate matches the target role based on KYD evidence.</div>
            </div>
          </div>
        </div>
        {roleName ? (
        <div className="mt-3 text-center">
          <a
            href="#role"
            className={'text-sm font-semibold text-[var(--text-main)] hover:underline'}
            onClick={(e) => {
              try {
                e.preventDefault();
                if (typeof window !== 'undefined') {
                  window.location.hash = 'role';
                  // Ensure listeners respond even if framework doesn't emit hashchange automatically
                  window.dispatchEvent(new HashChangeEvent('hashchange'));
                }
              } catch {}
            }}
          >
            {roleName}
          </a>
        </div>
      ) : null}
      </div>
      
    </div>
  );
}