import { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Building, DollarSign, Clock, CheckCircle, XCircle, AlertCircle } from 'lucide-react';

interface LeagueSponsorshipsTemplateProps {
  viewData: LeagueSponsorshipsViewData;
}

export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
  return (
    <Section>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-xl font-semibold text-white">Sponsorships</h2>
          <p className="text-sm text-gray-400 mt-1">
            Manage sponsorship slots and review requests
          </p>
        </div>
      </div>

      <div className="space-y-6">
        {/* Sponsorship Slots */}
        <Card>
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
              <Building className="w-5 h-5 text-primary-blue" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white">Sponsorship Slots</h3>
              <p className="text-sm text-gray-400">Available sponsorship opportunities</p>
            </div>
          </div>

          {viewData.sponsorshipSlots.length === 0 ? (
            <div className="text-center py-8">
              <Building className="w-12 h-12 mx-auto mb-4 text-gray-400" />
              <p className="text-gray-400">No sponsorship slots available</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {viewData.sponsorshipSlots.map((slot) => (
                <div
                  key={slot.id}
                  className={`rounded-lg border p-4 ${
                    slot.isAvailable
                      ? 'border-performance-green bg-performance-green/5'
                      : 'border-charcoal-outline bg-iron-gray/30'
                  }`}
                >
                  <div className="flex items-start justify-between mb-3">
                    <h4 className="font-semibold text-white">{slot.name}</h4>
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                      slot.isAvailable
                        ? 'bg-performance-green/20 text-performance-green'
                        : 'bg-gray-500/20 text-gray-400'
                    }`}>
                      {slot.isAvailable ? 'Available' : 'Taken'}
                    </span>
                  </div>

                  <p className="text-sm text-gray-300 mb-3">{slot.description}</p>

                  <div className="flex items-center gap-2 mb-3">
                    <DollarSign className="w-4 h-4 text-gray-400" />
                    <span className="text-white font-semibold">
                      {slot.price} {slot.currency}
                    </span>
                  </div>

                  {!slot.isAvailable && slot.sponsoredBy && (
                    <div className="pt-3 border-t border-charcoal-outline">
                      <p className="text-xs text-gray-400 mb-1">Sponsored by</p>
                      <p className="text-sm font-medium text-white">{slot.sponsoredBy.name}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </Card>

        {/* Sponsorship Requests */}
        <Card>
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
              <Clock className="w-5 h-5 text-warning-amber" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white">Sponsorship Requests</h3>
              <p className="text-sm text-gray-400">Pending and processed sponsorship applications</p>
            </div>
          </div>

          {viewData.sponsorshipRequests.length === 0 ? (
            <div className="text-center py-8">
              <Clock className="w-12 h-12 mx-auto mb-4 text-gray-400" />
              <p className="text-gray-400">No sponsorship requests</p>
            </div>
          ) : (
            <div className="space-y-3">
              {viewData.sponsorshipRequests.map((request) => {
                const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
                const statusIcon = {
                  pending: <AlertCircle className="w-5 h-5 text-warning-amber" />,
                  approved: <CheckCircle className="w-5 h-5 text-performance-green" />,
                  rejected: <XCircle className="w-5 h-5 text-red-400" />,
                }[request.status];

                const statusColor = {
                  pending: 'border-warning-amber bg-warning-amber/5',
                  approved: 'border-performance-green bg-performance-green/5',
                  rejected: 'border-red-400 bg-red-400/5',
                }[request.status];

                return (
                  <div
                    key={request.id}
                    className={`rounded-lg border p-4 ${statusColor}`}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-3 mb-2">
                          {statusIcon}
                          <span className="font-semibold text-white">{request.sponsorName}</span>
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                            request.status === 'pending'
                              ? 'bg-warning-amber/20 text-warning-amber'
                              : request.status === 'approved'
                              ? 'bg-performance-green/20 text-performance-green'
                              : 'bg-red-400/20 text-red-400'
                          }`}>
                            {request.status}
                          </span>
                        </div>

                        <div className="text-sm text-gray-300 mb-2">
                          Requested: {slot?.name || 'Unknown slot'}
                        </div>

                        <div className="text-xs text-gray-400">
                          {new Date(request.requestedAt).toLocaleDateString()}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </Card>

        {/* Note about management */}
        <Card>
          <div className="text-center py-8">
            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
              <Building className="w-8 h-8 text-primary-blue" />
            </div>
            <h3 className="text-lg font-medium text-white mb-2">Sponsorship Management</h3>
            <p className="text-sm text-gray-400">
              Interactive management features for approving requests and managing slots will be implemented in future updates.
            </p>
          </div>
        </Card>
      </div>
    </Section>
  );
}