gridpilot.gg/apps/website/templates/LeagueSponsorshipsTemplate.tsx

'use client';

import React, { useState } 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, Palette } from 'lucide-react';
import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
import { LeagueDecalPlacementEditor } from '@/components/leagues/LeagueDecalPlacementEditor';

interface LeagueSponsorshipsTemplateProps {
  viewData: LeagueSponsorshipsViewData;
}

export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
  const [activeTab, setActiveTab] = useState<'overview' | 'editor'>('overview');

  return (
    <Stack gap={6}>
      <Stack direction="row" align="center" justify="between">
        <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 direction="row" gap={2}>
          <button
            onClick={() => setActiveTab('overview')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeTab === 'overview'
                ? 'bg-primary-blue text-white'
                : 'bg-iron-gray text-gray-400 hover:text-white'
            }`}
          >
            Overview
          </button>
          <button
            onClick={() => setActiveTab('editor')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeTab === 'editor'
                ? 'bg-primary-blue text-white'
                : 'bg-iron-gray text-gray-400 hover:text-white'
            }`}
          >
            Livery Editor
          </button>
        </Stack>
      </Stack>

      {activeTab === 'overview' ? (
        <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>
        </Stack>
      ) : (
        <Card>
          <Stack gap={6}>
            <Stack direction="row" align="center" gap={3}>
              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(168, 85, 247, 0.1)' }}>
                <Icon icon={Palette} size={5} color="#a855f7" />
              </Surface>
              <Box>
                <Heading level={3}>League Livery Editor</Heading>
                <Text size="sm" color="text-gray-400">Configure where sponsor decals appear on league cars</Text>
              </Box>
            </Stack>

            <LeagueDecalPlacementEditor 
              leagueId={viewData.leagueId}
              seasonId="current"
              carId="gt3-r"
              carName="Porsche 911 GT3 R (992)"
              onSave={(placements) => {
                console.log('Placements saved:', placements);
              }}
            />
          </Stack>
        </Card>
      )}
    </Stack>
  );
}