/**
 * KYCStatusBadge Component
 * Displays the current KYC verification status
 */

import React from 'react';
import { CheckCircle, Clock, XCircle, AlertTriangle, Shield } from 'lucide-react';

export type KYCStatus = 'not_started' | 'pending' | 'in_review' | 'approved' | 'rejected';

interface KYCStatusBadgeProps {
  status: KYCStatus;
  rejectionReason?: string;
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
}

const statusConfig: Record<KYCStatus, {
  icon: React.ElementType;
  label: string;
  color: string;
  bgColor: string;
  description: string;
}> = {
  not_started: {
    icon: Shield,
    label: 'No Iniciado',
    color: 'text-gray-500',
    bgColor: 'bg-gray-100 dark:bg-gray-800',
    description: 'Completa la verificación de identidad para habilitar retiros',
  },
  pending: {
    icon: Clock,
    label: 'Pendiente',
    color: 'text-yellow-500',
    bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
    description: 'Tu documentación ha sido enviada y está pendiente de revisión',
  },
  in_review: {
    icon: Clock,
    label: 'En Revisión',
    color: 'text-blue-500',
    bgColor: 'bg-blue-100 dark:bg-blue-900/30',
    description: 'Nuestro equipo está revisando tu documentación',
  },
  approved: {
    icon: CheckCircle,
    label: 'Verificado',
    color: 'text-green-500',
    bgColor: 'bg-green-100 dark:bg-green-900/30',
    description: 'Tu identidad ha sido verificada exitosamente',
  },
  rejected: {
    icon: XCircle,
    label: 'Rechazado',
    color: 'text-red-500',
    bgColor: 'bg-red-100 dark:bg-red-900/30',
    description: 'La verificación fue rechazada. Por favor, revisa el motivo',
  },
};

export const KYCStatusBadge: React.FC<KYCStatusBadgeProps> = ({
  status,
  rejectionReason,
  size = 'md',
  showLabel = true,
}) => {
  const config = statusConfig[status];
  const Icon = config.icon;

  const sizeClasses = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-3 py-1 text-sm',
    lg: 'px-4 py-2 text-base',
  };

  const iconSizes = {
    sm: 'w-3 h-3',
    md: 'w-4 h-4',
    lg: 'w-5 h-5',
  };

  return (
    <div className="inline-flex flex-col items-start">
      <span
        className={`inline-flex items-center gap-1.5 rounded-full font-medium ${sizeClasses[size]} ${config.bgColor} ${config.color}`}
      >
        <Icon className={iconSizes[size]} />
        {showLabel && config.label}
      </span>
      {status === 'rejected' && rejectionReason && (
        <div className="mt-2 flex items-start gap-2 text-sm text-red-500">
          <AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" />
          <span>{rejectionReason}</span>
        </div>
      )}
    </div>
  );
};

export default KYCStatusBadge;
