#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
完整多摄像头网格布局Flask应用
支持6个摄像头的实时监控网格布局
"""

from flask import Flask, render_template_string, request, jsonify
import requests
import json
import logging
import time
import os
import resource
from datetime import datetime

# 配置日志
logging.basicConfig(
    level=logging.INFO,
    format='%(asctime)s - %(levelname)s - %(message)s',
    handlers=[
        logging.FileHandler('complete_multi_camera.log', encoding='utf-8'),
        logging.StreamHandler()
    ]
)
logger = logging.getLogger(__name__)

app = Flask(__name__)

class CompleteCameraManager:
    def __init__(self):
        self.base_url = "http://10.80.0.2:5045"
        self.login_api = f"{self.base_url}/api/user/login"
        self.camera_url = f"{self.base_url}/adaops/blank-layout/camera-view"
        self.session = requests.Session()
        self.token = None
        self.last_login_time = None
        self.is_logged_in = False
        
        # 配置请求头
        self.session.headers.update({
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
            'Accept': 'application/json, text/plain, */*',
            'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
            'Content-Type': 'application/json',
            'Connection': 'keep-alive',
        })
        
        # 账号信息
        self.username = "hao.wang@westwell-lab.com"
        self.password = "wh707297"
        
        # 摄像头配置
        self.cameras = [
            {
                'id': 1,
                'room': 'cnfzhjyg-igv-251',
                'camera': 'mixed',
                'name': '1号车',
                'url': f"{self.camera_url}?room=cnfzhjyg-igv-251&camera=mixed"
            },
            {
                'id': 2,
                'room': 'cnfzhjyg-igv-2',
                'camera': 'mixed',
                'name': '2号车',
                'url': f"{self.camera_url}?room=cnfzhjyg-igv-2&camera=mixed"
            },
            {
                'id': 3,
                'room': 'cnfzhjyg-igv-3',
                'camera': 'mixed',
                'name': '3号车',
                'url': f"{self.camera_url}?room=cnfzhjyg-igv-3&camera=mixed"
            },
            {
                'id': 4,
                'room': 'cnfzhjyg-igv-5',
                'camera': 'mixed',
                'name': '5号车',
                'url': f"{self.camera_url}?room=cnfzhjyg-igv-5&camera=mixed"
            },
            {
                'id': 5,
                'room': 'cnfzhjyg-igv-6',
                'camera': 'mixed',
                'name': '6号车',
                'url': f"{self.camera_url}?room=cnfzhjyg-igv-6&camera=mixed"
            },
            {
                'id': 6,
                'room': 'cnfzhjyg-igv-7',
                'camera': 'mixed',
                'name': '7号车',
                'url': f"{self.camera_url}?room=cnfzhjyg-igv-7&camera=mixed"
            }
        ]
        
        # 不进行自动登录
        # self.auto_login()
    
    def login(self):
        """登录系统"""
        logger.info("正在登录系统...")
        
        login_data = {
            'username': self.username,
            'password': self.password,
            'email': self.username,
            'user': self.username,
            'account': self.username
        }
        
        try:
            response = self.session.post(
                self.login_api,
                json=login_data,
                timeout=10
            )
            
            if response.status_code == 200:
                response_data = response.json()
                self.token = response_data.get('token')
                self.last_login_time = datetime.now()
                self.is_logged_in = True
                
                # 更新认证头
                if self.token:
                    self.session.headers.update({
                        'Authorization': f'Bearer {self.token}'
                    })
                
                logger.info("登录成功！")
                return True
            else:
                logger.error(f"登录失败，状态码: {response.status_code}")
                return False
                
        except Exception as e:
            logger.error(f"登录请求失败: {e}")
            return False
    

# 创建全局摄像头管理器
camera_manager = CompleteCameraManager()

# 完整的HTML模板
HTML_TEMPLATE = '''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多摄像头实时监控 - AdaOps</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background: #1a1a1a;
            color: white;
            overflow-x: hidden;
        }
        .controls {
            background: #3a3a3a;
            padding: 8px 12px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            border-bottom: 1px solid #555;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .btn {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        .btn:hover {
            background: #45a049;
            transform: translateY(-2px);
        }
        .btn-refresh {
            background: #2196F3;
        }
        .btn-refresh:hover {
            background: #1976D2;
        }
        .camera-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            padding: 0;
            max-width: 100%;
            height: calc(100vh - 80px);
        }
        .camera-item {
            background: #2d2d2d;
            border-radius: 0;
            overflow: hidden;
            box-shadow: none;
            transition: all 0.3s ease;
            border: 1px solid #444;
            position: relative;
        }
        .camera-item:hover {
            transform: none;
            box-shadow: inset 0 0 0 3px #4CAF50;
            border-color: #4CAF50;
            z-index: 10;
        }
        .camera-header {
            background: #3a3a3a;
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #555;
        }
        .camera-title {
            font-weight: bold;
            color: #4CAF50;
        }
        .camera-status {
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 10px;
            background: #4CAF50;
        }
        .camera-frame-container {
            position: relative;
            width: 100%;
            height: calc(100% - 80px);
            background: #000;
        }
        .camera-frame {
            width: 100%;
            height: 100%;
            border: none;
            background: #000;
            object-fit: contain;
        }
        .camera-controls {
            display: none;
        }
        .cam-btn {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            background: #555;
            color: white;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
            min-width: 30px;
        }
        .cam-btn:hover {
            background: #666;
            transform: scale(1.1);
        }
        .cam-btn.active {
            background: #4CAF50;
            transform: scale(1.1);
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }
        .cam-btn-fullscreen {
            background: #FF9800;
        }
        .cam-btn-fullscreen:hover {
            background: #F57C00;
        }
        .camera-controls-combined {
            background: #3a3a3a;
            padding: 6px;
            display: flex;
            gap: 3px;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            border-top: 1px solid #555;
        }
        .selector-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 2px;
            background: #666;
            color: white;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
            min-width: 25px;
        }
        .selector-btn:hover {
            background: #777;
            transform: scale(1.05);
        }
        .selector-btn.active {
            background: #2196F3;
            transform: scale(1.1);
            box-shadow: 0 0 3px rgba(33, 150, 243, 0.5);
        }
        .info-panel {
            position: fixed;
            top: 5px;
            left: 5px;
            background: rgba(45, 45, 45, 0.9);
            padding: 5px 8px;
            border-radius: 4px;
            font-size: 9px;
            max-width: 180px;
            backdrop-filter: blur(5px);
            z-index: 999;
            border: 1px solid #555;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            line-height: 1.2;
        }
        .status-info {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-left: auto;
            font-size: 12px;
            color: #ccc;
        }
        .status-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .status-item strong {
            color: #4CAF50;
        }
        .info-item {
            margin: 5px 0;
        }
        .info-item strong {
            color: #4CAF50;
        }
        @media (max-width: 1200px) {
            .camera-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 768px) {
            .camera-grid {
                grid-template-columns: 1fr;
                padding: 10px;
            }
            .controls {
                flex-direction: column;
            }
            .info-panel {
                position: relative;
                top: auto;
                left: auto;
                max-width: 100%;
                margin: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="controls">
        <button class="btn btn-refresh" onclick="refreshAllCameras()">🔄 刷新所有</button>
        <div class="status-info">
            <span class="status-item">时间: <span id="currentTime">{{ current_time }}</span></span>
        </div>
    </div>
    
    <div class="camera-grid" id="cameraGrid">
        {% for camera in cameras %}
        <div class="camera-item" id="camera-{{ camera.id }}">
            <div class="camera-header">
                <div class="camera-title">{{ camera.name }}</div>
                <div class="camera-status" id="status-{{ camera.id }}">✅ 在线</div>
            </div>
            <div class="camera-frame-container">
                <iframe 
                    class="camera-frame"
                    src="{{ camera.url }}"
                    allow="autoplay; fullscreen"
                    allowfullscreen
                    id="frame-{{ camera.id }}"
                    loading="lazy">
                </iframe>
            </div>
            <div class="camera-controls-combined" id="controls-{{ camera.id }}">
                <button class="cam-btn" onclick="refreshCamera({{ camera.id }})">刷新</button>
                <button class="cam-btn cam-btn-fullscreen" onclick="toggleFullscreen({{ camera.id }})">全屏</button>
                <button class="selector-btn active" onclick="switchCameraNumber({{ camera.id }}, 'mixed')">混合</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 0)">0</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 1)">1</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 2)">2</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 3)">3</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 4)">4</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 5)">5</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 6)">6</button>
                <button class="selector-btn" onclick="switchCameraNumber({{ camera.id }}, 7)">7</button>
            </div>
        </div>
        {% endfor %}
    </div>

    <script>
        function refreshCamera(cameraId) {
            const frame = document.getElementById(`frame-${cameraId}`);
            const status = document.getElementById(`status-${cameraId}`);
            
            status.textContent = '🔄 刷新中...';
            
            // 添加时间戳避免缓存
            const originalSrc = frame.src.split('?')[0];
            frame.src = originalSrc + `?t=${Date.now()}`;
            
            setTimeout(() => {
                status.textContent = '✅ 在线';
            }, 2000);
        }
        
        function refreshAllCameras() {
            document.querySelectorAll('.camera-status').forEach(status => {
                status.textContent = '🔄 刷新中...';
            });
            
            for (let i = 1; i <= 6; i++) {
                refreshCamera(i);
            }
        }
        
        function toggleFullscreen(cameraId) {
            const frame = document.getElementById(`frame-${cameraId}`);
            
            if (!document.fullscreenElement) {
                if (frame.requestFullscreen) {
                    frame.requestFullscreen();
                } else if (frame.webkitRequestFullscreen) {
                    frame.webkitRequestFullscreen();
                } else if (frame.msRequestFullscreen) {
                    frame.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        }
        
        
        function switchCameraNumber(cameraId, cameraNumber) {
            const frame = document.getElementById(`frame-${cameraId}`);
            const controls = document.getElementById(`controls-${cameraId}`);
            const buttons = controls.querySelectorAll('.selector-btn');
            
            // 更新按钮状态
            buttons.forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 更新摄像头URL
            const currentUrl = frame.src;
            const baseUrl = currentUrl.split('?')[0];
            const params = new URLSearchParams(currentUrl.split('?')[1]);
            const room = params.get('room');
            
            // 构建新的URL
            let newUrl;
            if (cameraNumber === 'mixed') {
                newUrl = `${baseUrl}?room=${room}&camera=mixed&t=${Date.now()}`;
            } else {
                newUrl = `${baseUrl}?room=${room}&camera=camera-${cameraNumber}&t=${Date.now()}`;
            }
            frame.src = newUrl;
            
            // 更新状态显示
            const status = document.getElementById(`status-${cameraId}`);
            status.textContent = '🔄 切换中...';
            
            setTimeout(() => {
                status.textContent = '✅ 在线';
            }, 1000);
        }
        
        
        function updateCurrentTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            document.getElementById('currentTime').textContent = timeString;
        }
        
        // 每秒更新当前时间
        setInterval(updateCurrentTime, 1000);
        
        // 页面加载时更新时间
        window.onload = function() {
            updateCurrentTime();
        };
    </script>
</body>
</html>
'''

@app.route('/')
def index():
    """主页面 - 显示6个摄像头的网格布局"""
    return render_template_string(HTML_TEMPLATE, 
                                base_url=camera_manager.base_url,
                                cameras=camera_manager.cameras,
                                current_time=datetime.now().strftime('%Y-%m-%d %H:%M:%S'))


if __name__ == '__main__':
    logger.info("启动多摄像头网格布局Flask应用...")
    print("=" * 50)
    print("🚀 多摄像头网格布局系统启动")
    print(f"📡 访问地址: http://127.0.0.1:5002")
    print(f"🎥 摄像头数量: 6个")
    print("=" * 50)
    
    # 使用不同的端口避免冲突
    app.run(host='0.0.0.0', port=5002, debug=False)