*** Settings ***
Documentation       Responsive design UI tests for Aniworld.
...                 Covers mobile and tablet viewport layouts and touch interactions.

Resource            ${CURDIR}/../resources/common.resource
Resource            ${CURDIR}/../resources/ui_keywords.resource

Test Setup          Run Keywords
...                 Create Anonymous Session
...                 AND    Setup Master Password
...                 AND    Open Browser To Page    /login
...                 AND    Perform Login
...                 AND    Wait For Elements State    id=search-input    visible    timeout=5s

Test Teardown       Close Browser

*** Test Cases ***
# ---------------------------------------------------------------------------
# Mobile Viewport
# ---------------------------------------------------------------------------
Mobile Viewport Layout
    [Documentation]    Resize to mobile and verify layout adapts.
    Set Mobile Viewport
    Reload Page
    Wait For Elements State    id=search-input    visible    timeout=5s
    ${width}=    Evaluate    window.innerWidth
    Should Be True    ${width} <= 480
    Element Should Be Visible    id=search-input
    Element Should Be Visible    id=theme-toggle

Mobile Menu Accessible
    [Documentation]    Verify hamburger menu or compact header on mobile.
    Set Mobile Viewport
    Reload Page
    Wait For Elements State    id=search-input    visible    timeout=5s
    # On mobile, header actions may collapse into a menu
    ${menu_visible}=    Run Keyword And Return Status
    ...    Wait For Elements State    id=mobile-menu-btn    visible    timeout=2s
    IF    ${menu_visible}
        Click    id=mobile-menu-btn
        Element Should Be Visible    id=mobile-menu
    END

# ---------------------------------------------------------------------------
# Tablet Viewport
# ---------------------------------------------------------------------------
Tablet Viewport Layout
    [Documentation]    Resize to tablet and verify layout adapts.
    Set Tablet Viewport
    Reload Page
    Wait For Elements State    id=search-input    visible    timeout=5s
    ${width}=    Evaluate    window.innerWidth
    Should Be True    ${width} >= 768
    Element Should Be Visible    id=search-input
    Element Should Be Visible    id=rescan-btn

# ---------------------------------------------------------------------------
# Touch Interactions
# ---------------------------------------------------------------------------
Touch Buttons Clickable
    [Documentation]    Verify buttons remain clickable on touch-sized viewport.
    Set Mobile Viewport
    Reload Page
    Wait For Elements State    id=search-input    visible    timeout=5s
    # Try clicking theme toggle
    Click    id=theme-toggle
    ${theme}=    Get Current Theme
    Should Be Equal As Strings    ${theme}    dark
    # Toggle back
    Click    id=theme-toggle
    ${theme}=    Get Current Theme
    Should Be Equal As Strings    ${theme}    light

# ---------------------------------------------------------------------------
# Desktop Viewport Reset
# ---------------------------------------------------------------------------
Desktop Viewport Reset
    [Documentation]    Resize back to desktop and verify normal layout.
    Set Desktop Viewport
    Reload Page
    Wait For Elements State    id=search-input    visible    timeout=5s
    ${width}=    Evaluate    window.innerWidth
    Should Be True    ${width} >= 1280
    Element Should Be Visible    id=search-input
    Element Should Be Visible    id=rescan-btn
    Element Should Be Visible    id=config-btn