import SwiftUI

struct DashboardView: View {
    @EnvironmentObject var viewModel: CallViewModel
    @State private var showAbuseReportSheet = false
    @State private var abuseMessage = ""
    
    var body: some View {
        VStack {
            HStack {
                Text("Hello, \(viewModel.currentUser?.username ?? "")")
                    .font(.headline)
                Spacer()
                Button("Logout") {
                    viewModel.logout()
                }
                .foregroundColor(.red)
            }
            .padding()
            
            if viewModel.currentUser?.role == .interpreter {
                Text("Online: \(viewModel.onlineInterpretersCount) terps. \(viewModel.onlineCallersCount) users.")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    .padding(.bottom, 5)
            }
            
            Divider()
            
            if viewModel.currentUser?.role == .caller {
                if viewModel.availableInterpreters.isEmpty {
                    VStack {
                        Spacer()
                        Text("No interpreters online")
                            .foregroundColor(.secondary)
                        Spacer()
                    }
                } else {
                    List(viewModel.availableInterpreters, id: \.self) { interpreterName in
                        HStack {
                            Text(interpreterName)
                            Spacer()
                            Button("Call") {
                                viewModel.callInterpreter(username: interpreterName)
                            }
                            .buttonStyle(.borderedProminent)
                        }
                    }
                }
            } else {
                // Interpreter View
                VStack(spacing: 20) {
                    Spacer()
                    Image(systemName: viewModel.interpreterState == .available ? "phone.badge.checkmark" : "phone.badge.slash")
                        .font(.system(size: 50))
                        .foregroundColor(viewModel.interpreterState == .available ? .green : .gray)
                    
                    Text(viewModel.interpreterState == .available ? "Online & Waiting for Calls" : "You are currently offline")
                        .font(.title2)
                        .foregroundColor(viewModel.interpreterState == .available ? .green : .secondary)

                    Button(action: {
                        viewModel.togglePresence()
                    }) {
                        Text(viewModel.interpreterState == .available ? "Go Offline" : "Go Online")
                            .font(.headline)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(viewModel.interpreterState == .available ? Color.gray : Color.green)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    .padding(.horizontal, 40)
                    
                    if viewModel.lastCallId != nil {
                        Button(action: {
                            abuseMessage = ""
                            showAbuseReportSheet = true
                        }) {
                            Text("Report Abuse")
                                .font(.headline)
                                .foregroundColor(.red)
                                .padding()
                        }
                    }
                    
                    Spacer()
                }
            }
        }
        .sheet(isPresented: $showAbuseReportSheet) {
            NavigationView {
                VStack {
                    Text("Report Abuse")
                        .font(.headline)
                        .padding()
                    
                    Text("Please describe the issue (max 100 chars):")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    
                    TextEditor(text: $abuseMessage)
                        .frame(height: 100)
                        .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray.opacity(0.5)))
                        .padding()
                        .onChange(of: abuseMessage) { _, newValue in
                            if newValue.count > 100 {
                                abuseMessage = String(newValue.prefix(100))
                            }
                        }
                    
                    Spacer()
                    
                    Button("Submit Report") {
                        if !abuseMessage.isEmpty {
                            viewModel.reportAbuse(message: abuseMessage)
                            showAbuseReportSheet = false
                        }
                    }
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.red)
                    .cornerRadius(10)
                    .padding()
                    .disabled(abuseMessage.isEmpty)
                }
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .cancellationAction) {
                        Button("Cancel") {
                            showAbuseReportSheet = false
                        }
                    }
                }
            }
            .presentationDetents([.medium])
        }
    }
}
