"""
Acceptance tests for Responsive Dashboard.

Tests:
1. Desktop: 4 columns grid
2. Tablet: 2 columns grid
3. Mobile: 1 column grid
4. POST requests work (via API check)
5. No horizontal scrolling on any viewport
"""
import sys
import httpx
from bs4 import BeautifulSoup


def test_dashboard_html_structure():
    """Test 1: Dashboard has correct HTML structure."""
    print("Test 1: Dashboard HTML Structure")
    print("-" * 60)
    
    try:
        response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
        response.raise_for_status()
        
        html = response.text
        soup = BeautifulSoup(html, 'html.parser')
        
        # Check for grid container
        grid = soup.find('div', class_='devices-grid')
        if not grid:
            print("  ✗ FAILED: Missing .devices-grid container")
            return False
        
        # Check for device tiles
        tiles = soup.find_all('div', class_='device-tile')
        if len(tiles) < 2:
            print(f"  ✗ FAILED: Expected at least 2 device tiles, found {len(tiles)}")
            return False
        
        # Check for state spans
        state_spans = soup.find_all('span', id=lambda x: x and x.startswith('state-'))
        if len(state_spans) < 2:
            print(f"  ✗ FAILED: Expected state spans, found {len(state_spans)}")
            return False
        
        # Check for ON/OFF buttons
        btn_on = soup.find_all('button', class_='btn-on')
        btn_off = soup.find_all('button', class_='btn-off')
        
        if not btn_on or not btn_off:
            print("  ✗ FAILED: Missing ON/OFF buttons")
            return False
        
        print(f"  ✓ Found {len(tiles)} device tiles")
        print(f"  ✓ Found {len(state_spans)} state indicators")
        print(f"  ✓ Found {len(btn_on)} ON buttons and {len(btn_off)} OFF buttons")
        print()
        return True
        
    except Exception as e:
        print(f"  ✗ FAILED: {e}")
        print()
        return False


def test_responsive_css():
    """Test 2: CSS has responsive grid rules."""
    print("Test 2: Responsive CSS")
    print("-" * 60)
    
    try:
        response = httpx.get("http://localhost:8002/static/style.css", timeout=5.0)
        response.raise_for_status()
        
        css = response.text
        
        # Check for desktop 4 columns
        if 'grid-template-columns: repeat(4, 1fr)' not in css:
            print("  ✗ FAILED: Missing desktop grid (4 columns)")
            return False
        
        # Check for tablet media query (2 columns)
        if 'max-width: 1024px' not in css or 'repeat(2, 1fr)' not in css:
            print("  ✗ FAILED: Missing tablet media query (2 columns)")
            return False
        
        # Check for mobile media query (1 column)
        if 'max-width: 640px' not in css:
            print("  ✗ FAILED: Missing mobile media query")
            return False
        
        print("  ✓ Desktop: 4 columns (grid-template-columns: repeat(4, 1fr))")
        print("  ✓ Tablet: 2 columns (@media max-width: 1024px)")
        print("  ✓ Mobile: 1 column (@media max-width: 640px)")
        print()
        return True
        
    except Exception as e:
        print(f"  ✗ FAILED: {e}")
        print()
        return False


def test_javascript_functions():
    """Test 3: JavaScript POST function exists."""
    print("Test 3: JavaScript POST Function")
    print("-" * 60)
    
    try:
        response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
        response.raise_for_status()
        
        html = response.text
        
        # Check for setDeviceState function
        if 'function setDeviceState' not in html and 'async function setDeviceState' not in html:
            print("  ✗ FAILED: Missing setDeviceState function")
            return False
        
        # Check for fetch POST call
        if 'fetch(' not in html or 'method: \'POST\'' not in html:
            print("  ✗ FAILED: Missing fetch POST call")
            return False
        
        # Check for correct API endpoint pattern
        if '/devices/${deviceId}/set' not in html and '/devices/' not in html:
            print("  ✗ FAILED: Missing correct API endpoint")
            return False
        
        # Check for JSON payload
        if 'type: \'light\'' not in html and '"type":"light"' not in html:
            print("  ✗ FAILED: Missing correct JSON payload")
            return False
        
        print("  ✓ setDeviceState function defined")
        print("  ✓ Uses fetch with POST method")
        print("  ✓ Correct endpoint: /devices/{deviceId}/set")
        print("  ✓ Correct payload: {type:'light', payload:{power:...}}")
        print()
        return True
        
    except Exception as e:
        print(f"  ✗ FAILED: {e}")
        print()
        return False


def test_device_controls():
    """Test 4: Devices have correct controls."""
    print("Test 4: Device Controls")
    print("-" * 60)
    
    try:
        response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
        response.raise_for_status()
        
        html = response.text
        soup = BeautifulSoup(html, 'html.parser')
        
        # Find device tiles
        tiles = soup.find_all('div', class_='device-tile')
        
        for tile in tiles:
            device_id = tile.get('data-device-id')
            
            # Check for device header
            header = tile.find('div', class_='device-header')
            if not header:
                print(f"  ✗ FAILED: Device {device_id} missing header")
                return False
            
            # Check for icon and title
            icon = tile.find('div', class_='device-icon')
            title = tile.find('h3', class_='device-title')
            device_id_elem = tile.find('p', class_='device-id')
            
            if not icon or not title or not device_id_elem:
                print(f"  ✗ FAILED: Device {device_id} missing icon/title/id")
                return False
            
            # Check for state indicator
            state_span = tile.find('span', id=f'state-{device_id}')
            if not state_span:
                print(f"  ✗ FAILED: Device {device_id} missing state indicator")
                return False
        
        print(f"  ✓ All {len(tiles)} devices have:")
        print("    • Icon, title, and device_id")
        print("    • State indicator (span#state-{{device_id}})")
        print("    • ON/OFF buttons (for lights with power feature)")
        print()
        return True
        
    except Exception as e:
        print(f"  ✗ FAILED: {e}")
        print()
        return False


def test_rank_sorting():
    """Test 5: Devices sorted by rank."""
    print("Test 5: Device Rank Sorting")
    print("-" * 60)
    
    try:
        response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
        response.raise_for_status()
        
        html = response.text
        
        # In Wohnzimmer: Deckenlampe (rank=5) should come before Stehlampe (rank=10)
        deckenlampe_pos = html.find('device-title">Deckenlampe<')
        stehlampe_pos = html.find('device-title">Stehlampe<')
        
        if deckenlampe_pos == -1 or stehlampe_pos == -1:
            print("  ℹ INFO: Test devices not found (expected for test)")
            print()
            return True
        
        if deckenlampe_pos > stehlampe_pos:
            print("  ✗ FAILED: Devices not sorted by rank")
            return False
        
        print("  ✓ Devices sorted by rank (Deckenlampe before Stehlampe)")
        print()
        return True
        
    except Exception as e:
        print(f"  ✗ FAILED: {e}")
        print()
        return False


def main():
    """Run all acceptance tests."""
    print("=" * 60)
    print("Testing Responsive Dashboard")
    print("=" * 60)
    print()
    
    # Check if UI is running
    print("Prerequisites: Checking if UI is running on port 8002...")
    try:
        response = httpx.get("http://localhost:8002/dashboard", timeout=3.0)
        print("✓ UI is running")
        print()
    except Exception as e:
        print(f"✗ Cannot reach UI: {e}")
        print("  Start UI with: poetry run uvicorn apps.ui.main:app --port 8002")
        print()
        sys.exit(1)
    
    results = []
    
    # Run tests
    results.append(("HTML Structure", test_dashboard_html_structure()))
    results.append(("Responsive CSS", test_responsive_css()))
    results.append(("JavaScript POST", test_javascript_functions()))
    results.append(("Device Controls", test_device_controls()))
    results.append(("Rank Sorting", test_rank_sorting()))
    
    # Summary
    print("=" * 60)
    passed = sum(1 for _, result in results if result)
    total = len(results)
    print(f"Results: {passed}/{total} tests passed")
    print("=" * 60)
    
    for name, result in results:
        status = "✓" if result else "✗"
        print(f"  {status} {name}")
    
    print()
    print("Manual Tests Required:")
    print("  1. Open http://localhost:8002/dashboard in browser")
    print("  2. Resize browser window to test responsive breakpoints:")
    print("     - Desktop (>1024px): Should show 4 columns")
    print("     - Tablet (640-1024px): Should show 2 columns")
    print("     - Mobile (<640px): Should show 1 column")
    print("  3. Click ON/OFF buttons and check Network tab in DevTools")
    print("     - Should see POST to http://localhost:8001/devices/.../set")
    print("     - No JavaScript errors in Console")
    print("  4. Verify no horizontal scrolling at any viewport size")
    
    if passed == total:
        print()
        print("All automated tests passed!")
        sys.exit(0)
    else:
        print()
        print("Some tests failed.")
        sys.exit(1)


if __name__ == "__main__":
    main()