import SwiftUI

struct InputBar: View {
    let userRole: UserRole
    @Binding var text: String
    @Binding var isRecording: Bool
    var transcript: String // New property for live transcript
    var onSend: () -> Void
    var onToggleRecording: () -> Void
    
    @State private var orbScale: CGFloat = 1.0
    
    var body: some View {
        VStack(spacing: 0) {
            // Gradient Divider
            LinearGradient(
                colors: [.clear, .white.opacity(0.2), .clear],
                startPoint: .leading,
                endPoint: .trailing
            )
            .frame(height: 1)
            
            ZStack {
                Rectangle()
                    .fill(.ultraThinMaterial)
                    .ignoresSafeArea()
                
                if userRole == .deaf {
                    deafInputView
                } else {
                    hearingInputView
                }
            }
            .frame(height: userRole == .hearing ? 200 : 160) // Increased height for transcript
        }
    }
    
    var deafInputView: some View {
        VStack(spacing: 12) {
            HStack(spacing: 12) {
                TextField("Type a message...", text: $text)
                    .padding()
                    .background(Color.black.opacity(0.3))
                    .cornerRadius(24)
                    .overlay(
                        RoundedRectangle(cornerRadius: 24)
                            .stroke(.white.opacity(0.2), lineWidth: 1)
                    )
                    .foregroundColor(.white)
                    .submitLabel(.send)
                    .onSubmit {
                        if !text.isEmpty {
                            onSend()
                        }
                    }
                
                Button(action: {
                    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    onSend()
                }) {
                    Image(systemName: "arrow.up")
                        .font(.system(size: 20, weight: .bold))
                        .foregroundColor(.black)
                        .frame(width: 44, height: 44)
                        .background(
                            Circle()
                                .fill(text.isEmpty ? Color.gray : Color.white)
                        )
                        .shadow(radius: 5)
                }
                .disabled(text.isEmpty)
            }
            .padding(.horizontal)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 10) {
                    ForEach(["Yes", "No", "Hold on", "Thanks", "Please repeat"], id: \.self) { phrase in
                        Button(action: {
                            text = phrase
                            onSend()
                        }) {
                            Text(phrase)
                                .font(.caption)
                                .fontWeight(.bold)
                                .padding(.horizontal, 16)
                                .padding(.vertical, 8)
                                .background(Color.white.opacity(0.1))
                                .cornerRadius(16)
                                .overlay(
                                    RoundedRectangle(cornerRadius: 16)
                                        .stroke(.white.opacity(0.3), lineWidth: 1)
                                )
                                .foregroundColor(.white)
                        }
                    }
                }
                .padding(.horizontal)
            }
        }
        .padding(.vertical)
    }
    
    var hearingInputView: some View {
        VStack(spacing: 16) {
            // Live Transcription Box
            if !transcript.isEmpty {
                ScrollViewReader { proxy in
                    ScrollView {
                        Text(transcript)
                            .font(.system(.body, design: .rounded))
                            .foregroundColor(.white)
                            .multilineTextAlignment(.leading) // Leading alignment better for scrolling reading
                            .padding()
                            .id("transcriptionText")
                    }
                    .frame(height: 60) // Approx 2 lines + padding
                    .frame(maxWidth: .infinity)
                    .background(
                        RoundedRectangle(cornerRadius: 16)
                            .fill(Color.black.opacity(0.2))
                    )
                    .overlay(
                        RoundedRectangle(cornerRadius: 16)
                            .stroke(.white.opacity(0.1), lineWidth: 1)
                    )
                    .onChange(of: transcript) {
                        withAnimation {
                            proxy.scrollTo("transcriptionText", anchor: .bottom)
                        }
                    }
                }
                .padding(.horizontal)
                .transition(.move(edge: .bottom).combined(with: .opacity))
            } else {
                Text(isRecording ? "Listening..." : "Press to speak...")
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .background(
                        RoundedRectangle(cornerRadius: 16)
                            .fill(Color.black.opacity(0.1))
                    )
                    .overlay(
                        RoundedRectangle(cornerRadius: 16)
                            .stroke(.white.opacity(0.1), lineWidth: 1)
                    )
                    .font(.system(.body, design: .rounded))
                    .foregroundColor(.white.opacity(0.5))
                    .padding(.horizontal)
            }
            
            HStack {
                Spacer()
                
                // Glowing Intelligence Orb
                Button(action: onToggleRecording) {
                    ZStack {
                        // Outer Glow
                        Circle()
                            .fill(
                                AngularGradient(
                                    gradient: Gradient(colors: [.blue, .purple, .cyan, .blue]),
                                    center: .center
                                )
                            )
                            .frame(width: 80, height: 80)
                            .blur(radius: isRecording ? 10 : 0)
                            .rotationEffect(.degrees(isRecording ? 360 : 0))
                            .animation(isRecording ? Animation.linear(duration: 2).repeatForever(autoreverses: false) : .default, value: isRecording)
                        
                        // Core
                        Circle()
                            .fill(.ultraThinMaterial)
                            .frame(width: 76, height: 76)
                            .overlay(
                                Image(systemName: isRecording ? "stop.fill" : "mic.fill")
                                    .font(.title)
                                    .foregroundColor(.white)
                                    .shadow(color: .white, radius: 5)
                            )
                    }
                }
                .scaleEffect(isRecording ? 1.1 : 1.0)
                .animation(.spring(response: 0.3, dampingFraction: 0.5), value: isRecording)
                
                Spacer()
            }
        }
        .padding(.bottom, 20)
        .padding(.top, 10)
    }
}
