import Card from '@/components/ui/Card';
import type { LeagueScoringChampionshipDTO } from '@core/racing/application/dto/LeagueScoringConfigDTO';

interface ChampionshipCardProps {
  championship: LeagueScoringChampionshipDTO;
}

export function ChampionshipCard({ championship }: ChampionshipCardProps) {
  const getTypeLabel = (type: string): string => {
    switch (type) {
      case 'driver':
        return 'Driver Championship';
      case 'team':
        return 'Team Championship';
      case 'nations':
        return 'Nations Championship';
      case 'trophy':
        return 'Trophy Championship';
      default:
        return 'Championship';
    }
  };

  const getTypeBadgeStyle = (type: string): string => {
    switch (type) {
      case 'driver':
        return 'bg-primary-blue/10 text-primary-blue border-primary-blue/20';
      case 'team':
        return 'bg-purple-500/10 text-purple-400 border-purple-500/20';
      case 'nations':
        return 'bg-performance-green/10 text-performance-green border-performance-green/20';
      case 'trophy':
        return 'bg-warning-amber/10 text-warning-amber border-warning-amber/20';
      default:
        return 'bg-gray-500/10 text-gray-400 border-gray-500/20';
    }
  };

  return (
    <Card>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h3 className="text-lg font-semibold text-white">{championship.name}</h3>
          <span className={`inline-block mt-2 px-2.5 py-1 text-xs font-medium rounded border ${getTypeBadgeStyle(championship.type)}`}>
            {getTypeLabel(championship.type)}
          </span>
        </div>
      </div>

      <div className="space-y-4">
        {/* Session Types */}
        {championship.sessionTypes.length > 0 && (
          <div>
            <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Scored Sessions</h4>
            <div className="flex flex-wrap gap-2">
              {championship.sessionTypes.map((session, idx) => (
                <span
                  key={idx}
                  className="px-3 py-1.5 rounded bg-deep-graphite text-gray-300 text-sm font-medium border border-charcoal-outline capitalize"
                >
                  {session}
                </span>
              ))}
            </div>
          </div>
        )}

        {/* Points Preview */}
        {championship.pointsPreview.length > 0 && (
          <div>
            <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Points Distribution</h4>
            <div className="bg-deep-graphite rounded-lg border border-charcoal-outline p-4">
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3">
                {championship.pointsPreview.slice(0, 6).map((preview, idx) => (
                  <div key={idx} className="text-center">
                    <div className="text-xs text-gray-500 mb-1">P{preview.position}</div>
                    <div className="text-lg font-bold text-white tabular-nums">{preview.points}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Drop Policy */}
        <div className="p-4 bg-deep-graphite rounded-lg border border-charcoal-outline">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Drop Policy</span>
          </div>
          <p className="text-sm text-gray-300">{championship.dropPolicyDescription}</p>
        </div>
      </div>
    </Card>
  );
}