<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="?android:attr/colorBackground"
    tools:context=".pinunlock.PinUnlockActivity">

    <!-- Header Section with Gradient Background -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/headerSection"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/password_unlock_gradient"
        android:paddingBottom="24dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <!-- Logo -->
        <ImageView
            android:id="@+id/logoImageView"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@mipmap/ic_launcher"
            android:contentDescription="@string/aliasvault_icon"
            android:elevation="4dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="80dp" />

        <!-- Title -->
        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/pin_unlock_vault"
            android:textSize="28sp"
            android:textStyle="bold"
            android:textColor="?android:attr/textColorPrimary"
            app:layout_constraintTop_toBottomOf="@id/logoImageView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="16dp" />

        <!-- Subtitle -->
        <TextView
            android:id="@+id/subtitleTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/pin_enter_to_unlock"
            android:textSize="16sp"
            android:textColor="?android:attr/textColorSecondary"
            android:gravity="center"
            app:layout_constraintTop_toBottomOf="@id/titleTextView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="8dp"
            android:layout_marginStart="32dp"
            android:layout_marginEnd="32dp"
            android:paddingBottom="16dp" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- PIN Dots Container (for fixed-length PINs) -->
    <LinearLayout
        android:id="@+id/pinDotsContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@id/headerSection"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="20dp"
        android:visibility="visible" />

    <!-- PIN Text View (for variable-length PINs) -->
    <TextView
        android:id="@+id/pinTextView"
        android:layout_width="wrap_content"
        android:layout_height="44dp"
        android:text="----"
        android:textSize="38sp"
        android:textStyle="bold"
        android:textColor="?android:attr/textColorPrimary"
        android:letterSpacing="0.2"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@id/headerSection"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="20dp"
        android:visibility="gone" />

    <!-- Error Message -->
    <TextView
        android:id="@+id/errorTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:textColor="@android:color/holo_red_dark"
        android:gravity="center"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/pinDotsContainer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="10dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp" />

    <!-- Continue Button (for PIN setup) -->
    <Button
        android:id="@+id/continueButton"
        android:layout_width="0dp"
        android:layout_height="44dp"
        android:text="@string/common_next"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        android:background="@color/primary"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@id/numpadContainer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp" />

    <!-- Numpad -->
    <LinearLayout
        android:id="@+id/numpadContainer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginBottom="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp">

        <!-- Row 1: 1-3 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_marginBottom="10dp">

            <Button
                android:id="@+id/btn1"
                style="@style/PinNumpadButton"
                android:text="1" />

            <Button
                android:id="@+id/btn2"
                style="@style/PinNumpadButton"
                android:text="2" />

            <Button
                android:id="@+id/btn3"
                style="@style/PinNumpadButton"
                android:text="3" />
        </LinearLayout>

        <!-- Row 2: 4-6 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_marginBottom="10dp">

            <Button
                android:id="@+id/btn4"
                style="@style/PinNumpadButton"
                android:text="4" />

            <Button
                android:id="@+id/btn5"
                style="@style/PinNumpadButton"
                android:text="5" />

            <Button
                android:id="@+id/btn6"
                style="@style/PinNumpadButton"
                android:text="6" />
        </LinearLayout>

        <!-- Row 3: 7-9 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_marginBottom="10dp">

            <Button
                android:id="@+id/btn7"
                style="@style/PinNumpadButton"
                android:text="7" />

            <Button
                android:id="@+id/btn8"
                style="@style/PinNumpadButton"
                android:text="8" />

            <Button
                android:id="@+id/btn9"
                style="@style/PinNumpadButton"
                android:text="9" />
        </LinearLayout>

        <!-- Row 4: Empty, 0, Backspace -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center">

            <!-- Empty space -->
            <View
                android:layout_width="0dp"
                android:layout_height="56dp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/btn0"
                style="@style/PinNumpadButton"
                android:text="0" />

            <Button
                android:id="@+id/btnBackspace"
                style="@style/PinNumpadButton"
                android:text="⌫"
                android:textSize="24sp" />
        </LinearLayout>
    </LinearLayout>

    <!-- Loading Overlay -->
    <View
        android:id="@+id/loadingOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#4D000000"
        android:visibility="gone"
        android:clickable="true"
        android:focusable="true" />

    <!-- Loading Spinner -->
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:indeterminate="true"
        android:indeterminateTint="@color/primary"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- Back Button - Floating over content -->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageButton
            android:id="@+id/cancelButton"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/ic_arrow_back"
            android:contentDescription="@string/common_cancel"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:tint="?android:attr/textColorPrimary"
            android:padding="12dp"
            android:elevation="8dp" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
