import { Button, TextInput, Stack, Group, Text, Flex, Divider, NumberInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { Match } from "@/features/matches/types";

interface MatchFormProps {
  match: Match;
  onSubmit: (data: {
    home_cups: number;
    away_cups: number;
    ot_count: number;
  }) => void;
  onCancel: () => void;
}

export const MatchForm: React.FC<MatchFormProps> = ({
  match,
  onSubmit,
  onCancel,
}) => {
  const form = useForm({
    initialValues: {
      home_cups: match.home_cups || 10,
      away_cups: match.away_cups || 10,
      ot_count: match.ot_count || 0,
    },
    validate: {
      home_cups: (value, values) => {
        if (value === null || value === undefined) return "Home cups is required";
        if (values.ot_count > 0) return null;
        
        const homeCups = Number(value);
        const awayCups = Number(values.away_cups);
        
        if (homeCups !== 10 && awayCups !== 10) {
          return "At least one team must have 10 cups";
        }
        
        // Both teams can't have 10 cups
        if (homeCups === 10 && awayCups === 10) {
          return "Both teams cannot have 10 cups";
        }
        
        return null;
      },
      away_cups: (value, values) => {
        if (value === null || value === undefined) return "Away cups is required";
        if (values.ot_count > 0) return null;
        
        const awayCups = Number(value);
        const homeCups = Number(values.home_cups);
        
        if (homeCups !== 10 && awayCups !== 10) {
          return "At least one team must have 10 cups";
        }
        
        if (homeCups === 10 && awayCups === 10) {
          return "Both teams cannot have 10 cups";
        }
        
        return null;
      },
      ot_count: (value) =>
        value === null || value === undefined
          ? "Overtime count is required"
          : null,
    },
    transformValues: (values) => ({
      home_cups: Number(values.home_cups),
      away_cups: Number(values.away_cups),
      ot_count: Number(values.ot_count),
    }),
  });

  const handleSubmit = form.onSubmit(() => {
    const transformedValues = form.getTransformedValues();
    onSubmit(transformedValues);
  });

  return (
    <form onSubmit={handleSubmit}>
      <Stack gap="md">
        <Flex mx='auto' direction='column' gap='md' miw={250}>
          
        <Group gap="xs">
          <Stack gap={0}>
            <Text fw={500} size="sm">
              {match.home?.name} Cups
            </Text>
            {
              match.home?.players?.map(p => (<Text key={p.id} size='xs' c='dimmed'>
                {p.first_name} {p.last_name}
              </Text>))
            }
          </Stack>
          <NumberInput
            ml='auto'
            min={0}
            w={70}
            ta="center"
            key={form.key("home_cups")}
            {...form.getInputProps("home_cups")}
          />
        </Group>

        <Divider />

        <Group gap="xs">
          <Stack gap={0}>
            <Text fw={500} size="sm">
              {match.away?.name} Cups
            </Text>
            {
              match.away?.players?.map(p => (<Text key={p.id} size='xs' c='dimmed'>
                {p.first_name} {p.last_name}
              </Text>))
            }
          </Stack>
          <NumberInput
            ml='auto'
            ta="center"
            w={70}
            min={0}
            key={form.key("away_cups")}
            {...form.getInputProps("away_cups")}
          />
        </Group>

        <Divider />

        <Group gap="xs">
          <Text fw={500} size="sm">
            OT Count
          </Text>
          <TextInput
            ml='auto'
            ta="center"
            w={50}
            type="number"
            min={0}
            key={form.key("ot_count")}
            {...form.getInputProps("ot_count")}
          />
        </Group>

        </Flex>

        <Stack mt="md">
          <Button type="submit">Update Match</Button>
          <Button variant="subtle" color="red" onClick={onCancel}>
            Cancel
          </Button>
        </Stack>
      </Stack>
    </form>
  );
};