'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 { GridItem } from '@/ui/GridItem';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Settings, Users, Trophy, Shield, Clock, LucideIcon } from 'lucide-react';
import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';

interface LeagueSettingsTemplateProps {
  viewData: LeagueSettingsViewData;
}

export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
  return (
    <Stack gap={6}>
      <Box>
        <Heading level={2}>League Settings</Heading>
        <Text size="sm" color="text-gray-400" block mt={1}>
          Manage your league configuration and preferences
        </Text>
      </Box>

      <Stack gap={6}>
        {/* League Information */}
        <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={Settings} size={5} color="#3b82f6" />
              </Surface>
              <Box>
                <Heading level={3}>League Information</Heading>
                <Text size="sm" color="text-gray-400">Basic league details</Text>
              </Box>
            </Stack>

            <Grid cols={2} gap={4}>
              <InfoItem label="Name" value={viewData.league.name} />
              <InfoItem label="Visibility" value={viewData.league.visibility} capitalize />
              <GridItem colSpan={2}>
                <InfoItem label="Description" value={viewData.league.description} />
              </GridItem>
              <InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
              <InfoItem label="Owner ID" value={viewData.league.ownerId} />
            </Grid>
          </Stack>
        </Card>

        {/* Configuration */}
        <Card>
          <Stack gap={4}>
            <Stack direction="row" align="center" gap={3}>
              <Surface variant="muted" rounded="lg" padding={2} bg="bg-green-500/10">
                <Icon icon={Trophy} size={5} color="#10b981" />
              </Surface>
              <Box>
                <Heading level={3}>Configuration</Heading>
                <Text size="sm" color="text-gray-400">League rules and limits</Text>
              </Box>
            </Stack>

            <Grid cols={2} gap={4}>
              <ConfigItem icon={Users} label="Max Drivers" value={viewData.config.maxDrivers} />
              <ConfigItem icon={Shield} label="Require Approval" value={viewData.config.requireApproval ? 'Yes' : 'No'} />
              <ConfigItem icon={Clock} label="Allow Late Join" value={viewData.config.allowLateJoin ? 'Yes' : 'No'} />
              <ConfigItem icon={Trophy} label="Scoring Preset" value={viewData.config.scoringPresetId} />
            </Grid>
          </Stack>
        </Card>

        {/* Note about forms */}
        <Card>
          <Stack align="center" py={8} gap={4}>
            <Surface variant="muted" rounded="full" padding={4} bg="bg-amber-500/10">
              <Icon icon={Settings} size={8} color="#f59e0b" />
            </Surface>
            <Box textAlign="center">
              <Heading level={3}>Settings Management</Heading>
              <Text size="sm" color="text-gray-400" block mt={2}>
                Form-based editing and ownership transfer functionality will be implemented in future updates.
              </Text>
            </Box>
          </Stack>
        </Card>
      </Stack>
    </Stack>
  );
}

function InfoItem({ label, value, capitalize }: { label: string, value: string, capitalize?: boolean }) {
  return (
    <Box>
      <Text size="sm" weight="medium" color="text-gray-400" block mb={1}>{label}</Text>
      <Text color="text-white">{capitalize ? value.toUpperCase() : value}</Text>
    </Box>
  );
}

function ConfigItem({ icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
  return (
    <Stack direction="row" align="center" gap={3}>
      <Icon icon={icon} size={5} color="#9ca3af" />
      <Box>
        <Text size="sm" weight="medium" color="text-gray-400" block>{label}</Text>
        <Text color="text-white">{value}</Text>
      </Box>
    </Stack>
  );
}