#!/usr/bin/env python3
"""
將Mobile視圖轉換為Web視圖的轉換腳本
基於 system_views.json 生成 system_views_web_complete.json
"""

import json
import re
from datetime import datetime

def convert_view_id(mobile_id):
    """將Mobile視圖ID轉換為Web格式"""
    if mobile_id and mobile_id.startswith('UI_'):
        return mobile_id.replace('UI_', 'Page_') + '_W'
    return mobile_id

def get_web_enhancements_for_type(component_type, component_name):
    """根據組件類型返回Web端增強功能"""
    enhancements = {}
    
    # 通用增強
    enhancements["hover_effects"] = True
    
    # 按類型分別處理
    if component_type == "Button":
        enhancements.update({
            "keyboard_shortcut": "Enter",
            "loading_state": True,
            "hover_animation": True
        })
    elif component_type == "InputField":
        enhancements.update({
            "auto_complete": True,
            "validation_messages": "inline",
            "focus_ring": True
        })
    elif component_type == "Chart":
        enhancements.update({
            "interactive_legend": True,
            "zoom_pan": True,
            "export_data": True
        })
    elif component_type == "List":
        enhancements.update({
            "virtual_scrolling": True,
            "multi_select": True,
            "keyboard_navigation": True
        })
    elif component_type == "Modal":
        enhancements.update({
            "keyboard_shortcuts": ["Escape"],
            "backdrop_click_close": True,
            "focus_trap": True
        })
    
    return enhancements

def get_web_features_for_view(view_type, view_name):
    """根據視圖類型返回Web端特性"""
    features = {
        "multi_window": False,
        "keyboard_shortcuts": ["Escape"],
        "responsive_breakpoints": ["desktop", "tablet", "mobile"],
        "hover_effects": True
    }
    
    # 學習類視圖增強
    if view_type in ["Learning", "Practice"]:
        features.update({
            "multi_window": True,
            "keyboard_shortcuts": ["Space", "Enter", "Ctrl+S", "Escape"],
            "audio_controls": True
        })
    
    # 表單類視圖增強
    elif view_type == "Form":
        features.update({
            "form_validation": "realtime",
            "keyboard_shortcuts": ["Tab", "Enter", "Escape"],
            "auto_save": True
        })
    
    # 儀表板類視圖增強
    elif view_type == "Dashboard":
        features.update({
            "multi_window": True,
            "keyboard_shortcuts": ["Ctrl+F", "Ctrl+R", "Escape"],
            "data_export": True
        })
    
    return features

def add_web_specific_components(components, view_type):
    """為視圖添加Web特有組件"""
    web_components = []
    
    # 為所有視圖添加快捷鍵提示
    if view_type in ["Learning", "Practice"]:
        web_components.append({
            "name": "快捷鍵提示面板",
            "type": "ShortcutPanel",
            "interaction": "顯示可用快捷鍵",
            "action": "切換顯示",
            "navigation_view_id": None,
            "web_enhancements": {
                "contextual_shortcuts": True,
                "toggle_visibility": "Ctrl+/"
            }
        })
    
    # 為儀表板添加工具列
    if view_type == "Dashboard":
        web_components.append({
            "name": "工具列",
            "type": "Toolbar", 
            "interaction": "快速功能存取",
            "action": "執行常用操作",
            "navigation_view_id": None,
            "web_enhancements": {
                "customizable_layout": True,
                "tooltip_hints": True
            }
        })
    
    return web_components

def convert_mobile_to_web_view(mobile_view):
    """轉換單個Mobile視圖為Web視圖"""
    web_view = mobile_view.copy()
    
    # 轉換視圖ID
    web_view["view_id"] = convert_view_id(mobile_view["view_id"])
    
    # 增強交互描述
    if "interaction" in web_view:
        web_view["interaction"] += "，支援鍵盤導航和快捷鍵"
    
    # 添加Web特性
    web_view["web_features"] = get_web_features_for_view(
        mobile_view.get("type", ""), 
        mobile_view.get("name", "")
    )
    
    # 處理組件
    if "components" in mobile_view:
        web_components = []
        for component in mobile_view["components"]:
            web_component = component.copy()
            
            # 轉換導航ID
            if "navigation_view_id" in web_component and web_component["navigation_view_id"]:
                web_component["navigation_view_id"] = convert_view_id(web_component["navigation_view_id"])
            
            # 添加Web增強功能
            web_component["web_enhancements"] = get_web_enhancements_for_type(
                component.get("type", ""),
                component.get("name", "")
            )
            
            web_components.append(web_component)
        
        # 添加Web特有組件
        web_specific = add_web_specific_components(web_components, mobile_view.get("type", ""))
        web_components.extend(web_specific)
        
        web_view["components"] = web_components
    
    return web_view

def main():
    """主轉換函數"""
    print("🚀 開始轉換Mobile視圖為Web視圖...")
    
    # 讀取Mobile視圖文件
    with open('/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_views.json', 'r', encoding='utf-8') as f:
        mobile_data = json.load(f)
    
    print(f"📱 讀取到 {len(mobile_data['views'])} 個Mobile視圖")
    
    # 轉換所有視圖
    web_views = []
    for mobile_view in mobile_data['views']:
        web_view = convert_mobile_to_web_view(mobile_view)
        web_views.append(web_view)
    
    # 構建完整的Web視圖數據
    web_data = {
        "views": web_views,
        "web_global_features": {
            "common_shortcuts": {
                "Ctrl+/": "顯示快捷鍵幫助",
                "Escape": "關閉模態/返回",
                "Ctrl+S": "保存進度",
                "Ctrl+Z": "撤銷操作",
                "Ctrl+Y": "重做操作",
                "Tab": "導航焦點",
                "Shift+Tab": "反向導航",
                "Enter": "確認操作",
                "Space": "播放/暫停",
                "Ctrl+F": "搜尋功能",
                "Ctrl+R": "重新整理"
            },
            "accessibility": {
                "screen_reader": True,
                "high_contrast": True,
                "keyboard_only": True,
                "focus_indicators": True,
                "aria_labels": True,
                "skip_links": True
            },
            "responsive_design": {
                "breakpoints": {
                    "desktop": "1200px+",
                    "laptop": "992px-1199px",
                    "tablet": "768px-991px", 
                    "mobile": "320px-767px"
                },
                "layout_adaptation": True,
                "touch_optimization": "tablet_mobile",
                "fluid_typography": True
            },
            "performance": {
                "lazy_loading": True,
                "virtual_scrolling": True,
                "code_splitting": True,
                "caching_strategy": "progressive",
                "image_optimization": True,
                "bundle_optimization": True
            },
            "user_experience": {
                "loading_states": True,
                "error_boundaries": True,
                "offline_support": "basic",
                "progressive_enhancement": True,
                "smooth_animations": True
            }
        },
        "web_component_types": {
            "Layout": ["Sidebar", "Header", "Footer", "Grid", "Flex"],
            "Navigation": ["Breadcrumb", "Tabs", "Pagination", "Menu"],
            "Input": ["SmartInput", "Dropdown", "DatePicker", "FileUpload"],
            "Display": ["Chart", "Table", "Card", "Badge", "Avatar"],
            "Feedback": ["Toast", "Modal", "Tooltip", "ProgressBar"],
            "Interactive": ["Button", "Link", "Toggle", "Slider"],
            "Media": ["AudioPlayer", "VideoPlayer", "ImageGallery"],
            "Specialized": ["ShortcutPanel", "AssistancePanel", "AnalysisPanel"]
        },
        "metadata": {
            "generated_from": "system_views.json (Mobile UI)",
            "conversion_date": datetime.now().strftime("%Y-%m-%d"),
            "total_web_views": len(web_views),
            "conversion_script": "convert_views_to_web.py",
            "naming_convention": "UI_* -> Page_*_W",
            "web_enhancements_added": [
                "Multi-window support",
                "Comprehensive keyboard shortcuts",
                "Advanced hover effects",
                "Enhanced navigation patterns",
                "Desktop-optimized layouts",
                "Advanced form controls",
                "Real-time feedback systems",
                "Full accessibility features",
                "Performance optimizations",
                "Responsive design patterns"
            ],
            "compatibility": {
                "browsers": ["Chrome 90+", "Firefox 88+", "Safari 14+", "Edge 90+"],
                "frameworks": ["React", "Vue", "Angular"],
                "css_features": ["Grid", "Flexbox", "CSS Variables", "Container Queries"]
            }
        }
    }
    
    # 寫入Web視圖文件
    output_file = '/Users/jettcheng1018/code/dramaling-app/docs/02_design/function-specs/common/system_views_web_complete.json'
    with open(output_file, 'w', encoding='utf-8') as f:
        json.dump(web_data, f, ensure_ascii=False, indent=2)
    
    print(f"💻 成功生成 {len(web_views)} 個Web視圖")
    print(f"📄 輸出文件: system_views_web_complete.json")
    print("✅ 轉換完成！")

if __name__ == "__main__":
    main()