import SwiftUI
import Bedrock
import SwiftData

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

    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: Design.Spacing.large) {
                    Text("Share using widgets on your phone or watch")
                        .font(.title2)
                        .bold()
                        .foregroundStyle(Color.Text.primary)

                    if let card = appState.cardStore.selectedCard {
                        WidgetPreviewCardView(card: card)
                    }
                }
                .padding(.horizontal, Design.Spacing.large)
                .padding(.vertical, Design.Spacing.xLarge)
            }
            .background(Color.AppBackground.base)
            .navigationTitle(String.localized("Widgets"))
        }
    }
}

private struct WidgetPreviewCardView: View {
    let card: BusinessCard

    var body: some View {
        VStack(spacing: Design.Spacing.large) {
            PhoneWidgetPreview(card: card)
            WatchWidgetPreview(card: card)
        }
    }
}

private struct PhoneWidgetPreview: View {
    let card: BusinessCard

    var body: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.medium) {
            Text("Phone Widget")
                .font(.headline)
                .bold()
                .foregroundStyle(Color.Text.primary)

            HStack(spacing: Design.Spacing.medium) {
                QRCodeView(payload: card.vCardPayload)
                    .frame(width: Design.CardSize.widgetPhoneHeight, height: Design.CardSize.widgetPhoneHeight)

                VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
                    Text(card.displayName)
                        .font(.headline)
                        .foregroundStyle(Color.Text.primary)
                    Text(card.role)
                        .font(.subheadline)
                        .foregroundStyle(Color.Text.secondary)
                    Text("Tap to share")
                        .font(.caption)
                        .foregroundStyle(Color.Text.secondary)
                }
            }
        }
        .padding(Design.Spacing.large)
        .background(Color.AppBackground.elevated)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.large))
    }
}

private struct WatchWidgetPreview: View {
    let card: BusinessCard

    var body: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.medium) {
            Text("Watch Widget")
                .font(.headline)
                .bold()
                .foregroundStyle(Color.Text.primary)

            HStack(spacing: Design.Spacing.medium) {
                QRCodeView(payload: card.vCardPayload)
                    .frame(width: Design.CardSize.widgetWatchSize, height: Design.CardSize.widgetWatchSize)

                VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
                    Text("Ready to scan")
                        .font(.subheadline)
                        .foregroundStyle(Color.Text.secondary)
                    Text("Open on Apple Watch")
                        .font(.caption)
                        .foregroundStyle(Color.Text.secondary)
                }
            }
        }
        .padding(Design.Spacing.large)
        .background(Color.AppBackground.elevated)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.large))
    }
}

#Preview {
    WidgetsView()
        .environment(AppState(modelContext: try! ModelContainer(for: BusinessCard.self, Contact.self).mainContext))
}
