'use client';

import { useState } from 'react';
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 { StewardingTabs } from '@/components/races/StewardingTabs';
import {
  AlertCircle,
  AlertTriangle,
  ArrowLeft,
  CheckCircle,
  Clock,
  Flag,
  Gavel,
  Scale,
  Video
} from 'lucide-react';
import Link from 'next/link';

export type StewardingTab = 'pending' | 'resolved' | 'penalties';

export interface Protest {
  id: string;
  status: string;
  protestingDriverId: string;
  accusedDriverId: string;
  filedAt: string;
  incident: {
    lap: number;
    description: string;
  };
  proofVideoUrl?: string;
  decisionNotes?: string;
}

export interface Penalty {
  id: string;
  driverId: string;
  type: string;
  value: number;
  reason: string;
  notes?: string;
}

export interface Driver {
  id: string;
  name: string;
}

export interface RaceStewardingData {
  race?: {
    id: string;
    track: string;
    scheduledAt: string;
  } | null;
  league?: {
    id: string;
  } | null;
  pendingProtests: Protest[];
  resolvedProtests: Protest[];
  penalties: Penalty[];
  driverMap: Record<string, Driver>;
  pendingCount: number;
  resolvedCount: number;
  penaltiesCount: number;
}

export interface RaceStewardingTemplateProps {
  stewardingData?: RaceStewardingData;
  isLoading: boolean;
  error?: Error | null;
  // Actions
  onBack: () => void;
  onReviewProtest: (protestId: string) => void;
  // User state
  isAdmin: boolean;
  // UI State
  activeTab: StewardingTab;
  setActiveTab: (tab: StewardingTab) => void;
}

export function RaceStewardingTemplate({
  stewardingData,
  isLoading,
  error,
  onBack,
  onReviewProtest,
  isAdmin,
  activeTab,
  setActiveTab,
}: RaceStewardingTemplateProps) {
  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',
    });
  };

  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;
    }
  };

  if (isLoading) {
    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={onBack}>
                Back to Races
              </Button>
            </div>
          </Card>
        </div>
      </div>
    );
  }

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

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

  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={() => onBack()}
            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 */}
        <StewardingTabs
          activeTab={activeTab}
          onTabChange={setActiveTab}
          pendingCount={pendingProtests.length}
        />

        {/* 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 && (
                        <Button
                          variant="primary"
                          onClick={() => onReviewProtest(protest.id)}
                        >
                          Review
                        </Button>
                      )}
                    </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>
  );
}