"use client";

import { useState, useEffect } from "react";
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 { Clock, Grid3x3, TrendingDown, AlertCircle, Filter, Flag } from "lucide-react";

interface PenaltyHistoryListProps {
  protests: ProtestViewModel[];
  races: Record<string, RaceViewModel>;
  drivers: Record<string, DriverViewModel>;
}

export function PenaltyHistoryList({
  protests,
  races,
  drivers,
}: PenaltyHistoryListProps) {
  const [filteredProtests, setFilteredProtests] = useState<ProtestViewModel[]>([]);
  const [filterType, setFilterType] = useState<"all">("all");

  useEffect(() => {
    setFilteredProtests(protests);
  }, [protests]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "upheld":
        return "text-red-400 bg-red-500/20";
      case "dismissed":
        return "text-gray-400 bg-gray-500/20";
      case "withdrawn":
        return "text-blue-400 bg-blue-500/20";
      default:
        return "text-orange-400 bg-orange-500/20";
    }
  };

  return (
    <div className="space-y-4">
      {filteredProtests.length === 0 ? (
        <Card className="p-12 text-center">
          <div className="flex flex-col items-center gap-4 text-gray-400">
            <AlertCircle className="h-12 w-12 opacity-50" />
            <div>
              <p className="font-medium text-lg">No Resolved Protests</p>
              <p className="text-sm mt-1">
                No protests have been resolved in this league
              </p>
            </div>
          </div>
        </Card>
      ) : (
        <div className="space-y-3">
          {filteredProtests.map((protest) => {
            const race = races[protest.raceId];
            const protester = drivers[protest.protestingDriverId];
            const accused = drivers[protest.accusedDriverId];
            const incident = protest.incident;
            const resolvedDate = protest.reviewedAt || protest.filedAt;
            
            return (
              <Card key={protest.id} className="p-4">
                <div className="flex items-start gap-4">
                  <div className={`h-10 w-10 rounded-full flex items-center justify-center flex-shrink-0 ${getStatusColor(protest.status)}`}>
                    <Flag className="h-5 w-5" />
                  </div>
                  <div className="flex-1 space-y-2">
                    <div className="flex items-start justify-between gap-4">
                      <div>
                        <h3 className="font-semibold text-white">
                          Protest #{protest.id.substring(0, 8)}
                        </h3>
                        <p className="text-sm text-gray-400">
                          {resolvedDate ? `Resolved ${new Date(resolvedDate).toLocaleDateString()}` : 'Resolved'}
                        </p>
                      </div>
                      <span className={`px-3 py-1 rounded-full text-xs font-medium flex-shrink-0 ${getStatusColor(protest.status)}`}>
                        {protest.status.toUpperCase()}
                      </span>
                    </div>
                    <div className="space-y-1 text-sm">
                      <p className="text-gray-400">
                        <span className="font-medium">{protester?.name || 'Unknown'}</span> vs <span className="font-medium">{accused?.name || 'Unknown'}</span>
                      </p>
                      {race && incident && (
                        <p className="text-gray-500">
                          {race.track} ({race.car}) - Lap {incident.lap}
                        </p>
                      )}
                    </div>
                    {incident && (
                      <p className="text-gray-300 text-sm">{incident.description}</p>
                    )}
                    {protest.decisionNotes && (
                      <div className="mt-2 p-2 rounded bg-iron-gray/30 border border-charcoal-outline/50">
                        <p className="text-xs text-gray-400">
                          <span className="font-medium">Steward Notes:</span> {protest.decisionNotes}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}