import SwiftUI

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

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            sectionLabel("AUTOMATION")

            VStack(spacing: 0) {
                // Master toggle row
                HStack(spacing: 12) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 7, style: .continuous)
                            .fill(store.lanTriggerEnabled ? AppTheme.ink : AppTheme.surfaceSunken)
                            .frame(width: 28, height: 28)
                        Image(systemName: "wifi")
                            .font(.system(size: 12, weight: .medium))
                            .foregroundStyle(store.lanTriggerEnabled ? .white : AppTheme.inkTertiary)
                    }
                    .animation(.spring(response: 0.25, dampingFraction: 0.8), value: store.lanTriggerEnabled)

                    VStack(alignment: .leading, spacing: 1) {
                        Text("Auto-backup on home network")
                            .font(AppTheme.headline())
                            .foregroundStyle(AppTheme.ink)
                        Text("Starts when a trusted Wi-Fi is joined")
                            .font(AppTheme.caption())
                            .foregroundStyle(AppTheme.inkTertiary)
                    }

                    Spacer()

                    Toggle("", isOn: $store.lanTriggerEnabled)
                        .labelsHidden()
                        .tint(AppTheme.ink)
                }
                .padding(AppTheme.cardPad)

                hairline

                // Trusted networks
                VStack(alignment: .leading, spacing: 2) {
                    Text("TRUSTED NETWORKS")
                        .font(AppTheme.micro(10))
                        .foregroundStyle(AppTheme.inkTertiary)
                        .padding(.horizontal, AppTheme.cardPad)
                        .padding(.top, 10)

                    ForEach(store.trustedSSIDs, id: \.self) { ssid in
                        HStack(spacing: 10) {
                            Circle()
                                .fill(ssid == lanMonitor.currentSSID ? AppTheme.positive : AppTheme.inkQuaternary)
                                .frame(width: 6, height: 6)
                            Text(ssid)
                                .font(.system(size: 13, weight: .regular))
                                .foregroundStyle(AppTheme.ink)
                            if ssid == lanMonitor.currentSSID {
                                Text("connected")
                                    .font(AppTheme.micro(10))
                                    .foregroundStyle(AppTheme.positive)
                            }
                            Spacer()
                            Button {
                                withAnimation(.spring(response: 0.25, dampingFraction: 0.8)) {
                                    store.trustedSSIDs.removeAll { $0 == ssid }
                                }
                            } label: {
                                Image(systemName: "xmark")
                                    .font(.system(size: 11, weight: .medium))
                                    .foregroundStyle(AppTheme.inkTertiary)
                            }
                        }
                        .padding(.horizontal, AppTheme.cardPad)
                        .padding(.vertical, 7)
                    }

                    Button {
                        Task {
                            if let ssid = await lanMonitor.fetchCurrentSSID(),
                               !store.trustedSSIDs.contains(ssid) {
                                withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
                                    store.trustedSSIDs.append(ssid)
                                }
                            }
                        }
                    } label: {
                        HStack(spacing: 6) {
                            Image(systemName: "plus")
                                .font(.system(size: 11, weight: .semibold))
                            Text("Add current network")
                                .font(.system(size: 13, weight: .medium))
                        }
                        .foregroundStyle(AppTheme.inkSecondary)
                    }
                    .buttonStyle(ScaleButtonStyle())
                    .padding(.horizontal, AppTheme.cardPad)
                    .padding(.vertical, 8)
                }

                hairline

                // Delay picker
                HStack {
                    Image(systemName: "timer")
                        .font(.system(size: 13, weight: .regular))
                        .foregroundStyle(AppTheme.inkSecondary)
                        .frame(width: 20)
                    Text("Wait before starting")
                        .font(AppTheme.body())
                        .foregroundStyle(AppTheme.ink)
                    Spacer()
                    Menu {
                        ForEach([0, 15, 30, 60, 120], id: \.self) { sec in
                            Button("\(sec == 0 ? "Immediately" : "\(sec)s")") {
                                store.startDelaySeconds = sec
                            }
                        }
                    } label: {
                        HStack(spacing: 4) {
                            Text(store.startDelaySeconds == 0 ? "Immediately" : "\(store.startDelaySeconds)s")
                                .font(.system(size: 13, weight: .medium))
                                .foregroundStyle(AppTheme.inkSecondary)
                            Image(systemName: "chevron.up.chevron.down")
                                .font(.system(size: 10, weight: .medium))
                                .foregroundStyle(AppTheme.inkQuaternary)
                        }
                    }
                }
                .padding(.horizontal, AppTheme.cardPad)
                .padding(.vertical, 12)
            }
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
            .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
        }
    }

    private var hairline: some View {
        Rectangle()
            .fill(AppTheme.separator)
            .frame(height: 0.5)
            .padding(.leading, AppTheme.cardPad)
    }
}

// MARK: — Shared section header
func sectionLabel(_ text: String) -> some View {
    Text(text)
        .font(.system(size: 11, weight: .medium))
        .foregroundStyle(AppTheme.inkTertiary)
        .kerning(0.5)
        .padding(.leading, 4)
}