#!/usr/bin/env python3
"""
SamCloud Ultimate Home Lab Dashboard

A beautiful, Apple-like dashboard for monitoring your entire home lab infrastructure.
Inspired by macOS design principles with real-time monitoring capabilities.
"""

import json
import os
import platform
import psutil
import requests
import socket
import subprocess
import time
from datetime import datetime, timedelta
from pathlib import Path
from typing import Dict, List, Optional, Any
from flask import Flask, render_template_string, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

class UltimateHomeLab:
    def __init__(self):
        self.ddns_monitor_path = "/Volumes/SamMgmt/CF DDClient/ddns_monitor.py"
        self.start_time = datetime.now()
        
        # Service definitions with proper URLs and descriptions
        self.known_services = {
            'dashy': {
                'name': 'Dashy Dashboard',
                'description': 'Home lab dashboard and service launcher',
                'category': '📊 Dashboards',
                'icon': '🏠',
                'color': '#667eea'
            },
            'homepage': {
                'name': 'Homepage',
                'description': 'Modern home lab dashboard',
                'category': '📊 Dashboards', 
                'icon': '🏡',
                'color': '#4caf50'
            },
            'uptime-kuma': {
                'name': 'Uptime Kuma',
                'description': 'Uptime monitoring and status page',
                'category': '📊 Monitoring',
                'icon': '📈',
                'color': '#ff9800'
            },
            'openwebui': {
                'name': 'Open WebUI',
                'description': 'AI chat interface (Ollama frontend)',
                'category': '🤖 AI/ML',
                'icon': '🧠',
                'color': '#9c27b0'
            },
            'immich_server': {
                'name': 'Immich Photos',
                'description': 'Self-hosted photo and video management',
                'category': '📷 Media',
                'icon': '📸',
                'color': '#2196f3'
            },
            'npm': {
                'name': 'Nginx Proxy Manager',
                'description': 'Reverse proxy with SSL management',
                'category': '🔧 Infrastructure',
                'icon': '🌐',
                'color': '#4caf50'
            },
            'jellyseerr': {
                'name': 'Jellyseerr',
                'description': 'Media request management for Plex/Jellyfin',
                'category': '🎬 Media Automation',
                'icon': '🎭',
                'color': '#ff5722'
            },
            'radarr': {
                'name': 'Radarr',
                'description': 'Movie collection manager',
                'category': '🎬 Media Automation',
                'icon': '🎬',
                'color': '#ffc107'
            },
            'sonarr': {
                'name': 'Sonarr', 
                'description': 'TV series collection manager',
                'category': '🎬 Media Automation',
                'icon': '📺',
                'color': '#2196f3'
            },
            'lidarr': {
                'name': 'Lidarr',
                'description': 'Music collection manager',
                'category': '🎬 Media Automation',
                'icon': '🎵',
                'color': '#9c27b0'
            },
            'bazarr': {
                'name': 'Bazarr',
                'description': 'Subtitle manager for Radarr and Sonarr',
                'category': '🎬 Media Automation',
                'icon': '💬',
                'color': '#607d8b'
            },
            'prowlarr': {
                'name': 'Prowlarr',
                'description': 'Indexer manager for *arr suite',
                'category': '🎬 Media Automation',
                'icon': '🔍',
                'color': '#795548'
            },
            'jackett': {
                'name': 'Jackett',
                'description': 'Torrent indexer proxy',
                'category': '🎬 Media Automation',
                'icon': '🧥',
                'color': '#ff9800'
            },
            'qbittorrent': {
                'name': 'qBittorrent',
                'description': 'BitTorrent client',
                'category': '📥 Downloads',
                'icon': '💾',
                'color': '#4caf50'
            },
            'navidrome': {
                'name': 'Navidrome',
                'description': 'Music streaming server',
                'category': '🎵 Music',
                'icon': '🎼',
                'color': '#e91e63'
            },
            'filebrowser': {
                'name': 'File Browser',
                'description': 'Web-based file manager',
                'category': '🗂️ File Management',
                'icon': '📁',
                'color': '#607d8b'
            },
            'spotspot': {
                'name': 'SpotSpot',
                'description': 'Spotify playlist manager',
                'category': '🎵 Music',
                'icon': '🎧',
                'color': '#1db954'
            }
        }
    
    def get_system_resources(self) -> Dict[str, Any]:
        """Get detailed system resource information"""
        try:
            # CPU information
            cpu_percent = psutil.cpu_percent(interval=1)
            cpu_count = psutil.cpu_count()
            cpu_freq = psutil.cpu_freq()
            load_avg = os.getloadavg() if hasattr(os, 'getloadavg') else [0, 0, 0]
            
            # Memory information
            memory = psutil.virtual_memory()
            
            # Disk information for main drive
            disk = psutil.disk_usage('/')
            
            # Network stats
            net_io = psutil.net_io_counters()
            
            # Boot time and uptime
            boot_time = datetime.fromtimestamp(psutil.boot_time())
            uptime = datetime.now() - boot_time
            
            return {
                'hostname': socket.gethostname(),
                'platform': f"{platform.system()} {platform.release()}",
                'architecture': platform.machine(),
                'uptime': str(uptime).split('.')[0],  # Remove microseconds
                'boot_time': boot_time.isoformat(),
                'cpu': {
                    'usage_percent': round(cpu_percent, 1),
                    'count': cpu_count,
                    'frequency_mhz': round(cpu_freq.current) if cpu_freq else 0,
                    'load_avg': [round(x, 2) for x in load_avg]
                },
                'memory': {
                    'total_gb': round(memory.total / (1024**3), 2),
                    'used_gb': round(memory.used / (1024**3), 2),
                    'available_gb': round(memory.available / (1024**3), 2),
                    'usage_percent': round(memory.percent, 1)
                },
                'disk': {
                    'total_gb': round(disk.total / (1024**3), 2),
                    'used_gb': round(disk.used / (1024**3), 2),
                    'free_gb': round(disk.free / (1024**3), 2),
                    'usage_percent': round((disk.used / disk.total) * 100, 1)
                },
                'network': {
                    'bytes_sent_mb': round(net_io.bytes_sent / (1024**2), 2),
                    'bytes_recv_mb': round(net_io.bytes_recv / (1024**2), 2),
                    'packets_sent': net_io.packets_sent,
                    'packets_recv': net_io.packets_recv
                }
            }
        except Exception as e:
            return {'error': str(e)}
    
    def get_docker_services(self) -> List[Dict[str, Any]]:
        """Get all Docker containers with enriched information"""
        services = []
        try:
            result = subprocess.run(
                ['docker', 'ps', '-a', '--format', 'json'],
                capture_output=True, text=True, timeout=15
            )
            
            if result.returncode == 0:
                for line in result.stdout.strip().split('\n'):
                    if line.strip():
                        container = json.loads(line)
                        service = self._enrich_container_info(container)
                        if service:  # Filter out k8s system containers
                            services.append(service)
            
            # Sort by category then name
            services.sort(key=lambda x: (x['category'], x['name']))
            
        except Exception as e:
            print(f"Error getting Docker services: {e}")
        
        return services
    
    def _enrich_container_info(self, container: Dict) -> Optional[Dict[str, Any]]:
        """Enrich container information with service details"""
        name = container.get('Names', '')
        image = container.get('Image', '')
        status = container.get('Status', '')
        
        # Skip Kubernetes system containers
        if name.startswith('k8s_') and ('pause' in image or 'coredns' in name):
            return None
        
        # Get service info
        service_key = name.lower().replace('_', '-')
        service_info = self.known_services.get(service_key, {})
        
        # Parse port mappings
        ports_raw = container.get('Ports', '')
        ports = self._parse_docker_ports(ports_raw)
        
        # Determine if service is healthy/running
        is_running = 'Up' in status
        is_healthy = 'healthy' in status.lower() or (is_running and 'unhealthy' not in status.lower())
        
        # Get primary URL
        primary_url = None
        if ports:
            for port_info in ports:
                if port_info.get('external') and int(port_info['external']) < 10000:
                    primary_url = f"http://localhost:{port_info['external']}"
                    break
        
        return {
            'name': service_info.get('name', name.title()),
            'description': service_info.get('description', 'Container service'),
            'category': service_info.get('category', '🐳 Other'),
            'icon': service_info.get('icon', '⚙️'),
            'color': service_info.get('color', '#607d8b'),
            'container_name': name,
            'image': image,
            'status': status,
            'ports': ports,
            'is_running': is_running,
            'is_healthy': is_healthy,
            'url': primary_url,
            'last_updated': datetime.now().isoformat()
        }
    
    def _parse_docker_ports(self, ports_str: str) -> List[Dict[str, str]]:
        """Parse Docker port mappings"""
        if not ports_str:
            return []
        
        ports = []
        for part in ports_str.split(', '):
            if '->' in part:
                external_part, internal_part = part.split('->')
                external_port = external_part.split(':')[-1]
                internal_port = internal_part.split('/')[0]
                ports.append({
                    'external': external_port,
                    'internal': internal_port,
                    'protocol': 'tcp'
                })
        return ports
    
    def get_ddns_status(self) -> Dict[str, Any]:
        """Get DDNS status from the existing monitor"""
        try:
            result = subprocess.run(
                ['python3', self.ddns_monitor_path, '--json'],
                capture_output=True, text=True, timeout=10
            )
            
            if result.returncode == 0:
                # Try to find JSON in the output
                for line in result.stdout.strip().split('\n'):
                    line = line.strip()
                    if line.startswith('{') and line.endswith('}'):
                        try:
                            return json.loads(line)
                        except json.JSONDecodeError:
                            continue
            
            return {
                'status': 'healthy' if result.returncode == 0 else 'error',
                'domain': 'wg.samcloud.ca',
                'healthy': result.returncode == 0,
                'last_check': datetime.now().isoformat()
            }
            
        except Exception as e:
            return {
                'status': 'error',
                'error': str(e),
                'healthy': False,
                'last_check': datetime.now().isoformat()
            }
    
    def get_network_overview(self) -> Dict[str, Any]:
        """Get network and port overview"""
        active_ports = []
        try:
            # Get listening ports using netstat
            result = subprocess.run(
                ['netstat', '-an', '-p', 'tcp'],
                capture_output=True, text=True, timeout=10
            )
            
            if result.returncode == 0:
                ports_used = set()
                for line in result.stdout.split('\n'):
                    if 'LISTEN' in line:
                        parts = line.split()
                        if len(parts) >= 4:
                            addr_port = parts[3]
                            try:
                                if '.' in addr_port:
                                    port = int(addr_port.split('.')[-1])
                                    if port not in ports_used and 20 <= port <= 65535:
                                        ports_used.add(port)
                                        active_ports.append({
                                            'port': port,
                                            'type': self._categorize_port(port)
                                        })
                            except (ValueError, IndexError):
                                continue
                
                active_ports.sort(key=lambda x: x['port'])
        
        except Exception as e:
            print(f"Network overview error: {e}")
        
        return {
            'total_listening_ports': len(active_ports),
            'web_services': len([p for p in active_ports if p['type'] == 'web']),
            'system_services': len([p for p in active_ports if p['type'] == 'system']),
            'user_services': len([p for p in active_ports if p['type'] == 'user']),
            'active_ports': active_ports[:20]  # Limit to first 20 for display
        }
    
    def _categorize_port(self, port: int) -> str:
        """Categorize port by type"""
        if port < 1024:
            return 'system'
        elif 8000 <= port <= 9999 or port in [80, 443, 3000, 3001, 4000, 5000]:
            return 'web'
        else:
            return 'user'
    
    def get_dashboard_data(self) -> Dict[str, Any]:
        """Get all dashboard data"""
        docker_services = self.get_docker_services()
        homebrew_services = self.get_homebrew_services()
        
        # Combine all services
        all_services = docker_services + homebrew_services
        
        return {
            'system': self.get_system_resources(),
            'services': all_services,
            'homebrew_services': homebrew_services,
            'docker_services': docker_services,
            'ddns': self.get_ddns_status(),
            'network': self.get_network_overview(),
            'meta': {
                'dashboard_uptime': str(datetime.now() - self.start_time).split('.')[0],
                'last_refresh': datetime.now().isoformat(),
                'version': '2.0.0'
            }
        }
    
    def get_homebrew_services(self) -> List[Dict[str, Any]]:
        """Get Homebrew services with enhanced error detection"""
        services = []
        try:
            result = subprocess.run(
                ['brew', 'services', 'list'],
                capture_output=True, text=True, timeout=10
            )
            
            if result.returncode == 0:
                lines = result.stdout.strip().split('\n')[1:]  # Skip header
                for line in lines:
                    parts = line.split()
                    if len(parts) >= 3:
                        name = parts[0]
                        status = parts[1]
                        
                        # Enhanced status detection and log capture
                        service_logs = []
                        
                        # Check if process is actually running (for cases like dnsmasq)
                        is_process_running = self._check_process_running(name)
                        
                        # Determine health status with better logic
                        if status == 'started' or (status == 'error' and is_process_running):
                            service_status = 'running'
                            health_score = 100
                            is_healthy = True
                            is_running = True
                            if status == 'error' and is_process_running:
                                service_logs.append(f"Service reports error status but process is running")
                        elif status == 'stopped':
                            service_status = 'stopped'
                            health_score = 0
                            is_healthy = False
                            is_running = False
                        elif 'error' in status:
                            service_status = 'error'
                            health_score = 10
                            is_healthy = False
                            is_running = False
                            # Get detailed error logs
                            error_logs = self._get_service_error_logs(name)
                            service_logs.extend(error_logs)
                        else:
                            service_status = status
                            health_score = 50
                            is_healthy = False
                            is_running = False
                        
                        # Get service details
                        service_info = self._get_homebrew_service_info(name)
                        
                        service = {
                            'name': service_info.get('display_name', name.title()),
                            'container_name': name,
                            'description': service_info.get('description', f'Homebrew service: {name}'),
                            'category': service_info.get('category', '🍺 Homebrew Services'),
                            'icon': service_info.get('icon', '🍺'),
                            'color': service_info.get('color', '#fbb040'),
                            'status': f'{service_status.title()} ({status})',
                            'is_running': is_running,
                            'is_healthy': is_healthy,
                            'url': service_info.get('url'),
                            'ports': service_info.get('ports', []),
                            'image': 'homebrew',
                            'logs': service_logs,
                            'last_updated': datetime.now().isoformat()
                        }
                        services.append(service)
                        
        except Exception as e:
            print(f"Error getting Homebrew services: {e}")
        
        return services
    
    def _check_process_running(self, service_name: str) -> bool:
        """Check if a process is actually running by name"""
        try:
            result = subprocess.run(
                ['pgrep', '-f', service_name],
                capture_output=True, text=True, timeout=5
            )
            return result.returncode == 0 and bool(result.stdout.strip())
        except:
            return False
    
    def _get_service_error_logs(self, service_name: str) -> List[str]:
        """Get error logs for a specific service"""
        logs = []
        
        # Common log locations
        log_paths = [
            f'/opt/homebrew/var/log/{service_name}.log',
            f'/opt/homebrew/var/log/{service_name}/error.log',
            f'/usr/local/var/log/{service_name}.log',
            f'/usr/local/var/log/{service_name}/error.log'
        ]
        
        # Service-specific log locations
        if service_name == 'nginx':
            log_paths.extend([
                '/opt/homebrew/var/log/nginx/error.log',
                '/usr/local/var/log/nginx/error.log'
            ])
        elif service_name == 'dnsmasq':
            log_paths.extend([
                '/opt/homebrew/var/log/dnsmasq.log',
                '/usr/local/var/log/dnsmasq.log'
            ])
        
        for log_path in log_paths:
            try:
                if os.path.exists(log_path):
                    result = subprocess.run(
                        ['tail', '-3', log_path],
                        capture_output=True, text=True, timeout=5
                    )
                    if result.returncode == 0 and result.stdout.strip():
                        log_lines = result.stdout.strip().split('\n')
                        for line in log_lines:
                            if 'error' in line.lower() or 'failed' in line.lower() or 'bind()' in line.lower():
                                logs.append(line.strip())
                        break
            except:
                continue
        
        # Special handling for nginx port conflicts
        if service_name == 'nginx' and not logs:
            try:
                result = subprocess.run(
                    ['lsof', '-i', ':80'],
                    capture_output=True, text=True, timeout=5
                )
                if result.returncode == 0:
                    port_users = result.stdout.strip().split('\n')[1:]  # Skip header
                    if port_users:
                        logs.append("Port 80 conflict detected:")
                        for user in port_users[:2]:  # Show first 2
                            logs.append(f"  {user.split()[0]} (PID {user.split()[1]})")
            except:
                logs.append("Unable to check port 80 status")
        
        return logs[:5]  # Limit to 5 recent log entries
    
    def _get_homebrew_service_info(self, service_name: str) -> Dict[str, Any]:
        """Get enhanced service information for homebrew services"""
        service_definitions = {
            'nginx': {
                'display_name': 'Nginx',
                'category': '🔧 Infrastructure', 
                'icon': '🌐',
                'color': '#009639',
                'description': 'High-performance web server and reverse proxy',
                'url': 'http://localhost:80',
                'ports': [{'external': '80', 'internal': '80', 'protocol': 'HTTP'}, 
                         {'external': '443', 'internal': '443', 'protocol': 'HTTPS'}]
            },
            'dnsmasq': {
                'display_name': 'DNSmasq',
                'category': '🌐 Network Services',
                'icon': '🗂️',
                'color': '#2196f3',
                'description': 'Lightweight DNS forwarder and DHCP server',
                'url': None,
                'ports': [{'external': '53', 'internal': '53', 'protocol': 'DNS'}]
            },
            'caddy': {
                'display_name': 'Caddy',
                'category': '🔧 Infrastructure',
                'icon': '🕸️',
                'color': '#1f88e5',
                'description': 'Modern web server with automatic HTTPS',
                'url': 'http://home.samcloud.ca',
                'ports': [{'external': '80', 'internal': '80', 'protocol': 'HTTP'}, 
                         {'external': '443', 'internal': '443', 'protocol': 'HTTPS'}]
            },
            'ddclient': {
                'display_name': 'DDClient',
                'category': '🌐 Network Services',
                'icon': '🌍',
                'color': '#4caf50',
                'description': 'Dynamic DNS client for domain updates',
                'url': None,
                'ports': []
            },
            'ollama': {
                'display_name': 'Ollama',
                'category': '🤖 AI/ML',
                'icon': '🦙',
                'color': '#ff6b35',
                'description': 'Local LLM server for running AI models',
                'url': 'http://localhost:11434',
                'ports': [{'external': '11434', 'internal': '11434', 'protocol': 'HTTP'}]
            },
            'postgresql': {
                'display_name': 'PostgreSQL',
                'category': '🔧 Infrastructure',
                'icon': '🐘',
                'color': '#336791',
                'description': 'Advanced open-source relational database',
                'url': None,
                'ports': [{'external': '5432', 'internal': '5432', 'protocol': 'PostgreSQL'}]
            }
        }
        
        return service_definitions.get(service_name, {
            'display_name': service_name.title(),
            'category': '🍺 Homebrew Services',
            'icon': '🍺',
            'color': '#fbb040',
            'description': f'Homebrew service: {service_name}',
            'url': None,
            'ports': []
        })
    
    def get_all_services(self) -> List[Dict[str, Any]]:
        """Get all services including Docker and Homebrew"""
        all_services = self.get_docker_services()
        homebrew_services = self.get_homebrew_services()
        
        # Combine and remove duplicates
        service_names = set()
        for service in all_services + homebrew_services:
            if service['name'] not in service_names:
                service_names.add(service['name'])
        
        # Enrich Homebrew services with Docker-like structure
        enriched_homebrew_services = []
        for name in service_names:
            docker_service = next((s for s in all_services if s['name'] == name), None)
            homebrew_service = next((s for s in homebrew_services if s['name'] == name), None)
            
            if docker_service:
                enriched_homebrew_services.append(docker_service)
            elif homebrew_service:
                enriched_homebrew_services.append({
                    'name': homebrew_service['name'],
                    'description': homebrew_service['description'],
                    'category': homebrew_service['category'],
                    'icon': homebrew_service['icon'],
                    'color': homebrew_service['color'],
                    'container_name': homebrew_service['container_name'],
                    'image': homebrew_service['image'],
                    'status': homebrew_service['status'],
                    'ports': homebrew_service['ports'],
                    'is_running': homebrew_service['is_running'],
                    'is_healthy': homebrew_service['is_healthy'],
                    'url': homebrew_service['url'],
                    'last_updated': homebrew_service['last_updated'],
                    'logs': homebrew_service['logs']
                })
        
        return enriched_homebrew_services

# Create dashboard instance
homelab = UltimateHomeLab()

# Modern Apple-like dashboard template
DASHBOARD_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SamCloud Home Lab</title>
    <style>
        :root {
            --primary-color: #007AFF;
            --secondary-color: #5856D6;
            --success-color: #34C759;
            --warning-color: #FF9500;
            --error-color: #FF3B30;
            --background-color: #F2F2F7;
            --card-color: rgba(255, 255, 255, 0.95);
            --text-primary: #1D1D1F;
            --text-secondary: #86868B;
            --border-color: rgba(60, 60, 67, 0.29);
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --blur: blur(20px);
        }
        
        @media (prefers-color-scheme: dark) {
            :root {
                --background-color: #000000;
                --card-color: rgba(28, 28, 30, 0.95);
                --text-primary: #FFFFFF;
                --text-secondary: #98989D;
                --border-color: rgba(84, 84, 88, 0.65);
            }
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: var(--background-color);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            z-index: -1;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }
        
        .header h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
            font-weight: 400;
        }
        
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .card {
            background: var(--card-color);
            border-radius: 20px;
            padding: 30px;
            backdrop-filter: var(--blur);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card-icon {
            font-size: 2rem;
            margin-right: 15px;
        }
        
        .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .metric {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .metric:last-child {
            border-bottom: none;
        }
        
        .metric-label {
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        .metric-value {
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        
        .progress-container {
            margin: 10px 0;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .progress-low { background: var(--success-color); }
        .progress-medium { background: var(--warning-color); }
        .progress-high { background: var(--error-color); }
        
        .service-grid {
            display: grid;
            gap: 12px;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .service-category {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 20px 0 10px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .service-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: rgba(0, 0, 0, 0.03);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .service-item:hover {
            background: rgba(0, 122, 255, 0.1);
            transform: translateX(5px);
        }
        
        .service-icon {
            font-size: 1.5rem;
            margin-right: 15px;
            width: 40px;
            text-align: center;
        }
        
        .service-info {
            flex: 1;
        }
        
        .service-name {
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .service-description {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .service-status {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-bottom: 8px;
        }
        
        .status-running { background: var(--success-color); }
        .status-stopped { background: var(--error-color); }
        .status-unknown { background: var(--warning-color); }
        
        .port-badge {
            background: rgba(0, 122, 255, 0.15);
            color: var(--primary-color);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .refresh-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .refresh-button:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 122, 255, 0.4);
        }
        
        .timestamp {
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            margin-top: 20px;
        }
        
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            font-size: 1.2rem;
            color: var(--text-secondary);
        }
        
        @media (max-width: 768px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 15px;
            }
            
            .card {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="background"></div>
    
    <div class="container">
        <div class="header">
            <h1>🏠 SamCloud</h1>
            <p>Home Lab Dashboard</p>
        </div>
        
        <div class="dashboard-grid" id="dashboard">
            <div class="loading">Loading dashboard data...</div>
        </div>
        
        <div class="timestamp" id="timestamp"></div>
    </div>
    
    <button class="refresh-button" onclick="loadDashboard()" title="Refresh Dashboard">
        🔄
    </button>
    
    <script>
        let refreshInterval;
        
        async function loadDashboard() {
            try {
                const response = await fetch('/api/ultimate');
                if (!response.ok) throw new Error('Network response was not ok');
                
                const data = await response.json();
                renderDashboard(data);
                
                // Update timestamp
                document.getElementById('timestamp').textContent = 
                    `Last updated: ${new Date().toLocaleString()}`;
                    
            } catch (error) {
                console.error('Failed to load dashboard:', error);
                document.getElementById('dashboard').innerHTML = 
                    '<div class="loading">❌ Failed to load dashboard data</div>';
            }
        }
        
        function renderDashboard(data) {
            const container = document.getElementById('dashboard');
            container.innerHTML = '';
            
            // System Resources Card
            if (data.system) {
                container.appendChild(createSystemCard(data.system));
            }
            
            // DDNS Status Card
            if (data.ddns) {
                container.appendChild(createDDNSCard(data.ddns));
            }
            
            // Services Cards (grouped by category)
            if (data.services) {
                const servicesCard = createServicesCard(data.services);
                if (servicesCard) container.appendChild(servicesCard);
            }
            
            // Network Overview Card
            if (data.network) {
                container.appendChild(createNetworkCard(data.network));
            }
        }
        
        function createSystemCard(system) {
            const card = document.createElement('div');
            card.className = 'card';
            
            const cpuClass = system.cpu.usage_percent > 80 ? 'progress-high' : 
                           system.cpu.usage_percent > 60 ? 'progress-medium' : 'progress-low';
            const memClass = system.memory.usage_percent > 80 ? 'progress-high' : 
                           system.memory.usage_percent > 60 ? 'progress-medium' : 'progress-low';
            const diskClass = system.disk.usage_percent > 80 ? 'progress-high' : 
                            system.disk.usage_percent > 60 ? 'progress-medium' : 'progress-low';
            
            card.innerHTML = `
                <div class="card-header">
                    <div class="card-icon">💻</div>
                    <div class="card-title">System Resources</div>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Hostname</span>
                    <span class="metric-value">${system.hostname}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Uptime</span>
                    <span class="metric-value">${system.uptime}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">CPU Usage</span>
                    <span class="metric-value">${system.cpu.usage_percent}%</span>
                </div>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill ${cpuClass}" style="width: ${system.cpu.usage_percent}%"></div>
                    </div>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Memory</span>
                    <span class="metric-value">${system.memory.used_gb}GB / ${system.memory.total_gb}GB</span>
                </div>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill ${memClass}" style="width: ${system.memory.usage_percent}%"></div>
                    </div>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Disk Space</span>
                    <span class="metric-value">${system.disk.used_gb}GB / ${system.disk.total_gb}GB</span>
                </div>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill ${diskClass}" style="width: ${system.disk.usage_percent}%"></div>
                    </div>
                </div>
            `;
            
            return card;
        }
        
        function createDDNSCard(ddns) {
            const card = document.createElement('div');
            card.className = 'card';
            
            const statusIcon = ddns.healthy ? '✅' : '❌';
            const statusText = ddns.healthy ? 'Healthy' : 'Error';
            const statusColor = ddns.healthy ? 'var(--success-color)' : 'var(--error-color)';
            
            card.innerHTML = `
                <div class="card-header">
                    <div class="card-icon">${statusIcon}</div>
                    <div class="card-title">DDNS Status</div>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Domain</span>
                    <span class="metric-value">${ddns.domain || 'wg.samcloud.ca'}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Public IP</span>
                    <span class="metric-value">${ddns.public_ip || 'Checking...'}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Status</span>
                    <span class="metric-value" style="color: ${statusColor}">${statusText}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Last Check</span>
                    <span class="metric-value">${new Date(ddns.last_check).toLocaleTimeString()}</span>
                </div>
            `;
            
            return card;
        }
        
        function createServicesCard(services) {
            if (!services.length) return null;
            
            const card = document.createElement('div');
            card.className = 'card';
            card.style.gridColumn = 'span 2'; // Make it wider
            
            // Group services by category
            const grouped = {};
            services.forEach(service => {
                const category = service.category || '🐳 Other';
                if (!grouped[category]) grouped[category] = [];
                grouped[category].push(service);
            });
            
            let servicesHtml = `
                <div class="card-header">
                    <div class="card-icon">🚀</div>
                    <div class="card-title">Services & Applications</div>
                </div>
                <div class="service-grid">
            `;
            
            Object.keys(grouped).sort().forEach(category => {
                servicesHtml += `<div class="service-category">${category}</div>`;
                
                grouped[category].forEach(service => {
                    const statusClass = service.is_running ? 'status-running' : 'status-stopped';
                    const onClick = service.url ? `onclick="window.open('${service.url}', '_blank')"` : '';
                    const ports = service.ports.map(p => p.external).filter(Boolean).join(', ');
                    
                    servicesHtml += `
                        <div class="service-item" ${onClick}>
                            <div class="service-icon">${service.icon}</div>
                            <div class="service-info">
                                <div class="service-name">${service.name}</div>
                                <div class="service-description">${service.description}</div>
                            </div>
                            <div class="service-status">
                                <div class="status-indicator ${statusClass}"></div>
                                ${ports ? `<div class="port-badge">:${ports}</div>` : ''}
                            </div>
                        </div>
                    `;
                });
            });
            
            servicesHtml += '</div>';
            card.innerHTML = servicesHtml;
            
            return card;
        }
        
        function createNetworkCard(network) {
            const card = document.createElement('div');
            card.className = 'card';
            
            card.innerHTML = `
                <div class="card-header">
                    <div class="card-icon">🌐</div>
                    <div class="card-title">Network Overview</div>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Total Listening Ports</span>
                    <span class="metric-value">${network.total_listening_ports}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">Web Services</span>
                    <span class="metric-value">${network.web_services}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">System Services</span>
                    <span class="metric-value">${network.system_services}</span>
                </div>
                
                <div class="metric">
                    <span class="metric-label">User Services</span>
                    <span class="metric-value">${network.user_services}</span>
                </div>
            `;
            
            return card;
        }
        
        // Initialize dashboard
        document.addEventListener('DOMContentLoaded', () => {
            loadDashboard();
            // Auto-refresh every 30 seconds
            refreshInterval = setInterval(loadDashboard, 30000);
        });
        
        // Handle visibility change to pause/resume refresh
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                clearInterval(refreshInterval);
            } else {
                loadDashboard();
                refreshInterval = setInterval(loadDashboard, 30000);
            }
        });
    </script>
</body>
</html>
"""

@app.route('/')
def dashboard():
    """Main dashboard page"""
    return DASHBOARD_TEMPLATE

@app.route('/api/ultimate')
def api_ultimate():
    """Ultimate dashboard API endpoint"""
    return jsonify(homelab.get_dashboard_data())

@app.route('/api/system')
def api_system():
    """System resources API"""
    return jsonify(homelab.get_system_resources())

@app.route('/api/services')
def api_services():
    """Docker services API"""
    return jsonify(homelab.get_docker_services())

@app.route('/api/ddns')
def api_ddns():
    """DDNS status API"""
    return jsonify(homelab.get_ddns_status())

@app.route('/api/network')
def api_network():
    """Network overview API"""
    return jsonify(homelab.get_network_overview())

@app.route('/health')
def health():
    """Health check"""
    return {'status': 'healthy', 'timestamp': datetime.now().isoformat()}

if __name__ == '__main__':
    import argparse
    
    parser = argparse.ArgumentParser(description='SamCloud Ultimate Home Lab Dashboard')
    parser.add_argument('--host', default='0.0.0.0', help='Host to bind to')
    parser.add_argument('--port', type=int, default=7429, help='Port to bind to')
    parser.add_argument('--debug', action='store_true', help='Enable debug mode')
    
    args = parser.parse_args()
    
    print(f"🚀 Starting SamCloud Ultimate Dashboard on http://{args.host}:{args.port}")
    print("✨ Features:")
    print("   • Modern Apple-like design")
    print("   • Real-time system monitoring")
    print("   • Smart service detection")
    print("   • Clickable service links")
    print("   • Auto-refresh capabilities")
    print("   • Mobile responsive design")
    
    app.run(host=args.host, port=args.port, debug=args.debug)