'use client';

import Breadcrumbs from '@/components/layout/Breadcrumbs';
import PendingSponsorshipRequests from '@/components/sponsors/PendingSponsorshipRequests';
import Card from '@/components/ui/Card';
import { AlertTriangle, Building, ChevronRight, Handshake, Trophy, User, Users } from 'lucide-react';
import Link from 'next/link';

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

export interface SponsorshipRequestsTemplateProps {
  data: EntitySection[];
  onAccept: (requestId: string) => Promise<void>;
  onReject: (requestId: string, reason?: string) => Promise<void>;
}

export function SponsorshipRequestsTemplate({ data, onAccept, onReject }: SponsorshipRequestsTemplateProps) {
  const totalRequests = data.reduce((sum, s) => sum + s.requests.length, 0);

  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 '#';
    }
  };

  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>

      {data.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">
          {data.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={onAccept}
                  onReject={onReject}
                />
              </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>
  );
}