import React from 'react';
import { Link } from 'react-router-dom';

interface AiReadinessBannerProps {
  score: number;
  grade: string;
  fixCount?: number;
  fixesTo?: string;
}

const ZONE_TEXT: Record<string, { label: string; tone: string }> = {
  A: { label: 'Green zone', tone: 'On the AI shelf and converting.' },
  B: { label: 'Almost green', tone: 'A couple of fixes will push you to A.' },
  C: { label: 'Mid-zone', tone: 'Two fixes below will move you to green.' },
  D: { label: 'Red zone', tone: 'Critical gaps stopping AI traffic.' },
  F: { label: 'Red zone', tone: 'Critical gaps stopping AI traffic.' },
};

const DOT_BY_GRADE: Record<string, string> = {
  A: 'bg-emerald-500',
  B: 'bg-lime-500',
  C: 'bg-amber-500',
  D: 'bg-orange-500',
  F: 'bg-red-500',
};

const SCORE_COLOR_BY_GRADE: Record<string, string> = {
  A: 'text-emerald-600',
  B: 'text-lime-600',
  C: 'text-amber-600',
  D: 'text-orange-600',
  F: 'text-red-600',
};

export function AiReadinessBanner({
  score,
  grade,
  fixCount,
  fixesTo = '/agent-analytics?tab=gaps',
}: AiReadinessBannerProps) {
  const clamped: number = Math.max(0, Math.min(100, Math.round(score)));
  const zone = ZONE_TEXT[grade] ?? ZONE_TEXT.C;
  const dotColor: string = DOT_BY_GRADE[grade] ?? 'bg-amber-500';
  const scoreColor: string = SCORE_COLOR_BY_GRADE[grade] ?? 'text-amber-600';
  const fixesLabel: string =
    typeof fixCount === 'number' && fixCount > 0
      ? `${fixCount} fix${fixCount === 1 ? '' : 'es'} below will move you to green.`
      : zone.tone;

  return (
    <div className="rounded-2xl border border-gray-200 bg-white px-5 py-3">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2 text-sm">
          <span className={`inline-block h-2 w-2 rounded-full ${dotColor}`} />
          <span className="font-semibold text-gray-900">
            AI Readiness:{' '}
            <span className={`tabular-nums ${scoreColor}`}>{clamped}/100</span>
          </span>
          <span className="text-gray-300">·</span>
          <span className="text-gray-700">{zone.label}.</span>
          <span className="text-gray-500">{fixesLabel}</span>
        </div>
        <Link
          to={fixesTo}
          className="inline-flex cursor-pointer items-center gap-1 rounded-full bg-[#B7007C] px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-[#900063]"
        >
          See fixes <span aria-hidden>→</span>
        </Link>
      </div>
    </div>
  );
}