// ==UserScript==
// @name         抖音私信内嵌浮窗
// @namespace    https://github.com/douyin-chat-float-window
// @version      2.0.0
// @description  拦截抖音 Web 私信独立窗口，在当前页面内以内嵌浮窗打开，支持拖动、缩放、关闭和状态记忆
// @author       you
// @match        https://www.douyin.com/*
// @match        https://*.douyin.com/*
// @run-at       document-start
// @grant        none
// @noframes
// ==/UserScript==

(function () {
    'use strict';

    const SCRIPT_ID = 'douyin-chat-float-window';
    const STORE_KEY = 'dy-chat-float-window-v1';
    const CHAT_URL_RE = /(?:^|[/?#&=._-])(im|message|chat|conversation|letter|webcast_im)(?:$|[/?#&=._-])/i;

    const nativeOpen = window.open ? window.open.bind(window) : null;
    let floatWin = null;
    let iframe = null;
    let fallbackLink = null;
    let fallbackTimer = null;
    let currentUrl = '';

    const state = Object.assign({
        width: Math.round(window.innerWidth * 0.52),
        height: Math.round(window.innerHeight * 0.78),
        x: 0,
        y: 56,
        minimized: false,
    }, readState());

    function readState() {
        try {
            return JSON.parse(localStorage.getItem(STORE_KEY)) || {};
        } catch {
            return {};
        }
    }

    function saveState() {
        try {
            localStorage.setItem(STORE_KEY, JSON.stringify(state));
        } catch {
            // ignore
        }
    }

    function ready(fn) {
        if (document.body) {
            fn();
            return;
        }
        document.addEventListener('DOMContentLoaded', fn, { once: true });
    }

    function normalizeUrl(url) {
        if (!url) return null;
        try {
            return new URL(String(url), location.href);
        } catch {
            return null;
        }
    }

    function isDouyinHost(hostname) {
        return hostname === 'douyin.com' || hostname.endsWith('.douyin.com');
    }

    function isChatWindowUrl(url) {
        const u = normalizeUrl(url);
        if (!u || !isDouyinHost(u.hostname)) return false;

        const text = `${u.pathname}${u.search}${u.hash}`;
        return CHAT_URL_RE.test(text);
    }

    function fakeOpenedWindow(url) {
        return {
            closed: false,
            focus() {},
            close() { this.closed = true; },
            location: { href: String(url || '') },
        };
    }

    function interceptWindowOpen() {
        if (!nativeOpen) return;

        window.open = function patchedWindowOpen(url, target, features) {
            if (isChatWindowUrl(url)) {
                openFloatingChat(url);
                return fakeOpenedWindow(url);
            }
            return nativeOpen(url, target, features);
        };
    }

    function interceptAnchorClicks() {
        document.addEventListener('click', (event) => {
            const anchor = event.target && event.target.closest
                ? event.target.closest('a[href]')
                : null;

            if (!anchor || !isChatWindowUrl(anchor.href)) return;

            event.preventDefault();
            event.stopPropagation();
            openFloatingChat(anchor.href);
        }, true);
    }

    function injectStyle() {
        if (document.getElementById(SCRIPT_ID)) return;

        const style = document.createElement('style');
        style.id = SCRIPT_ID;
        style.textContent = `
            .dycf-window {
                position: fixed !important;
                left: 0;
                top: 0;
                width: 720px;
                height: 620px;
                min-width: 360px;
                min-height: 280px;
                max-width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
                background: #1f202b;
                border: 1px solid rgba(255,255,255,.12);
                border-radius: 12px;
                box-shadow: 0 18px 56px rgba(0,0,0,.38);
                overflow: hidden;
                z-index: 2147483646 !important;
                display: flex;
                flex-direction: column;
                color: #fff;
            }

            .dycf-window.dycf-minimized {
                height: 42px !important;
                min-height: 42px !important;
            }

            .dycf-header {
                flex: 0 0 42px;
                height: 42px;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0 8px 0 14px;
                background: #171821;
                border-bottom: 1px solid rgba(255,255,255,.08);
                cursor: move;
                user-select: none;
            }

            .dycf-title {
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
                color: rgba(255,255,255,.92);
            }

            .dycf-actions {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .dycf-btn {
                width: 28px;
                height: 28px;
                border: 0;
                border-radius: 7px;
                background: transparent;
                color: rgba(255,255,255,.78);
                cursor: pointer;
                font-size: 14px;
                line-height: 28px;
                text-align: center;
            }

            .dycf-btn:hover {
                background: rgba(255,255,255,.12);
                color: #fff;
            }

            .dycf-body {
                position: relative;
                flex: 1 1 auto;
                min-height: 0;
                background: #1f202b;
            }

            .dycf-window.dycf-minimized .dycf-body,
            .dycf-window.dycf-minimized .dycf-resize {
                display: none;
            }

            .dycf-frame {
                display: block;
                width: 100%;
                height: 100%;
                border: 0;
                background: #1f202b;
            }

            .dycf-fallback {
                position: absolute;
                inset: 0;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 24px;
                background: #1f202b;
                color: rgba(255,255,255,.78);
                text-align: center;
                font-size: 14px;
                line-height: 1.8;
            }

            .dycf-fallback.is-visible {
                display: flex;
            }

            .dycf-fallback a {
                color: #7aa7ff;
                text-decoration: none;
            }

            .dycf-resize {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 18px;
                height: 18px;
                cursor: nwse-resize;
                z-index: 2;
            }

            .dycf-resize::after {
                content: "";
                position: absolute;
                right: 5px;
                bottom: 5px;
                width: 8px;
                height: 8px;
                border-right: 2px solid rgba(255,255,255,.45);
                border-bottom: 2px solid rgba(255,255,255,.45);
            }
        `;
        (document.head || document.documentElement).appendChild(style);
    }

    function ensureDefaultGeometry() {
        const fallbackWidth = Math.round(window.innerWidth * 0.52);
        const fallbackHeight = Math.round(window.innerHeight * 0.78);

        state.width = clamp(state.width || fallbackWidth, 360, window.innerWidth - 16);
        state.height = clamp(state.height || fallbackHeight, 280, window.innerHeight - 16);

        if (!Number.isFinite(state.x) || state.x <= 0) {
            state.x = window.innerWidth - state.width - 24;
        }
        if (!Number.isFinite(state.y)) state.y = 56;

        clampToViewport();
    }

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), Math.max(min, max));
    }

    function clampToViewport() {
        state.width = clamp(state.width, 360, window.innerWidth - 16);
        state.height = clamp(state.height, 280, window.innerHeight - 16);
        state.x = clamp(state.x, 8, window.innerWidth - state.width - 8);
        state.y = clamp(state.y, 8, window.innerHeight - (state.minimized ? 42 : state.height) - 8);
    }

    function applyGeometry() {
        if (!floatWin) return;
        clampToViewport();
        floatWin.style.transform = `translate(${state.x}px, ${state.y}px)`;
        floatWin.style.width = `${state.width}px`;
        floatWin.style.height = state.minimized ? '42px' : `${state.height}px`;
        floatWin.classList.toggle('dycf-minimized', state.minimized);
        saveState();
    }

    function createFloatingWindow() {
        injectStyle();
        ensureDefaultGeometry();

        const root = document.createElement('div');
        root.className = 'dycf-window';
        root.innerHTML = `
            <div class="dycf-header">
                <div class="dycf-title">抖音私信浮窗</div>
                <div class="dycf-actions">
                    <button class="dycf-btn" type="button" data-action="reload" title="刷新">R</button>
                    <button class="dycf-btn" type="button" data-action="open" title="在新标签页打开">O</button>
                    <button class="dycf-btn" type="button" data-action="minimize" title="最小化">_</button>
                    <button class="dycf-btn" type="button" data-action="close" title="关闭">x</button>
                </div>
            </div>
            <div class="dycf-body">
                <iframe class="dycf-frame" referrerpolicy="strict-origin-when-cross-origin"></iframe>
                <div class="dycf-fallback">
                    <div>
                        <div>如果这里长时间空白，可能是抖音限制了页面内嵌。</div>
                        <div><a class="dycf-fallback-link" href="#" target="_blank" rel="noopener">在新标签页打开私信窗口</a></div>
                    </div>
                </div>
            </div>
            <div class="dycf-resize"></div>
        `;

        document.body.appendChild(root);

        floatWin = root;
        iframe = root.querySelector('.dycf-frame');
        fallbackLink = root.querySelector('.dycf-fallback-link');

        bindWindowEvents(root);
        applyGeometry();
    }

    function bindWindowEvents(root) {
        const header = root.querySelector('.dycf-header');
        const resizeHandle = root.querySelector('.dycf-resize');

        header.addEventListener('pointerdown', (event) => {
            if (event.target.closest('.dycf-btn')) return;
            startDrag(event);
        });

        resizeHandle.addEventListener('pointerdown', startResize);

        root.addEventListener('click', (event) => {
            const button = event.target.closest('.dycf-btn');
            if (!button) return;

            const action = button.dataset.action;
            if (action === 'close') {
                closeFloatingChat();
            } else if (action === 'minimize') {
                state.minimized = !state.minimized;
                applyGeometry();
            } else if (action === 'reload' && iframe) {
                iframe.src = currentUrl;
                scheduleFallback();
            } else if (action === 'open' && currentUrl && nativeOpen) {
                nativeOpen(currentUrl, '_blank', 'noopener,noreferrer');
            }
        });
    }

    function startDrag(event) {
        event.preventDefault();
        bringToFront();

        const startX = event.clientX;
        const startY = event.clientY;
        const originX = state.x;
        const originY = state.y;

        setIframeInteractive(false);

        const move = (moveEvent) => {
            state.x = originX + moveEvent.clientX - startX;
            state.y = originY + moveEvent.clientY - startY;
            applyGeometry();
        };

        const up = () => {
            setIframeInteractive(true);
            window.removeEventListener('pointermove', move, true);
            window.removeEventListener('pointerup', up, true);
        };

        window.addEventListener('pointermove', move, true);
        window.addEventListener('pointerup', up, true);
    }

    function startResize(event) {
        event.preventDefault();
        bringToFront();

        const startX = event.clientX;
        const startY = event.clientY;
        const originWidth = state.width;
        const originHeight = state.height;

        setIframeInteractive(false);

        const move = (moveEvent) => {
            state.width = originWidth + moveEvent.clientX - startX;
            state.height = originHeight + moveEvent.clientY - startY;
            state.minimized = false;
            applyGeometry();
        };

        const up = () => {
            setIframeInteractive(true);
            window.removeEventListener('pointermove', move, true);
            window.removeEventListener('pointerup', up, true);
        };

        window.addEventListener('pointermove', move, true);
        window.addEventListener('pointerup', up, true);
    }

    function setIframeInteractive(enabled) {
        if (iframe) iframe.style.pointerEvents = enabled ? '' : 'none';
    }

    function bringToFront() {
        if (floatWin) floatWin.style.zIndex = '2147483646';
    }

    function closeFloatingChat() {
        clearTimeout(fallbackTimer);
        fallbackTimer = null;

        if (floatWin) {
            floatWin.remove();
        }

        floatWin = null;
        iframe = null;
        fallbackLink = null;
        currentUrl = '';
    }

    function scheduleFallback() {
        if (!floatWin) return;

        const fallback = floatWin.querySelector('.dycf-fallback');
        if (fallback) fallback.classList.remove('is-visible');

        clearTimeout(fallbackTimer);
        fallbackTimer = setTimeout(() => {
            if (!floatWin) return;
            const nextFallback = floatWin.querySelector('.dycf-fallback');
            if (nextFallback) nextFallback.classList.add('is-visible');
        }, 6000);
    }

    function openFloatingChat(url) {
        const parsed = normalizeUrl(url);
        if (!parsed) return;

        ready(() => {
            if (!floatWin) createFloatingWindow();

            currentUrl = parsed.href;
            state.minimized = false;
            applyGeometry();

            if (fallbackLink) fallbackLink.href = currentUrl;
            if (iframe && iframe.src !== currentUrl) {
                iframe.src = currentUrl;
            }

            if (iframe) {
                iframe.onload = () => {
                    clearTimeout(fallbackTimer);
                    const fallback = floatWin && floatWin.querySelector('.dycf-fallback');
                    if (fallback) fallback.classList.remove('is-visible');
                };
            }

            scheduleFallback();
        });
    }

    window.addEventListener('resize', () => {
        if (!floatWin) return;
        applyGeometry();
    });

    window.__dyChatFloatOpen = (url) => {
        openFloatingChat(url);
        return true;
    };

    interceptWindowOpen();
    ready(interceptAnchorClicks);

    console.log('[抖音私信内嵌浮窗] v2.0.0 已加载。点击官方独立窗口按钮时会在当前页打开浮窗。');
})();