import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Container from '@/components/ui/Container';
import Heading from '@/components/ui/Heading';

export interface SponsorshipRequestsTemplateProps {
  viewData: SponsorshipRequestsViewData;
  onAccept: (requestId: string) => Promise<void>;
  onReject: (requestId: string, reason?: string) => Promise<void>;
}

export function SponsorshipRequestsTemplate({
  viewData,
  onAccept,
  onReject,
}: SponsorshipRequestsTemplateProps) {
  return (
    <Container size="md" className="space-y-8">
      <div>
        <Heading level={1} className="text-white mb-2">
          Sponsorship Requests
        </Heading>
        <p className="text-gray-400 text-sm">
          Manage pending sponsorship requests for your profile.
        </p>
      </div>

      {viewData.sections.map((section) => (
        <Card key={`${section.entityType}-${section.entityId}`}>
          <div className="flex items-center justify-between mb-4">
            <Heading level={2} className="text-white">
              {section.entityName}
            </Heading>
            <span className="text-xs text-gray-400">
              {section.requests.length} {section.requests.length === 1 ? 'request' : 'requests'}
            </span>
          </div>

          {section.requests.length === 0 ? (
            <p className="text-sm text-gray-400">No pending requests.</p>
          ) : (
            <div className="space-y-3">
              {section.requests.map((request) => (
                <div
                  key={request.id}
                  className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
                >
                  <div className="flex-1">
                    <p className="text-white font-medium">{request.sponsorName}</p>
                    {request.message && (
                      <p className="text-xs text-gray-400 mt-1">{request.message}</p>
                    )}
                    <p className="text-xs text-gray-500 mt-1">
                      {new Date(request.createdAtIso).toLocaleDateString()}
                    </p>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="primary"
                      onClick={() => onAccept(request.id)}
                    >
                      Accept
                    </Button>
                    <Button
                      variant="secondary"
                      onClick={() => onReject(request.id)}
                    >
                      Reject
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </Card>
      ))}
    </Container>
  );
}