//
//  OnboardingPremiumView.swift
//  SelfieCam
//
//  Premium features tour shown to users who already have Pro access.
//  Highlights the premium features they can use.
//  Supports landscape and iPad layouts with max width constraints.
//

import SwiftUI
import Bedrock

struct OnboardingPremiumView: View {
    @Bindable var viewModel: OnboardingViewModel
    @Bindable var settingsViewModel: SettingsViewModel
    let onComplete: () -> Void
    
    var body: some View {
        OnboardingContentContainer {
            VStack(spacing: Design.Spacing.xLarge) {
                Spacer()
                
                // Header with crown
                VStack(spacing: Design.Spacing.medium) {
                    OnboardingHeroIcon(
                        systemName: "crown.fill",
                        color: AppStatus.warning
                    )
                    
                    OnboardingSectionTitle(
                        title: String(localized: "Welcome to Pro!"),
                        subtitle: String(localized: "You have access to all premium features")
                    )
                }
                
                Spacer()
                
                // Premium features grid
                LazyVGrid(
                    columns: [
                        GridItem(.flexible(), spacing: Design.Spacing.medium),
                        GridItem(.flexible(), spacing: Design.Spacing.medium)
                    ],
                    spacing: Design.Spacing.medium
                ) {
                    OnboardingFeatureCard(
                        icon: "paintpalette.fill",
                        title: String(localized: "Custom Colors"),
                        subtitle: String(localized: "Ring light colors")
                    )
                    
                    OnboardingFeatureCard(
                        icon: "sparkles",
                        title: String(localized: "Skin Smoothing"),
                        subtitle: String(localized: "Beauty filter")
                    )
                    
                    OnboardingFeatureCard(
                        icon: "arrow.left.and.right.righttriangle.left.righttriangle.right.fill",
                        title: String(localized: "True Mirror"),
                        subtitle: String(localized: "Flipped preview")
                    )
                    
                    OnboardingFeatureCard(
                        icon: "camera.filters",
                        title: String(localized: "HDR Mode"),
                        subtitle: String(localized: "Better lighting")
                    )
                    
                    OnboardingFeatureCard(
                        icon: "timer",
                        title: String(localized: "Extended Timers"),
                        subtitle: String(localized: "5s and 10s")
                    )
                    
                    OnboardingFeatureCard(
                        icon: "star.fill",
                        title: String(localized: "High Quality"),
                        subtitle: String(localized: "Photo export")
                    )
                }
                .padding(.horizontal, Design.Spacing.large)
                
                Spacer()
                
                // Start button
                OnboardingPrimaryButton(
                    title: String(localized: "Start Taking Photos"),
                    action: {
                        viewModel.completeOnboarding(settingsViewModel: settingsViewModel)
                        onComplete()
                    }
                )
                .padding(.horizontal, Design.Spacing.xLarge)
                .padding(.bottom, Design.Spacing.xLarge)
            }
            .padding(.horizontal, Design.Spacing.medium)
        }
    }
}

// MARK: - Preview

#Preview {
    OnboardingPremiumView(
        viewModel: OnboardingViewModel(),
        settingsViewModel: SettingsViewModel(),
        onComplete: {}
    )
    .background(AppSurface.primary)
    .preferredColorScheme(.dark)
}

#Preview("Landscape", traits: .landscapeLeft) {
    OnboardingPremiumView(
        viewModel: OnboardingViewModel(),
        settingsViewModel: SettingsViewModel(),
        onComplete: {}
    )
    .background(AppSurface.primary)
    .preferredColorScheme(.dark)
}
