import SwiftUI

struct AdvancedOptions: View {
    @State private var isExpanded: Bool = false
    @State private var weirdnessValue: Double = 0.5
    @State private var styleInfluenceValue: Double = 0.5
    @State private var audioInfluenceValue: Double = 0.5
    @State private var vocalGender: VocalGender = .female
    
    enum VocalGender: String, CaseIterable {
        case male = "Male"
        case female = "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: 16) {
                            ForEach(VocalGender.allCases, id: \.self) { gender in
                                Button(action: {
                                    withAnimation(.easeInOut(duration: 0.2)) {
                                        vocalGender = gender
                                    }
                                }) {
                                    Text(gender.rawValue)
                                        .font(Constants.Typography.xSmallTitle)
                                        .foregroundColor(Constants.Colors.Foreground.primary)
                                        .tracking(0.24)
                                        .padding(.horizontal, 8)
                                        .padding(.vertical, 4)
                                        .background(
                                            vocalGender == gender ? 
                                            Constants.Colors.Background.Fog.thin : 
                                            Color.clear
                                        )
                                        .clipShape(RoundedRectangle(cornerRadius: 6))
                                        .opacity(vocalGender == gender ? 1.0 : 0.3)
                                }
                                .buttonStyle(PlainButtonStyle())
                            }
                        }
                    }
                    .padding(.horizontal, 16)
                    .padding(.vertical, 12)
                    .background(Constants.Colors.Background.primary)
                    .clipShape(RoundedRectangle(cornerRadius: 12))
                }
                .padding(.horizontal, 12)
                .padding(.bottom, 12)
            }
        }
        .background(Constants.Colors.Background.Fog.thin)
        .clipShape(RoundedRectangle(cornerRadius: 16))
    }
}

// MARK: - Preview
#Preview {
    VStack(spacing: 20) {
        AdvancedOptions()
        
        Text("Other content")
            .font(Constants.Typography.mediumRegular)
            .foregroundColor(Constants.Colors.Foreground.primary)
    }
    .padding()
    .background(Constants.Colors.Background.secondary)
}