'use client';

import React, { useState } from 'react';
import {
  Box,
  VStack,
  Text,
  Input,
  Button,
  FormControl,
  FormLabel,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
} from '@chakra-ui/react';

interface TransferBalanceProps {
  userBalance: number;
  onTransfer: (username: string, amount: number) => Promise<void>;
}

export default function TransferBalance({ userBalance, onTransfer }: TransferBalanceProps) {
  const [username, setUsername] = useState('');
  const [amount, setAmount] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  const handleTransfer = async () => {
    if (!username || amount <= 0 || amount > userBalance) {
      return;
    }

    setIsLoading(true);
    try {
      await onTransfer(username, amount);
      // Очищаем форму после успешного перевода
      setUsername('');
      setAmount(0);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Box w="100%" p={4} borderWidth="1px" borderRadius="lg">
      <VStack spacing={4} align="stretch">
        <Text fontSize="2xl">Перевод монет</Text>
        <Text>Ваш баланс: {userBalance} монет</Text>

        <FormControl>
          <FormLabel>Имя пользователя получателя</FormLabel>
          <Input
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="Введите имя пользователя"
          />
        </FormControl>

        <FormControl>
          <FormLabel>Сумма перевода</FormLabel>
          <NumberInput
            value={amount}
            onChange={(_, value) => setAmount(value)}
            min={1}
            max={userBalance}
          >
            <NumberInputField />
            <NumberInputStepper>
              <NumberIncrementStepper />
              <NumberDecrementStepper />
            </NumberInputStepper>
          </NumberInput>
        </FormControl>

        <Button
          colorScheme="blue"
          onClick={handleTransfer}
          isLoading={isLoading}
          isDisabled={!username || amount <= 0 || amount > userBalance}
        >
          Перевести
        </Button>
      </VStack>
    </Box>
  );
}