*** 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

Suite Setup         Run Keywords
...                 Start Aniworld Server
...                 AND    Create Anonymous Session
...                 AND    Wait For Server
...                 AND    Setup Master Password
...                 AND    Login And Get Token
...                 AND    Create Session    auth    ${BASE_URL}    headers={'Authorization': 'Bearer ${TOKEN}'}
...                 AND    Initialize Browser

Test Setup          Run Keywords
...                 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
    Element Should Be Visible    id=search-input
    Element Should Be Visible    id=theme-toggle

Mobile Menu Accessible
    [Documentation]    Verify compact header on mobile.
    Set Mobile Viewport
    Reload Page
    Wait For Elements State    id=search-input    visible    timeout=5s
    # On mobile, header may show compact layout
    Element Should Be Visible    id=theme-toggle

# ---------------------------------------------------------------------------
# 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
    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
    Element Should Be Visible    id=search-input
    Element Should Be Visible    id=rescan-btn
    Element Should Be Visible    id=config-btn