import android.view.View
import android.widget.Button
import android.widget.FrameLayout
import com.trtc.uikit.livekit.features.anchorview.*

fun setupUI(anchorView: AnchorView) {
    val context = anchorView.context

    // Step 1: Create a beauty filter button and set button order
    val beautyButton = Button(context).apply {
        text = "Beauty"
    }
    // Order: Co-host, PK (Battle), Custom Beauty Button, More
    anchorView.bottomItems = listOf(
        AnchorBottomItem.CoHost,
        AnchorBottomItem.Battle,
        AnchorBottomItem.Custom(beautyButton),
        AnchorBottomItem.More
    )

    // Step 2: Replace the LiveInfo view with a custom style
    val customLiveInfoView = CustomLiveInfoView(context)
    anchorView.replace(AnchorNode.LIVE_INFO, customLiveInfoView)

    // Step 3: Add a floating "Popularity Leaderboard" widget
    val rankWidget = RankWidgetView(context)
    // Position below the top left corner
    val params = FrameLayout.LayoutParams(dp2px(70f), dp2px(30f)).apply {
        topMargin = dp2px(120f)
        leftMargin = dp2px(12f)
    }
    // Add the widget to the overlay layer
    anchorView.overlayView.addView(rankWidget, params)
}

// Utility method (example)
fun dp2px(dpValue: Float): Int {
    val scale = Resources.getSystem().displayMetrics.density
    return (dpValue * scale + 0.5f).toInt()
}

// Example: Only keep the Co-host feature in the bottom toolbar and add a product list trigger button
fun adjustBottomBar(anchorView: AnchorView) {
    val context = anchorView.context

    // Step 1: Prepare the custom button view
    val goodsButton = ImageView(context).apply {
        setImageResource(R.drawable.shop_cart)
    }

    // Step 2: Update the bottom button array
    anchorView.bottomItems = listOf(
        AnchorBottomItem.CoHost, 
        AnchorBottomItem.Custom(goodsButton)
    )
}

// Example: Keep the Audience Count and Close Room buttons in the top right, and add a "Report" button
fun adjustTopRightBar(anchorView: AnchorView) {
    val context = anchorView.context

    // Step 1: Prepare the custom button view
    val reportButton = ImageView(context).apply {
        setImageResource(R.drawable.report_btn)
    }

    // Step 2: Update the top button array according to display order
    anchorView.topRightItems = listOf(
        AnchorTopRightItem.AudienceCount, 
        AnchorTopRightItem.Custom(reportButton), 
        AnchorTopRightItem.Close
    )
}

// Example: Replace the default live info area with a custom view
fun replaceLiveInfoNode(anchorView: AnchorView) {
    val context = anchorView.context

    // Step 1: Initialize a custom view for business needs
    val customInfoView = MyInfoView(context).apply {
        setBackgroundColor(Color.DKGRAY)
    }

    // Step 2: Call the replace interface to update the specific node
    anchorView.replace(AnchorNode.LIVE_INFO, customInfoView)
}

class MyInfoView(context: Context) : FrameLayout(context) {
    init {
        val label = TextView(context).apply {
            text = "Live now"
            setPadding(24, 24, 24, 24)
        }
        // Use WRAP_CONTENT to fit the text size
        val params = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
        addView(label, params)
    }
}

// Example: Bind a click event to a custom live info view and reuse the SDK's built-in host info panel
fun setupCustomLiveInfoNode(anchorView: AnchorView) {
    val customLiveInfoView = MyInfoView(anchorView.context)

    // Step 1: Enable user interaction and add a click event
    customLiveInfoView.isClickable = true
    customLiveInfoView.setOnClickListener {
        // Step 2: Reuse the built-in host info popup on click
        anchorView.perform(AnchorAction.SHOW_LIVE_INFO)
        // Or display your own host info popup here
    }

    anchorView.replace(AnchorNode.LIVE_INFO, customLiveInfoView)
}

import android.content.Context
import android.graphics.Color
import android.widget.FrameLayout
import io.trtc.tuikit.atomicx.widget.basicwidget.popover.AtomicPopover
// Import the underlying data interface for business development
import io.trtc.tuikit.atomicxcore.api.live.LiveAudienceStore 

// Step 1: Build a custom business view (e.g., audience list)
class CustomAudienceListView(context: Context) : FrameLayout(context) {
    init {
        setBackgroundColor(Color.WHITE)
        setupUI()
        bindLiveData()
    }

    private fun setupUI() {
        // Add your custom UI controls here, such as audience avatars, user levels, etc.
    }

    private fun bindLiveData() {
        // Use AtomicXCore's core interface to get current room status or user data
        // For example: LiveAudienceStore.create(liveID)...
        // After fetching core data, update the custom UI built above
    }
}

// Example: Slide up a fully custom panel from the bottom of the screen occupying 50% of the height
fun presentBusinessPanel(context: Context) {
    // Step 2: Instantiate the popup container, specify to pop up from the bottom
    val popover = AtomicPopover(context, AtomicPopover.PanelGravity.BOTTOM)

    // Step 3: Configure and display the custom view
    // Set panel height to 50% of the screen (or use WrapContent for adaptive height)
    popover.setPanelHeight(AtomicPopover.PanelHeight.Ratio(0.5f))

    // Instantiate the custom business view
    val audienceListView = CustomAudienceListView(context)

    // Set the view into the Popover and display
    popover.setContent(audienceListView)
    popover.show()
}

// Example: Display a floating red packet widget in the top left corner, and pop up the custom business panel when clicked
fun addRedPacketWidget(anchorView: AnchorView) {
    val context = anchorView.context

    // Step 1: Create the widget view and enable interaction
    val redPacketWidget = ImageView(context).apply {
        setImageResource(R.drawable.red_packet_icon)
        isClickable = true
    }

    // Step 2: Bind the click event
    redPacketWidget.setOnClickListener {
        presentBusinessPanel(context)
    }

    // Step 3: Set layout attributes and add to the overlay layer
    val params = FrameLayout.LayoutParams(dp2px(60f), dp2px(60f)).apply {
        leftMargin = dp2px(15f)
        topMargin = dp2px(120f)
    }
    anchorView.overlayView.addView(redPacketWidget, params)
}