import SwiftUI

struct SliderComponent: View {
    let label: String
    @Binding var value: Double // 0.0 to 1.0
    let showInfoIcon: Bool
    let onInfoTap: (() -> Void)?
    
    @State private var isDragging: Bool = false
    private let barCount = 11
    
    init(
        label: String,
        value: Binding<Double>,
        showInfoIcon: Bool = true,
        onInfoTap: (() -> Void)? = nil
    ) {
        self.label = label
        self._value = value
        self.showInfoIcon = showInfoIcon
        self.onInfoTap = onInfoTap
    }
    
    var body: some View {
        HStack(spacing: 24) {
            // Label section
            HStack(spacing: 4) {
                Text(label)
                    .font(Constants.Typography.xSmallTitle)
                    .foregroundColor(Constants.Colors.Foreground.primary)
                    .tracking(0.24)
                
                if showInfoIcon {
                    Button(action: {
                        onInfoTap?()
                    }) {
                        Image("Icon/info")
                            .resizable()
                            .renderingMode(.template)
                            .aspectRatio(contentMode: .fit)
                            .foregroundColor(Constants.Colors.Foreground.inactive)
                            .frame(width: 16, height: 16)
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }
            .frame(width: 120, alignment: .leading)
            
            // Slider section
            ZStack {
                // Background bars
                HStack(spacing: 0) {
                    ForEach(0..<barCount, id: \.self) { index in
                        let barOpacity = getBarOpacity(for: index)
                        RoundedRectangle(cornerRadius: 100)
                            .fill(Constants.Colors.Foreground.primary.opacity(barOpacity))
                            .frame(width: 2, height: 24)
                        
                        if index < barCount - 1 {
                            Spacer()
                        }
                    }
                }
                
                // Active slider thumb with GeometryReader only for positioning
                GeometryReader { geometry in
                    let thumbWidth: CGFloat = 10
                    let thumbPosition = geometry.size.width * value
                    
                    RoundedRectangle(cornerRadius: 100)
                        .fill(Constants.Colors.Accent.brand)
                        .frame(
                            width: isDragging ? thumbWidth * 1.8 : thumbWidth,
                            height: isDragging ? 32 : 24
                        )
                        .shadow(color: .black.opacity(0.4), radius: 6, x: 0, y: 4)
                        .animation(.easeInOut(duration: 0.15), value: isDragging)
                        .position(x: thumbPosition, y: geometry.size.height / 2)
                        .gesture(
                            DragGesture(minimumDistance: 0)
                                .onChanged { gesture in
                                    if !isDragging {
                                        withAnimation(.easeInOut(duration: 0.15)) {
                                            isDragging = true
                                        }
                                    }
                                    
                                    // Calculate new value based on absolute finger position
                                    let fingerX = gesture.location.x
                                    let rawValue = max(0, min(1, fingerX / geometry.size.width))
                                    
                                    // Snap to 1% increments for smoother dragging
                                    let percentValue = round(rawValue * 100) / 100
                                    value = percentValue
                                }
                                .onEnded { _ in
                                    withAnimation(.easeInOut(duration: 0.15)) {
                                        isDragging = false
                                    }
                                }
                        )
                }
            }
            .frame(height: 24)
            
            // Percentage display
            Text("\(Int(value * 100))%")
                .font(Constants.Typography.xSmallTitle)
                .foregroundColor(Constants.Colors.Foreground.primary)
                .tracking(0.24)
                .frame(width: 40, alignment: .trailing)
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .background(Constants.Colors.Background.primary)
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
    
    private func getBarOpacity(for index: Int) -> Double {
        let position = Double(index) / Double(barCount - 1)
        let distance = abs(position - value)
        
        if distance <= 0.1 {
            return 0.3
        } else if distance <= 0.2 {
            return 0.15
        } else if distance <= 0.3 {
            return 0.1
        } else {
            return 0.05
        }
    }
}

// MARK: - Preview
#Preview {
    VStack(spacing: 20) {
        SliderComponent(
            label: "Style Influence",
            value: .constant(0.5)
        )
        
        SliderComponent(
            label: "Volume",
            value: .constant(0.3)
        )
        
        SliderComponent(
            label: "Tempo",
            value: .constant(0.8),
            showInfoIcon: false
        )
    }
    .padding()
    .background(Constants.Colors.Background.secondary)
}