'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';

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" py={8}>
      <Stack gap={8}>
        <Box>
          <Heading level={1}>Sponsorship Requests</Heading>
          <Text size="sm" color="text-gray-400" block mt={2}>
            Manage pending sponsorship requests for your profile.
          </Text>
        </Box>

        {viewData.sections.map((section) => (
          <Card key={`${section.entityType}-${section.entityId}`}>
            <Stack gap={4}>
              <Stack direction="row" align="center" justify="between">
                <Heading level={2}>{section.entityName}</Heading>
                <Text size="xs" color="text-gray-400">
                  {section.requests.length} {section.requests.length === 1 ? 'request' : 'requests'}
                </Text>
              </Stack>

              {section.requests.length === 0 ? (
                <Text size="sm" color="text-gray-400">No pending requests.</Text>
              ) : (
                <Stack gap={3}>
                  {section.requests.map((request) => (
                    <Surface
                      key={request.id}
                      variant="muted"
                      rounded="lg"
                      border
                      padding={4}
                    >
                      <Stack direction="row" align="center" justify="between" wrap gap={4}>
                        <Box flexGrow={1} minWidth="0">
                          <Text weight="medium" color="text-white" block>{request.sponsorName}</Text>
                          {request.message && (
                            <Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
                          )}
                          <Text size="xs" color="text-gray-500" block mt={2}>
                            {new Date(request.createdAtIso).toLocaleDateString()}
                          </Text>
                        </Box>
                        <Stack direction="row" gap={2}>
                          <Button
                            variant="primary"
                            onClick={() => onAccept(request.id)}
                            size="sm"
                          >
                            Accept
                          </Button>
                          <Button
                            variant="secondary"
                            onClick={() => onReject(request.id)}
                            size="sm"
                          >
                            Reject
                          </Button>
                        </Stack>
                      </Stack>
                    </Surface>
                  ))}
                </Stack>
              )}
            </Stack>
          </Card>
        ))}
      </Stack>
    </Container>
  );
}