'use client';

import Breadcrumbs from '@/components/layout/Breadcrumbs';
import PendingSponsorshipRequests from '@/components/sponsors/PendingSponsorshipRequests';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';

import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import { useServices } from '@/lib/services/ServiceProvider';
import { SponsorshipRequestViewModel } from '@/lib/view-models/SponsorshipRequestViewModel';
import { AlertTriangle, Building, ChevronRight, Handshake, Trophy, User, Users } from 'lucide-react';
import Link from 'next/link';

interface EntitySection {
  entityType: 'driver' | 'team' | 'race' | 'season';
  entityId: string;
  entityName: string;
  requests: SponsorshipRequestViewModel[];
}

export default function SponsorshipRequestsPage() {
  const router = useRouter();
  const currentDriverId = useEffectiveDriverId();
  
  const [sections, setSections] = useState<EntitySection[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const loadAllRequests = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const { sponsorshipService, driverService, leagueService, teamService, leagueMembershipService } = useServices();

      const allSections: EntitySection[] = [];

      // 1. Driver's own sponsorship requests
      const driverRequests = await sponsorshipService.getPendingSponsorshipRequests({
        entityType: 'driver',
        entityId: currentDriverId,
      });

      if (driverRequests.length > 0) {
        const driverProfile = await driverService.getDriverProfile(currentDriverId);
        allSections.push({
          entityType: 'driver',
          entityId: currentDriverId,
          entityName: driverProfile?.currentDriver?.name ?? 'Your Profile',
          requests: driverRequests,
        });
      }

      // 2. Leagues where the user is admin/owner
      const allLeagues = await leagueService.getAllLeagues();
      for (const league of allLeagues) {
        const membership = await leagueMembershipService.getMembership(league.id, currentDriverId);
        if (membership && LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role)) {
          // Load sponsorship requests for this league's active season
          try {
            // For simplicity, we'll query by season entityType - in production you'd get the active season ID
            const leagueRequests = await sponsorshipService.getPendingSponsorshipRequests({
              entityType: 'season',
              entityId: league.id, // Using league ID as a proxy for now
            });

            if (leagueRequests.length > 0) {
              allSections.push({
                entityType: 'season',
                entityId: league.id,
                entityName: league.name,
                requests: leagueRequests,
              });
            }
          } catch (err) {
            // Silently skip if no requests found
          }
        }
      }

      // 3. Teams where the user is owner/manager
      const allTeams = await teamService.getAllTeams();
      for (const team of allTeams) {
        const membership = await teamService.getMembership(team.id, currentDriverId);
        if (membership && (membership.role === 'owner' || membership.role === 'manager')) {
          const teamRequests = await sponsorshipService.getPendingSponsorshipRequests({
            entityType: 'team',
            entityId: team.id,
          });

          if (teamRequests.length > 0) {
            allSections.push({
              entityType: 'team',
              entityId: team.id,
              entityName: team.name,
              requests: teamRequests,
            });
          }
        }
      }

      setSections(allSections);
    } catch (err) {
      console.error('Failed to load sponsorship requests:', err);
      setError(err instanceof Error ? err.message : 'Failed to load requests');
    } finally {
      setLoading(false);
    }
  }, [currentDriverId]);

  useEffect(() => {
    loadAllRequests();
  }, [loadAllRequests]);

  const handleAccept = async (requestId: string) => {
    const { sponsorshipService } = useServices();
    await sponsorshipService.acceptSponsorshipRequest(requestId, currentDriverId);
    await loadAllRequests();
  };

  const handleReject = async (requestId: string, reason?: string) => {
    const { sponsorshipService } = useServices();
    await sponsorshipService.rejectSponsorshipRequest(requestId, currentDriverId, reason);
    await loadAllRequests();
  };

  const getEntityIcon = (type: 'driver' | 'team' | 'race' | 'season') => {
    switch (type) {
      case 'driver':
        return User;
      case 'team':
        return Users;
      case 'race':
        return Trophy;
      case 'season':
        return Trophy;
      default:
        return Building;
    }
  };

  const getEntityLink = (type: 'driver' | 'team' | 'race' | 'season', id: string) => {
    switch (type) {
      case 'driver':
        return `/drivers/${id}`;
      case 'team':
        return `/teams/${id}`;
      case 'race':
        return `/races/${id}`;
      case 'season':
        return `/leagues/${id}/sponsorships`;
      default:
        return '#';
    }
  };

  const totalRequests = sections.reduce((sum, s) => sum + s.requests.length, 0);

  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <Breadcrumbs
        items={[
          { label: 'Profile', href: '/profile' },
          { label: 'Sponsorship Requests' },
        ]}
      />

      {/* Header */}
      <div className="flex items-center gap-4 mt-6 mb-8">
        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-performance-green/10 border border-performance-green/30">
          <Handshake className="w-7 h-7 text-performance-green" />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-white">Sponsorship Requests</h1>
          <p className="text-sm text-gray-400">
            Manage sponsorship requests for your profile, teams, and leagues
          </p>
        </div>
        {totalRequests > 0 && (
          <div className="ml-auto px-3 py-1 rounded-full bg-performance-green/20 text-performance-green text-sm font-semibold">
            {totalRequests} pending
          </div>
        )}
      </div>

      {loading ? (
        <Card>
          <div className="text-center py-12 text-gray-400">
            <div className="animate-pulse">Loading sponsorship requests...</div>
          </div>
        </Card>
      ) : error ? (
        <Card>
          <div className="text-center py-12">
            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
              <AlertTriangle className="w-8 h-8 text-red-400" />
            </div>
            <h3 className="text-lg font-medium text-white mb-2">Error Loading Requests</h3>
            <p className="text-sm text-gray-400">{error}</p>
            <Button variant="secondary" onClick={loadAllRequests} className="mt-4">
              Try Again
            </Button>
          </div>
        </Card>
      ) : sections.length === 0 ? (
        <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">
              <Handshake className="w-8 h-8 text-gray-500" />
            </div>
            <h3 className="text-lg font-medium text-white mb-2">No Pending Requests</h3>
            <p className="text-sm text-gray-400">
              You don't have any pending sponsorship requests at the moment.
            </p>
            <p className="text-xs text-gray-500 mt-2">
              Sponsors can apply to sponsor your profile, teams, or leagues you manage.
            </p>
          </div>
        </Card>
      ) : (
        <div className="space-y-6">
          {sections.map((section) => {
            const Icon = getEntityIcon(section.entityType);
            const entityLink = getEntityLink(section.entityType, section.entityId);
            
            return (
              <Card key={`${section.entityType}-${section.entityId}`}>
                {/* Section Header */}
                <div className="flex items-center justify-between mb-6 pb-4 border-b border-charcoal-outline">
                  <div className="flex items-center gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-iron-gray/50">
                      <Icon className="w-5 h-5 text-gray-400" />
                    </div>
                    <div>
                      <h2 className="text-lg font-semibold text-white">{section.entityName}</h2>
                      <p className="text-xs text-gray-500 capitalize">{section.entityType}</p>
                    </div>
                  </div>
                  <Link
                    href={entityLink}
                    className="flex items-center gap-1 text-sm text-primary-blue hover:text-primary-blue/80 transition-colors"
                  >
                    View {section.entityType === 'season' ? 'Sponsorships' : section.entityType}
                    <ChevronRight className="w-4 h-4" />
                  </Link>
                </div>

                {/* Requests */}
                <PendingSponsorshipRequests
                  entityType={section.entityType}
                  entityId={section.entityId}
                  entityName={section.entityName}
                  requests={section.requests}
                  onAccept={handleAccept}
                  onReject={handleReject}
                />
              </Card>
            );
          })}
        </div>
      )}

      {/* Info Card */}
      <Card className="mt-8 bg-gradient-to-r from-primary-blue/5 to-transparent border-primary-blue/20">
        <div className="flex items-start gap-4">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/20 flex-shrink-0">
            <Building className="w-5 h-5 text-primary-blue" />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-white mb-1">How Sponsorships Work</h3>
            <p className="text-xs text-gray-400 leading-relaxed">
              Sponsors can apply to sponsor your driver profile, teams you manage, or leagues you administer.
              Review each request carefully - accepting will activate the sponsorship and the sponsor will be
              charged. You'll receive the payment minus a 10% platform fee.
            </p>
          </div>
        </div>
      </Card>
    </div>
  );
}