"use client";

import { ProtestViewModel } from "../../lib/view-models/ProtestViewModel";
import { RaceViewModel } from "../../lib/view-models/RaceViewModel";
import { DriverViewModel } from "../../lib/view-models/DriverViewModel";
import Card from "../ui/Card";
import Button from "../ui/Button";
import Link from "next/link";
import { AlertCircle, Video, ChevronRight, Flag, Clock, AlertTriangle } from "lucide-react";

interface PendingProtestsListProps {
  protests: ProtestViewModel[];
  races: Record<string, RaceViewModel>;
  drivers: Record<string, DriverViewModel>;
  leagueId: string;
  onReviewProtest: (protest: ProtestViewModel) => void;
  onProtestReviewed: () => void;
}

export function PendingProtestsList({
  protests,
  races,
  drivers,
  leagueId,
  onReviewProtest,
  onProtestReviewed,
}: PendingProtestsListProps) {

  if (protests.length === 0) {
    return (
      <Card className="p-12 text-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-16 h-16 rounded-full bg-performance-green/10 flex items-center justify-center">
            <Flag className="h-8 w-8 text-performance-green" />
          </div>
          <div>
            <p className="font-semibold text-lg text-white mb-2">All Clear! 🏁</p>
            <p className="text-sm text-gray-400">No pending protests to review</p>
          </div>
        </div>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      {protests.map((protest) => {
        const daysSinceFiled = Math.floor((Date.now() - new Date(protest.filedAt || protest.submittedAt).getTime()) / (1000 * 60 * 60 * 24));
        const isUrgent = daysSinceFiled > 2;
        
        return (
          <Card
            key={protest.id}
            className={`p-6 hover:border-warning-amber/40 transition-all ${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
          >
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1 space-y-3">
                <div className="flex items-center gap-3 flex-wrap">
                  <div className="h-10 w-10 rounded-full bg-warning-amber/20 flex items-center justify-center flex-shrink-0">
                    <AlertCircle className="h-5 w-5 text-warning-amber" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-white">
                      Protest #{protest.id.substring(0, 8)}
                    </h3>
                    <p className="text-sm text-gray-400">
                      Filed {new Date(protest.filedAt || protest.submittedAt).toLocaleDateString()}
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="px-2 py-1 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      Pending
                    </span>
                    {isUrgent && (
                      <span className="px-2 py-1 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
                        <AlertTriangle className="h-3 w-3" />
                        {daysSinceFiled}d old
                      </span>
                    )}
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm">
                    <Flag className="h-4 w-4 text-gray-400" />
                    <span className="text-gray-400">Lap {protest.incident?.lap || 'N/A'}</span>
                  </div>
                  <p className="text-gray-300 line-clamp-2 leading-relaxed">
                    {protest.incident?.description || protest.description}
                  </p>
                  {protest.proofVideoUrl && (
                    <div className="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-primary-blue/10 text-primary-blue rounded-lg border border-primary-blue/20">
                      <Video className="h-4 w-4" />
                      <span>Video evidence attached</span>
                    </div>
                  )}
                </div>
              </div>

              <Link href={`/leagues/${leagueId}/stewarding/protests/${protest.id}`}>
                <Button
                  variant="secondary"
                  className="flex-shrink-0"
                >
                  <ChevronRight className="h-5 w-5" />
                </Button>
              </Link>
            </div>
          </Card>
        );
      })}
    </div>
  );
}