'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Button from '../ui/Button';
import Card from '../ui/Card';
import LeagueMembers from './LeagueMembers';
import { League } from '@gridpilot/racing/domain/entities/League';
import {
  getJoinRequests,
  approveJoinRequest,
  rejectJoinRequest,
  removeMember,
  updateMemberRole,
  getCurrentDriverId,
  type JoinRequest,
  type MembershipRole,
} from '@gridpilot/racing/application';
import { getDriverRepository } from '@/lib/di-container';
import { Driver } from '@gridpilot/racing/domain/entities/Driver';

interface LeagueAdminProps {
  league: League;
  onLeagueUpdate?: () => void;
}

export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps) {
  const router = useRouter();
  const currentDriverId = getCurrentDriverId();
  const [joinRequests, setJoinRequests] = useState<JoinRequest[]>([]);
  const [requestDrivers, setRequestDrivers] = useState<Driver[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings'>('members');

  useEffect(() => {
    loadJoinRequests();
  }, [league.id]);

  const loadJoinRequests = async () => {
    setLoading(true);
    try {
      const requests = getJoinRequests(league.id);
      setJoinRequests(requests);

      const driverRepo = getDriverRepository();
      const drivers = await Promise.all(
        requests.map(r => driverRepo.findById(r.driverId))
      );
      setRequestDrivers(drivers.filter((d): d is Driver => d !== null));
    } catch (err) {
      console.error('Failed to load join requests:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleApproveRequest = (requestId: string) => {
    try {
      approveJoinRequest(requestId);
      loadJoinRequests();
      onLeagueUpdate?.();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to approve request');
    }
  };

  const handleRejectRequest = (requestId: string) => {
    try {
      rejectJoinRequest(requestId);
      loadJoinRequests();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to reject request');
    }
  };

  const handleRemoveMember = (driverId: string) => {
    if (!confirm('Are you sure you want to remove this member?')) {
      return;
    }

    try {
      removeMember(league.id, driverId, currentDriverId);
      onLeagueUpdate?.();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to remove member');
    }
  };

  const handleUpdateRole = (driverId: string, newRole: MembershipRole) => {
    try {
      updateMemberRole(league.id, driverId, newRole, currentDriverId);
      onLeagueUpdate?.();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update role');
    }
  };

  const getDriverName = (driverId: string): string => {
    const driver = requestDrivers.find(d => d.id === driverId);
    return driver?.name || 'Unknown Driver';
  };

  return (
    <div>
      {error && (
        <div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400">
          {error}
          <button
            onClick={() => setError(null)}
            className="ml-4 text-sm underline hover:no-underline"
          >
            Dismiss
          </button>
        </div>
      )}

      {/* Admin Tabs */}
      <div className="mb-6 border-b border-charcoal-outline">
        <div className="flex gap-4">
          <button
            onClick={() => setActiveTab('members')}
            className={`pb-3 px-1 font-medium transition-colors ${
              activeTab === 'members'
                ? 'text-primary-blue border-b-2 border-primary-blue'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            Manage Members
          </button>
          <button
            onClick={() => setActiveTab('requests')}
            className={`pb-3 px-1 font-medium transition-colors flex items-center gap-2 ${
              activeTab === 'requests'
                ? 'text-primary-blue border-b-2 border-primary-blue'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            Join Requests
            {joinRequests.length > 0 && (
              <span className="px-2 py-0.5 text-xs bg-primary-blue text-white rounded-full">
                {joinRequests.length}
              </span>
            )}
          </button>
          <button
            onClick={() => setActiveTab('races')}
            className={`pb-3 px-1 font-medium transition-colors ${
              activeTab === 'races'
                ? 'text-primary-blue border-b-2 border-primary-blue'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            Create Race
          </button>
          <button
            onClick={() => setActiveTab('settings')}
            className={`pb-3 px-1 font-medium transition-colors ${
              activeTab === 'settings'
                ? 'text-primary-blue border-b-2 border-primary-blue'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            Settings
          </button>
        </div>
      </div>

      {/* Tab Content */}
      {activeTab === 'members' && (
        <Card>
          <h2 className="text-xl font-semibold text-white mb-4">Manage Members</h2>
          <LeagueMembers
            leagueId={league.id}
            onRemoveMember={handleRemoveMember}
            onUpdateRole={handleUpdateRole}
            showActions={true}
          />
        </Card>
      )}

      {activeTab === 'requests' && (
        <Card>
          <h2 className="text-xl font-semibold text-white mb-4">Join Requests</h2>
          
          {loading ? (
            <div className="text-center py-8 text-gray-400">Loading requests...</div>
          ) : joinRequests.length === 0 ? (
            <div className="text-center py-8 text-gray-400">
              No pending join requests
            </div>
          ) : (
            <div className="space-y-4">
              {joinRequests.map((request) => (
                <div
                  key={request.id}
                  className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex-1">
                      <h3 className="text-white font-medium">
                        {getDriverName(request.driverId)}
                      </h3>
                      <p className="text-sm text-gray-400 mt-1">
                        Requested {new Date(request.requestedAt).toLocaleDateString('en-US', {
                          month: 'short',
                          day: 'numeric',
                          year: 'numeric',
                        })}
                      </p>
                      {request.message && (
                        <p className="text-sm text-gray-400 mt-2 italic">
                          &ldquo;{request.message}&rdquo;
                        </p>
                      )}
                    </div>
                    <div className="flex gap-2">
                      <Button
                        variant="primary"
                        onClick={() => handleApproveRequest(request.id)}
                        className="px-4"
                      >
                        Approve
                      </Button>
                      <Button
                        variant="secondary"
                        onClick={() => handleRejectRequest(request.id)}
                        className="px-4"
                      >
                        Reject
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </Card>
      )}

      {activeTab === 'races' && (
        <Card>
          <h2 className="text-xl font-semibold text-white mb-4">Create New Race</h2>
          <p className="text-gray-400 mb-4">
            Schedule a new race for this league
          </p>
          <Button
            variant="primary"
            onClick={() => router.push(`/races?leagueId=${league.id}`)}
          >
            Go to Race Scheduler
          </Button>
        </Card>
      )}

      {activeTab === 'settings' && (
        <Card>
          <h2 className="text-xl font-semibold text-white mb-4">League Settings</h2>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                League Name
              </label>
              <p className="text-white">{league.name}</p>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                Description
              </label>
              <p className="text-white">{league.description}</p>
            </div>

            <div className="pt-4 border-t border-charcoal-outline">
              <h3 className="text-white font-medium mb-3">Racing Settings</h3>
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-gray-500">Points System</label>
                  <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
                </div>

                <div>
                  <label className="text-sm text-gray-500">Session Duration</label>
                  <p className="text-white">{league.settings.sessionDuration} minutes</p>
                </div>

                <div>
                  <label className="text-sm text-gray-500">Qualifying Format</label>
                  <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
                </div>
              </div>
            </div>

            <div className="pt-4 border-t border-charcoal-outline">
              <p className="text-sm text-gray-400">
                League settings editing will be available in a future update
              </p>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}