Bedrock/Sources/Bedrock/Views/Settings/SettingsSegmentedPicker.swift

//
//  SettingsSegmentedPicker.swift
//  Bedrock
//
//  A segmented picker with title, subtitle, and optional accessory.
//

import SwiftUI

/// A segmented picker setting with title, subtitle, and capsule-style buttons.
///
/// Use this for selecting from a small number of options (2-4) in settings.
///
/// ```swift
/// // Basic picker
/// SettingsSegmentedPicker(
///     title: "Camera",
///     subtitle: "Choose between front and back camera",
///     options: [("Front", .front), ("Back", .back)],
///     selection: $cameraPosition
/// )
///
/// // Premium picker with crown icon
/// SettingsSegmentedPicker(
///     title: "HDR Mode",
///     subtitle: "High Dynamic Range for better lighting",
///     options: [("Off", .off), ("On", .on), ("Auto", .auto)],
///     selection: $hdrMode,
///     titleAccessory: {
///         Image(systemName: "crown.fill")
///             .foregroundStyle(.orange)
///     }
/// )
/// ```
public struct SettingsSegmentedPicker<T: Equatable, Accessory: View>: View {
    /// The main title text.
    public let title: String
    
    /// The subtitle/description text.
    public let subtitle: String
    
    /// The available options as (label, value) pairs.
    public let options: [(String, T)]
    
    /// Binding to the selected value.
    @Binding public var selection: T
    
    /// The accent color for the selected button.
    public let accentColor: Color
    
    /// Optional accessory view shown after the title (e.g., crown icon for premium).
    public let titleAccessory: Accessory?
    
    /// Creates a settings segmented picker.
    /// - Parameters:
    ///   - title: The main title.
    ///   - subtitle: The subtitle description.
    ///   - options: Array of (label, value) tuples.
    ///   - selection: Binding to selected value.
    ///   - accentColor: The accent color (default: primary accent).
    ///   - titleAccessory: Optional view after title (e.g., premium crown).
    public init(
        title: String,
        subtitle: String,
        options: [(String, T)],
        selection: Binding<T>,
        accentColor: Color = .Accent.primary,
        @ViewBuilder titleAccessory: () -> Accessory? = { nil as EmptyView? }
    ) {
        self.title = title
        self.subtitle = subtitle
        self.options = options
        self._selection = selection
        self.accentColor = accentColor
        self.titleAccessory = titleAccessory()
    }
    
    public var body: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.small) {
            // Title row with optional accessory
            HStack(spacing: Design.Spacing.xSmall) {
                Text(title)
                    .font(.subheadline.weight(.medium))
                    .foregroundStyle(.primary)
                
                if let titleAccessory {
                    titleAccessory
                        .font(.caption2)
                }
            }
            
            // Subtitle
            Text(subtitle)
                .font(.caption)
                .foregroundStyle(.secondary)
            
            // Segmented buttons
            HStack(spacing: Design.Spacing.small) {
                ForEach(options.indices, id: \.self) { index in
                    let option = options[index]
                    Button {
                        selection = option.1
                    } label: {
                        Text(option.0)
                            .font(.subheadline.weight(.medium))
                            .foregroundStyle(selection == option.1 ? Color.white : .primary)
                            .padding(.vertical, Design.Spacing.small)
                            .frame(maxWidth: .infinity)
                            .background(
                                Capsule()
                                    .fill(selection == option.1 ? accentColor : Color.secondary.opacity(Design.Opacity.subtle))
                            )
                    }
                    .buttonStyle(.plain)
                }
            }
        }
        .padding(.vertical, Design.Spacing.xSmall)
    }
}

// MARK: - Convenience Initializer

extension SettingsSegmentedPicker where Accessory == EmptyView {
    /// Creates a settings segmented picker without a title accessory.
    public init(
        title: String,
        subtitle: String,
        options: [(String, T)],
        selection: Binding<T>,
        accentColor: Color = .Accent.primary
    ) {
        self.title = title
        self.subtitle = subtitle
        self.options = options
        self._selection = selection
        self.accentColor = accentColor
        self.titleAccessory = nil
    }
}

// MARK: - Preview

#Preview {
    VStack(spacing: Design.Spacing.large) {
        SettingsSegmentedPicker(
            title: "Camera",
            subtitle: "Choose between front and back camera lenses",
            options: [("Front", "front"), ("Back", "back")],
            selection: .constant("front")
        )
        
        SettingsSegmentedPicker(
            title: "Flash Mode",
            subtitle: "Controls automatic flash behavior for photos",
            options: [("Off", 0), ("On", 1), ("Auto", 2)],
            selection: .constant(0)
        )
        
        SettingsSegmentedPicker(
            title: "HDR Mode",
            subtitle: "High Dynamic Range for better lighting in photos",
            options: [("Off", "off"), ("On", "on"), ("Auto", "auto")],
            selection: .constant("off"),
            titleAccessory: {
                Image(systemName: "crown.fill")
                    .foregroundStyle(.orange)
            }
        )
    }
    .padding()
    .background(Color.Surface.overlay)
}