import SwiftUI

struct WatchContentView: View {
    @Environment(WatchCardStore.self) private var cardStore

    var body: some View {
        if let card = cardStore.defaultCard {
            WatchQRCodeCardView(card: card)
        } else {
            WatchEmptyStateView()
        }
    }
}

private struct WatchEmptyStateView: View {
    var body: some View {
        VStack(spacing: WatchDesign.Spacing.medium) {
            Image(systemName: "rectangle.stack")
                .font(.title)
                .foregroundStyle(Color.WatchPalette.muted)
            
            Text("No Cards")
                .font(.headline)
                .foregroundStyle(Color.WatchPalette.text)
            
            Text("Open the iPhone app to create cards")
                .font(.caption)
                .foregroundStyle(Color.WatchPalette.muted)
                .multilineTextAlignment(.center)
        }
        .padding(WatchDesign.Spacing.large)
    }
}

private struct WatchQRCodeCardView: View {
    let card: WatchCard

    var body: some View {
        VStack(spacing: WatchDesign.Spacing.medium) {
            if let image = card.qrCodeImage {
                image
                    .resizable()
                    .interpolation(.none)
                    .scaledToFit()
                    .frame(width: WatchDesign.Size.qrSize, height: WatchDesign.Size.qrSize)
                    .padding(WatchDesign.Spacing.small)
                    .background(Color.WatchPalette.card)
                    .clipShape(.rect(cornerRadius: WatchDesign.CornerRadius.large))
            } else {
                // Fallback when no QR code synced yet
                VStack(spacing: WatchDesign.Spacing.small) {
                    Image(systemName: "qrcode")
                        .font(.largeTitle)
                        .foregroundStyle(Color.WatchPalette.muted)
                    Text("Sync from iPhone")
                        .font(.caption2)
                        .foregroundStyle(Color.WatchPalette.muted)
                }
                .frame(width: WatchDesign.Size.qrSize, height: WatchDesign.Size.qrSize)
                .background(Color.WatchPalette.card)
                .clipShape(.rect(cornerRadius: WatchDesign.CornerRadius.large))
            }

            VStack(spacing: WatchDesign.Spacing.extraSmall) {
                Text(card.fullName)
                    .font(.headline)
                    .foregroundStyle(Color.WatchPalette.text)
                
                Text(card.role)
                    .font(.caption)
                    .foregroundStyle(Color.WatchPalette.muted)
            }
        }
        .padding(WatchDesign.Spacing.medium)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.WatchPalette.background)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(String(localized: "QR code"))
        .accessibilityValue("\(card.fullName), \(card.role)")
    }
}

#Preview {
    WatchContentView()
        .environment(WatchCardStore())
}