import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';

interface LeagueScheduleTemplateProps {
  viewData: LeagueScheduleViewData;
}

export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
  return (
    <Section>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-xl font-semibold text-white">Race Schedule</h2>
          <p className="text-sm text-gray-400 mt-1">
            Upcoming and completed races for this season
          </p>
        </div>
      </div>

      {viewData.races.length === 0 ? (
        <Card>
          <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">
              <Calendar className="w-8 h-8 text-performance-green" />
            </div>
            <p className="font-semibold text-lg text-white mb-2">No Races Scheduled</p>
            <p className="text-sm text-gray-400">The race schedule will appear here once events are added.</p>
          </div>
        </Card>
      ) : (
        <div className="space-y-4">
          {viewData.races.map((race) => (
            <Card key={race.id}>
              <div className="flex items-start justify-between">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 mb-3">
                    <div className={`w-3 h-3 rounded-full ${race.isPast ? 'bg-performance-green' : 'bg-primary-blue'}`} />
                    <h3 className="font-semibold text-white text-lg">{race.name}</h3>
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                      race.status === 'completed'
                        ? 'bg-performance-green/20 text-performance-green'
                        : 'bg-primary-blue/20 text-primary-blue'
                    }`}>
                      {race.status === 'completed' ? 'Completed' : 'Scheduled'}
                    </span>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                    <div className="flex items-center gap-2 text-sm text-gray-300">
                      <Calendar className="w-4 h-4 text-gray-400" />
                      <span>{new Date(race.scheduledAt).toLocaleDateString()}</span>
                    </div>

                    <div className="flex items-center gap-2 text-sm text-gray-300">
                      <Clock className="w-4 h-4 text-gray-400" />
                      <span>{new Date(race.scheduledAt).toLocaleTimeString()}</span>
                    </div>

                    {race.track && (
                      <div className="flex items-center gap-2 text-sm text-gray-300">
                        <MapPin className="w-4 h-4 text-gray-400" />
                        <span className="truncate">{race.track}</span>
                      </div>
                    )}

                    {race.car && (
                      <div className="flex items-center gap-2 text-sm text-gray-300">
                        <Car className="w-4 h-4 text-gray-400" />
                        <span className="truncate">{race.car}</span>
                      </div>
                    )}
                  </div>

                  {race.sessionType && (
                    <div className="flex items-center gap-2 text-sm text-gray-400">
                      <Trophy className="w-4 h-4" />
                      <span>{race.sessionType} Session</span>
                    </div>
                  )}
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </Section>
  );
}