'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Card from '@/components/ui/Card';
import {
  getLeagueRepository,
  getGetLeagueScoringConfigUseCase
} from '@/lib/di-container';
import type { LeagueScoringConfigDTO } from '@gridpilot/racing/application/dto/LeagueScoringConfigDTO';
import type { League } from '@gridpilot/racing/domain/entities/League';

type RulebookSection = 'scoring' | 'conduct' | 'protests' | 'penalties';

export default function LeagueRulebookPage() {
  const params = useParams();
  const leagueId = params.id as string;

  const [league, setLeague] = useState<League | null>(null);
  const [scoringConfig, setScoringConfig] = useState<LeagueScoringConfigDTO | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeSection, setActiveSection] = useState<RulebookSection>('scoring');

  useEffect(() => {
    async function loadData() {
      try {
        const leagueRepo = getLeagueRepository();
        const scoringUseCase = getGetLeagueScoringConfigUseCase();

        const leagueData = await leagueRepo.findById(leagueId);
        if (!leagueData) {
          setLoading(false);
          return;
        }

        setLeague(leagueData);

        await scoringUseCase.execute({ leagueId });
        const scoringViewModel = scoringUseCase.presenter.getViewModel();
        setScoringConfig(scoringViewModel as unknown as LeagueScoringConfigDTO);
      } catch (err) {
        console.error('Failed to load scoring config:', err);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [leagueId]);

  if (loading) {
    return (
      <Card>
        <div className="text-center py-12 text-gray-400">Loading rulebook...</div>
      </Card>
    );
  }

  if (!league || !scoringConfig) {
    return (
      <Card>
        <div className="text-center py-12 text-gray-400">Unable to load rulebook</div>
      </Card>
    );
  }

  const primaryChampionship = scoringConfig.championships.find(c => c.type === 'driver') ?? scoringConfig.championships[0];
  const positionPoints = primaryChampionship?.pointsPreview
    .filter(p => p.sessionType === primaryChampionship.sessionTypes[0])
    .map(p => ({ position: p.position, points: p.points }))
    .sort((a, b) => a.position - b.position) || [];

  const sections: { id: RulebookSection; label: string }[] = [
    { id: 'scoring', label: 'Scoring' },
    { id: 'conduct', label: 'Conduct' },
    { id: 'protests', label: 'Protests' },
    { id: 'penalties', label: 'Penalties' },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Rulebook</h1>
          <p className="text-sm text-gray-400 mt-1">Official rules and regulations</p>
        </div>
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/20">
          <span className="text-sm font-medium text-primary-blue">{scoringConfig.scoringPresetName || 'Custom Rules'}</span>
        </div>
      </div>

      {/* Navigation Tabs */}
      <div className="flex gap-1 p-1 bg-deep-graphite rounded-lg border border-charcoal-outline">
        {sections.map((section) => (
          <button
            key={section.id}
            onClick={() => setActiveSection(section.id)}
            className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
              activeSection === section.id
                ? 'bg-iron-gray text-white'
                : 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
            }`}
          >
            {section.label}
          </button>
        ))}
      </div>

      {/* Content Sections */}
      {activeSection === 'scoring' && (
        <div className="space-y-6">
          {/* Quick Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Platform</p>
              <p className="text-lg font-semibold text-white">{scoringConfig.gameName}</p>
            </div>
            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Championships</p>
              <p className="text-lg font-semibold text-white">{scoringConfig.championships.length}</p>
            </div>
            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Sessions Scored</p>
              <p className="text-lg font-semibold text-white capitalize">
                {primaryChampionship?.sessionTypes.join(', ') || 'Main'}
              </p>
            </div>
            <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Drop Policy</p>
              <p className="text-lg font-semibold text-white truncate" title={scoringConfig.dropPolicySummary}>
                {scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'}
              </p>
            </div>
          </div>

          {/* Points Table */}
          <Card>
            <h2 className="text-lg font-semibold text-white mb-4">Points Distribution</h2>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-charcoal-outline">
                    <th className="text-left py-3 px-4 font-medium text-gray-400">Position</th>
                    <th className="text-right py-3 px-4 font-medium text-gray-400">Points</th>
                  </tr>
                </thead>
                <tbody>
                  {positionPoints.map(({ position, points }) => (
                    <tr 
                      key={position} 
                      className={`border-b border-charcoal-outline/50 transition-colors hover:bg-iron-gray/30 ${
                        position <= 3 ? 'bg-iron-gray/20' : ''
                      }`}
                    >
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-3">
                          <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${
                            position === 1 ? 'bg-yellow-500 text-black' :
                            position === 2 ? 'bg-gray-400 text-black' :
                            position === 3 ? 'bg-amber-600 text-white' :
                            'bg-charcoal-outline text-white'
                          }`}>
                            {position}
                          </div>
                          <span className="text-white font-medium">
                            {position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
                          </span>
                        </div>
                      </td>
                      <td className="py-3 px-4 text-right">
                        <span className="text-white font-semibold tabular-nums">{points}</span>
                        <span className="text-gray-500 ml-1">pts</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>

          {/* Bonus Points */}
          {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (
            <Card>
              <h2 className="text-lg font-semibold text-white mb-4">Bonus Points</h2>
              <div className="space-y-2">
                {primaryChampionship.bonusSummary.map((bonus, idx) => (
                  <div
                    key={idx}
                    className="flex items-center gap-4 p-3 bg-deep-graphite rounded-lg border border-charcoal-outline"
                  >
                    <div className="w-8 h-8 rounded-full bg-performance-green/10 border border-performance-green/20 flex items-center justify-center shrink-0">
                      <span className="text-performance-green text-sm font-bold">+</span>
                    </div>
                    <p className="text-sm text-gray-300">{bonus}</p>
                  </div>
                ))}
              </div>
            </Card>
          )}

          {/* Drop Policy */}
          {!scoringConfig.dropPolicySummary.includes('All results count') && (
            <Card>
              <h2 className="text-lg font-semibold text-white mb-4">Drop Policy</h2>
              <p className="text-sm text-gray-300">{scoringConfig.dropPolicySummary}</p>
              <p className="text-xs text-gray-500 mt-3">
                Drop rules are applied automatically when calculating championship standings.
              </p>
            </Card>
          )}
        </div>
      )}

      {activeSection === 'conduct' && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Driver Conduct</h2>
          <div className="space-y-4 text-sm text-gray-300">
            <div>
              <h3 className="font-medium text-white mb-2">1. Respect</h3>
              <p>All drivers must treat each other with respect. Abusive language, harassment, or unsportsmanlike behavior will not be tolerated.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">2. Clean Racing</h3>
              <p>Intentional wrecking, blocking, or dangerous driving is prohibited. Leave space for other drivers and race cleanly.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">3. Track Limits</h3>
              <p>Drivers must stay within track limits. Gaining a lasting advantage by exceeding track limits may result in penalties.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">4. Blue Flags</h3>
              <p>Lapped cars must yield to faster traffic within a reasonable time. Failure to do so may result in penalties.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">5. Communication</h3>
              <p>Drivers are expected to communicate respectfully in voice and text chat during sessions.</p>
            </div>
          </div>
        </Card>
      )}

      {activeSection === 'protests' && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Protest Process</h2>
          <div className="space-y-4 text-sm text-gray-300">
            <div>
              <h3 className="font-medium text-white mb-2">Filing a Protest</h3>
              <p>Protests can be filed within 48 hours of the race conclusion. Include the lap number, drivers involved, and a clear description of the incident.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">Evidence</h3>
              <p>Video evidence is highly recommended but not required. Stewards will review available replay data.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">Review Process</h3>
              <p>League stewards will review protests and make decisions within 72 hours. Decisions are final unless new evidence is presented.</p>
            </div>
            <div>
              <h3 className="font-medium text-white mb-2">Outcomes</h3>
              <p>Protests may result in no action, warnings, time penalties, position penalties, or points deductions depending on severity.</p>
            </div>
          </div>
        </Card>
      )}

      {activeSection === 'penalties' && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Penalty Guidelines</h2>
          <div className="space-y-4 text-sm text-gray-300">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-charcoal-outline">
                    <th className="text-left py-2 font-medium text-gray-400">Infraction</th>
                    <th className="text-left py-2 font-medium text-gray-400">Typical Penalty</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-charcoal-outline/50">
                  <tr>
                    <td className="py-3">Causing avoidable contact</td>
                    <td className="py-3 text-warning-amber">5-10 second time penalty</td>
                  </tr>
                  <tr>
                    <td className="py-3">Unsafe rejoin</td>
                    <td className="py-3 text-warning-amber">5 second time penalty</td>
                  </tr>
                  <tr>
                    <td className="py-3">Blocking</td>
                    <td className="py-3 text-warning-amber">Warning or 3 second penalty</td>
                  </tr>
                  <tr>
                    <td className="py-3">Repeated track limit violations</td>
                    <td className="py-3 text-warning-amber">5 second penalty</td>
                  </tr>
                  <tr>
                    <td className="py-3">Intentional wrecking</td>
                    <td className="py-3 text-red-400">Disqualification</td>
                  </tr>
                  <tr>
                    <td className="py-3">Unsportsmanlike conduct</td>
                    <td className="py-3 text-red-400">Points deduction or ban</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p className="text-xs text-gray-500 mt-4">
              Penalties are applied at steward discretion based on incident severity and driver history.
            </p>
          </div>
        </Card>
      )}
    </div>
  );
}