<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/theme_bg_dark">

    <!-- ================= 1. TOP BAR CONTROL ================= -->
    <LinearLayout
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/theme_bar_bg"
        android:orientation="horizontal"
        android:gravity="center"
        android:paddingHorizontal="16dp"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/btnFlash"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@color/theme_transparent"
            android:src="@drawable/ic_flash"
            app:tint="@color/theme_white"
            android:contentDescription="Flash Toggle" />

        <Space
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageButton
            android:id="@+id/btnTimer"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@color/theme_transparent"
            android:src="@drawable/ic_timer"
            app:tint="@color/theme_white"
            android:contentDescription="Timer Toggle" />

        <Space
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageButton
            android:id="@+id/btnSwitchCamera"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@color/theme_transparent"
            android:src="@drawable/ic_flip_camera"
            app:tint="@color/theme_white"
            android:contentDescription="Switch Camera" />
    </LinearLayout>

    <!-- DẢI ĐEN PHÍA TRÊN ẢNH CAMERA (Như mô tả trong image.png) -->
    <RelativeLayout
        android:id="@+id/layoutEditorTitleBar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#000000"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/topBar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <!-- Văn bản hiển thị động tên nút đang được chọn -->
        <TextView
            android:id="@+id/tvCurrentAttributeName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Brightness (Độ sáng)"
            android:textColor="#FF9800"
            android:textSize="14sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <!-- ================= 2. KHUNG FRAME CHÍNH (CAMERA + FILTER + FRAME OVERLAY) ================= -->
    <FrameLayout
        android:id="@+id/cameraContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#000000"
        app:layout_constraintDimensionRatio="3:4"
        app:layout_constraintTop_toBottomOf="@id/topBar"
        app:layout_constraintBottom_toTopOf="@id/panelSelectionContainer">

        <!-- Lớp đáy: Kính ngắm CameraX -->
        <androidx.camera.view.PreviewView
            android:id="@+id/viewFinder"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Lớp đè AI: Hiển thị kết quả tách nền thời gian thực -->
        <ImageView
            android:id="@+id/imgAiPreviewOverlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter"
            android:visibility="gone"
            android:contentDescription="AI Preview Overlay" />

        <!-- Lớp đè lọc màu (Filter Overlay): Hiển thị màu Preset cổ điển -->
        <ImageView
            android:id="@+id/imgFilterOverlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter"
            android:visibility="gone"
            android:contentDescription="Filter Overlay" />

        <!-- Lớp đè (Overlay): Hiển thị Khung hình PNG do người dùng chọn -->
        <ImageView
            android:id="@+id/imgFrameOverlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter"
            android:contentDescription="Frame Overlay" />

        <!-- Lớp chớp sáng màn hình khi chụp (Flash Effect) -->
        <View
            android:id="@+id/viewShutterFlash"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFF"
            android:visibility="gone" />

        <!-- Số đếm ngược khi hẹn giờ chụp -->
        <TextView
            android:id="@+id/txtTimerCountdown"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/theme_white"
            android:textSize="100sp"
            android:textStyle="bold"
            android:shadowColor="@color/theme_panel_dark"
            android:shadowDx="4"
            android:shadowDy="4"
            android:shadowRadius="10"
            android:visibility="gone"
            android:text="3" />

        <!-- Vòng tròn định vị lấy nét (Focus Ring) khi chạm vào Viewfinder -->
        <View
            android:id="@+id/viewFocusRing"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/bg_focus_ring"
            android:visibility="gone" />

    </FrameLayout>

    <!-- ================= KHỐI 1: TIMELINE FRAMES & PRESETS ================= -->
    <!-- Đặt ngay phía dưới Camera và không bị ai đè lên nữa -->
    <FrameLayout
        android:id="@+id/panelSelectionContainer"
        android:layout_width="match_parent"
        android:layout_height="96dp"
        android:background="#000000"
        app:layout_constraintTop_toBottomOf="@id/cameraContainer"
        app:layout_constraintBottom_toTopOf="@id/bottomControlPanel">

        <!-- Danh sách cuộn ngang (Frames / Presets) -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvHorizontalTimeline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal"
            android:clipToPadding="false"
            android:paddingStart="75dp"
            android:paddingEnd="16dp"
            android:visibility="gone" />

        <!-- Danh sách lựa chọn phông nền AI (Thay thế nền) -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvBackgroundOptions"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal"
            android:clipToPadding="false"
            android:paddingStart="75dp"
            android:paddingEnd="16dp"
            android:visibility="gone" />

        <!-- Thước đo Ruler cho Portrait Blur (Xóa nền) -->
        <FrameLayout
            android:id="@+id/panelRulerContainer"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="75dp"
            android:visibility="gone">

            <com.photobooth.app.RulerView
                android:id="@+id/panelRulerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <LinearLayout
                android:id="@+id/layoutPanelRulerPointer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:id="@+id/tvPanelRulerValue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:textColor="#FF9800"
                    android:textSize="12sp"
                    android:textStyle="bold"
                    android:layout_gravity="center_horizontal"/>
                <ImageView
                    android:layout_width="12dp"
                    android:layout_height="12dp"
                    android:src="@drawable/ic_arrow_down_orange"
                    android:layout_gravity="center_horizontal"
                    android:contentDescription="Indicator" />
            </LinearLayout>
        </FrameLayout>

        <!-- Khung nền đen che các item cuộn sang bên trái -->
        <View
            android:id="@+id/viewLeftDockBackground"
            android:layout_width="75dp"
            android:layout_height="match_parent"
            android:background="#000000"
            android:visibility="gone" />

        <!-- LỚP TRÊN: Chứa 4 nút chức năng chính (Gốc ở giữa, động chuyển sang trái) -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/buttonsWrapper"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- Nút Frame -->
            <ImageView
                android:id="@+id/btnMainFrame"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_default_frame_thumbnail"
                android:background="@android:color/transparent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@id/btnMainPreset"
                app:layout_constraintHorizontal_chainStyle="packed"
                android:layout_marginEnd="12dp"
                android:contentDescription="Frame Selector" />

            <!-- Nút Presets Màu -->
            <ImageView
                android:id="@+id/btnMainPreset"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_default_preset_thumbnail"
                android:background="@android:color/transparent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/btnMainFrame"
                app:layout_constraintEnd_toStartOf="@id/btnMainPortraitBlur"
                android:layout_marginEnd="12dp"
                android:contentDescription="Preset Color Selector" />

            <!-- Nút Xóa nền (Portrait Blur) -->
            <ImageView
                android:id="@+id/btnMainPortraitBlur"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_attr_portrait_blur"
                android:background="@android:color/transparent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/btnMainPreset"
                app:layout_constraintEnd_toStartOf="@id/btnMainBgReplace"
                android:layout_marginEnd="12dp"
                android:contentDescription="Portrait Blur Selector" />

            <!-- Nút Thay nền (BG Replace) -->
            <ImageView
                android:id="@+id/btnMainBgReplace"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_attr_bg_replace"
                android:background="@android:color/transparent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/btnMainPortraitBlur"
                app:layout_constraintEnd_toEndOf="parent"
                android:contentDescription="Background Replace Selector" />
                
        </androidx.constraintlayout.widget.ConstraintLayout>
    </FrameLayout>

    <!-- ================= KHỐI 2: BOTTOM CONTROL PANEL (ĐIỀU KHIỂN CAMERA) ================= -->
    <!-- Khối này gom gọn cả nút Zoom, Shutter và nút Xem ảnh, xóa bỏ các dải nền thừa -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottomControlPanel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        app:layout_constraintTop_toBottomOf="@id/panelSelectionContainer"
        app:layout_constraintBottom_toBottomOf="parent">

        <!-- CỤM ZOOM THUẦN (Xóa bỏ dải nền cũ) -->
        <LinearLayout
            android:id="@+id/layoutZoomGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="12dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <TextView
                android:id="@+id/tvZoom05"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0.5x"
                android:textColor="#FFFFFF"
                android:textStyle="bold"
                android:padding="8dp" />

            <TextView
                android:id="@+id/tvZoom1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1x"
                android:textColor="@color/theme_primary"
                android:textStyle="bold"
                android:padding="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp" />

            <TextView
                android:id="@+id/tvZoom3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3x"
                android:textColor="#FFFFFF"
                android:textStyle="bold"
                android:padding="8dp" />
        </LinearLayout>

        <!-- NÚT XEM ẢNH (Biểu tượng Image/Gallery) -->
        <ImageButton
            android:id="@+id/btnGalleryReview"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@null"
            android:src="@drawable/ic_image_gallery"
            app:layout_constraintTop_toTopOf="@id/btnShutterCapture"
            app:layout_constraintBottom_toBottomOf="@id/btnShutterCapture"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp"
            android:contentDescription="Review Gallery" />

        <!-- NÚT SHUTTER CHỤP ẢNH (Viền cam ruột trắng) -->
        <ImageButton
            android:id="@+id/btnShutterCapture"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:background="@drawable/bg_shutter_orange_circle"
            android:layout_marginBottom="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layoutZoomGroup"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:contentDescription="Shutter Button" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- KHU VỰC ĐIỀU KHIỂN CHỈNH SỬA ẢNH (Thay thế Control Panel khi nhấn giữ preset) -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutTimelineEditor"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="#000000"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent">

        <!-- TẦNG 1: THANH TRƯỢT THƯỚC ĐO ĐỘC ĐÁO (RULER SLIDER) -->
        <FrameLayout
            android:id="@+id/rulerContainer"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent">

            <com.photobooth.app.RulerView
                android:id="@+id/rulerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <!-- Kim chỉ số 0 màu cam chính giữa cố định -->
            <LinearLayout
                android:id="@+id/layoutRulerPointer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">
                <TextView
                    android:id="@+id/tvRulerValue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:textColor="#FF9800"
                    android:textSize="12sp"
                    android:textStyle="bold"
                    android:layout_gravity="center_horizontal"/>
                <ImageView
                    android:layout_width="12dp"
                    android:layout_height="12dp"
                    android:src="@drawable/ic_arrow_down_orange"
                    android:layout_gravity="center_horizontal"
                    android:contentDescription="Indicator" />
            </LinearLayout>
        </FrameLayout>

        <!-- TẦNG 2: PHẦN HIỂN THỊ ICON CÁC THUỘC TÍNH (HORIZONTAL LIST) -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvAttributeIcons"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:clipToPadding="false"
            app:layout_constraintTop_toBottomOf="@id/rulerContainer"
            app:layout_constraintBottom_toTopOf="@id/layoutEditorActionButtons" />

        <!-- TẦNG 3: THANH THAO TÁC HOÀN THÀNH (HỦY / ĐỒNG Ý) -->
        <RelativeLayout
            android:id="@+id/layoutEditorActionButtons"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:paddingStart="20dp"
            android:paddingEnd="20dp"
            app:layout_constraintBottom_toBottomOf="parent">

            <!-- Nút X (Hủy bỏ các thông số vừa chỉnh) -->
            <ImageButton
                android:id="@+id/btnEditorClose"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:background="@null"
                android:src="@drawable/ic_close_white"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:contentDescription="Close" />

            <!-- Nút Dấu Tích (Đồng ý để lưu preset) -->
            <ImageButton
                android:id="@+id/btnEditorCheck"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:background="@null"
                android:src="@drawable/ic_check_white"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:contentDescription="Save" />
        </RelativeLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- Biểu tượng loading xoay tròn khi đang xử lý ảnh -->
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:visibility="gone"
        android:elevation="10dp"
        android:indeterminateTint="@color/theme_primary"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
