import type { VerificationStatus } from '@justice-choice/types';
import { AlertIcon, BadgeCheckIcon, ClockIcon, InfoIcon, StarIcon } from './Icons';

export function VerificationBadge({ status, compact = false }: { status: VerificationStatus | string; compact?: boolean }) {
  const base = 'inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-xs leading-5';
  if (status === 'verified')
    return (
      <span className={`${base} bg-ledger-soft font-semibold text-ledger`} title="Licence and identity checked against the issuing body">
        <BadgeCheckIcon className="h-3.5 w-3.5" strokeWidth={2} />
        {compact ? 'Verified' : 'Licence verified'}
      </span>
    );
  if (status === 'pending')
    return (
      <span className={`${base} border border-rule-strong font-medium text-muted`} title="A licence check is in progress">
        <ClockIcon className="h-3.5 w-3.5" />
        {compact ? 'Pending' : 'Verification pending'}
      </span>
    );
  if (status === 'expired')
    return (
      <span className={`${base} border border-warn/40 font-medium text-warn`} title="The last check is older than our freshness window">
        <AlertIcon className="h-3.5 w-3.5" />
        {compact ? 'Out of date' : 'Verification out of date'}
      </span>
    );
  return (
    <span className={`${base} border border-dashed border-rule-strong font-medium text-muted`} title="No licence check has been completed yet">
      <InfoIcon className="h-3.5 w-3.5" />
      {compact ? 'Unverified' : 'Not yet verified'}
    </span>
  );
}

export function Monogram({ name, size = 48 }: { name: string; size?: number }) {
  const letters = name
    .split(/\s+/)
    .filter((p) => /^[A-Za-z]/.test(p) && !p.endsWith('.'))
    .map((p) => p[0])
    .slice(0, 2)
    .join('')
    .toUpperCase();
  return (
    <span
      aria-hidden
      className="inline-flex shrink-0 select-none items-center justify-center rounded-full border border-rule bg-gradient-to-br from-ledger-soft to-sunken font-serif font-semibold text-ledger"
      style={{ width: size, height: size, fontSize: size * 0.36 }}
    >
      {letters}
    </span>
  );
}

export function Stars({ value, showValue = true }: { value: number; showValue?: boolean }) {
  return (
    <span className="inline-flex items-center gap-1 text-sm" role="img" aria-label={`${value.toFixed(1)} out of 5 stars`}>
      <StarIcon className="h-3.5 w-3.5 fill-current text-brass" strokeWidth={1.5} />
      {showValue && <span className="num font-semibold text-ink">{value.toFixed(1)}</span>}
    </span>
  );
}

/** Five stars, filled to the nearest half */
export function StarRow({ value, className = 'h-4 w-4' }: { value: number; className?: string }) {
  return (
    <span className="inline-flex items-center gap-0.5 text-brass" role="img" aria-label={`${value.toFixed(1)} out of 5 stars`}>
      {[1, 2, 3, 4, 5].map((n) => (
        <span key={n} className="relative inline-flex">
          <StarIcon className={`${className} text-rule-strong`} strokeWidth={1.5} />
          {value >= n - 0.75 && (
            <span className="absolute inset-0 overflow-hidden" style={{ width: value >= n - 0.25 ? '100%' : '50%' }}>
              <StarIcon className={`${className} fill-current`} strokeWidth={1.5} />
            </span>
          )}
        </span>
      ))}
    </span>
  );
}