'use client';

import { Card } from '@/components/ui/Card';
import { Emoji } from './Emoji';

export interface AlertItem {
  id: string;
  title: string;
  icon?: string;
  urgency?: 'low' | 'medium' | 'high' | 'critical';
  source?: string;
  metadata?: string;
}

interface AlertProps {
  title: string;
  items: AlertItem[];
  icon?: string;
  variant?: 'info' | 'warning' | 'error' | 'success';
  className?: string;
  onItemClick?: (item: AlertItem) => void;
}

export function AlertBanner({
  title,
  items,
  icon = '⚠️',
  variant = 'warning',
  className = '',
  onItemClick,
}: AlertProps) {
  // Ne rien afficher si pas d'éléments
  if (!items || items.length === 0) {
    return null;
  }

  const getVariantClasses = () => {
    switch (variant) {
      case 'error':
        return 'outline-card-red';
      case 'success':
        return 'outline-card-green';
      case 'info':
        return 'outline-card-blue';
      case 'warning':
      default:
        return 'outline-card-yellow';
    }
  };

  const getUrgencyColor = (urgency?: string) => {
    switch (urgency) {
      case 'critical':
        return 'text-red-600';
      case 'high':
        return 'text-orange-600';
      case 'medium':
        return 'text-yellow-600';
      case 'low':
        return 'text-green-600';
      default:
        return 'text-gray-600';
    }
  };

  const getSourceIcon = (source?: string) => {
    switch (source) {
      case 'jira':
        return '🔗';
      case 'reminder':
        return '📱';
      case 'tfs':
        return '🔧';
      default:
        return '📋';
    }
  };

  return (
    <Card className={`mb-2 ${className}`}>
      <div className={`${getVariantClasses()} p-4`}>
        <div className="flex items-start gap-3">
          <div className="text-2xl">
            <Emoji emoji={icon} />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-sm font-semibold mb-2">
              {title} ({items.length})
            </h3>

            <div className="flex flex-wrap gap-2">
              {items.map((item, index) => (
                <div
                  key={item.id}
                  className={`inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium cursor-pointer hover:opacity-80 transition-opacity ${
                    onItemClick ? 'hover:bg-[var(--card)]/50' : ''
                  }`}
                  style={{
                    backgroundColor:
                      'color-mix(in srgb, var(--primary) 15%, var(--card))',
                    borderColor:
                      'color-mix(in srgb, var(--primary) 35%, var(--border))',
                    border: '1px solid',
                    color:
                      'color-mix(in srgb, var(--primary) 85%, var(--foreground))',
                  }}
                  onClick={() => onItemClick?.(item)}
                  title={item.title}
                >
                  <Emoji emoji={item.icon || getSourceIcon(item.source)} />
                  <span className="truncate max-w-[200px]">{item.title}</span>
                  {item.metadata && (
                    <span className="text-[10px] opacity-75">
                      ({item.metadata})
                    </span>
                  )}
                  {item.urgency && (
                    <span
                      className={`text-[10px] ${getUrgencyColor(item.urgency)}`}
                    >
                      {item.urgency === 'critical' ? (
                        <Emoji emoji="🔴" />
                      ) : item.urgency === 'high' ? (
                        <Emoji emoji="🟠" />
                      ) : item.urgency === 'medium' ? (
                        <Emoji emoji="🟡" />
                      ) : (
                        <Emoji emoji="🟢" />
                      )}
                    </span>
                  )}
                  {index < items.length - 1 && (
                    <span className="opacity-50">•</span>
                  )}
                </div>
              ))}
            </div>

            {items.length > 0 && (
              <div className="mt-2 text-xs opacity-75">
                Cliquez sur un élément pour plus de détails
              </div>
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}
