import SwiftUI

struct LANTriggerSection: View {
    @EnvironmentObject var store: ConnectionStore
    @EnvironmentObject var lanMonitor: LANMonitor

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("AUTOMATION — LAN TRIGGER")
                .font(AppTheme.smallFont)
                .foregroundColor(AppTheme.textSecondary)
                .padding(.leading, 4)

            // Hero card — blue border, FIXED 210px height, strict top-down layout
            VStack(spacing: 0) {
                // Header band
                HStack {
                    Image(systemName: "wifi")
                        .font(.system(size: 14, weight: .medium))
                        .foregroundColor(.white)
                    Text("Auto-backup on home network")
                        .font(.system(size: 14, weight: .semibold))
                        .foregroundColor(.white)
                    Spacer()
                    Text(store.lanTriggerEnabled ? "On" : "Off")
                        .font(.system(size: 12, weight: .bold))
                        .foregroundColor(.white)
                        .padding(.horizontal, 8)
                        .padding(.vertical, 3)
                        .background(store.lanTriggerEnabled ? Color.white.opacity(0.25) : Color.white.opacity(0.15))
                        .clipShape(Capsule())
                }
                .padding(.horizontal, 14)
                .padding(.vertical, 10)
                .background(AppTheme.blue)

                // Toggle row
                HStack {
                    VStack(alignment: .leading, spacing: 2) {
                        Text("Start when on trusted Wi-Fi")
                            .font(.system(size: 14, weight: .medium))
                            .foregroundColor(AppTheme.textPrimary)
                        Text("Backup runs on SSID match")
                            .font(.system(size: 12))
                            .foregroundColor(AppTheme.textSecondary)
                    }
                    Spacer()
                    Toggle("", isOn: $store.lanTriggerEnabled)
                        .labelsHidden()
                        .tint(AppTheme.blue)
                        .scaleEffect(0.85)
                }
                .padding(.horizontal, 14)
                .padding(.top, 10)
                .padding(.bottom, 6)

                Divider().padding(.horizontal, 14)

                // Trusted networks
                VStack(alignment: .leading, spacing: 4) {
                    Text("TRUSTED NETWORKS")
                        .font(.system(size: 10, weight: .semibold))
                        .foregroundColor(AppTheme.textTertiary)
                        .padding(.horizontal, 14)
                        .padding(.top, 6)

                    ForEach(store.trustedSSIDs, id: \.self) { ssid in
                        HStack(spacing: 8) {
                            Circle()
                                .fill(ssid == lanMonitor.currentSSID ? AppTheme.green : AppTheme.textTertiary)
                                .frame(width: 7, height: 7)
                            Text(ssid == lanMonitor.currentSSID ? "Connected" : "Saved")
                                .font(.system(size: 11))
                                .foregroundColor(AppTheme.textTertiary)
                                .frame(width: 54, alignment: .leading)
                            Text(ssid)
                                .font(.system(size: 13, weight: .medium))
                                .foregroundColor(AppTheme.textPrimary)
                            Spacer()
                            Button {
                                store.trustedSSIDs.removeAll { $0 == ssid }
                            } label: {
                                Image(systemName: "xmark")
                                    .font(.system(size: 11, weight: .medium))
                                    .foregroundColor(AppTheme.textTertiary)
                            }
                        }
                        .padding(.horizontal, 14)
                        .padding(.vertical, 2)
                    }

                    Button {
                        Task {
                            if let ssid = await lanMonitor.fetchCurrentSSID(),
                               !store.trustedSSIDs.contains(ssid) {
                                store.trustedSSIDs.append(ssid)
                            }
                        }
                    } label: {
                        HStack(spacing: 6) {
                            Image(systemName: "plus.circle.fill")
                                .font(.system(size: 13))
                                .foregroundColor(AppTheme.blue)
                            Text("Add current network")
                                .font(.system(size: 13, weight: .medium))
                                .foregroundColor(AppTheme.blue)
                        }
                        .padding(.horizontal, 14)
                        .padding(.vertical, 4)
                    }
                }

                Divider().padding(.horizontal, 14).padding(.top, 4)

                // Bottom options row
                HStack {
                    HStack(spacing: 6) {
                        Image(systemName: "timer")
                            .font(.system(size: 12))
                            .foregroundColor(AppTheme.textSecondary)
                        Text("Wait before starting")
                            .font(.system(size: 13))
                            .foregroundColor(AppTheme.textPrimary)
                    }
                    Spacer()
                    Menu {
                        ForEach([0, 15, 30, 60, 120], id: \.self) { sec in
                            Button("\(sec)s") { store.startDelaySeconds = sec }
                        }
                    } label: {
                        HStack(spacing: 4) {
                            Text("\(store.startDelaySeconds)s")
                                .font(.system(size: 13, weight: .medium))
                                .foregroundColor(AppTheme.blue)
                            Image(systemName: "chevron.right")
                                .font(.system(size: 11))
                                .foregroundColor(AppTheme.textTertiary)
                        }
                    }
                }
                .padding(.horizontal, 14)
                .padding(.vertical, 8)
            }
            .frame(height: 210)
            .clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
            .overlay(
                RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius)
                    .stroke(AppTheme.lanBorder, lineWidth: 1.5)
            )
        }
    }
}