import SwiftUI
import WidgetKit

struct ExtraLargeWidget: View {
    let theme: Theme
    let scopeShape: ScopeShape
    let center: (lat: Double, lon: Double)
    let rangeNM: Double
    let aircraft: [Aircraft]
    let selectedAircraftId: String?
    
    @Environment(\.widgetRenderingMode) var renderingMode
    
    var body: some View {
        let colors = theme.colors
        
        HStack(spacing: 0) {
            // Left Panel (Radar)
            ZStack {
                colors.scopeBg
                
                RadarFaceView(
                    theme: theme,
                    scopeShape: scopeShape,
                    center: center,
                    rangeNM: rangeNM,
                    aircraft: aircraft
                )
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                
                // Overlaid labels
                VStack(alignment: .leading, spacing: 4) {
                    HStack {
                        Image(systemName: "radar") // Placeholder for app icon
                            .font(.system(size: 12))
                        Text("LocalSky Radar")
                            .font(.system(size: 12, weight: .semibold))
                    }
                    .foregroundColor(colors.text)
                    
                    Spacer()
                    
                    HStack {
                        Text("\(Int(rangeNM)) · \(Int(rangeNM)) NM")
                            .font(.system(size: 8.5, weight: .regular))
                            .padding(.horizontal, 8)
                            .padding(.vertical, 4)
                            .background(colors.chip)
                            .cornerRadius(7)
                            .overlay(
                                RoundedRectangle(cornerRadius: 7)
                                    .stroke(colors.panelLine, lineWidth: 1)
                            )
                    }
                    .foregroundColor(colors.chipText)
                }
                .padding(18)
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
            }
            .frame(width: 366) // Specified in spec (approx)
            .clipShape(scopeShape == .circle ? Circle() : Rectangle())
            .overlay(
                Rectangle()
                    .stroke(colors.panelLine, lineWidth: 1)
            )
            
            // Right Panel (Detail + List)
            VStack(alignment: .leading, spacing: 0) {
                // Header row
                HStack {
                    HStack(spacing: 4) {
                        Circle()
                            .fill(colors.warn)
                            .frame(width: 7, height: 7)
                        Text("Active")
                            .font(.system(size: 11, weight: .regular))
                            .foregroundColor(colors.textDim)
                    }
                    Spacer()
                    Text("UPD 1m · Airplanes.live")
                        .font(.system(size: 9.5))
                        .foregroundColor(colors.textFaint)
                }
                .padding([.horizontal, .top], 18)
                .padding(.bottom, 8)
                
                // Hero aircraft card
                if let selectedId = selectedAircraftId, let selectedAircraft = aircraft.first(where: { $0.id == selectedId }) {
                    HeroAircraftCard(aircraft: selectedAircraft, theme: theme)
                        .padding([.horizontal, .bottom], 18)
                } else if let nearest = aircraft.first {
                    HeroAircraftCard(aircraft: nearest, theme: theme)
                        .padding([.horizontal, .bottom], 18)
                }
                
                Spacer()
                
                // Nearby aircraft table
                VStack(alignment: .leading, spacing: 0) {
                    HStack {
                        Text("NEARBY AIRCRAFT")
                            .font(.system(size: 8, weight: .regular))
                            .foregroundColor(colors.textFaint)
                        Spacer()
                        Text("TAP TO TRACK ›")
                            .font(.system(size: 8, weight: .regular))
                            .foregroundColor(colors.accent)
                    }
                    .padding(.horizontal, 18)
                    .padding(.vertical, 6)
                    
                    Divider()
                        .background(colors.panelLine)
                    
                    VStack(spacing: 0) {
                        ForEach(aircraft.prefix(6)) { ac in
                            AircraftRow(aircraft: ac, theme: theme, isSelected: ac.id == selectedAircraftId)
                        }
                    }
                }
            }
            .frame(maxWidth: .infinity)
            .background(colors.panel)
            .cornerRadius(22)
            .padding(18)
        }
        .containerBackground(for: .widget) {
            colors.frameBg
        }
    }
}

struct HeroAircraftCard: View {
    let aircraft: Aircraft
    let theme: Theme
    
    var body: some View {
        let colors = theme.colors
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Text(aircraft.callsign)
                    .font(.system(size: 24, weight: .bold, design: .monospaced))
                Spacer()
                HStack(spacing: 4) {
                    Text("\(Int(aircraft.distNM)) NM")
                    Text("•")
                    Text("\(Int(aircraft.bearingDeg))°")
                }
                .font(.system(size: 27, weight: .bold, design: .monospaced))
                .foregroundColor(colors.accent)
            }
            
            Text("\(aircraft.type) · \(aircraft.registration) · \(aircraft.source.rawValue.uppercased())")
                .font(.system(size: 10))
                .foregroundColor(colors.textFaint)
            
            Divider()
                .background(colors.panelLine)
            
            HStack(alignment: .top) {
                StatItem(label: "ALTITUDE", value: "\(Int(aircraft.altitudeFt)) FT")
                Spacer()
                StatItem(label: "GROUND SPEED", value: "\(Int(aircraft.groundSpeedKt)) KT")
                Spacer()
                StatItem(label: "TRACK", value: "\(Int(aircraft.trackDeg))°")
            }
        }
        .padding(14)
        .background(colors.panel)
        .cornerRadius(13)
        .overlay(
            RoundedRectangle(cornerRadius: 13)
                .stroke(colors.panelLine, lineWidth: 1)
        )
    }
}

struct StatItem: View {
    let label: String
    let value: String
    
    var body: some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(label)
                .font(.system(size: 8, weight: .regular))
                .foregroundColor(.secondary) // Placeholder for textFaint
            Text(value)
                .font(.system(size: 13, weight: .regular, design: .monospaced))
        }
    }
}

struct AircraftRow: View {
    let aircraft: Aircraft
    let theme: Theme
    let isSelected: Bool
    
    var body: some View {
        let colors = theme.colors
        HStack {
            Text(aircraft.callsign)
                .font(.system(size: 12, weight: .bold, design: .monospaced))
                .foregroundColor(isSelected ? colors.accent : colors.text)
            Spacer()
            Text(aircraft.type)
                .font(.system(size: 12))
                .foregroundColor(colors.textDim)
            Spacer()
            Text("\(Int(aircraft.altitudeFt))")
                .font(.system(size: 12))
                .foregroundColor(colors.textDim)
            Spacer()
            Text("\(Int(aircraft.groundSpeedKt))")
                .font(.system(size: 12))
                .foregroundColor(colors.textDim)
            Spacer()
            Text("\(Int(aircraft.bearingDeg))°")
                .font(.system(size: 12))
                .foregroundColor(colors.textDim)
        }
        .padding(.horizontal, 18)
        .padding(.vertical, 6)
        .background(isSelected ? colors.chip : Color.clear)
        .overlay(
            HStack {
                if isSelected {
                    Rectangle()
                        .fill(colors.accent)
                        .frame(width: 2, height: 24)
                }
                Spacer()
            }
        )
    }
}