//
//  OnboardingComponents.swift
//  SelfieCam
//
//  Shared UI components for the onboarding flow.
//  Uses Bedrock design system for consistency.
//

import SwiftUI
import Bedrock

// MARK: - Layout Constants

/// Layout constants for onboarding screens
enum OnboardingLayout {
    /// Maximum content width for iPad/landscape (prevents content from stretching too wide)
    static let maxContentWidth: CGFloat = 500
    
    /// Hero icon sizes
    static let heroIconSize: CGFloat = 80
    static let heroIconCircleSize: CGFloat = 120
}

// MARK: - Content Container

/// Container that limits content width for iPad and landscape orientations
struct OnboardingContentContainer<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        GeometryReader { geometry in
            let isWide = geometry.size.width > OnboardingLayout.maxContentWidth + Design.Spacing.xxLarge * 2
            
            ScrollView {
                content
                    .frame(maxWidth: isWide ? OnboardingLayout.maxContentWidth : .infinity)
                    .frame(maxWidth: .infinity)
                    .frame(minHeight: geometry.size.height)
            }
            .scrollBounceBehavior(.basedOnSize)
        }
    }
}

// MARK: - Primary Button

/// Primary action button used throughout onboarding
struct OnboardingPrimaryButton: View {
    let title: String
    let action: () -> Void
    var icon: String? = nil
    var style: OnboardingButtonStyle = .accent
    
    var body: some View {
        Button(action: action) {
            HStack(spacing: Design.Spacing.small) {
                if let icon {
                    SymbolIcon(icon, size: .row, color: style.foregroundColor)
                }
                
                Text(title)
                    .styled(.headingEmphasis, emphasis: style.textEmphasis)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, Design.Spacing.medium)
            .background(style.background)
            .clipShape(.capsule)
        }
        .buttonStyle(.plain)
    }
}

/// Button style variants for onboarding
enum OnboardingButtonStyle {
    case accent
    case premium
    
    @ViewBuilder
    var background: some View {
        switch self {
        case .accent:
            AppAccent.primary
        case .premium:
            LinearGradient(
                colors: [AppStatus.warning, AppStatus.warning.opacity(Design.Opacity.strong)],
                startPoint: .leading,
                endPoint: .trailing
            )
        }
    }
    
    var foregroundColor: Color {
        switch self {
        case .accent, .premium:
            return .black
        }
    }
    
    var textEmphasis: TextEmphasis {
        .custom(.black)
    }
}

// MARK: - Secondary Button

/// Secondary/text button for optional actions
struct OnboardingSecondaryButton: View {
    let title: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .styled(.body, emphasis: .secondary)
        }
        .buttonStyle(.plain)
    }
}

// MARK: - Hero Icon

/// Large icon display with optional glow effect
struct OnboardingHeroIcon: View {
    let systemName: String
    var color: Color = AppAccent.primary
    var size: CGFloat = OnboardingLayout.heroIconSize
    var showGlow: Bool = true
    
    var body: some View {
        ZStack {
            if showGlow {
                // Glow background
                Circle()
                    .fill(
                        RadialGradient(
                            colors: [
                                color.opacity(Design.Opacity.medium),
                                color.opacity(Design.Opacity.subtle),
                                .clear
                            ],
                            center: .center,
                            startRadius: Design.Spacing.large,
                            endRadius: size
                        )
                    )
                    .frame(width: size * 2, height: size * 2)
            }
            
            // Icon
            SymbolIcon(systemName, size: .hero, color: color)
        }
    }
}

// MARK: - Hero Icon Circle

/// Large circular icon container with gradient background
struct OnboardingHeroIconCircle: View {
    let systemName: String
    var size: CGFloat = OnboardingLayout.heroIconCircleSize
    
    var body: some View {
        ZStack {
            // Glow background
            Circle()
                .fill(
                    RadialGradient(
                        colors: [
                            Color.BrandColors.primary.opacity(Design.Opacity.medium),
                            Color.BrandColors.primary.opacity(Design.Opacity.subtle),
                            .clear
                        ],
                        center: .center,
                        startRadius: Design.Spacing.xLarge,
                        endRadius: size
                    )
                )
                .frame(width: size * 2, height: size * 2)
            
            // Icon circle
            Circle()
                .fill(
                    LinearGradient(
                        colors: [Color.BrandColors.primary, Color.BrandColors.secondary],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .frame(width: size, height: size)
                .overlay {
                    SymbolIcon(systemName, size: .hero, color: .white)
                }
                .shadow(
                    color: Color.BrandColors.primary.opacity(Design.Opacity.medium),
                    radius: Design.Shadow.radiusLarge,
                    y: Design.Shadow.offsetMedium
                )
        }
    }
}

// MARK: - Section Title

/// Title and subtitle for onboarding sections
struct OnboardingSectionTitle: View {
    let title: String
    var subtitle: String? = nil
    
    var body: some View {
        VStack(spacing: Design.Spacing.medium) {
            Text(title)
                .styled(.titleBold)
                .multilineTextAlignment(.center)
            
            if let subtitle {
                Text(subtitle)
                    .styled(.body, emphasis: .secondary)
                    .multilineTextAlignment(.center)
            }
        }
    }
}

// MARK: - Feature Row

/// A single feature highlight row
struct OnboardingFeatureRow: View {
    let icon: String
    let title: String
    let subtitle: String
    
    var body: some View {
        HStack(spacing: Design.Spacing.medium) {
            SymbolIcon(icon, size: .rowContainer, color: AppAccent.primary)
                .frame(width: Design.IconSize.xLarge)
            
            VStack(alignment: .leading, spacing: Design.Spacing.xxSmall) {
                Text(title)
                    .styled(.headingEmphasis)
                
                Text(subtitle)
                    .styled(.caption, emphasis: .tertiary)
            }
            
            Spacer()
        }
    }
}

// MARK: - Benefit Row

/// A benefit row for paywall/premium sections
struct OnboardingBenefitRow: View {
    let image: String
    let text: String
    
    var body: some View {
        HStack(spacing: Design.Spacing.medium) {
            SymbolIcon(image, size: .rowContainer, color: AppAccent.primary)
                .frame(width: Design.IconSize.xLarge)
            
            Text(text)
                .styled(.body)
            
            Spacer()
        }
    }
}

// MARK: - Feature Card

/// A compact card showing a single feature
struct OnboardingFeatureCard: View {
    let icon: String
    let title: String
    let subtitle: String
    
    var body: some View {
        VStack(spacing: Design.Spacing.small) {
            SymbolIcon(icon, size: .card, color: AppAccent.primary)
            
            VStack(spacing: Design.Spacing.xxSmall) {
                Text(title)
                    .styled(.captionEmphasis)
                    .lineLimit(1)
                
                Text(subtitle)
                    .styled(.caption2, emphasis: .tertiary)
                    .lineLimit(1)
            }
        }
        .frame(maxWidth: .infinity)
        .padding(Design.Spacing.medium)
        .background(AppSurface.card)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
    }
}
