//
//  OnboardingContainerView.swift
//  SelfieCam
//
//  Main container for the onboarding flow with step-based navigation
//  and progress indication. Supports landscape and iPad layouts.
//

import SwiftUI
import Bedrock

struct OnboardingContainerView: View {
    @Bindable var viewModel: OnboardingViewModel
    @Bindable var settingsViewModel: SettingsViewModel
    @Binding var showPaywall: Bool
    
    /// Callback when onboarding is completed
    let onComplete: () -> Void
    
    var body: some View {
        VStack(spacing: 0) {
            // Progress indicator at top
            OnboardingProgressView(
                currentStep: viewModel.currentStep.stepNumber,
                totalSteps: OnboardingStep.totalSteps
            )
            .padding(.top, Design.Spacing.medium)
            .padding(.horizontal, Design.Spacing.xLarge)
            
            // Main content area
            TabView(selection: Binding(
                get: { viewModel.currentStep },
                set: { viewModel.currentStep = $0 }
            )) {
                // Step 1: Welcome
                OnboardingWelcomeView(viewModel: viewModel)
                    .tag(OnboardingStep.welcome)
                
                // Step 2: Camera Permission
                OnboardingPermissionView(
                    viewModel: viewModel,
                    permissionType: .camera
                )
                .tag(OnboardingStep.cameraPermission)
                
                // Step 3: Microphone Permission (required by camera framework)
                OnboardingPermissionView(
                    viewModel: viewModel,
                    permissionType: .microphone
                )
                .tag(OnboardingStep.microphonePermission)
                
                // Step 4: Photo Library Permission
                OnboardingPermissionView(
                    viewModel: viewModel,
                    permissionType: .photoLibrary
                )
                .tag(OnboardingStep.photoPermission)
                
                // Step 5: Settings
                OnboardingSettingsView(viewModel: viewModel)
                    .tag(OnboardingStep.settings)
                
                // Step 6: Premium tour or Soft Paywall (dynamic based on premium status)
                Group {
                    if viewModel.isPremiumUser {
                        OnboardingPremiumView(
                            viewModel: viewModel,
                            settingsViewModel: settingsViewModel,
                            onComplete: onComplete
                        )
                    } else {
                        OnboardingSoftPaywallView(
                            viewModel: viewModel,
                            settingsViewModel: settingsViewModel,
                            showPaywall: $showPaywall,
                            onComplete: onComplete
                        )
                    }
                }
                .tag(OnboardingStep.premiumOrPaywall)
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .animation(.easeInOut(duration: Design.Animation.standard), value: viewModel.currentStep)
        }
        .background(AppSurface.primary.ignoresSafeArea())
    }
}

// MARK: - Progress View

/// Displays horizontal progress dots for onboarding steps
struct OnboardingProgressView: View {
    let currentStep: Int
    let totalSteps: Int
    
    var body: some View {
        HStack(spacing: Design.Spacing.small) {
            ForEach(1...totalSteps, id: \.self) { step in
                Circle()
                    .fill(step <= currentStep ? AppAccent.primary : AppSurface.card)
                    .frame(width: Design.Spacing.small, height: Design.Spacing.small)
                    .animation(.easeInOut(duration: Design.Animation.quick), value: currentStep)
            }
        }
    }
}

// MARK: - Preview

#Preview {
    OnboardingContainerView(
        viewModel: OnboardingViewModel(),
        settingsViewModel: SettingsViewModel(),
        showPaywall: .constant(false),
        onComplete: {}
    )
    .preferredColorScheme(.dark)
}
