import APIClient
import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

// Collapsible section with:
// - Exclude Styles Textfield
// - Weirdness slider
// - Style Influence slider
// - Audio Influence slider
// - Future: Male/Female voice toggle
// Used in: CustomCreateSheetV2 (OrpheusCustomCreate)
struct AdvancedOptionsSection: View {
    @Bindable var store: StoreOf<OrpheusCustomCreate>
    @FocusState.Binding var focusedField: OrpheusCustomCreate.State.Field?
    let config: AdvancedOptionsConfig
    
    init(
        store: StoreOf<OrpheusCustomCreate>,
        focusedField: FocusState<OrpheusCustomCreate.State.Field?>.Binding,
        config: AdvancedOptionsConfig = .default
    ) {
        self.store = store
        self._focusedField = focusedField
        self.config = config
    }
    
    var body: some View {
        VStack(spacing: 1) {
            collapsibleHeader
            
            if store.useAdvancedOptions {
                VStack(spacing: 8) {
                    ForEach(config.options, id: \.self) { option in
                        if shouldShowOption(option) {
                            optionView(for: option)
                        }
                    }
                }
                .padding(.horizontal, 12)
                .padding(.bottom, 12)
            }
        }
        .background(Color.FigmaMCP.Semantic.fogThin)
        .clipShape(RoundedRectangle(cornerRadius: 16))
    }
    
    @ViewBuilder
    private var collapsibleHeader: some View {
        HStack(spacing: 8) {
            Button(action: {
                withAnimation(.easeInOut(duration: 0.2)) {
                    store.useAdvancedOptions.toggle()
                }
            }) {
                HStack(spacing: 8) {
                    Image.FigmaMCP.chevronRight
                        .figmaMCPIconStyle(size: 16, semanticColor: Color.FigmaMCP.Semantic.foregroundPrimary)
                        .rotationEffect(.degrees(store.useAdvancedOptions ? 90 : 0))
                        .animation(.easeInOut(duration: 0.2), value: store.useAdvancedOptions)
                    
                    Text(L10n.FeatureCreateClip.advancedOptions)
                        .figmaMCPTypography(TypographyV1.FigmaMCP.smallTitle)
                        .foregroundStyle(Color.FigmaMCP.Semantic.foregroundPrimary)
                        .tracking(0.28)
                    
                    Spacer()
                }
                .contentShape(.rect)
            }
            .buttonStyle(PlainButtonStyle())
        }
        .padding(.horizontal, 16)
        .frame(height: 64)
    }
    
    private func shouldShowOption(_ option: AdvancedOption) -> Bool {
        switch option {
        case .excludeStyles:
            return true
        case .weirdness, .styleInfluence, .audioInfluence:
            return store.showSliders // Only show sliders for paid users
        }
    }
    
    @ViewBuilder
    private func optionView(for option: AdvancedOption) -> some View {
        switch option {
        case .excludeStyles:
            ExcludeStylesField(
                excludeStyles: $store.excludeStyles,
                characterLimit: store.excludeStylesCharCountLimit,
                focusedField: $focusedField,
                focusValue: OrpheusCustomCreate.State.Field.excludeStyles
            )
        case .weirdness:
            weirdnessSlider
        case .styleInfluence:
            styleInfluenceSlider
        case .audioInfluence:
            audioInfluenceSlider
        }
    }
    
    private var weirdnessSlider: some View {
        sliderRow(
            title: L10n.FeatureCreateClip.weirdness,
            infoPopoverText: L10n.FeatureCreateClip.weirdnessTooltip,
            sliderValue: $store.weirdnessConstraint,
            warningThreshold: 0.8,
            onDoubleTap: {
                // Reset to default (centered)
                store.send(.binding(.set(\.weirdnessConstraint, 0.5)))
            }
        )
    }
    
    private var styleInfluenceSlider: some View {
        sliderRow(
            title: L10n.FeatureCreateClip.styleInfluence,
            infoPopoverText: L10n.FeatureCreateClip.styleInfluenceTooltip,
            sliderValue: $store.styleWeight,
            onDoubleTap: {
                store.send(.binding(.set(\.styleWeight, 0.5)))
            }
        )
    }
    
    private var audioInfluenceSlider: some View {
        sliderRow(
            title: L10n.FeatureCreateClip.audioInfluence,
            infoPopoverText: L10n.FeatureCreateClip.audioInfluenceTooltip,
            sliderValue: $store.audioWeight,
            onDoubleTap: {
                store.send(.binding(.set(\.audioWeight, 0.5)))
            }
        )
    }
    
    private func sliderRow(
        title: String,
        infoPopoverText: String,
        sliderValue: Binding<Double>,
        warningThreshold: Double? = nil,
        onDoubleTap: (() -> Void)? = nil
    ) -> some View {
        CustomSliderV2(
            title: title,
            infoPopoverText: infoPopoverText,
            sliderValue: sliderValue,
            warningThreshold: warningThreshold
        )
        .onTapGesture(count: 2) {
            onDoubleTap?()
        }
    }
}