import React from 'react';
import {
  Box,
  Card,
  CardBody,
  Stack,
  Heading,
  FormControl,
  FormLabel,
  Input,
  Button,
  Divider,
  Select,
  Switch,
  FormHelperText,
  useToast,
} from '@chakra-ui/react';

const Settings = () => {
  const toast = useToast();
  const [isLoading, setIsLoading] = React.useState(false);

  const handleSaveSettings = async (e) => {
    e.preventDefault();
    setIsLoading(true);

    // Simulate saving
    setTimeout(() => {
      setIsLoading(false);
      toast({
        title: 'Settings saved',
        status: 'success',
        duration: 3000,
      });
    }, 1000);
  };

  return (
    <Stack spacing={6}>
      <Card>
        <CardBody>
          <Stack spacing={6}>
            <Heading size="md">API Configuration</Heading>

            <FormControl>
              <FormLabel>Marketplace</FormLabel>
              <Select placeholder="Select marketplace">
                <option value="de">Kaufland.de (Germany)</option>
                <option value="ro">Kaufland.ro (Romania)</option>
              </Select>
            </FormControl>

            <FormControl>
              <FormLabel>Client ID</FormLabel>
              <Input type="text" placeholder="Enter your client ID" />
              <FormHelperText>You can find this in your Kaufland merchant account</FormHelperText>
            </FormControl>

            <FormControl>
              <FormLabel>Client Secret</FormLabel>
              <Input type="password" placeholder="Enter your client secret" />
              <FormHelperText>Keep this secret secure</FormHelperText>
            </FormControl>

            <Button
              colorScheme="blue"
              isLoading={isLoading}
              loadingText="Saving..."
              onClick={handleSaveSettings}
            >
              Save API Settings
            </Button>
          </Stack>
        </CardBody>
      </Card>

      <Card>
        <CardBody>
          <Stack spacing={6}>
            <Heading size="md">Sync Settings</Heading>

            <FormControl display="flex" alignItems="center">
              <FormLabel mb="0">Enable Auto-Sync</FormLabel>
              <Switch />
            </FormControl>

            <FormControl>
              <FormLabel>Sync Interval</FormLabel>
              <Select defaultValue="hourly">
                <option value="hourly">Every hour</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
              </Select>
            </FormControl>

            <Divider />

            <FormControl display="flex" alignItems="center">
              <FormLabel mb="0">Debug Mode</FormLabel>
              <Switch />
            </FormControl>
          </Stack>
        </CardBody>
      </Card>
    </Stack>
  );
};

export default Settings;