'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Building, Clock } from 'lucide-react';
import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';

interface LeagueSponsorshipsTemplateProps {
  viewData: LeagueSponsorshipsViewData;
}

export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
  return (
    <Stack gap={6}>
      <Box>
        <Heading level={2}>Sponsorships</Heading>
        <Text size="sm" color="text-gray-400" block mt={1}>
          Manage sponsorship slots and review requests
        </Text>
      </Box>

      <Stack gap={6}>
        {/* Sponsorship Slots */}
        <Card>
          <Stack gap={4}>
            <Stack direction="row" align="center" gap={3}>
              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
                <Icon icon={Building} size={5} color="#3b82f6" />
              </Surface>
              <Box>
                <Heading level={3}>Sponsorship Slots</Heading>
                <Text size="sm" color="text-gray-400">Available sponsorship opportunities</Text>
              </Box>
            </Stack>

            {viewData.sponsorshipSlots.length === 0 ? (
              <Stack align="center" py={8} gap={4}>
                <Icon icon={Building} size={12} color="#525252" />
                <Text color="text-gray-400">No sponsorship slots available</Text>
              </Stack>
            ) : (
              <Grid cols={3} gap={4}>
                {viewData.sponsorshipSlots.map((slot) => (
                  <SponsorshipSlotCard key={slot.id} slot={slot} />
                ))}
              </Grid>
            )}
          </Stack>
        </Card>

        {/* Sponsorship Requests */}
        <Card>
          <Stack gap={4}>
            <Stack direction="row" align="center" gap={3}>
              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
                <Icon icon={Clock} size={5} color="#f59e0b" />
              </Surface>
              <Box>
                <Heading level={3}>Sponsorship Requests</Heading>
                <Text size="sm" color="text-gray-400">Pending and processed sponsorship applications</Text>
              </Box>
            </Stack>

            {viewData.sponsorshipRequests.length === 0 ? (
              <Stack align="center" py={8} gap={4}>
                <Icon icon={Clock} size={12} color="#525252" />
                <Text color="text-gray-400">No sponsorship requests</Text>
              </Stack>
            ) : (
              <Stack gap={3}>
                {viewData.sponsorshipRequests.map((request) => {
                  const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
                  return (
                    <SponsorshipRequestCard 
                      key={request.id} 
                      request={{
                        ...request,
                        status: request.status as any,
                        slotName: slot?.name || 'Unknown slot'
                      }} 
                    />
                  );
                })}
              </Stack>
            )}
          </Stack>
        </Card>

        {/* Note about management */}
        <Card>
          <Stack align="center" py={8} gap={4}>
            <Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
              <Icon icon={Building} size={8} color="#3b82f6" />
            </Surface>
            <Box style={{ textAlign: 'center' }}>
              <Heading level={3}>Sponsorship Management</Heading>
              <Text size="sm" color="text-gray-400" block mt={2}>
                Interactive management features for approving requests and managing slots will be implemented in future updates.
              </Text>
            </Box>
          </Stack>
        </Card>
      </Stack>
    </Stack>
  );
}