import React, { useState } from 'react';
import {
  Button,
  Box,
  Dialog,
  DialogBackdrop,
  DialogPositioner,
  DialogContent,
  DialogHeader,
  DialogBody,
  DialogFooter,
  Field,
  Input,
  Stack,
  Portal,
  Select,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { FiCheck } from 'react-icons/fi';
import { createListCollection } from '@chakra-ui/react';

const MotionBox = motion(Box);

const vendors = ['huawei', 'cisco', 'h3c', 'ruijie', 'zte'];

const DeviceConfigModal = ({ isOpen, onClose, onSave, device }) => {
  const [username, setUsername] = useState(device.username || '');
  const [password, setPassword] = useState(device.password || '');
  const [vendor, setVendor] = useState(device.vendor || '');
  const [saved, setSaved] = useState(false);

  const vendorCollection = createListCollection({
    items: vendors.map((v) => ({ label: v.toUpperCase(), value: v })),
  });

  const handleSave = () => {
    const updatedDevice = { ...device, username, password, vendor };
    onSave(updatedDevice);
    setSaved(true);
    setTimeout(() => {
      setSaved(false);
      onClose();
    }, 1200);
  };

  return (
    <Dialog.Root open={isOpen} onClose={onClose}>
      <DialogBackdrop />
      <DialogPositioner>
        <MotionBox
          as={DialogContent}
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ duration: 0.3 }}
          bg={'whiteAlpha.100'}
          backdropFilter={'blur(12px)'}
          border={'1px solid'}
          borderColor={'whiteAlpha.300'}
        >
          <DialogHeader>交换机设备配置</DialogHeader>

          <DialogBody>
            <Stack gap={4}>
              <Field.Root>
                <Field.Label>交换机用户名</Field.Label>
                <Input
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  placeholder={'请输入设备用户名'}
                  bg={'whiteAlpha.200'}
                />
              </Field.Root>

              <Field.Root>
                <Field.Label>交换机密码</Field.Label>
                <Input
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder={'请输入设备密码'}
                  bg={'whiteAlpha.200'}
                  type={'password'}
                />
              </Field.Root>

              <Field.Root>
                <Field.Label>交换机厂商</Field.Label>
                <Select.Root
                  collection={vendorCollection}
                  value={vendor ? [vendor] : []}
                  onValueChange={({ value }) => setVendor(value[0] || '')}
                  placeholder={'请选择厂商'}
                  size={'sm'}
                  colorPalette={'teal'}
                >
                  <Select.HiddenSelect />
                  <Select.Control>
                    <Select.Trigger>
                      <Select.ValueText />
                    </Select.Trigger>
                    <Select.IndicatorGroup>
                      <Select.Indicator />
                      <Select.ClearTrigger />
                    </Select.IndicatorGroup>
                  </Select.Control>
                  <Portal>
                    <Select.Positioner style={{ zIndex: 1500 }}>
                      <Select.Content>
                        {vendorCollection.items.map((item) => (
                          <Select.Item key={item.value} item={item}>
                            {item.label}
                          </Select.Item>
                        ))}
                      </Select.Content>
                    </Select.Positioner>
                  </Portal>
                </Select.Root>
              </Field.Root>
            </Stack>
          </DialogBody>

          <DialogFooter justifyContent={'space-between'}>
            <Button
              variant={'outline'}
              borderColor={'whiteAlpha.500'}
              color={'white'}
              onClick={onClose}
              _hover={{ bg: 'rgba(0, 0, 255, 0.3)' }}
            >
              取消
            </Button>

            <Button
              variant={'outline'}
              borderColor={'whiteAlpha.500'}
              color={'white'}
              onClick={handleSave}
              isDisabled={saved}
              width={'80px'}
              position={'relative'}
              _hover={{ bg: 'rgba(0, 0, 255, 0.3)' }}
            >
              {saved ? (
                <motion.div
                  key={'saved'}
                  initial={{ opacity: 0, scale: 0.5 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.5 }}
                  transition={{ duration: 0.3 }}
                >
                  <FiCheck size={20} color={'lightgreen'} />
                </motion.div>
              ) : (
                <motion.div
                  key={'save'}
                  initial={{ opacity: 0, scale: 0.5 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.5 }}
                  transition={{ duration: 0.3 }}
                >
                  保存
                </motion.div>
              )}
            </Button>
          </DialogFooter>
        </MotionBox>
      </DialogPositioner>
    </Dialog.Root>
  );
};

export default DeviceConfigModal;
