import React from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Badge } from '../../ui/Badge';
import type { AlertGroup } from '../../../utils/alertHelpers';

export interface AlertGroupHeaderProps {
  group: AlertGroup;
  isCollapsed: boolean;
  onToggleCollapse: () => void;
}

const SEVERITY_COLORS: Record<string, string> = {
  urgent: 'text-red-600 bg-red-50 border-red-200',
  high: 'text-orange-600 bg-orange-50 border-orange-200',
  medium: 'text-blue-600 bg-blue-50 border-blue-200',
  low: 'text-green-600 bg-green-50 border-green-200',
};

const SEVERITY_BADGE_VARIANTS: Record<string, 'error' | 'warning' | 'info' | 'success'> = {
  urgent: 'error',
  high: 'warning',
  medium: 'info',
  low: 'success',
};

const AlertGroupHeader: React.FC<AlertGroupHeaderProps> = ({
  group,
  isCollapsed,
  onToggleCollapse,
}) => {
  const severityConfig = SEVERITY_COLORS[group.severity] || SEVERITY_COLORS.low;
  const badgeVariant = SEVERITY_BADGE_VARIANTS[group.severity] || 'info';

  return (
    <button
      onClick={onToggleCollapse}
      className={`
        w-full flex items-center justify-between p-3.5 rounded-lg border-2 transition-all
        ${severityConfig}
        hover:shadow-md cursor-pointer hover:scale-[1.01]
      `}
      aria-expanded={!isCollapsed}
      aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${group.title}`}
    >
      <div className="flex items-center gap-3 flex-1 min-w-0">
        <div className="flex-shrink-0">
          {isCollapsed ? (
            <ChevronDown className="w-5 h-5" />
          ) : (
            <ChevronUp className="w-5 h-5" />
          )}
        </div>

        <div className="text-left flex-1 min-w-0">
          <h3 className="font-bold text-sm truncate">
            {group.title}
          </h3>
          {group.type === 'similarity' && group.count > 1 && (
            <p className="text-xs opacity-75 mt-0.5">
              {group.alerts.length} alertas similares
            </p>
          )}
        </div>
      </div>

      <div className="flex items-center gap-2 flex-shrink-0 ml-3">
        {group.count > 1 && (
          <div className="flex items-center gap-1.5 px-2.5 py-1 bg-white/60 backdrop-blur-sm rounded-lg border border-current/20 min-h-[1.625rem]">
            <span className="text-xs font-bold leading-none">{group.count}</span>
            <span className="text-xs opacity-75 leading-none">alertas</span>
          </div>
        )}

        {group.severity && (
          <Badge variant={badgeVariant} size="sm" className="font-bold px-2.5 py-1 min-h-[1.625rem]">
            {group.severity.toUpperCase()}
          </Badge>
        )}
      </div>
    </button>
  );
};

export default AlertGroupHeader;
