/**
 * ReliabilityStatusBadge Component
 *
 * Badge component for visualizing PageAnalysis reliability status.
 * Color-coded badges with icons for each status type.
 *
 * Status colors:
 * - DRAFT: Gray
 * - PENDING_CONFIRMATION: Yellow
 * - CONFIRMED: Green
 * - REJECTED: Red
 *
 * @layer UI
 */

import * as React from 'react';
import { CheckCircle2, Clock, XCircle, FileQuestion } from 'lucide-react';
import { ReliabilityStatus } from '@archer/domain';
import { cn } from '@/lib/utils';

export interface ReliabilityStatusBadgeProps {
  status: ReliabilityStatus;
  size?: 'sm' | 'md' | 'lg';
  showIcon?: boolean;
  className?: string;
}

interface StatusConfig {
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  bgColor: string;
  textColor: string;
  borderColor: string;
}

const STATUS_CONFIG: Record<ReliabilityStatus, StatusConfig> = {
  [ReliabilityStatus.DRAFT]: {
    label: 'Draft',
    icon: FileQuestion,
    bgColor: 'bg-gray-100',
    textColor: 'text-gray-700',
    borderColor: 'border-gray-300',
  },
  [ReliabilityStatus.PENDING_CONFIRMATION]: {
    label: 'Pending',
    icon: Clock,
    bgColor: 'bg-yellow-100',
    textColor: 'text-yellow-700',
    borderColor: 'border-yellow-300',
  },
  [ReliabilityStatus.CONFIRMED]: {
    label: 'Confirmed',
    icon: CheckCircle2,
    bgColor: 'bg-green-100',
    textColor: 'text-green-700',
    borderColor: 'border-green-300',
  },
  [ReliabilityStatus.REJECTED]: {
    label: 'Rejected',
    icon: XCircle,
    bgColor: 'bg-red-100',
    textColor: 'text-red-700',
    borderColor: 'border-red-300',
  },
};

const SIZE_CLASSES = {
  sm: {
    container: 'px-2 py-0.5 text-xs',
    icon: 'h-3 w-3',
  },
  md: {
    container: 'px-2.5 py-1 text-sm',
    icon: 'h-4 w-4',
  },
  lg: {
    container: 'px-3 py-1.5 text-base',
    icon: 'h-5 w-5',
  },
};

export const ReliabilityStatusBadge = React.forwardRef<HTMLDivElement, ReliabilityStatusBadgeProps>(
  ({ status, size = 'md', showIcon = true, className }, ref) => {
    const config = STATUS_CONFIG[status];
    const sizeClasses = SIZE_CLASSES[size];

    if (!config) {
      // Handle unknown status gracefully
      return (
        <div
          ref={ref}
          className={cn(
            'inline-flex items-center gap-1 rounded-md border font-medium',
            'bg-gray-100 text-gray-700 border-gray-300',
            sizeClasses.container,
            className
          )}
        >
          <span>Unknown</span>
        </div>
      );
    }

    const Icon = config.icon;

    return (
      <div
        ref={ref}
        className={cn(
          'inline-flex items-center gap-1.5 rounded-md border font-medium',
          config.bgColor,
          config.textColor,
          config.borderColor,
          sizeClasses.container,
          className
        )}
        role="status"
        aria-label={`Reliability status: ${config.label}`}
      >
        {showIcon && <Icon className={sizeClasses.icon} aria-hidden="true" />}
        <span>{config.label}</span>
      </div>
    );
  }
);

ReliabilityStatusBadge.displayName = 'ReliabilityStatusBadge';