'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  AlertTriangle,
  Clock,
  CheckCircle,
  Flag,
  Calendar,
  MapPin,
  AlertCircle,
  Video,
  Gavel,
  ArrowLeft,
  Scale,
  ChevronRight,
  Users,
  Trophy,
} from 'lucide-react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { apiClient } from '@/lib/apiClient';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import type { RaceProtestsViewModel, RacePenaltiesViewModel } from '@/lib/apiClient';

export default function RaceStewardingPage() {
  const params = useParams();
  const router = useRouter();
  const raceId = params.id as string;
  const currentDriverId = useEffectiveDriverId();
 
  const [race, setRace] = useState<any>(null); // TODO: Define proper race type
  const [league, setLeague] = useState<any>(null); // TODO: Define proper league type
  const [protestsData, setProtestsData] = useState<RaceProtestsViewModel | null>(null);
  const [penaltiesData, setPenaltiesData] = useState<RacePenaltiesViewModel | null>(null);
  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 {
        // Get race detail for basic info
        const raceDetail = await apiClient.races.getDetail(raceId, currentDriverId);
        setRace(raceDetail.race);
        setLeague(raceDetail.league);

        if (raceDetail.league) {
          // TODO: Implement admin check via API
          setIsAdmin(true);
        }

        // Get protests and penalties
        const [protestsData, penaltiesData] = await Promise.all([
          apiClient.races.getProtests(raceId),
          apiClient.races.getPenalties(raceId),
        ]);

        setProtestsData(protestsData);
        setPenaltiesData(penaltiesData);
      } catch (err) {
        console.error('Failed to load data:', err);
      } finally {
        setLoading(false);
      }
    }

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

  const pendingProtests = protestsData?.protests.filter(
    (p) => p.status === 'pending' || p.status === 'under_review',
  ) ?? [];
  const resolvedProtests = protestsData?.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 | string) => {
    const d = typeof date === 'string' ? new Date(date) : date;
    return d.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">{penaltiesData?.penalties.length ?? 0}</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 = protestsData?.driverMap[protest.protestingDriverId];
                const accused = protestsData?.driverMap[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 = protestsData?.driverMap[protest.protestingDriverId];
                const accused = protestsData?.driverMap[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>
            ) : (
              penaltiesData?.penalties.map((penalty) => {
                const driver = penaltiesData?.driverMap[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>
  );
}