'use client';

import React from 'react';
import BusinessRuleLink from './BusinessRuleLink';
import { FiInfo } from 'react-icons/fi';
import { clampPercent, hexToRgba, scoreToColorHex } from '../colors';

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

export default function RiskCard({
  title,
  description,
  percentGood = 0,
  label,
  topMovers,
  topMoversTitle,
  tooltipText,
}: {
  title: string;
  description?: string;
  percentGood?: number;
  label?: string;
  topMovers?: TopMover[];
  topMoversTitle?: string;
  tooltipText?: string;
}) {
  const pctGood = clampPercent(percentGood);
  const displayLabel = label || '';

  // Background tint uses same thresholds as GaugeCard via scoreToColorHex

  // Foreground bar color uses same thresholds as GaugeCard based on overall score
  const activeColor = scoreToColorHex(pctGood);

  const headerTint = hexToRgba(scoreToColorHex(pctGood), 0.06);

  // bar heights ascending representation
  const bars = [40, 60, 85, 110, 140];
  let activeIndex = 4; // Default to the highest bar (0% score)
  if (pctGood >= 80) {
    activeIndex = 0;
  } else if (pctGood >= 60) {
    activeIndex = 1;
  } else if (pctGood >= 40) {
    activeIndex = 2;
  } else if (pctGood >= 20) {
    activeIndex = 3;
  }

  return (
    <div
      className={'rounded-md p-5 border flex flex-col'}
      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">
        <div>
          <div className={'font-semibold sm:text-xl text-base'} style={{ color: 'var(--text-main)' }}>{title}</div>
          {description ? (
            <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
          ) : null}
        </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: {100 - pctGood}% (lower is better)</div>
                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
              </div>
            </div>
          </span>
        )}
      </div>
      <div className="flex flex-col items-center justify-center gap-1" style={{ minHeight: 250 }}>
        <div className="relative group flex items-end justify-center gap-3">
          {bars.map((h, i) => (
            <div
              key={i}
              style={{
                width: 36,
                height: h,
                backgroundColor: i === activeIndex ? activeColor : 'var(--icon-button-secondary)',
                borderRadius: 4,
              }}
            />
          ))}
          <span
            className="pointer-events-none absolute left-[-65px] bottom-0 text-xs"
            style={{ color: 'var(--text-secondary)' }}
          >
            Low risk -
          </span>
          <span
            className="pointer-events-none absolute right-[-68px] top-0 text-xs"
            style={{ color: 'var(--text-secondary)' }}
          >
            - High Risk
          </span>
          {(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: {100 - pctGood}% (lower is better)</div>
                <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
              </div>
            </div>
          )}
        </div>
        <div className="mt-3 text-center">
          <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{displayLabel}</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>
  );
}