'use client';

import { LeagueSponsorshipsSection } from '@/components/leagues/LeagueSponsorshipsSection';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import { useServices } from '@/lib/services/ServiceProvider';
import { LeagueDetailViewModel } from '@/lib/view-models/LeagueDetailViewModel';
import { AlertTriangle, Building } from 'lucide-react';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function LeagueSponsorshipsPage() {
  const params = useParams();
  const leagueId = params.id as string;
  const currentDriverId = useEffectiveDriverId();
  const { leagueService, leagueMembershipService } = useServices();

  const [league, setLeague] = useState<LeagueDetailViewModel | null>(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadData() {
      try {
        const [leagueDetail, memberships] = await Promise.all([
          leagueService.getLeagueDetail(leagueId, currentDriverId),
          leagueMembershipService.fetchLeagueMemberships(leagueId),
        ]);

        const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);

        setLeague(leagueDetail);
        setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
      } catch (err) {
        console.error('Failed to load league:', err);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [leagueId, currentDriverId, leagueService, leagueMembershipService]);

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

  if (!isAdmin) {
    return (
      <Card>
        <div className="text-center py-12">
          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
            <AlertTriangle className="w-8 h-8 text-warning-amber" />
          </div>
          <h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
          <p className="text-sm text-gray-400">
            Only league admins can manage sponsorships.
          </p>
        </div>
      </Card>
    );
  }

  if (!league) {
    return (
      <Card>
        <div className="py-6 text-sm text-gray-500 text-center">
          League not found.
        </div>
      </Card>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
          <Building className="w-6 h-6 text-primary-blue" />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-white">Sponsorships</h1>
          <p className="text-sm text-gray-400">Manage sponsorship slots and review requests</p>
        </div>
      </div>

      {/* Sponsorships Section */}
      <Card>
        <LeagueSponsorshipsSection
          leagueId={leagueId}
          readOnly={false}
        />
      </Card>
    </div>
  );
}