'use client';

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

interface LeagueSponsorshipsTemplateProps {
  viewData: LeagueSponsorshipsViewData;
}

export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
  const activeTab = viewData.activeTab;

  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}>
          <Box
            as="button"
            onClick={() => viewData.onTabChange('overview')}
            px={4}
            py={2}
            rounded="lg"
            size="sm"
            weight="medium"
            bg={activeTab === 'overview' ? 'bg-primary-blue' : 'bg-iron-gray'}
            color={activeTab === 'overview' ? 'text-white' : 'text-gray-400'}
            cursor="pointer"
            borderStyle="none"
          >
            Overview
          </Box>
          <Box
            as="button"
            onClick={() => viewData.onTabChange('editor')}
            px={4}
            py={2}
            rounded="lg"
            size="sm"
            weight="medium"
            bg={activeTab === 'editor' ? 'bg-primary-blue' : 'bg-iron-gray'}
            color={activeTab === 'editor' ? 'text-white' : 'text-gray-400'}
            cursor="pointer"
            borderStyle="none"
          >
            Livery Editor
          </Box>
        </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} bg="bg-blue-500/10">
                  <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} bg="bg-amber-500/10">
                  <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,
                          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} bg="bg-purple-500/10">
                <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>
  );
}