/**
 * Audit score hero: gauge, "Agent Ready" badge, per-domain bars, re-run.
 */
import { BadgeCheck, RefreshCw, ShieldAlert } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { AuditResult } from './types';
import { __, sprintf } from '../../lib/i18n';

function scoreColor(score: number): string {
  if (score >= 90) return '#22c55e';
  if (score >= 50) return '#f59e0b';
  return '#ef4444';
}

function ScoreGauge({ score }: { score: number }) {
  const radius = 52;
  const circumference = 2 * Math.PI * radius;
  const filled = (score / 100) * circumference;
  return (
    <svg
      width="140"
      height="140"
      viewBox="0 0 140 140"
      role="img"
      aria-label={sprintf(
        __('Agent-Ready Score %1$d out of 100', 'llmagnet-llm-txt-generator'),
        score,
      )}
    >
      <circle cx="70" cy="70" r={radius} fill="none" stroke="#e5e7eb" strokeWidth="12" />
      <circle
        cx="70"
        cy="70"
        r={radius}
        fill="none"
        stroke={scoreColor(score)}
        strokeWidth="12"
        strokeLinecap="round"
        strokeDasharray={`${filled} ${circumference - filled}`}
        transform="rotate(-90 70 70)"
      />
      <text
        x="70"
        y="66"
        textAnchor="middle"
        className="fill-gray-900"
        style={{ fontSize: 30, fontWeight: 700 }}
      >
        {score}
      </text>
      <text x="70" y="88" textAnchor="middle" className="fill-gray-400" style={{ fontSize: 12 }}>
        / 100
      </text>
    </svg>
  );
}

interface ScoreHeroProps {
  result: AuditResult;
  running: boolean;
  onRun: () => void;
}

export function ScoreHero({ result, running, onRun }: ScoreHeroProps) {
  const lastRun = result.generated_at
    ? new Date(result.generated_at * 1000).toLocaleString()
    : null;

  return (
    <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
      <div className="flex flex-wrap items-center gap-6">
        <ScoreGauge score={result.score} />

        <div className="flex-1 min-w-[220px]">
          <div className="flex items-center gap-3">
            <h2 className="text-lg font-semibold text-gray-900">
              {__('Agent-Ready Score', 'llmagnet-llm-txt-generator')}
            </h2>
            {result.agent_ready ? (
              <span className="inline-flex items-center gap-1 rounded-full bg-green-100 text-green-800 px-2.5 py-0.5 text-xs font-medium">
                <BadgeCheck className="h-3.5 w-3.5" />{' '}
                {__('Agent Ready', 'llmagnet-llm-txt-generator')}
              </span>
            ) : (
              <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 text-amber-800 px-2.5 py-0.5 text-xs font-medium">
                <ShieldAlert className="h-3.5 w-3.5" />{' '}
                {__('Not Agent Ready yet', 'llmagnet-llm-txt-generator')}
              </span>
            )}
          </div>
          <p className="mt-1 text-sm text-gray-500">
            {__(
              'Sampled audit of your site against current agent-readiness standards — discovery files, machine-readable content, security headers, and WebMCP.',
              'llmagnet-llm-txt-generator',
            )}
          </p>
          {lastRun && (
            <p className="mt-1 text-xs text-gray-400">
              {sprintf(__('Last run: %s', 'llmagnet-llm-txt-generator'), lastRun)}
            </p>
          )}
          <div className="mt-3">
            <Button variant="default" size="sm" onClick={onRun} disabled={running}>
              <RefreshCw className={`h-4 w-4 mr-2 ${running ? 'animate-spin' : ''}`} />
              {running
                ? __('Running audit…', 'llmagnet-llm-txt-generator')
                : __('Re-run audit', 'llmagnet-llm-txt-generator')}
            </Button>
          </div>
        </div>

        <div className="w-full lg:w-72 space-y-2">
          {result.domains.map((domain) => (
            <div key={domain.id}>
              <div className="flex justify-between text-xs text-gray-600">
                <span>{domain.label}</span>
                <span className="font-medium text-gray-800">{domain.score}</span>
              </div>
              <div className="mt-0.5 h-1.5 w-full rounded bg-gray-100">
                <div
                  className="h-1.5 rounded"
                  style={{
                    width: `${domain.score}%`,
                    backgroundColor: scoreColor(domain.score),
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}