<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_dashboard_gradient"
    android:fillViewport="true"
    tools:context=".ui.HomeFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- Header Section -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TMS SERVICE TERMINAL"
                android:textColor="@color/text_primary"
                android:textSize="18sp"
                android:textStyle="bold"
                android:letterSpacing="0.05" />

            <ImageButton
                android:id="@+id/imageButton_exit"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_exit"
                android:padding="12dp"
                android:contentDescription="Exit Kiosk Mode" />
        </LinearLayout>

        <!-- Digital Clock -->
        <TextClock
            android:id="@+id/textClock"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:format12Hour="hh:mm:ss a"
            android:format24Hour="HH:mm:ss"
            android:gravity="start"
            android:textColor="@color/text_secondary"
            android:textSize="32sp"
            android:textStyle="bold" />

        <!-- Connection Status Pills -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="16dp"
            android:gravity="start">

            <TextView
                android:id="@+id/pill_mqtt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_pill_inactive"
                android:paddingStart="12dp"
                android:paddingEnd="12dp"
                android:paddingTop="6dp"
                android:paddingBottom="6dp"
                android:text="MQTT: Disconnected"
                android:textColor="@color/pill_text"
                android:textSize="11sp"
                android:textStyle="bold"
                android:letterSpacing="0.05" />

            <TextView
                android:id="@+id/pill_websocket"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:background="@drawable/bg_pill_inactive"
                android:paddingStart="12dp"
                android:paddingEnd="12dp"
                android:paddingTop="6dp"
                android:paddingBottom="6dp"
                android:text="WebSocket: Disconnected"
                android:textColor="@color/pill_text"
                android:textSize="11sp"
                android:textStyle="bold"
                android:letterSpacing="0.05" />
        </LinearLayout>

        <!-- Hero Card: Terminal Identity -->
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            app:cardBackgroundColor="@color/card_bg"
            app:cardCornerRadius="16dp"
            app:cardElevation="0dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Terminal Information"
                    android:textColor="@color/text_primary"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginBottom="8dp"
                    android:background="@color/divider" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Model"
                            android:textColor="@color/text_tertiary"
                            android:textSize="11sp" />

                        <TextView
                            android:id="@+id/text_device_model"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            android:text="Loading..."
                            android:textColor="@color/text_primary"
                            android:textSize="13sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="Serial Number"
                            android:textColor="@color/text_tertiary"
                            android:textSize="11sp" />

                        <TextView
                            android:id="@+id/text_serial_number"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            android:text="Loading..."
                            android:textColor="@color/text_primary"
                            android:textSize="13sp"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="OS Version"
                            android:textColor="@color/text_tertiary"
                            android:textSize="11sp" />

                        <TextView
                            android:id="@+id/text_os_version"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            android:text="Loading..."
                            android:textColor="@color/text_primary"
                            android:textSize="13sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="12dp"
                            android:text="App Version"
                            android:textColor="@color/text_tertiary"
                            android:textSize="11sp" />

                        <TextView
                            android:id="@+id/text_app_version"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            android:text="Loading..."
                            android:textColor="@color/text_primary"
                            android:textSize="13sp"
                            android:textStyle="bold" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- System Metrics Grid -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="12dp"
            android:text="System Diagnostics"
            android:textColor="@color/text_primary"
            android:textSize="16sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:baselineAligned="false">

            <!-- Memory Card -->
            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginEnd="8dp"
                app:cardBackgroundColor="@color/card_bg"
                app:cardCornerRadius="16dp"
                app:cardElevation="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:src="@drawable/ic_ram"
                        android:contentDescription="Memory" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="Memory"
                        android:textColor="@color/text_secondary"
                        android:textSize="12sp" />

                    <TextView
                        android:id="@+id/text_memory_status"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="Loading..."
                        android:textColor="@color/text_primary"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <ProgressBar
                        android:id="@+id/progress_memory"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="match_parent"
                        android:layout_height="4dp"
                        android:layout_marginTop="8dp"
                        android:progress="0"
                        android:max="100"
                        android:progressTint="@color/accent_emerald" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <!-- Printer Card -->
            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginStart="8dp"
                app:cardBackgroundColor="@color/card_bg"
                app:cardCornerRadius="16dp"
                app:cardElevation="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        android:src="@drawable/ic_printer"
                        android:contentDescription="Printer" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="Printer"
                        android:textColor="@color/text_secondary"
                        android:textSize="12sp" />

                    <TextView
                        android:id="@+id/text_printer_status"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="Ready"
                        android:textColor="@color/text_primary"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.google.android.material.button.MaterialButton
                        android:id="@+id/btn_printer_test"
                        android:layout_width="match_parent"
                        android:layout_height="32dp"
                        android:layout_marginTop="8dp"
                        android:text="Test"
                        android:textSize="11sp"
                        android:textAllCaps="false"
                        app:cornerRadius="8dp"
                        style="@style/Widget.MaterialComponents.Button.TextButton" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <!-- Quick Actions -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="12dp"
            android:text="Quick Actions"
            android:textColor="@color/text_primary"
            android:textSize="16sp"
            android:textStyle="bold" />

        <!-- Apps Grid -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:baselineAligned="false">

            <!-- Installed Apps -->
            <androidx.cardview.widget.CardView
                android:id="@+id/card_installed_apps"
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_weight="1"
                android:layout_marginEnd="8dp"
                android:foreground="?attr/selectableItemBackground"
                android:clickable="true"
                android:focusable="true"
                app:cardBackgroundColor="@color/card_bg_elevated"
                app:cardCornerRadius="16dp"
                app:cardElevation="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:src="@drawable/ic_apps"
                        android:contentDescription="Apps" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="Installed Apps"
                        android:textColor="@color/text_primary"
                        android:textSize="13sp"
                        android:textStyle="bold"
                        android:gravity="center" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <!-- App Marketplace -->
            <androidx.cardview.widget.CardView
                android:id="@+id/card_marketplace"
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_weight="1"
                android:layout_marginStart="8dp"
                android:foreground="?attr/selectableItemBackground"
                android:clickable="true"
                android:focusable="true"
                app:cardBackgroundColor="@color/card_bg_elevated"
                app:cardCornerRadius="16dp"
                app:cardElevation="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:src="@drawable/ic_store"
                        android:contentDescription="Store" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="App Store"
                        android:textColor="@color/text_primary"
                        android:textSize="13sp"
                        android:textStyle="bold"
                        android:gravity="center" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <!-- Screen Share Card -->
        <androidx.cardview.widget.CardView
            android:id="@+id/card_screen_share"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="16dp"
            android:foreground="?attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            app:cardBackgroundColor="@color/card_bg_elevated"
            app:cardCornerRadius="16dp"
            app:cardElevation="0dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:padding="16dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:src="@drawable/ic_screenshare"
                    android:contentDescription="Screen Share" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginStart="16dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Remote Assistance"
                        android:textColor="@color/text_primary"
                        android:textSize="16sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/text_screenshare_status"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="Tap to start screen sharing"
                        android:textColor="@color/text_secondary"
                        android:textSize="12sp" />
                </LinearLayout>
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- Bottom spacing -->
        <View
            android:layout_width="match_parent"
            android:layout_height="24dp" />
    </LinearLayout>
</ScrollView>