import { Card } from '../ui/card';
import { EmptyState } from '../states';
import { ArrowRight } from 'lucide-react';

export interface TopCampaign {
  id: string;
  name: string;
  engagementRate: number;
  status?: 'active' | 'paused' | 'completed';
}

export interface TopCampaignsProps {
  campaigns: TopCampaign[];
  title?: string;
  maxItems?: number;
  onViewAll?: () => void;
}

export function TopCampaigns({
  campaigns,
  title = 'Top Performing Campaigns',
  maxItems = 5,
  onViewAll,
}: TopCampaignsProps) {
  const displayCampaigns = campaigns.slice(0, maxItems);

  if (campaigns.length === 0) {
    return (
      <Card className="p-6">
        <h2 className="text-xl font-bold text-gray-900 mb-6">{title}</h2>
        <EmptyState
          title="No campaigns yet"
          description="Launch your first campaign to see performance metrics"
        />
      </Card>
    );
  }

  return (
    <Card className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-bold text-gray-900">{title}</h2>
        {onViewAll && campaigns.length > maxItems && (
          <button
            onClick={onViewAll}
            className="text-sm text-primary hover:text-primary/80 font-medium flex items-center gap-1 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
          >
            View all
            <ArrowRight className="w-4 h-4" />
          </button>
        )}
      </div>

      <div className="space-y-4" role="list" aria-label="Top campaigns by engagement">
        {displayCampaigns.map((campaign, index) => {
          const getProgressColor = (rate: number) => {
            if (rate >= 75) return 'bg-success-500';
            if (rate >= 50) return 'bg-primary';
            if (rate >= 25) return 'bg-warning-500';
            return 'bg-gray-400';
          };

          const progressColor = getProgressColor(campaign.engagementRate);

          return (
            <div
              key={campaign.id}
              role="listitem"
              className="group space-y-2"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-start gap-2 min-w-0 flex-1">
                  <span className={`
                    flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold
                    ${index === 0 ? 'bg-accent/15 text-accent border border-accent/30' : 'bg-gray-100 text-gray-600'}
                  `}>
                    {index + 1}
                  </span>

                  <div className="min-w-0 flex-1">
                    <h3 className="text-sm font-medium text-gray-900 truncate group-hover:text-primary transition-colors">
                      {campaign.name}
                    </h3>
                    {campaign.status && (
                      <span className={`
                        inline-block text-xs px-2 py-0.5 rounded-full mt-1 border
                        ${campaign.status === 'active' ? 'bg-primary/10 text-primary border-primary/30' : ''}
                        ${campaign.status === 'paused' ? 'bg-warning-50 text-warning-700 border-warning-200' : ''}
                        ${campaign.status === 'completed' ? 'bg-accent/10 text-accent border-accent/30' : ''}
                      `}>
                        {campaign.status}
                      </span>
                    )}
                  </div>
                </div>

                <span className="flex-shrink-0 text-sm font-bold text-gray-900">
                  {campaign.engagementRate}%
                </span>
              </div>

              <div className="relative h-2 bg-gray-100 rounded-full overflow-hidden">
                <div
                  className={`absolute inset-y-0 left-0 ${progressColor} transition-all duration-500 rounded-full`}
                  style={{ width: `${campaign.engagementRate}%` }}
                  role="progressbar"
                  aria-valuenow={campaign.engagementRate}
                  aria-valuemin={0}
                  aria-valuemax={100}
                  aria-label={`${campaign.name} engagement rate: ${campaign.engagementRate}%`}
                />
              </div>
            </div>
          );
        })}
      </div>

      {campaigns.length > 0 && (
        <div className="mt-6 pt-6 border-t border-gray-200">
          <div className="flex items-center justify-between text-sm">
            <span className="text-gray-600">Average Engagement</span>
            <span className="font-bold text-gray-900">
              {Math.round(
                campaigns.reduce((sum, c) => sum + c.engagementRate, 0) / campaigns.length
              )}%
            </span>
          </div>
        </div>
      )}
    </Card>
  );
}