import styled from "styled-components";
import Loader from "../../UI/loader";
import { useEffect, useState } from "react";
import { changeIp } from '../../../const/types/types'
import { NetworkService } from '../../../api/request'
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer, ErrorMessage } from "../style"
import { useIpStore } from "../../../store";
import { MainButton } from "../../UI/buttons/mainButton";
import { useAdminStore } from "../../../store/adminStore";
import { useDevicesStore } from "../../../store";

type Props = {
    ipData: changeIp
    onClose: () => void;
    smoothClose: () => void;
}

const Information = styled.div`
    display: flex;
    flex-direction: column;
    gap: 15px;
`

const Info = styled.div`
   display: flex;
    gap: 10px;
`

const DataContainer = styled.div`
    display: flex;
    gap: 35px;
`

const CurrentData = styled.div`
    display: flex;
    flex-direction: column;
    gap: 10px;
`

const NewData = styled.div`
    display: flex;
    flex-direction: column;
    gap: 10px;
`

export const IpConfirm = ({ ipData, onClose, smoothClose }: Props) => {
    const [loader, setLoader] = useState(true)
    const [newIP, setNewIp] = useState(null)
    const [currentIp, setCurrentIP] = useState({})
    const [checkStatus, setcheckStatus] = useState(false)
    const [message, setMessgae] = useState('')
    const { ipAddress, setIpAddress } = useIpStore();
    const {isAdmin} = useAdminStore()
    const { devices, addDevice, deleteDevice } = useDevicesStore();

    useEffect(() => {
        if (ipData && isAdmin) {
            const data = {
                "connection_id": ipData.connection,
                "ipv4_updates": {
                    "ipv4.method": "manual",
                    "ipv4.address-data": [
                        {
                            "address": ipData.newIp,
                            "prefix": ipData.prefix
                        }
                    ],
                    "ipv4.gateway": ipData.newGate,
                    "ipv4.dns-data": ipData.newDns
                }
            };

            const oldData = {
                "connection_id": ipData.connection,
                "ipv4_updates": {
                    "ipv4.method": "manual",
                    "ipv4.address-data": [
                        {
                            "address": ipData.currentIp,
                            "prefix": ipData.prefix
                        }
                    ],
                    "ipv4.gateway": ipData.currentGate,
                    "ipv4.dns-data": ipData.currentDns
                }
            }

            setCurrentIP(oldData)

            checkIp(data);
        }
    }, [ipData, isAdmin]);

    const checkIp = async (data: any) => {
        try {
            const result = await NetworkService.checkIp(ipAddress, data);
            setcheckStatus(result.data.available)
            setMessgae(result.data.message)
            if (result.data.available) {
                setNewIp(data)
            }
        } catch (err) {
            console.error('Error:', err);
        } finally {
            setLoader(false);
        }
    };

    const saveIp = async (data: any) => {
        try {
            const result = await NetworkService.saveIp(ipAddress, data);
            if (result.status === 200) {
                if(ipAddress!=='localhost'){
                    setIpAddress(ipData.newIp)

                    const updatedDevices = devices.map(device =>
                        device.address === ipData.currentIp
                            ? { ...device, address: ipData.newIp }
                            : device
                    );
                    useDevicesStore.setState({ devices: updatedDevices });
                }
                
                onClose()
            }
        } catch (err) {
            console.error('Error:', err);
        } finally {
            setLoader(false);
        }
    };

    const cancelIp = async (data: any) => {
        try {
            const result = await NetworkService.saveIp(ipAddress, data);
            if (result.status === 200) {
                onClose()
            }
        } catch (err) {
            console.error('Error:', err);
        } finally {
            setLoader(false);
        }
    };

    return (
        <>
            {loader && isAdmin ? (
                <Loader loaderText="Идет проверка корректности IP адреса" />
            ) : (
                <ModalContainer {...(checkStatus ? { height: "unset" } : {})}>
                    <ModalTitle>
                        <h3>Изменение IP-Адреса</h3>
                    </ModalTitle>
                    {checkStatus ? (
                        <ModalContent>
                            <Information>
                                <h3>Общие сведения</h3>
                                <Info>
                                    <p>Интерфейс: {ipData.device}</p>
                                    <p>--{'>'}</p>
                                    <p>{ipData.connection}</p>
                                </Info>
                                <h3>Сведения об IP</h3>
                                <DataContainer>
                                    <CurrentData>
                                        <p>Текущий ip: {ipData.currentIp}</p>
                                        <p>Текущий шлюз: {ipData.currentGate}</p>
                                        <p>Текущий DNS: {ipData.currentDns}</p>
                                    </CurrentData>

                                    <NewData>
                                        <p>Новый ip: {ipData.newIp}</p>
                                        <p>Новый шлюз: {ipData.newGate}</p>
                                        <p>Новый DNS: {ipData.newDns}</p>
                                    </NewData>
                                </DataContainer>
                            </Information>

                            <ButtonContainer>
                                <MainButton  title="Отмена" size='small' onClick={() => cancelIp(currentIp)}/>
                                <MainButton title="Сохранить"  size='small' onClick={() => saveIp(newIP)}/>
                            </ButtonContainer>
                        </ModalContent>
                    ) : (
                        <>
                            <ModalContent>
                                <ModalText>
                                    {isAdmin ? (
                                        <>
                                             <h3>Произошла ошибка проверки корректности</h3>
                                             <ErrorMessage>{message}</ErrorMessage>
                                        </>
                                       
                                    ):(
                                        <h3>Для изменения сетевых настроек необходимо авторизироваться под администратором</h3>
                                    )}
                                    
                                </ModalText>
                            </ModalContent>

                            <ButtonContainer>
                                <MainButton title="Закрыть" size='small' onClick={smoothClose}/>
                            </ButtonContainer>
                        </>
                    )}
                </ModalContainer>
            )}
        </>
    )
}