/**
 * 文件功能：聊天室东风-5C洲际导弹发射预览特效
 *
 * 使用全屏透明 Canvas 绘制风格化洲际导弹升空、尾焰、烟尘冲击波、
 * 雷达扫描网格和测试 HUD。该效果只用于聊天室视觉预览，不表达真实装备参数。
 */

const Df5cEffect = (() => {
    const DURATION = 8200;
    const FIRE = "#fb923c";
    const HOT = "#fef3c7";
    const RED = "#dc2626";
    const BODY = "#e5e7eb";
    const BODY_DARK = "#64748b";

    /**
     * 缓入缓出曲线，用于导弹升空和 HUD 动画。
     *
     * @param {number} t 0 到 1 的进度
     * @returns {number}
     */
    function easeInOutCubic(t) {
        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    }

    /**
     * 缓出曲线，用于烟尘扩散。
     *
     * @param {number} t 0 到 1 的进度
     * @returns {number}
     */
    function easeOutCubic(t) {
        return 1 - Math.pow(1 - t, 3);
    }

    /**
     * 创建尾焰和烟尘粒子。
     *
     * @param {number} count 粒子数量
     * @returns {Array<Record<string, number>>}
     */
    function createParticles(count) {
        return Array.from({ length: count }, () => ({
            angle: Math.random() * Math.PI * 2,
            spread: 0.3 + Math.random() * 1.3,
            speed: 0.4 + Math.random() * 2.4,
            size: 4 + Math.random() * 18,
            alpha: 0.12 + Math.random() * 0.6,
            phase: Math.random() * Math.PI * 2,
        }));
    }

    /**
     * 绘制夜空、雷达网格和扫描线。
     *
     * @param {CanvasRenderingContext2D} ctx Canvas 上下文
     * @param {number} w 画布宽度
     * @param {number} h 画布高度
     * @param {number} progress 播放进度
     */
    function drawBackdrop(ctx, w, h, progress) {
        const fade = Math.min(1, progress / 0.14) * Math.min(1, (1 - progress) / 0.12);
        const sky = ctx.createLinearGradient(0, 0, 0, h);
        sky.addColorStop(0, `rgba(2,6,23,${0.86 * fade})`);
        sky.addColorStop(0.58, `rgba(15,23,42,${0.62 * fade})`);
        sky.addColorStop(1, `rgba(30,41,59,${0.26 * fade})`);
        ctx.fillStyle = sky;
        ctx.fillRect(0, 0, w, h);

        ctx.save();
        ctx.globalAlpha = fade;
        ctx.strokeStyle = "rgba(56,189,248,0.16)";
        ctx.lineWidth = 1;
        for (let x = -w; x < w * 2; x += 72) {
            ctx.beginPath();
            ctx.moveTo(x + progress * 120, 0);
            ctx.lineTo(x - h * 0.55 + progress * 120, h);
            ctx.stroke();
        }
        for (let y = h * 0.2; y < h; y += 46) {
            ctx.beginPath();
            ctx.moveTo(0, y + Math.sin(progress * 18 + y) * 2);
            ctx.lineTo(w, y + Math.cos(progress * 14 + y) * 2);
            ctx.stroke();
        }

        ctx.strokeStyle = "rgba(248,113,113,0.34)";
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(w * 0.16, h * 0.76, w * (0.18 + progress * 0.22), -Math.PI * 0.95, -Math.PI * 0.12);
        ctx.stroke();

        const beamAngle = -Math.PI * 0.85 + progress * Math.PI * 1.15;
        ctx.strokeStyle = "rgba(34,211,238,0.34)";
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(w * 0.16, h * 0.76);
        ctx.lineTo(w * 0.16 + Math.cos(beamAngle) * w * 0.42, h * 0.76 + Math.sin(beamAngle) * w * 0.42);
        ctx.stroke();
        ctx.restore();
    }

    /**
     * 绘制发射井底座、光柱和冲击波。
     *
     * @param {CanvasRenderingContext2D} ctx Canvas 上下文
     * @param {number} w 画布宽度
     * @param {number} h 画布高度
     * @param {number} progress 播放进度
     */
    function drawLaunchPad(ctx, w, h, progress) {
        const ignition = Math.min(1, progress / 0.24);
        const pulse = Math.sin(progress * Math.PI * 12) * 0.5 + 0.5;
        const cx = w * 0.18;
        const cy = h * 0.78;

        ctx.save();
        ctx.globalCompositeOperation = "lighter";
        const beam = ctx.createRadialGradient(cx, cy, 0, cx, cy, h * 0.42);
        beam.addColorStop(0, `rgba(251,146,60,${0.54 * ignition})`);
        beam.addColorStop(0.3, `rgba(254,243,199,${0.18 * ignition})`);
        beam.addColorStop(1, "rgba(0,0,0,0)");
        ctx.fillStyle = beam;
        ctx.fillRect(0, 0, w, h);

        ctx.strokeStyle = `rgba(251,146,60,${(0.32 + pulse * 0.2) * ignition})`;
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.ellipse(cx, cy, w * (0.06 + progress * 0.28), h * (0.025 + progress * 0.08), 0, 0, Math.PI * 2);
        ctx.stroke();
        ctx.restore();

        ctx.save();
        ctx.fillStyle = "rgba(15,23,42,0.82)";
        ctx.beginPath();
        ctx.ellipse(cx, cy + 18, w * 0.12, h * 0.035, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.strokeStyle = "rgba(148,163,184,0.7)";
        ctx.lineWidth = 3;
        ctx.stroke();
        ctx.restore();
    }

    /**
     * 绘制尾焰和烟尘。
     *
     * @param {CanvasRenderingContext2D} ctx Canvas 上下文
     * @param {Array<Record<string, number>>} particles 粒子数组
     * @param {number} tailX 尾部 x
     * @param {number} tailY 尾部 y
     * @param {number} progress 播放进度
     */
    function drawExhaust(ctx, particles, tailX, tailY, progress) {
        ctx.save();
        ctx.globalCompositeOperation = "lighter";
        particles.forEach((particle, index) => {
            const t = (progress * 3.2 + index * 0.013) % 1;
            const spread = easeOutCubic(t) * 118 * particle.spread;
            const x = tailX - spread * 0.62 + Math.cos(particle.angle) * spread * 0.36;
            const y = tailY + spread * 0.86 + Math.sin(particle.angle + particle.phase) * spread * 0.24;
            const alpha = particle.alpha * (1 - t);
            const radius = particle.size * (0.7 + t * 2.4);

            ctx.globalAlpha = alpha;
            ctx.fillStyle = t < 0.34 ? HOT : t < 0.62 ? FIRE : "rgba(148,163,184,0.9)";
            ctx.shadowColor = t < 0.55 ? FIRE : "rgba(148,163,184,0.8)";
            ctx.shadowBlur = radius * 1.2;
            ctx.beginPath();
            ctx.ellipse(x, y, radius * 0.9, radius * 1.35, -0.38, 0, Math.PI * 2);
            ctx.fill();
        });
        ctx.restore();
    }

    /**
     * 绘制东风-5C风格化导弹。
     *
     * @param {CanvasRenderingContext2D} ctx Canvas 上下文
     * @param {number} x 导弹中心 x
     * @param {number} y 导弹中心 y
     * @param {number} scale 缩放比例
     * @param {number} progress 播放进度
     */
    function drawMissile(ctx, x, y, scale, progress) {
        ctx.save();
        ctx.translate(x, y);
        // 导弹沿左下到右上的轨迹飞行，箭体头部必须朝右上，尾焰才会落在后方。
        ctx.rotate(0.62 + Math.sin(progress * 7) * 0.012);
        ctx.scale(scale, scale);

        ctx.save();
        ctx.shadowColor = "rgba(251,146,60,0.9)";
        ctx.shadowBlur = 26;
        ctx.fillStyle = "rgba(251,146,60,0.86)";
        ctx.beginPath();
        ctx.moveTo(-28, 170);
        ctx.lineTo(0, 260);
        ctx.lineTo(28, 170);
        ctx.closePath();
        ctx.fill();
        ctx.fillStyle = "rgba(254,243,199,0.86)";
        ctx.beginPath();
        ctx.moveTo(-12, 176);
        ctx.lineTo(0, 236);
        ctx.lineTo(12, 176);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        const body = ctx.createLinearGradient(-44, -178, 44, 168);
        body.addColorStop(0, "#f8fafc");
        body.addColorStop(0.45, BODY);
        body.addColorStop(1, BODY_DARK);
        ctx.fillStyle = body;
        roundRect(ctx, -42, -156, 84, 326, 40);
        ctx.fill();

        ctx.fillStyle = RED;
        ctx.beginPath();
        ctx.moveTo(-42, -126);
        ctx.quadraticCurveTo(0, -214, 42, -126);
        ctx.lineTo(42, -92);
        ctx.lineTo(-42, -92);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#111827";
        ctx.fillRect(-42, -74, 84, 10);
        ctx.fillRect(-42, 74, 84, 10);
        ctx.fillStyle = "rgba(239,68,68,0.92)";
        ctx.fillRect(-42, -22, 84, 30);

        ctx.fillStyle = "#111827";
        ctx.font = "900 30px serif";
        ctx.textAlign = "center";
        ctx.fillText("DF-5C", 0, 50);
        ctx.fillStyle = "#fef3c7";
        ctx.font = "900 20px serif";
        ctx.fillText("★", 0, -1);

        ctx.fillStyle = "#334155";
        ctx.beginPath();
        ctx.moveTo(-42, 102);
        ctx.lineTo(-104, 166);
        ctx.lineTo(-42, 152);
        ctx.closePath();
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(42, 102);
        ctx.lineTo(104, 166);
        ctx.lineTo(42, 152);
        ctx.closePath();
        ctx.fill();

        ctx.strokeStyle = "rgba(255,255,255,0.42)";
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(-20, -112);
        ctx.lineTo(-20, 130);
        ctx.stroke();

        ctx.restore();
    }

    /**
     * 绘制测试 HUD 文案。
     *
     * @param {CanvasRenderingContext2D} ctx Canvas 上下文
     * @param {number} w 画布宽度
     * @param {number} h 画布高度
     * @param {number} progress 播放进度
     * @param {string} title 入场标题
     * @param {string} userInfo 用户身份信息
     */
    function drawHud(ctx, w, h, progress, title, userInfo) {
        const enter = Math.min(1, Math.max(0, (progress - 0.1) / 0.18));
        const leave = Math.min(1, Math.max(0, (1 - progress) / 0.14));
        const alpha = easeInOutCubic(enter) * leave;
        const y = h * 0.16 - (1 - enter) * 20;

        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.textAlign = "center";
        ctx.fillStyle = "rgba(15,23,42,0.68)";
        ctx.strokeStyle = "rgba(248,113,113,0.72)";
        ctx.lineWidth = 2;
        roundRect(ctx, w * 0.5 - 350, y - 56, 700, 120, 18);
        ctx.fill();
        ctx.stroke();
        ctx.shadowColor = "rgba(248,113,113,0.95)";
        ctx.shadowBlur = 22;
        ctx.fillStyle = "#fee2e2";
        ctx.font = "700 16px serif";
        ctx.fillText("DF-5C STRATEGIC LAUNCH PREVIEW", w * 0.5, y - 24);
        ctx.fillStyle = "#fecaca";
        ctx.font = "700 18px serif";
        ctx.fillText(userInfo, w * 0.5, y + 8, 640);
        ctx.fillStyle = "#ffffff";
        ctx.font = "900 34px serif";
        ctx.fillText(title, w * 0.5, y + 45, 640);
        ctx.restore();
    }

    /**
     * 绘制圆角矩形路径。
     *
     * @param {CanvasRenderingContext2D} ctx Canvas 上下文
     * @param {number} x 左上角 x
     * @param {number} y 左上角 y
     * @param {number} w 宽度
     * @param {number} h 高度
     * @param {number} r 圆角半径
     */
    function roundRect(ctx, x, y, w, h, r) {
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.closePath();
    }

    /**
     * 启动东风-5C洲际导弹发射预览特效。
     *
     * @param {HTMLCanvasElement} canvas 全屏特效画布
     * @param {Function} onEnd 结束回调
     * @param {object} options 特效附加参数
     * @returns {{cancel: Function}}
     */
    function start(canvas, onEnd, options = {}) {
        const ctx = canvas.getContext("2d");
        const w = canvas.width;
        const h = canvas.height;
        const particles = createParticles(120);
        const title = String(options.effect_title || "东风-5C 洲际导弹 升空").trim() || "东风-5C 洲际导弹 升空";
        const userInfo = String(options.effect_user_info || "").trim();
        const startTime = performance.now();
        let animId = null;
        let finished = false;

        /**
         * 统一结束动画，手动取消时只清理不回调。
         *
         * @param {boolean} canceled 是否为手动取消
         */
        function finish(canceled) {
            if (finished) {
                return;
            }

            finished = true;
            if (animId) {
                cancelAnimationFrame(animId);
            }
            ctx.clearRect(0, 0, w, h);
            if (!canceled) {
                onEnd();
            }
        }

        /**
         * 逐帧绘制发射动画。
         *
         * @param {number} now 当前高精度时间
         */
        function animate(now) {
            const progress = Math.min(1, (now - startTime) / DURATION);
            const launch = easeInOutCubic(Math.min(1, progress / 0.78));
            const launchX = w * (0.18 + launch * 0.66);
            const launchY = h * (0.78 - launch * 0.95);
            const scale = Math.min(1.08, Math.max(0.7, w / 1240));
            const tailX = launchX - Math.sin(0.62) * 168 * scale;
            const tailY = launchY + Math.cos(0.62) * 168 * scale;

            ctx.clearRect(0, 0, w, h);
            drawBackdrop(ctx, w, h, progress);
            drawLaunchPad(ctx, w, h, progress);
            drawExhaust(ctx, particles, tailX, tailY, progress);
            drawMissile(ctx, launchX, launchY, scale, progress);
            drawHud(ctx, w, h, progress, title, userInfo);

            if (progress < 1) {
                animId = requestAnimationFrame(animate);
            } else {
                finish(false);
            }
        }

        animId = requestAnimationFrame(animate);

        return {
            cancel() {
                finish(true);
            },
        };
    }

    return { start };
})();

window.Df5cEffect = Df5cEffect;