'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import {
  getRaceRepository,
  getLeagueRepository,
  getProtestRepository,
  getDriverRepository,
  getPenaltyRepository,
  getLeagueMembershipRepository,
  getReviewProtestUseCase,
  getApplyPenaltyUseCase,
} from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import type { Race } from '@gridpilot/racing/domain/entities/Race';
import type { League } from '@gridpilot/racing/domain/entities/League';
import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
import type { Penalty, PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
import {
  AlertTriangle,
  Clock,
  CheckCircle,
  Flag,
  Calendar,
  MapPin,
  AlertCircle,
  Video,
  Gavel,
  ArrowLeft,
  Scale,
  ChevronRight,
  Users,
  Trophy,
} from 'lucide-react';

export default function RaceStewardingPage() {
  const params = useParams();
  const router = useRouter();
  const raceId = params.id as string;
  const currentDriverId = useEffectiveDriverId();

  const [race, setRace] = useState<Race | null>(null);
  const [league, setLeague] = useState<League | null>(null);
  const [protests, setProtests] = useState<Protest[]>([]);
  const [penalties, setPenalties] = useState<Penalty[]>([]);
  const [driversById, setDriversById] = useState<Record<string, DriverDTO>>({});
  const [loading, setLoading] = useState(true);
  const [isAdmin, setIsAdmin] = useState(false);
  const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');

  useEffect(() => {
    async function loadData() {
      setLoading(true);
      try {
        const raceRepo = getRaceRepository();
        const leagueRepo = getLeagueRepository();
        const protestRepo = getProtestRepository();
        const penaltyRepo = getPenaltyRepository();
        const driverRepo = getDriverRepository();
        const membershipRepo = getLeagueMembershipRepository();

        // Get race
        const raceData = await raceRepo.findById(raceId);
        if (!raceData) {
          setLoading(false);
          return;
        }
        setRace(raceData);

        // Get league
        const leagueData = await leagueRepo.findById(raceData.leagueId);
        setLeague(leagueData);

        // Check admin status
        if (leagueData) {
          const membership = await membershipRepo.getMembership(leagueData.id, currentDriverId);
          setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
        }

        // Get protests for this race
        const raceProtests = await protestRepo.findByRaceId(raceId);
        setProtests(raceProtests);

        // Get penalties for this race
        const racePenalties = await penaltyRepo.findByRaceId(raceId);
        setPenalties(racePenalties);

        // Collect driver IDs
        const driverIds = new Set<string>();
        raceProtests.forEach((p) => {
          driverIds.add(p.protestingDriverId);
          driverIds.add(p.accusedDriverId);
        });
        racePenalties.forEach((p) => {
          driverIds.add(p.driverId);
        });

        // Load driver info
        const driverEntities = await Promise.all(
          Array.from(driverIds).map((id) => driverRepo.findById(id))
        );
        const byId: Record<string, DriverDTO> = {};
        driverEntities.forEach((driver) => {
          if (driver) {
            const dto = EntityMappers.toDriverDTO(driver);
            if (dto) {
              byId[dto.id] = dto;
            }
          }
        });
        setDriversById(byId);
      } catch (err) {
        console.error('Failed to load data:', err);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [raceId, currentDriverId]);

  const pendingProtests = protests.filter(
    (p) => p.status === 'pending' || p.status === 'under_review'
  );
  const resolvedProtests = protests.filter(
    (p) => p.status === 'upheld' || p.status === 'dismissed' || p.status === 'withdrawn'
  );

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'pending':
      case 'under_review':
        return (
          <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
            Pending
          </span>
        );
      case 'upheld':
        return (
          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
            Upheld
          </span>
        );
      case 'dismissed':
        return (
          <span className="px-2 py-0.5 text-xs font-medium bg-gray-500/20 text-gray-400 rounded-full">
            Dismissed
          </span>
        );
      case 'withdrawn':
        return (
          <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">
            Withdrawn
          </span>
        );
      default:
        return null;
    }
  };

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="animate-pulse space-y-6">
            <div className="h-6 bg-iron-gray rounded w-1/4" />
            <div className="h-48 bg-iron-gray rounded-xl" />
          </div>
        </div>
      </div>
    );
  }

  if (!race) {
    return (
      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <Card className="text-center py-12">
            <div className="flex flex-col items-center gap-4">
              <div className="p-4 bg-warning-amber/10 rounded-full">
                <AlertTriangle className="w-8 h-8 text-warning-amber" />
              </div>
              <div>
                <p className="text-white font-medium mb-1">Race not found</p>
                <p className="text-sm text-gray-500">
                  The race you're looking for doesn't exist.
                </p>
              </div>
              <Button variant="secondary" onClick={() => router.push('/races')}>
                Back to Races
              </Button>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  const breadcrumbItems = [
    { label: 'Races', href: '/races' },
    { label: race.track, href: `/races/${race.id}` },
    { label: 'Stewarding' },
  ];

  return (
    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto space-y-6">
        {/* Navigation */}
        <div className="flex items-center justify-between">
          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
          <Button
            variant="secondary"
            onClick={() => router.push(`/races/${race.id}`)}
            className="flex items-center gap-2 text-sm"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Race
          </Button>
        </div>

        {/* Header */}
        <Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
          <div className="flex items-center gap-4 mb-4">
            <div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
              <Scale className="w-6 h-6 text-primary-blue" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">Stewarding</h1>
              <p className="text-sm text-gray-400">
                {race.track} • {formatDate(race.scheduledAt)}
              </p>
            </div>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-3 gap-4">
            <div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
              <div className="flex items-center gap-2 text-warning-amber mb-1">
                <Clock className="w-4 h-4" />
                <span className="text-xs font-medium uppercase">Pending</span>
              </div>
              <div className="text-2xl font-bold text-white">{pendingProtests.length}</div>
            </div>
            <div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
              <div className="flex items-center gap-2 text-performance-green mb-1">
                <CheckCircle className="w-4 h-4" />
                <span className="text-xs font-medium uppercase">Resolved</span>
              </div>
              <div className="text-2xl font-bold text-white">{resolvedProtests.length}</div>
            </div>
            <div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
              <div className="flex items-center gap-2 text-red-400 mb-1">
                <Gavel className="w-4 h-4" />
                <span className="text-xs font-medium uppercase">Penalties</span>
              </div>
              <div className="text-2xl font-bold text-white">{penalties.length}</div>
            </div>
          </div>
        </Card>

        {/* Tab Navigation */}
        <div className="border-b border-charcoal-outline">
          <div className="flex gap-4">
            <button
              onClick={() => setActiveTab('pending')}
              className={`pb-3 px-1 font-medium transition-colors ${
                activeTab === 'pending'
                  ? 'text-primary-blue border-b-2 border-primary-blue'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Pending
              {pendingProtests.length > 0 && (
                <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
                  {pendingProtests.length}
                </span>
              )}
            </button>
            <button
              onClick={() => setActiveTab('resolved')}
              className={`pb-3 px-1 font-medium transition-colors ${
                activeTab === 'resolved'
                  ? 'text-primary-blue border-b-2 border-primary-blue'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Resolved
            </button>
            <button
              onClick={() => setActiveTab('penalties')}
              className={`pb-3 px-1 font-medium transition-colors ${
                activeTab === 'penalties'
                  ? 'text-primary-blue border-b-2 border-primary-blue'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Penalties
            </button>
          </div>
        </div>

        {/* Content */}
        {activeTab === 'pending' && (
          <div className="space-y-4">
            {pendingProtests.length === 0 ? (
              <Card className="text-center py-12">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
                  <Flag className="w-8 h-8 text-performance-green" />
                </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>
              </Card>
            ) : (
              pendingProtests.map((protest) => {
                const protester = driversById[protest.protestingDriverId];
                const accused = driversById[protest.accusedDriverId];
                const daysSinceFiled = Math.floor(
                  (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
                );
                const isUrgent = daysSinceFiled > 2;

                return (
                  <Card
                    key={protest.id}
                    className={`${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
                  >
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-2">
                          <AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
                          <Link
                            href={`/drivers/${protest.protestingDriverId}`}
                            className="font-medium text-white hover:text-primary-blue transition-colors"
                          >
                            {protester?.name || 'Unknown'}
                          </Link>
                          <span className="text-gray-400">vs</span>
                          <Link
                            href={`/drivers/${protest.accusedDriverId}`}
                            className="font-medium text-white hover:text-primary-blue transition-colors"
                          >
                            {accused?.name || 'Unknown'}
                          </Link>
                          {getStatusBadge(protest.status)}
                          {isUrgent && (
                            <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
                              <AlertTriangle className="w-3 h-3" />
                              {daysSinceFiled}d old
                            </span>
                          )}
                        </div>
                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
                          <span>Lap {protest.incident.lap}</span>
                          <span>•</span>
                          <span>Filed {formatDate(protest.filedAt)}</span>
                          {protest.proofVideoUrl && (
                            <>
                              <span>•</span>
                              <a
                                href={protest.proofVideoUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="flex items-center gap-1 text-primary-blue hover:underline"
                              >
                                <Video className="w-3 h-3" />
                                Video Evidence
                              </a>
                            </>
                          )}
                        </div>
                        <p className="text-sm text-gray-300">{protest.incident.description}</p>
                      </div>
                      {isAdmin && league && (
                        <Link
                          href={`/leagues/${league.id}/stewarding/protests/${protest.id}`}
                        >
                          <Button variant="primary">Review</Button>
                        </Link>
                      )}
                    </div>
                  </Card>
                );
              })
            )}
          </div>
        )}

        {activeTab === 'resolved' && (
          <div className="space-y-4">
            {resolvedProtests.length === 0 ? (
              <Card className="text-center py-12">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
                  <CheckCircle className="w-8 h-8 text-gray-500" />
                </div>
                <p className="font-semibold text-lg text-white mb-2">No Resolved Protests</p>
                <p className="text-sm text-gray-400">
                  Resolved protests will appear here
                </p>
              </Card>
            ) : (
              resolvedProtests.map((protest) => {
                const protester = driversById[protest.protestingDriverId];
                const accused = driversById[protest.accusedDriverId];

                return (
                  <Card key={protest.id}>
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-2">
                          <AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
                          <Link
                            href={`/drivers/${protest.protestingDriverId}`}
                            className="font-medium text-white hover:text-primary-blue transition-colors"
                          >
                            {protester?.name || 'Unknown'}
                          </Link>
                          <span className="text-gray-400">vs</span>
                          <Link
                            href={`/drivers/${protest.accusedDriverId}`}
                            className="font-medium text-white hover:text-primary-blue transition-colors"
                          >
                            {accused?.name || 'Unknown'}
                          </Link>
                          {getStatusBadge(protest.status)}
                        </div>
                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
                          <span>Lap {protest.incident.lap}</span>
                          <span>•</span>
                          <span>Filed {formatDate(protest.filedAt)}</span>
                        </div>
                        <p className="text-sm text-gray-300 mb-2">
                          {protest.incident.description}
                        </p>
                        {protest.decisionNotes && (
                          <div className="mt-2 p-3 rounded bg-iron-gray/50 border border-charcoal-outline/50">
                            <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
                              Steward Decision
                            </p>
                            <p className="text-sm text-gray-300">{protest.decisionNotes}</p>
                          </div>
                        )}
                      </div>
                    </div>
                  </Card>
                );
              })
            )}
          </div>
        )}

        {activeTab === 'penalties' && (
          <div className="space-y-4">
            {penalties.length === 0 ? (
              <Card className="text-center py-12">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
                  <Gavel className="w-8 h-8 text-gray-500" />
                </div>
                <p className="font-semibold text-lg text-white mb-2">No Penalties</p>
                <p className="text-sm text-gray-400">
                  Penalties issued for this race will appear here
                </p>
              </Card>
            ) : (
              penalties.map((penalty) => {
                const driver = driversById[penalty.driverId];
                return (
                  <Card key={penalty.id}>
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
                        <Gavel className="w-6 h-6 text-red-400" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <Link
                            href={`/drivers/${penalty.driverId}`}
                            className="font-medium text-white hover:text-primary-blue transition-colors"
                          >
                            {driver?.name || 'Unknown'}
                          </Link>
                          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
                            {penalty.type.replace('_', ' ')}
                          </span>
                        </div>
                        <p className="text-sm text-gray-400">{penalty.reason}</p>
                        {penalty.notes && (
                          <p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
                        )}
                      </div>
                      <div className="text-right">
                        <span className="text-2xl font-bold text-red-400">
                          {penalty.type === 'time_penalty' && `+${penalty.value}s`}
                          {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
                          {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
                          {penalty.type === 'disqualification' && 'DSQ'}
                          {penalty.type === 'warning' && 'Warning'}
                          {penalty.type === 'license_points' && `${penalty.value} LP`}
                        </span>
                      </div>
                    </div>
                  </Card>
                );
              })
            )}
          </div>
        )}
      </div>
    </div>
  );
}