/**
 * 汽车360°全景展示应用
 * 支持触摸滑动、自动旋转、惯性效果
 */

class Car360Viewer {
    constructor() {
        // 配置
        this.config = {
            totalFrames: 400,          // 总帧数
            framesPerSwipe: 1,         // 每像素滑动切换的帧数
            inertiaFriction: 0.95,     // 惯性摩擦系数
            minVelocity: 0.1,          // 最小速度阈值
            autoRotateSpeed: 80,       // 自动旋转速度（ms/帧）
            autoRotateDelay: 3000,     // 停止操作后自动旋转延迟（ms）
            imagePath: './images/',    // 图片路径
            imagePrefix: 'car_',       // 图片前缀
            imageExt: '.jpg'           // 图片扩展名
        };

        // 状态
        this.state = {
            currentFrame: 0,
            isDragging: false,
            startX: 0,
            lastX: 0,
            velocity: 0,
            images: [],
            loaded: false,
            animationId: null,
            autoRotateTimer: null,
            autoRotateInterval: null
        };

        // DOM元素
        this.elements = {
            canvas: document.getElementById('carCanvas'),
            loadingScreen: document.getElementById('loadingScreen'),
            loadingProgress: document.getElementById('loadingProgress'),
            loadingText: document.getElementById('loadingText')
        };

        this.ctx = this.elements.canvas.getContext('2d');
        
        this.init();
    }

    init() {
        this.setupCanvas();
        this.bindEvents();
        this.loadImages();
    }

    setupCanvas() {
        const rect = this.elements.canvas.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        
        this.elements.canvas.width = rect.width * dpr;
        this.elements.canvas.height = rect.height * dpr;
        this.ctx.scale(dpr, dpr);
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            const newRect = this.elements.canvas.getBoundingClientRect();
            this.elements.canvas.width = newRect.width * dpr;
            this.elements.canvas.height = newRect.height * dpr;
            this.ctx.scale(dpr, dpr);
            this.renderFrame(this.state.currentFrame);
        });
    }

    bindEvents() {
        const viewer = this.elements.canvas;
        
        // 触摸事件
        viewer.addEventListener('touchstart', this.handleStart.bind(this), { passive: false });
        viewer.addEventListener('touchmove', this.handleMove.bind(this), { passive: false });
        viewer.addEventListener('touchend', this.handleEnd.bind(this), { passive: false });
    }

    handleStart(e) {
        e.preventDefault();
        this.stopInertia();
        this.stopAutoRotate();
        
        const touch = e.touches[0];
        this.state.isDragging = true;
        this.state.startX = touch.clientX;
        this.state.lastX = touch.clientX;
        this.state.velocity = 0;
    }

    handleMove(e) {
        if (!this.state.isDragging) return;
        e.preventDefault();
        
        const touch = e.touches[0];
        const deltaX = touch.clientX - this.state.lastX;
        
        // 计算速度
        this.state.velocity = deltaX;
        
        // 根据滑动距离更新帧
        const frameDelta = Math.round(deltaX / 5);
        if (frameDelta !== 0) {
            this.state.lastX = touch.clientX;
            this.updateFrame(frameDelta);
        }
    }

    handleEnd(e) {
        if (!this.state.isDragging) return;
        this.state.isDragging = false;
        
        // 启动惯性动画
        if (Math.abs(this.state.velocity) > this.config.minVelocity) {
            this.startInertia();
        } else {
            // 没有惯性，延迟启动自动旋转
            this.scheduleAutoRotate();
        }
    }

    startInertia() {
        const animate = () => {
            this.state.velocity *= this.config.inertiaFriction;
            
            if (Math.abs(this.state.velocity) > this.config.minVelocity) {
                const frameDelta = Math.round(this.state.velocity / 5);
                if (frameDelta !== 0) {
                    this.updateFrame(frameDelta);
                }
                this.state.animationId = requestAnimationFrame(animate);
            } else {
                // 惯性结束，启动自动旋转
                this.scheduleAutoRotate();
            }
        };
        
        this.state.animationId = requestAnimationFrame(animate);
    }

    stopInertia() {
        if (this.state.animationId) {
            cancelAnimationFrame(this.state.animationId);
            this.state.animationId = null;
        }
        this.state.velocity = 0;
    }

    updateFrame(delta) {
        let newFrame = this.state.currentFrame + delta;
        
        // 循环处理
        while (newFrame < 0) newFrame += this.config.totalFrames;
        newFrame = newFrame % this.config.totalFrames;
        
        this.state.currentFrame = newFrame;
        this.renderFrame(newFrame);
    }

    async loadImages() {
        // 首先尝试加载文件系统图片
        try {
            const images = [];
            let loadedCount = 0;
            
            this.updateLoadingProgress(0, '正在加载图片资源...');
            
            for (let i = 0; i < this.config.totalFrames; i++) {
                const img = new Image();
                const frameNum = String(i + 1).padStart(3, '0');
                img.src = `${this.config.imagePath}${this.config.imagePrefix}${frameNum}${this.config.imageExt}`;
                
                await new Promise((resolve, reject) => {
                    img.onload = () => {
                        loadedCount++;
                        const progress = Math.round((loadedCount / this.config.totalFrames) * 100);
                        this.updateLoadingProgress(progress, `加载中 ${loadedCount}/${this.config.totalFrames}`);
                        resolve(img);
                    };
                    img.onerror = () => reject(new Error(`Failed to load frame ${i}`));
                });
                
                images.push(img);
            }
            
            this.updateLoadingProgress(100, '加载完成');
            
            this.state.images = images;
            this.state.loaded = true;
            
            setTimeout(() => {
                this.hideLoading();
                this.renderFrame(0);
            }, 500);
            
            console.log('Loaded', images.length, 'frames from files');
            return;
            
        } catch (error) {
            console.log('File load failed:', error.message);
        }

        // 尝试从 IndexedDB 加载
        this.updateLoadingProgress(0, '正在从缓存加载...');
        const indexedDBFrames = await this.loadFromIndexedDB();
        if (indexedDBFrames && indexedDBFrames.length > 0) {
            this.state.images = indexedDBFrames;
            this.state.loaded = true;
            this.config.totalFrames = indexedDBFrames.length;
            this.updateLoadingProgress(100, '加载完成');
            setTimeout(() => {
                this.hideLoading();
                this.renderFrame(0);
            }, 500);
            return;
        }

        // 演示模式
        console.log('Using demo mode');
        this.updateLoadingProgress(100, '进入演示模式');
        setTimeout(() => {
            this.hideLoading();
            this.startDemoMode();
        }, 500);
    }

    updateLoadingProgress(percent, text) {
        if (this.elements.loadingProgress) {
            this.elements.loadingProgress.style.width = `${percent}%`;
        }
        if (this.elements.loadingText) {
            this.elements.loadingText.textContent = text;
        }
    }

    hideLoading() {
        if (this.elements.loadingScreen) {
            this.elements.loadingScreen.classList.add('hidden');
        }
        // 加载完成后启动自动旋转
        this.startAutoRotate();
    }

    scheduleAutoRotate() {
        // 清除之前的定时器
        if (this.state.autoRotateTimer) {
            clearTimeout(this.state.autoRotateTimer);
        }
        // 延迟启动自动旋转
        this.state.autoRotateTimer = setTimeout(() => {
            this.startAutoRotate();
        }, this.config.autoRotateDelay);
    }

    startAutoRotate() {
        // 清除之前的自动旋转
        this.stopAutoRotate();
        
        // 启动新的自动旋转
        this.state.autoRotateInterval = setInterval(() => {
            this.updateFrame(1);
        }, this.config.autoRotateSpeed);
    }

    stopAutoRotate() {
        if (this.state.autoRotateTimer) {
            clearTimeout(this.state.autoRotateTimer);
            this.state.autoRotateTimer = null;
        }
        if (this.state.autoRotateInterval) {
            clearInterval(this.state.autoRotateInterval);
            this.state.autoRotateInterval = null;
        }
    }

    loadFromIndexedDB() {
        return new Promise((resolve) => {
            const request = indexedDB.open('Car360DB', 1);
            
            request.onerror = () => {
                console.log('IndexedDB error');
                resolve(null);
            };
            
            request.onupgradeneeded = (e) => {
                const db = e.target.result;
                if (!db.objectStoreNames.contains('frames')) {
                    db.createObjectStore('frames', { keyPath: 'id' });
                }
            };
            
            request.onsuccess = async () => {
                const db = request.result;
                
                try {
                    if (!db.objectStoreNames.contains('frames')) {
                        db.close();
                        resolve(null);
                        return;
                    }
                    
                    const tx = db.transaction('frames', 'readonly');
                    const store = tx.objectStore('frames');
                    const getRequest = store.get('frames');
                    
                    getRequest.onsuccess = async () => {
                        if (getRequest.result && getRequest.result.data && getRequest.result.data.length > 0) {
                            console.log('Loading', getRequest.result.data.length, 'frames from IndexedDB');
                            const images = getRequest.result.data.map(dataUrl => {
                                const img = new Image();
                                img.src = dataUrl;
                                return img;
                            });
                            
                            await Promise.all(images.map(img => 
                                new Promise(res => { 
                                    img.onload = () => res(); 
                                    img.onerror = () => res(); 
                                })
                            ));
                            
                            db.close();
                            resolve(images);
                        } else {
                            console.log('No frames data in IndexedDB');
                            db.close();
                            resolve(null);
                        }
                    };
                    
                    getRequest.onerror = () => {
                        console.log('Failed to get frames from IndexedDB');
                        db.close();
                        resolve(null);
                    };
                } catch (e) {
                    console.log('IndexedDB exception:', e);
                    db.close();
                    resolve(null);
                }
            };
        });
    }

    startDemoMode() {
        // 演示模式：生成占位图形
        this.state.loaded = true;
        this.renderFrame(0);
    }

    renderFrame(frameIndex) {
        const canvas = this.elements.canvas;
        const ctx = this.ctx;
        const rect = canvas.getBoundingClientRect();
        const width = rect.width;
        const height = rect.height;
        
        // 清空画布
        ctx.clearRect(0, 0, width, height);
        
        const img = this.state.images[frameIndex];
        if (img && img.complete && img.naturalWidth > 0) {
            // 绘制真实图片
            const scale = Math.max(width / img.naturalWidth, height / img.naturalHeight);
            const x = (width - img.naturalWidth * scale) / 2;
            const y = (height - img.naturalHeight * scale) / 2;
            
            ctx.drawImage(img, x, y, img.naturalWidth * scale, img.naturalHeight * scale);
        } else {
            // 演示模式：绘制占位图形
            this.drawDemoFrame(ctx, width, height, frameIndex);
        }
    }

    drawDemoFrame(ctx, width, height, frameIndex) {
        const angle = (frameIndex / this.config.totalFrames) * Math.PI * 2;
        
        // 背景渐变
        const gradient = ctx.createLinearGradient(0, 0, width, height);
        gradient.addColorStop(0, '#1a1a2e');
        gradient.addColorStop(1, '#16213e');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
        
        // 网格效果
        ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)';
        ctx.lineWidth = 1;
        const gridSize = 30;
        
        for (let x = 0; x < width; x += gridSize) {
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, height);
            ctx.stroke();
        }
        
        for (let y = 0; y < height; y += gridSize) {
            ctx.beginPath();
            ctx.moveTo(0, y);
            ctx.lineTo(width, y);
            ctx.stroke();
        }
        
        // 绘制示意汽车（简化的3D效果）
        const centerX = width / 2;
        const centerY = height / 2;
        
        // 车身主体
        ctx.save();
        ctx.translate(centerX, centerY);
        
        // 阴影
        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        ctx.beginPath();
        ctx.ellipse(0, height * 0.25, width * 0.35, height * 0.08, 0, 0, Math.PI * 2);
        ctx.fill();
        
        // 车身渐变
        const bodyGradient = ctx.createLinearGradient(0, -height * 0.3, 0, height * 0.2);
        bodyGradient.addColorStop(0, '#4a4a5a');
        bodyGradient.addColorStop(0.5, '#2a2a3a');
        bodyGradient.addColorStop(1, '#1a1a2a');
        
        // 车身形状（根据角度变化）
        const perspective = Math.cos(angle);
        const bodyWidth = width * 0.35 * Math.abs(perspective) + width * 0.15;
        const bodyHeight = height * 0.18;
        
        ctx.fillStyle = bodyGradient;
        ctx.beginPath();
        ctx.roundRect(-bodyWidth, -bodyHeight, bodyWidth * 2, bodyHeight * 2, 10);
        ctx.fill();
        
        // 车顶
        const roofGradient = ctx.createLinearGradient(0, -height * 0.35, 0, -height * 0.15);
        roofGradient.addColorStop(0, '#5a5a6a');
        roofGradient.addColorStop(1, '#3a3a4a');
        
        ctx.fillStyle = roofGradient;
        ctx.beginPath();
        ctx.roundRect(-bodyWidth * 0.7, -height * 0.35, bodyWidth * 1.4, height * 0.2, [15, 15, 5, 5]);
        ctx.fill();
        
        // 车窗
        ctx.fillStyle = 'rgba(0, 212, 255, 0.3)';
        ctx.beginPath();
        const windowWidth = bodyWidth * 0.5;
        ctx.roundRect(-windowWidth, -height * 0.32, windowWidth * 2, height * 0.12, 5);
        ctx.fill();
        
        // 车灯光效
        const lightIntensity = 0.5 + Math.sin(angle * 2) * 0.3;
        
        // 左车灯
        const leftLightGradient = ctx.createRadialGradient(
            -bodyWidth * 0.8, 0, 0,
            -bodyWidth * 0.8, 0, 30
        );
        leftLightGradient.addColorStop(0, `rgba(255, 220, 100, ${lightIntensity})`);
        leftLightGradient.addColorStop(1, 'rgba(255, 220, 100, 0)');
        ctx.fillStyle = leftLightGradient;
        ctx.beginPath();
        ctx.arc(-bodyWidth * 0.8, 0, 30, 0, Math.PI * 2);
        ctx.fill();
        
        // 右车灯
        const rightLightGradient = ctx.createRadialGradient(
            bodyWidth * 0.8, 0, 0,
            bodyWidth * 0.8, 0, 30
        );
        rightLightGradient.addColorStop(0, `rgba(255, 100, 100, ${lightIntensity})`);
        rightLightGradient.addColorStop(1, 'rgba(255, 100, 100, 0)');
        ctx.fillStyle = rightLightGradient;
        ctx.beginPath();
        ctx.arc(bodyWidth * 0.8, 0, 30, 0, Math.PI * 2);
        ctx.fill();
        
        // 车轮
        ctx.fillStyle = '#1a1a2a';
        ctx.strokeStyle = '#3a3a4a';
        ctx.lineWidth = 3;
        
        // 左轮
        ctx.beginPath();
        ctx.ellipse(-bodyWidth * 0.6, bodyHeight, 25, 20, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
        
        // 右轮
        ctx.beginPath();
        ctx.ellipse(bodyWidth * 0.6, bodyHeight, 25, 20, 0, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
        
        ctx.restore();
        
        // 帧号显示
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.font = '14px monospace';
        ctx.textAlign = 'center';
        ctx.fillText(`帧 ${frameIndex + 1}/${this.config.totalFrames}`, centerX, height - 20);
        
        // 演示模式提示
        ctx.fillStyle = 'rgba(0, 212, 255, 0.6)';
        ctx.font = '12px sans-serif';
        ctx.fillText('演示模式 - 请添加实际序列帧图片到 images 文件夹', centerX, 30);
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    window.carViewer = new Car360Viewer();
});