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

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

export const MatchForm: React.FC<MatchFormProps> = ({
  match,
  onSubmit,
  onCancel,
  loading = false,
}) => {
  const { t } = useLingui();
  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 t`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 t`At least one team must have 10 cups`;
        }

        if (homeCups === 10 && awayCups === 10) {
          return t`Both teams cannot have 10 cups`;
        }

        return null;
      },
      away_cups: (value, values) => {
        if (value === null || value === undefined) return t`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 t`At least one team must have 10 cups`;
        }

        if (homeCups === 10 && awayCups === 10) {
          return t`Both teams cannot have 10 cups`;
        }

        return null;
      },
      ot_count: (value) =>
        value === null || value === undefined
          ? t`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">
              <Trans>{match.home?.name} Cups</Trans>
            </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">
              <Trans>{match.away?.name} Cups</Trans>
            </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">
            <Trans>OT Count</Trans>
          </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" loading={loading}>
            <Trans>Update Match</Trans>
          </Button>
          <Button
            variant="subtle"
            color="red"
            onClick={onCancel}
            disabled={loading}
          >
            <Trans>Cancel</Trans>
          </Button>
        </Stack>
      </Stack>
    </form>
  );
};