import SwiftUI

struct CategoryPillBar: View {
    @Binding var selected: AppSection
    var streamCount: Int = 0

    var body: some View {
        HStack(spacing: pillSpacing) {
            ForEach(AppSection.allCases) { section in
                if section == .multiView {
                    // Multi-View as a separate icon button with badge
                    Button {
                        selected = .multiView
                    } label: {
                        HStack(spacing: 6) {
                            Image(systemName: "rectangle.split.2x2.fill")
                                .font(.system(size: iconSize, weight: .semibold))
                            if streamCount > 0 {
                                Text("\(streamCount)")
                                    .font(pillFont.weight(.black))
                            }
                        }
                        .foregroundStyle(selected == .multiView ? .white : DS.Colors.textTertiary)
                        .padding(.horizontal, pillPadH)
                        .padding(.vertical, pillPadV)
                        .background(
                            Capsule().fill(selected == .multiView ? DS.Colors.interactive : .clear)
                        )
                    }
                    .platformCardStyle()
                } else if section == .settings {
                    Spacer()
                    Button {
                        selected = .settings
                    } label: {
                        Image(systemName: "gearshape.fill")
                            .font(.system(size: iconSize, weight: .semibold))
                            .foregroundStyle(selected == .settings ? .white : DS.Colors.textTertiary)
                            .padding(.horizontal, pillPadH)
                            .padding(.vertical, pillPadV)
                            .background(
                                Capsule().fill(selected == .settings ? DS.Colors.interactive : .clear)
                            )
                    }
                    .platformCardStyle()
                } else {
                    Button {
                        selected = section
                    } label: {
                        Text(section.title)
                            .font(pillFont)
                            .foregroundStyle(selected == section ? .white : DS.Colors.textTertiary)
                            .padding(.horizontal, pillPadH)
                            .padding(.vertical, pillPadV)
                            .background(
                                Capsule().fill(selected == section ? DS.Colors.interactive : .clear)
                            )
                    }
                    .platformCardStyle()
                }
            }
        }
    }

    #if os(tvOS)
    private var pillSpacing: CGFloat { 8 }
    private var pillPadH: CGFloat { 28 }
    private var pillPadV: CGFloat { 14 }
    private var pillFont: Font { .system(size: 24, weight: .bold, design: .rounded) }
    private var iconSize: CGFloat { 22 }
    #else
    private var pillSpacing: CGFloat { 4 }
    private var pillPadH: CGFloat { 18 }
    private var pillPadV: CGFloat { 10 }
    private var pillFont: Font { .system(size: 15, weight: .bold, design: .rounded) }
    private var iconSize: CGFloat { 16 }
    #endif
}

enum AppSection: String, CaseIterable, Identifiable {
    case today
    case intel
    case highlights
    case multiView
    case settings

    var id: String { rawValue }

    var title: String {
        switch self {
        case .today: "Today"
        case .intel: "Intel"
        case .highlights: "Highlights"
        case .multiView: "Multi-View"
        case .settings: "Settings"
        }
    }
}