'use client';

import Breadcrumbs from '@/components/layout/Breadcrumbs';
import RaceStewardingStats from '@/components/races/RaceStewardingStats';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import {
  AlertCircle,
  AlertTriangle,
  ArrowLeft,
  CheckCircle,
  Clock,
  Flag,
  Gavel,
  Scale,
  Video
} from 'lucide-react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';

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

  const { data: stewardingData, isLoading: loading } = useRaceStewardingData(raceId, currentDriverId);
  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);

  const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');

  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;

  const pendingProtests = stewardingData?.pendingProtests ?? [];
  const resolvedProtests = stewardingData?.resolvedProtests ?? [];

  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 (!stewardingData?.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: stewardingData?.race?.track || 'Race', href: `/races/${raceId}` },
    { 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/${raceId}`)}
            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">
                   {stewardingData?.race?.track} • {stewardingData?.race?.scheduledAt ? formatDate(stewardingData.race.scheduledAt) : ''}
                 </p>
            </div>
          </div>

          {/* Stats */}
          <RaceStewardingStats
            pendingCount={stewardingData?.pendingCount ?? 0}
            resolvedCount={stewardingData?.resolvedCount ?? 0}
            penaltiesCount={stewardingData?.penaltiesCount ?? 0}
          />
        </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 = stewardingData?.driverMap[protest.protestingDriverId];
                const accused = stewardingData?.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 && stewardingData?.league && (
                        <Link
                          href={`/leagues/${stewardingData.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 = stewardingData?.driverMap[protest.protestingDriverId];
                const accused = stewardingData?.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">
            {stewardingData?.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>
            ) : (
              stewardingData?.penalties.map((penalty) => {
                const driver = stewardingData?.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>
  );
}