gridpilot.gg/apps/website/templates/StewardingTemplate.tsx

/* eslint-disable gridpilot-rules/no-raw-html-in-app */

import { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Flag, AlertCircle, Calendar, MapPin, Gavel } from 'lucide-react';

interface StewardingTemplateProps {
  viewData: StewardingViewData;
}

export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
  return (
    <Section>
      <Card>
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-xl font-semibold text-white">Stewarding</h2>
            <p className="text-sm text-gray-400 mt-1">
              Quick overview of protests and penalties across all races
            </p>
          </div>
        </div>

        {/* Stats summary */}
        <div className="grid grid-cols-3 gap-4 mb-6">
          <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline text-center">
            <div className="text-2xl font-bold text-warning-amber">{viewData.totalPending}</div>
            <div className="text-sm text-gray-400">Pending</div>
          </div>
          <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline text-center">
            <div className="text-2xl font-bold text-performance-green">{viewData.totalResolved}</div>
            <div className="text-sm text-gray-400">Resolved</div>
          </div>
          <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline text-center">
            <div className="text-2xl font-bold text-red-400">{viewData.totalPenalties}</div>
            <div className="text-sm text-gray-400">Penalties</div>
          </div>
        </div>

        {/* Content */}
        {viewData.races.length === 0 ? (
          <div 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 protests or penalties to review.</p>
          </div>
        ) : (
          <div className="space-y-4">
            {viewData.races.map((race) => (
              <div key={race.id} className="rounded-lg border border-charcoal-outline overflow-hidden">
                {/* Race Header */}
                <div className="px-4 py-3 bg-iron-gray/30">
                  <div className="flex items-center gap-4">
                    <div className="flex items-center gap-2">
                      <MapPin className="w-4 h-4 text-gray-400" />
                      <span className="font-medium text-white">{race.track}</span>
                    </div>
                    <div className="flex items-center gap-2 text-gray-400 text-sm">
                      <Calendar className="w-4 h-4" />
                      <span>{new Date(race.scheduledAt).toLocaleDateString()}</span>
                    </div>
                    <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
                      {race.pendingProtests.length} pending
                    </span>
                  </div>
                </div>

                {/* Race Content */}
                <div className="p-4 space-y-3 bg-deep-graphite/50">
                  {race.pendingProtests.length === 0 && race.resolvedProtests.length === 0 && race.penalties.length === 0 ? (
                    <p className="text-sm text-gray-400 text-center py-4">No items to display</p>
                  ) : (
                    <>
                      {race.pendingProtests.map((protest) => {
                        const protester = viewData.drivers.find(d => d.id === protest.protestingDriverId);
                        const accused = viewData.drivers.find(d => d.id === protest.accusedDriverId);

                        return (
                          <div
                            key={protest.id}
                            className="rounded-lg border border-charcoal-outline bg-iron-gray/30 p-4"
                          >
                            <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" />
                                  <span className="font-medium text-white">
                                    {protester?.name || 'Unknown'} vs {accused?.name || 'Unknown'}
                                  </span>
                                  <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">Pending</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 {new Date(protest.filedAt).toLocaleDateString()}</span>
                                </div>
                                <p className="text-sm text-gray-300 line-clamp-2">
                                  {protest.incident.description}
                                </p>
                              </div>
                              <div className="text-sm text-gray-400">
                                Review needed
                              </div>
                            </div>
                          </div>
                        );
                      })}

                      {race.penalties.map((penalty) => {
                        const driver = viewData.drivers.find(d => d.id === penalty.driverId);
                        return (
                          <div
                            key={penalty.id}
                            className="rounded-lg border border-charcoal-outline bg-iron-gray/30 p-4"
                          >
                            <div className="flex items-center gap-3">
                              <div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
                                <Gavel className="w-4 h-4 text-red-400" />
                              </div>
                              <div className="flex-1">
                                <div className="flex items-center gap-2">
                                  <span className="font-medium text-white">{driver?.name || 'Unknown'}</span>
                                  <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>
                              </div>
                              <div className="text-right">
                                <span className="text-lg 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>
                          </div>
                        );
                      })}
                    </>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>
    </Section>
  );
}