import SwiftUI

struct OnboardingView: View {
    @Binding var isOnboardingComplete: Bool
    @Binding var userName: String
    @Binding var userRole: UserRole
    @Binding var userColorHex: String
    
    let colors: [String] = [
        "#FF0055", // Neon Red
        "#00FF99", // Neon Green
        "#00CCFF", // Neon Blue
        "#9900FF", // Neon Purple
        "#FF9900", // Neon Orange
        "#FF00CC", // Neon Pink
        "#00FFEA", // Cyan
        "#FFFFFF"  // White
    ]
    @State private var showQRCode = false
    
    var body: some View {
        ZStack {
            MeshBackground(colors: [
                Color(hex: userColorHex),
                userRole == .deaf ? .purple : .blue,
                .black
            ])
            
            // Top Right QR Code Link
            VStack {
                HStack {
                    Spacer()
                    Button(action: {
                        showQRCode = true
                    }) {
                        HStack(spacing: 6) {
                            Image(systemName: "qrcode")
                            Text("QR code for the app")
                        }
                        .font(.caption)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(8)
                        .background(.ultraThinMaterial)
                        .cornerRadius(12)
                    }
                }
                Spacer()
            }
            .padding(.top, 50) // Safe area
            .padding(.horizontal)
            .ignoresSafeArea()
            
            VStack(spacing: 40) {
                DesignSystem.Typography.title("Welcome")
                    .foregroundColor(.white)
                    .shadow(radius: 10)
                
                VStack(spacing: 25) {
                    VStack(alignment: .leading, spacing: 8) {
                        Label("Your name", systemImage: "person.fill")
                            .font(.headline)
                            .foregroundColor(.white.opacity(0.8))
                        
                        TextField("Enter Name", text: $userName)
                            .padding()
                            .background(.ultraThinMaterial)
                            .cornerRadius(12)
                            .foregroundColor(.white)
                    }
                    
                    VStack(alignment: .leading, spacing: 8) {
                        Label("I am...", systemImage: "ear")
                            .font(.headline)
                            .foregroundColor(.white.opacity(0.8))
                        
                        Picker("Role", selection: $userRole) {
                            ForEach(UserRole.allCases, id: \.self) { role in
                                Text(role.displayName).tag(role)
                            }
                        }
                        .pickerStyle(SegmentedPickerStyle())
                        .colorMultiply(.white)
                        .onChange(of: userRole) { _, newRole in
                            withAnimation {
                                if newRole == .hearing {
                                    userColorHex = "#00FF99" // Neon Green
                                } else {
                                    userColorHex = "#00CCFF" // Neon Blue
                                }
                            }
                        }

                    }
                    
                    VStack(alignment: .leading, spacing: 15) {
                        Label("Pick your Aura color", systemImage: "paintpalette.fill")
                            .font(.headline)
                            .foregroundColor(.white.opacity(0.8))
                        
                        LazyVGrid(columns: [GridItem(.adaptive(minimum: 44))], spacing: 15) {
                            ForEach(colors, id: \.self) { color in
                                Circle()
                                    .fill(Color(hex: color))
                                    .frame(width: 44, height: 44)
                                    .overlay(
                                        Circle()
                                            .stroke(.white, lineWidth: userColorHex == color ? 4 : 0)
                                            .shadow(color: Color(hex: color).opacity(0.8), radius: 10)
                                    )
                                    .scaleEffect(userColorHex == color ? 1.1 : 1.0)
                                    .onTapGesture {
                                        withAnimation(.spring()) {
                                            userColorHex = color
                                        }
                                    }
                            }
                        }
                    }
                }
                .padding(30)
                .liquidCard()
                .padding(.horizontal)
                
                Button(action: {
                    withAnimation {
                        if !userName.isEmpty {
                            isOnboardingComplete = true
                        }
                    }
                }) {
                    Text("Start Conversation")
                    .font(.headline)
                    .fontWeight(.bold)
                    .foregroundColor(.black)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(
                        LinearGradient(colors: [.white, .white.opacity(0.8)], startPoint: .top, endPoint: .bottom)
                    )
                    .cornerRadius(20)
                    .glowingEdge(color: .white)
                }
                .disabled(userName.isEmpty)
                .opacity(userName.isEmpty ? 0.5 : 1)
                .padding(.horizontal, 40)
            }
        }
        .sheet(isPresented: $showQRCode) {
            QRCodeView()
        }
    }
}

// Keep Hex Color extension or ensure it's in Constants/Shared
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }

        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}
