import { get, set, del, update, createStore, values } from 'idb-keyval'
import { List, ListItem, Avatar, Span, Dialog, Button, Input } from './weigets.js'

export default class ClientList {
    constructor({ channels = {}, EventListeners = {}, name: username, onexit }) {
        this.event = { onexit }
        this.store = createStore(`db-user`, `store-user`)
        this.channels = channels
        this.EventListeners = EventListeners
        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
        const host = window.location.host
        this.clientlist = []
        this.element = List({
            style: {
                position: 'fixed',
                top: '0',
                right: '0',
                display: 'flex',
                flexDirection: 'wrap',
                alignItems: 'center',
                listStyle: 'none',
                padding: '0 1rem',
            }
        })
        document.body.appendChild(this.element)

        // 连接 WebSocket
        const linkStart = () => {
            const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${username}`)
            websocket.onmessage = async event => {
                const data = JSON.parse(event.data)
                const webrtc_init = async () => {
                    const webrtc = new RTCPeerConnection({
                        iceServers: [
                            ...[
                                'stun:stun.voipbuster.com',    // 德国 黑森州 美因河畔法兰克福
                                'stun:stun.voipstunt.com',     // 德国 黑森州 美因河畔法兰克福
                                'stun:stun.internetcalls.com', // 德国 黑森州 美因河畔法兰克福
                                'stun:stun.voip.aebc.com',     // 加拿大 不列颠哥伦比亚省 温哥华
                                'stun:stun.1und1.de',
                                'stun:stun.callwithus.com',
                                'stun:stun.ekiga.net',
                                'stun:stun.fwdnet.net',
                                'stun:stun.fwdnet.net:3478',
                                'stun:stun.gmx.net',
                                'stun:stun.iptel.org',
                                'stun:stun.minisipserver.com',
                                'stun:stun.schlund.de',
                                'stun:stun.sipgate.net',
                                'stun:stun.sipgate.net:10000',
                                'stun:stun.softjoys.com',
                                'stun:stun.softjoys.com:3478',
                                'stun:stun.voxgratia.org',
                                'stun:stun.wirlab.net',
                                'stun:stun.xten.com',
                                'stun:stunserver.org',
                                'stun:stun01.sipphone.com',
                                'stun:stun.zoiper.com',
                                'stun:stun1.l.google.com:19302',
                                'stun:stun2.l.google.com:19302',
                                'stun:stun3.l.google.com:19302',
                                'stun:stun4.l.google.com:19302',
                                'stun:stun.ideasip.com',
                                'stun:stun.stunprotocol.org:3478',
                                'stun:stun.voiparound.com',
                                'stun:stun.services.mozilla.com',
                            ].map(url => ({ urls: url }))
                            //{
                            //    urls: 'turn:satori.love:3478?transport=udp',
                            //    username: 'x-username',
                            //    credential: 'x-password'
                            //},
                        ],
                        iceCandidatePoolSize: 10,  // 限制 ICE 候选者的数量
                        iceTransportPolicy: 'all', // 使用所有可用的候选者
                        bundlePolicy: 'max-bundle',// 将所有媒体流捆绑在一起，以最大程度地提高性能和减少延迟
                        sctp: {
                            //maxMessageSize: 1024 * 64,   // 64KB
                            //maxRetransmits: 10,          // 最大重传次数
                            //maxPacketLifeTime: 3000,     // 最大生存时间
                            //renegotiationTimeout: 3000,  // 重协商超时时间
                            //redeliveryTimeout: 1000,   // 重传超时时间
                            //redeliveryTime: 1000,      // 重传时间
                            //reliability: 'reliable',     // 可靠传输
                            //ordered: true,               // 有序传输
                        }
                    })
                    webrtc.ondatachannel = ({ channel }) => {
                        //console.debug(data.name, '建立', channel.label, '数据通道')
                        const client = this.clientlist.find(x => x.id === data.id)
                        const option = this.channels[channel.label]
                        channel.onopen = event => {
                            //console.debug('对方打开', channel.label, '数据通道')
                            if (option && option.onopen) {
                                option.onopen(event, client)
                            }
                        }
                        channel.onmessage = event => {
                            //console.log('对方发送', channel.label, '数据消息')
                            if (option && option.onmessage) {
                                option.onmessage(event, client)
                            }
                        }
                        channel.onclose = event => {
                            console.debug('对方关闭', channel.label, '数据通道')
                            if (option && option.onclose) {
                                option.onclose(event, client)
                            }
                        }
                        channel.onerror = event => {
                            console.error(data.name, '通道', channel.label, '发生错误')
                            if (option && option.onerror) {
                                option.onerror(event, client)
                            }
                        }
                    }
                    webrtc.onicecandidate = event => {
                        if (event.candidate) {
                            websocket.send(JSON.stringify({
                                type: 'candidate',
                                id: data.id,
                                candidate: event.candidate
                            }))
                        }
                    }
                    webrtc.oniceconnectionstatechange = async event => {
                        console.log(data.name, 'ICE 连接状态:', webrtc.iceConnectionState, webrtc.iceGatheringState)
                        if (webrtc.iceConnectionState === 'disconnected' || webrtc.iceConnectionState === 'failed') {
                            const client = this.clientlist.find(x => x.id === data.id) ?? {}
                            console.error(data.name, '需要添加新的 candidate', webrtc.iceConnectionState, client.online)
                            // 添加新的 candidate
                        } else if (webrtc.iceConnectionState === 'connected' || webrtc.iceConnectionState === 'completed') {
                            //console.debug(data.name, 'WebRTC 连接已经建立成功')
                        }
                    }
                    const channels = Object.entries(this.channels).map(([name, callback]) => {
                        const dc = webrtc.createDataChannel(name, {
                            reliability: 'reliable', // 可靠传输
                            reliable: true,          // 可靠传输
                            ordered: true,           // 有序传输
                            //maxMessageSize: 64,      // 64KB
                            //maxRetransmits: 10,      // 最大重传次数
                            //maxPacketLifeTime: 3000, // 最大生存时间
                        })
                        return dc
                    })
                    //// 页面刷新前主动关闭所有数据通道并关闭 WebRTC 连接
                    //window.addEventListener('beforeunload', event => {
                    //    channels.forEach(ch => ch.close())
                    //    webrtc.close()
                    //})
                    return { webrtc, channels }
                }
                if (data.type === 'list') {
                    const { webrtc, channels } = await webrtc_init()
                    const offer = await webrtc.createOffer()
                    await webrtc.setLocalDescription(offer)
                    this.clientlist.push({ id: data.id, name: data.name, webrtc, channels, online: true })
                    websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
                    this.push(this.clientlist.find(client => client.id === data.id))
                    return
                }
                if (data.type === 'push') {
                    //console.debug('新上线客户端:', data)
                    return
                }
                if (data.type === 'pull') {
                    //console.debug('移除客户端:', data)
                    const client = this.clientlist.find(client => client.id === data.id)
                    if (!client) return console.error('目标用户本不存在')
                    client.online = false  // 离开时改变状态
                    return this.exit(data)
                }
                if (data.type === 'offer') {
                    const { webrtc, channels } = await webrtc_init()
                    this.clientlist.push({ id: data.id, name: data.name, webrtc, channels, online: true })
                    this.push(this.clientlist.find(client => client.id === data.id))
                    await webrtc.setRemoteDescription(data.offer)
                    const answer = await webrtc.createAnswer()
                    await webrtc.setLocalDescription(answer)
                    websocket.send(JSON.stringify({ type: 'answer', id: data.id, answer }))
                    return
                }
                if (data.type === 'answer') {
                    const webrtc = this.clientlist.find(client => client.id === data.id).webrtc
                    await webrtc.setRemoteDescription(data.answer)
                    return
                }
                if (data.type === 'candidate') {
                    const webrtc = this.clientlist.find(client => client.id === data.id).webrtc
                    await webrtc.addIceCandidate(data.candidate)
                    return
                }
                console.error('收到未知数据:', data)
            }
            websocket.onclose = async event => {
                console.log('WebSocket 断线重连...')
                await new Promise(resolve => setTimeout(resolve, 10000))
                // this.websocket = linkStart()
                // 调试模式: 直接刷新页面重载
                window.location.reload()
            }
            return websocket
        }
        this.websocket = linkStart()

        this.我的帐户()
        this.DEBUG()
    }
    async DEBUG() {
        // 监听键盘Esc按下, 如果全局没有焦点则显示调试信息, 如果在调试信息显示期间弹起Esc则隐藏调试信息
        let debug = false
        let debugElement = Dialog({
            children: [
                Button({
                    textContent: '关闭',
                    onclick: event => document.body.removeChild(debugElement)
                }),
                Span({
                    textContent: JSON.stringify(this.clientlist, null, 4)
                })
            ]
        })
        document.addEventListener('keydown', event => {
            if (document.activeElement === document.body && event.key === 'Escape' && !debug) {
                document.body.appendChild(debugElement)
                debug = true
            }
        })
        document.addEventListener('keyup', async event => {
            if (document.activeElement === document.body && event.key === 'Escape' && debug) {
                await debugElement.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
                document.body.removeChild(debugElement)
                debug = false
            }
        })
    }
    async 我的帐户() {
        if (!localStorage.getItem('id')) {
            localStorage.setItem('id', window.crypto.randomUUID())
        }
        if (!localStorage.getItem('username')) {
            localStorage.setItem('username', '匿')
        }
        if (!localStorage.getItem('avatar')) {
            localStorage.setItem('avatar', '/favicon.ico')
        }
        const id = localStorage.getItem('id')
        const username = localStorage.getItem('username')
        const avatar = localStorage.getItem('avatar')
        this.push({ id, name: username, avatar }, true)
    }
    async 用户列表() { }
    async 用户加入(data) {
        await set(data.id, data, this.store)
        this.push(data)
    }
    async 用户离开({ id }) {
        await del(id, this.store)
        this.exit({ id })
    }
    async 用户更新({ id, name, avatar }) {
        const client = this.clientlist.find(client => client.id === id)
        console.log(name, '更新了身份信息')
        document.getElementById(id).querySelector('span').textContent = name
        document.getElementById(id).querySelector('img').src = avatar
    }
    exit(item) {
        const client = this.clientlist.find(client => client.id === item.id)
        if (!client) return console.error('目标用户本不存在')
        this.clientlist = this.clientlist.filter(client => client.id !== item.id)
        this.element.removeChild(document.getElementById(item.id))
        this.event.onexit(client)
    }
    setChannel(name, option) {
        this.channels[name] = option
    }
    // 新上线客户端
    push(item, self = false) {
        this.element.appendChild(ListItem({
            id: item.id,
            style: {
                margin: '0 8px',
                cursor: 'pointer',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                fontSize: '12px',
                borderRadius: '8px',
            },
            children: [
                Avatar({
                    src: item.avatar ?? '/favicon.ico',
                    style: {
                        width: '32px',
                        height: '32px',
                        borderRadius: '50%',
                        cursor: 'pointer',
                    },
                }),
                Span({
                    textContent: item.name ?? item.id
                })
            ],
            onclick: event => document.body.appendChild(Dialog({
                children: [
                    Avatar({
                        src: item.avatar ?? '/favicon.ico',
                        style: {
                            width: '240px',
                            height: '240px',
                            borderRadius: '8px',
                            margin: '0 auto',
                            display: 'block',
                            cursor: 'pointer',
                        },
                        onclick: event => {
                            console.log('点击头像', item)
                            if (!self) return console.log('只能修改自己的头像')
                            const input = document.createElement('input')
                            input.type = 'file'
                            input.accept = 'image/*'
                            input.onchange = async event => {
                                const file = event.target.files[0]
                                const reader = new FileReader()
                                reader.readAsDataURL(file)
                                reader.onload = async event => {
                                    const base64 = event.target.result
                                    localStorage.setItem('avatar', base64)
                                    window.location.reload() // 简单刷新页面
                                }
                            }
                            input.click()
                        }
                    }),
                    Input({
                        style: {
                            width: '100px',
                            border: '2px dotted #bbb',
                            borderRadius: '50%',
                            outline: 'none',
                            padding: '5px 0',
                            textAlign: 'center',
                            position: 'absolute',
                            bottom: '-2px',
                            background: 'rgba(255, 255, 255, 0.8)',
                        },
                        readOnly: !self, // 如果不是自己, 则不可编辑
                        value: item.name ?? item.id,
                        type: 'text',
                        placeholder: '请设置你的昵称',
                        onchange: event => {
                            localStorage.setItem('username', event.target.value)
                            window.location.reload() // 简单刷新页面
                        }
                    })
                ]
            }))
        }))
    }
    // 添加回调函数
    on(name, callback) {
        this.EventListeners[name] = callback
    }
    // 执行回调函数
    _on(name, ...args) {
        if (this.EventListeners[name]) {
            this.EventListeners[name](...args)
        }
    }
    // 通过指定通道发送数据(单播)
    sendto(id, name, data) {
        const client = this.clientlist.find(client => client.id === id)
        if (!client) {
            console.error('客户端不存在:', id)
            return
        }
        if (!client.channels.find(ch => ch.label === name)) {
            console.error('通道不存在:', name)
            return
        }
        client.channels.filter(ch => ch.label === name).forEach(async ch => {
            // 等待 datachannel 打开(临时解决方案)
            while (ch.readyState !== 'open') {
                await new Promise(resolve => setTimeout(resolve, 100))
            }
            ch.send(data)
        })
    }

    // 通过指定通道发送数据(单播, 自动分片)
    sendto2(id, name, data) {
        console.log('发送数据:', name)
        const client = this.clientlist.find(client => client.id === id)
        if (!client) {
            console.error('客户端不存在:', id)
            return
        }
        if (!client.channels.find(ch => ch.label === name)) {
            console.error('通道不存在:', name)
            return
        }

        client.channels.filter(ch => ch.label === name).forEach(async ch => {

            console.log('发送数据:', name, ch.label)

            // 等待 datachannel 打开(临时解决方案)
            while (ch.readyState !== 'open') {
                await new Promise(resolve => setTimeout(resolve, 100))
            }

            console.log('发送数据:', name, ch.label, ch.readyState)

            // 将数据转换为arraybuffer
            const buffer = new ArrayBuffer(data.length)
            const view = new Uint8Array(buffer)
            for (let i = 0; i < data.length; i++) {
                view[i] = data.charCodeAt(i) & 0xff
            }
            // 将数据分片发送
            const CHUNK_SIZE = 16 * 1024; // 16KB
            for (let i = 0; i < buffer.byteLength; i += CHUNK_SIZE) {
                const chunk = view.subarray(i, i + CHUNK_SIZE)
                ch.send(chunk)
                console.log('缓冲区:', ch.bufferedAmount)
                console.log('缓冲区剩余:', ch.bufferedAmountLowThreshold)
            }
        })
    }

    // 通过指定通道发送数据(广播)
    send(name, data) {
        this.clientlist.forEach(client => {
            client.channels.filter(ch => ch.label === name).forEach(async ch => {
                // 等待 datachannel 打开(临时解决方案)
                while (ch.readyState !== 'open') {
                    await new Promise(resolve => setTimeout(resolve, 100))
                }
                ch.send(data)
            })
        })
    }
}