<?xml version="1.0" encoding="utf-8"?>
<!-- Scrolls so content is always reachable on short screens; the pairing code
     auto-sizes to fit any screen width (phones, TVs, HD sticks). -->
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:background="#111827">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|top"
        android:orientation="vertical"
        android:paddingHorizontal="32dp"
        android:paddingTop="24dp"
        android:paddingBottom="24dp"
        android:keepScreenOn="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RemoteDisplay"
            android:textColor="#3B82F6"
            android:textSize="22sp"
            android:textStyle="bold"
            android:layout_marginBottom="4dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Digital Signage Player"
            android:textColor="#94A3B8"
            android:textSize="14sp"
            android:layout_marginBottom="20dp" />

        <!-- Server URL Section (hidden once paired so the code has room) -->
        <LinearLayout
            android:id="@+id/serverSection"
            android:layout_width="400dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginBottom="24dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Server URL"
                android:textColor="#94A3B8"
                android:textSize="14sp"
                android:layout_marginBottom="8dp" />

            <EditText
                android:id="@+id/serverUrlInput"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="@drawable/input_background"
                android:hint="http://192.168.1.100:3000"
                android:textColorHint="#64748B"
                android:textColor="#F1F5F9"
                android:textSize="16sp"
                android:padding="12dp"
                android:inputType="textUri"
                android:singleLine="true"
                android:importantForAutofill="no" />
        </LinearLayout>

        <Button
            android:id="@+id/connectBtn"
            android:layout_width="400dp"
            android:layout_height="48dp"
            android:text="Connect"
            android:textColor="#FFFFFF"
            android:textSize="16sp"
            android:textStyle="bold"
            android:background="@drawable/button_primary"
            android:layout_marginBottom="32dp" />

        <ProgressBar
            android:id="@+id/progressBar"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:indeterminate="true"
            android:visibility="gone" />

        <!-- Pairing Section (shown after connection) -->
        <LinearLayout
            android:id="@+id/pairingSection"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:visibility="gone">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pairing Code"
                android:textColor="#94A3B8"
                android:textSize="16sp"
                android:layout_marginBottom="12dp" />

            <!-- FIXED-height box: autosize fits the text inside the bounded box and
                 gravity center vertically centers it, so the digits are never
                 clipped (the earlier wrap_content height clipped the glyph bottoms).
                 24-64sp fills the width on phones/TVs/sticks. -->
            <TextView
                android:id="@+id/pairingCodeText"
                android:layout_width="match_parent"
                android:layout_height="96dp"
                android:text="------"
                android:textColor="#3B82F6"
                android:textStyle="bold"
                android:fontFamily="monospace"
                android:letterSpacing="0.3"
                android:maxLines="1"
                android:gravity="center"
                app:autoSizeTextType="uniform"
                app:autoSizeMinTextSize="24sp"
                app:autoSizeMaxTextSize="64sp"
                app:autoSizeStepGranularity="2sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Enter this code in the dashboard to pair this display"
                android:textColor="#64748B"
                android:textSize="14sp"
                android:layout_marginTop="16dp"
                android:gravity="center" />
        </LinearLayout>

        <TextView
            android:id="@+id/statusText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#94A3B8"
            android:textSize="14sp"
            android:gravity="center"
            android:layout_marginTop="16dp" />

    </LinearLayout>
</ScrollView>
