import SwiftUI

struct HeaderRemix: View {
    @State private var selectedModelVersion = "v4.5"
    let remixType: String
    let onBackTap: () -> Void
    let onModelChange: ((String) -> Void)?
    let currentStyleLength: Int
    
    init(remixType: String = "Remix", onBackTap: @escaping () -> Void = {}, onModelChange: ((String) -> Void)? = nil, currentStyleLength: Int = 0) {
        self.remixType = remixType
        self.onBackTap = onBackTap
        self.onModelChange = onModelChange
        self.currentStyleLength = currentStyleLength
    }
    
    var body: some View {
        HStack {
            // Left Section - Remix Type Title and Credits
            leftSection
            
            Spacer()
            
            // Right Section - Model Version Button
            rightSection
        }
        .padding(.horizontal, 16)
        .padding(.bottom, 16)
        .overlay(
            // Bottom border
            Rectangle()
                .fill(Color.white.opacity(0.1))
                .frame(height: 1),
            alignment: .bottom
        )
    }
    
    private var leftSection: some View {
        HStack(spacing: 12) {
            // Back Button
            MediumButton.secondaryIcon("Icon/chevron-left") {
                onBackTap()
            }
            
            // Title and Credits
            VStack(alignment: .leading, spacing: 2) {
                // Remix Type Title
                Text(remixType)
                    .font(Constants.Typography.largeRegular)
                    .foregroundColor(.white)
                    .tracking(0.36)
                
                // Credits Display
                CreditsDisplay()
            }
        }
    }
    
    private var rightSection: some View {
        modelVersionButton
    }
    
    private var modelVersionButton: some View {
        Menu {
            Button {
                selectedModelVersion = "v4.5"
                onModelChange?("v4.5")
            } label: {
                HStack {
                    Text("v4.5")
                        .foregroundColor(Constants.Colors.Foreground.primary)
                    Spacer()
                    if selectedModelVersion == "v4.5" {
                        Image(systemName: "checkmark")
                            .foregroundColor(Constants.Colors.Accent.brand)
                            .font(.system(size: 14, weight: .medium))
                    }
                }
            }
            
            Button {
                selectedModelVersion = "v4.0"
                onModelChange?("v4.0")
            } label: {
                HStack {
                    Text("v4.0")
                        .foregroundColor(Constants.Colors.Foreground.primary)
                    Spacer()
                    if selectedModelVersion == "v4.0" {
                        Image(systemName: "checkmark")
                            .foregroundColor(Constants.Colors.Accent.brand)
                            .font(.system(size: 14, weight: .medium))
                    }
                }
            }
            
            Button {
                selectedModelVersion = "v3.5"
                onModelChange?("v3.5")
            } label: {
                HStack {
                    Text("v3.5")
                        .foregroundColor(Constants.Colors.Foreground.primary)
                    Spacer()
                    if selectedModelVersion == "v3.5" {
                        Image(systemName: "checkmark")
                            .foregroundColor(Constants.Colors.Accent.brand)
                            .font(.system(size: 14, weight: .medium))
                    }
                }
            }
        } label: {
            HStack(spacing: 4) {
                Text(selectedModelVersion)
                    .font(Constants.Typography.xSmallTitle)
                    .foregroundColor(Constants.Colors.Foreground.primary)
                    .tracking(0.24)
                
                Image("Icon/triangle-down")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 16, height: 16)
                    .foregroundColor(Constants.Colors.Foreground.primary)
            }
            .frame(height: 40)
            .padding(.horizontal, 16)
            .background(
                RoundedRectangle(cornerRadius: 100)
                    .stroke(Color.white.opacity(0.1), lineWidth: 1)
            )
        }
        .buttonStyle(PlainButtonStyle())
    }
}

#Preview {
    HeaderRemix(remixType: "Cover") {
        print("Back tapped")
    }
    .background(Constants.Colors.Background.primary)
}