'use client';

import type { SourceType } from '@/types/firestore';
import { getTrustBadgeInfo } from '@/lib/constants';

interface TrustBadgeProps {
  authorityTier?: number;
  sourceType?: SourceType;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

const SIZE_CLASSES = {
  sm: { badge: 'px-2 py-0.5 text-[10px]', icon: 'w-3 h-3' },
  md: { badge: 'px-2.5 py-1 text-xs', icon: 'w-3.5 h-3.5' },
  lg: { badge: 'px-3 py-1.5 text-sm', icon: 'w-4 h-4' },
};

function ShieldIcon({ className }: { className: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 1l-7 3v5c0 4.5 3 8.5 7 10 4-1.5 7-5.5 7-10V4l-7-3z" />
    </svg>
  );
}

function CheckCircleIcon({ className }: { className: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
    </svg>
  );
}

function InfoCircleIcon({ className }: { className: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
    </svg>
  );
}

export default function TrustBadge({
  authorityTier,
  sourceType,
  size = 'sm',
  className,
}: TrustBadgeProps) {
  const info = getTrustBadgeInfo(authorityTier, sourceType);
  const sizeClass = SIZE_CLASSES[size];

  const Icon = () => {
    if (info.level === 'official') return <ShieldIcon className={sizeClass.icon} />;
    if (info.level === 'expert') return <CheckCircleIcon className={sizeClass.icon} />;
    return <InfoCircleIcon className={sizeClass.icon} />;
  };

  return (
    <span
      role="status"
      aria-label={`신뢰등급: ${info.label}`}
      className={`inline-flex items-center gap-1 rounded-full font-bold border ${sizeClass.badge} ${info.colorClass} ${className || ''}`}
    >
      <Icon />
      <span>{info.label}</span>
    </span>
  );
}