import SwiftUI

struct BrowsePanel: View {
    @Binding var browsePanelTab: BrowsePanelTab
    @Binding var isBrowsePanelOpen: Bool
    @AppStorage("playbackMode") private var playbackMode: String = "queue"
    @EnvironmentObject private var theme: AppTheme

    private var showQueueTab: Bool {
        playbackMode == "queue"
    }

    var body: some View {
        VStack(spacing: 0) {
            // Panel header
            HStack {
                if showQueueTab {
                    Picker("", selection: $browsePanelTab) {
                        ForEach(BrowsePanelTab.allCases, id: \.self) { tab in
                            Text(tab.rawValue).tag(tab)
                        }
                    }
                    .pickerStyle(.segmented)
                    .frame(maxWidth: 200)
                } else {
                    Text("Cloud")
                        .font(.system(size: 13, weight: .semibold))
                        .foregroundStyle(theme.primaryText)
                }

                Spacer()

                Button {
                    isBrowsePanelOpen = false
                } label: {
                    Image(systemName: "xmark")
                        .font(.system(size: 11, weight: .semibold))
                        .foregroundStyle(theme.secondaryText)
                        .frame(width: 24, height: 24)
                        .contentShape(Rectangle())
                }
                .buttonStyle(.plain)
                .help("Close Panel (⌘B)")
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 8)
            .background(theme.toolbarBackground.opacity(0.5))

            Divider()

            ZStack {
                CloudBrowserView()
                .onChange(of: playbackMode) { _, newMode in
                    if newMode != "queue" && browsePanelTab == .queue {
                        browsePanelTab = .cloud
                    }
                }
                .opacity(browsePanelTab == .cloud ? 1 : 0)
                .allowsHitTesting(browsePanelTab == .cloud)

                if showQueueTab {
                    QueueView()
                        .opacity(browsePanelTab == .queue ? 1 : 0)
                        .allowsHitTesting(browsePanelTab == .queue)
                }
            }
        }
    }
}