import SwiftUI
import ProxyCore

struct SetupGuideView: View {
    @Environment(AppState.self) private var appState

    var isReady: Bool {
        appState.isVPNConnected && appState.isCertificateTrusted
    }

    var body: some View {
        VStack(spacing: 24) {
            // Status Banner
            HStack {
                Image(systemName: isReady ? "checkmark.circle.fill" : "exclamationmark.triangle.fill")
                    .font(.title2)
                VStack(alignment: .leading) {
                    Text(isReady ? "Ready to Intercept" : "Setup Required")
                        .font(.headline)
                    Text(isReady ? "All systems are configured correctly" : "Complete the steps below to start")
                        .font(.caption)
                        .foregroundStyle(.white.opacity(0.8))
                }
                Spacer()
            }
            .foregroundStyle(.white)
            .padding()
            .background(isReady ? Color.green : Color.orange, in: RoundedRectangle(cornerRadius: 12))

            Text("Follow these two steps to start capturing network traffic on your device.")
                .font(.subheadline)
                .foregroundStyle(.secondary)

            // Step 1: VPN
            stepRow(
                title: "VPN Extension Enabled",
                subtitle: appState.isVPNConnected
                    ? "VPN is running and capturing traffic"
                    : "Tap to enable VPN",
                isComplete: appState.isVPNConnected,
                action: {
                    Task { await appState.toggleVPN() }
                }
            )

            // Step 2: Certificate
            stepRow(
                title: "Certificate Installed & Trusted",
                subtitle: appState.isCertificateTrusted
                    ? "HTTPS traffic can now be decrypted"
                    : "Install and trust the CA certificate",
                isComplete: appState.isCertificateTrusted,
                action: {
                    // TODO: Phase 3 - Open certificate installation flow
                }
            )

            Divider()

            // Help section
            VStack(alignment: .leading, spacing: 12) {
                Text("Need Help?")
                    .font(.headline)

                HStack {
                    Image(systemName: "play.rectangle.fill")
                        .foregroundStyle(.red)
                    Text("Watch Video Tutorial")
                    Spacer()
                    Image(systemName: "arrow.up.forward")
                        .foregroundStyle(.secondary)
                }
                .padding(.vertical, 4)

                HStack {
                    Image(systemName: "book.fill")
                        .foregroundStyle(.blue)
                    Text("Read Documentation")
                    Spacer()
                    Image(systemName: "arrow.up.forward")
                        .foregroundStyle(.secondary)
                }
                .padding(.vertical, 4)
            }

            Spacer()
        }
        .padding()
        .navigationTitle("Setup Guide")
        .navigationBarTitleDisplayMode(.inline)
    }

    private func stepRow(title: String, subtitle: String, isComplete: Bool, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack(spacing: 12) {
                Image(systemName: isComplete ? "checkmark.circle.fill" : "circle")
                    .font(.title2)
                    .foregroundStyle(isComplete ? .green : .secondary)

                VStack(alignment: .leading) {
                    Text(title)
                        .font(.subheadline.weight(.medium))
                        .foregroundStyle(isComplete ? .green : .primary)
                    Text(subtitle)
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }

                Spacer()
            }
            .padding()
            .background(Color(.secondarySystemGroupedBackground), in: RoundedRectangle(cornerRadius: 12))
        }
        .buttonStyle(.plain)
    }
}