import SwiftUI

struct AdvancedOptions: View {
    @State private var isExpanded: Bool = true
    @Binding var weirdnessValue: Double
    @Binding var styleInfluenceValue: Double
    @Binding var audioInfluenceValue: Double
    @Binding var vocalGender: String

    private let vocalGenderOptions = ["Male", "Female"]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            // Header
            HStack(spacing: 8) {
                Button(action: {
                    withAnimation(.easeInOut(duration: 0.2)) {
                        isExpanded.toggle()
                    }
                }) {
                    Image("Icon/chevron-down")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(Constants.Colors.Foreground.tertiary)
                        .frame(width: 12, height: 12)
                        .rotationEffect(.degrees(isExpanded ? 0 : -90))
                        .animation(.easeInOut(duration: 0.2), value: isExpanded)
                }
                .buttonStyle(PlainButtonStyle())
                
                Text("Advanced Options")
                    .font(Constants.Typography.small)
                    .foregroundColor(Constants.Colors.Foreground.primary)
                    .tracking(0.28)
                
                Spacer()
            }
            .padding(.horizontal, 16)
            .frame(height: 64)
            
            if isExpanded {
                // Advanced options content
                VStack(spacing: 8) {
                    // Exclude styles button
                    ExcludeStylesInput {
                        print("Exclude styles tapped")
                    }
                    
                    // Weirdness slider
                    SliderComponent(
                        label: "Weirdness",
                        value: $weirdnessValue,
                        showInfoIcon: true
                    ) {
                        print("Weirdness info tapped")
                    }
                    
                    // Style Influence slider
                    SliderComponent(
                        label: "Style Influence",
                        value: $styleInfluenceValue,
                        showInfoIcon: true
                    ) {
                        print("Style Influence info tapped")
                    }
                    
                    // Audio Influence slider
                    SliderComponent(
                        label: "Audio Influence",
                        value: $audioInfluenceValue,
                        showInfoIcon: true
                    ) {
                        print("Audio Influence info tapped")
                    }
                    
                    // Vocal Gender selector
                    HStack(spacing: 24) {
                        // Label with info icon
                        HStack(spacing: 4) {
                            Text("Vocal Gender")
                                .font(Constants.Typography.xSmallTitle)
                                .foregroundColor(Constants.Colors.Foreground.primary)
                                .tracking(0.24)
                            
                            Button(action: {
                                print("Vocal Gender info tapped")
                            }) {
                                Image("Icon/info")
                                    .resizable()
                                    .renderingMode(.template)
                                    .aspectRatio(contentMode: .fit)
                                    .foregroundColor(Constants.Colors.Foreground.inactive)
                                    .frame(width: 16, height: 16)
                            }
                            .buttonStyle(PlainButtonStyle())
                        }
                        .frame(width: 100, alignment: .leading)
                        
                        Spacer()
                        
                        // Gender options
                        HStack(spacing: 8) {
                            ForEach(vocalGenderOptions, id: \.self) { gender in
                                Button(action: {
                                    withAnimation(.easeInOut(duration: 0.2)) {
                                        vocalGender = gender
                                    }
                                }) {
                                    Text(gender)
                                        .font(Constants.Typography.xSmallTitle)
                                        .foregroundColor(Constants.Colors.Foreground.primary)
                                        .tracking(0.24)
                                        .padding(.horizontal, 8)
                                        .padding(.vertical, 8)
                                        .background(
                                            Group {
                                                if vocalGender == gender {
                                                    RoundedRectangle(cornerRadius: 100)
                                                        .fill(Constants.Colors.Background.Fog.thin)
                                                } else {
                                                    Color.clear
                                                }
                                            }
                                        )
                                        .opacity(vocalGender == gender ? 1.0 : 0.3)
                                }
                                .buttonStyle(PlainButtonStyle())
                            }
                        }
                    }
                    .padding(.horizontal, 16)
                    .padding(.vertical, 12)
                    .background(
                        RoundedRectangle(cornerRadius: 12)
                            .fill(Constants.Colors.Background.Smoke.dense)
                    )
                }
                .padding(.horizontal, 12)
                .padding(.bottom, 12)
            }
        }
        .background(Constants.Colors.Background.Fog.thin)
        .clipShape(RoundedRectangle(cornerRadius: 16))
    }
}

// MARK: - Preview
#Preview {
    struct PreviewWrapper: View {
        @State private var weirdness: Double = 0.5
        @State private var styleInfluence: Double = 0.5
        @State private var audioInfluence: Double = 0.5
        @State private var vocalGender: String = "Female"

        var body: some View {
            VStack(spacing: 20) {
                AdvancedOptions(
                    weirdnessValue: $weirdness,
                    styleInfluenceValue: $styleInfluence,
                    audioInfluenceValue: $audioInfluence,
                    vocalGender: $vocalGender
                )

                Text("Other content")
                    .font(Constants.Typography.mediumRegular)
                    .foregroundColor(Constants.Colors.Foreground.primary)
            }
            .padding()
            .background(Constants.Colors.Background.secondary)
        }
    }

    return PreviewWrapper()
}