Reflect/Shared/Onboarding/views/OnboardingSubscription.swift

//
//  OnboardingSubscription.swift
//  Feels
//
//  Created by Claude Code on 12/10/24.
//

import SwiftUI

struct OnboardingSubscription: View {
    @ObservedObject var onboardingData: OnboardingData
    @EnvironmentObject var iapManager: IAPManager
    @State private var showSubscriptionStore = false

    let completionClosure: ((OnboardingData) -> Void)

    var body: some View {
        ZStack {
            // Gradient background
            LinearGradient(
                colors: [Color(hex: "11998e"), Color(hex: "38ef7d")],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()

            VStack(spacing: 0) {
                Spacer()

                // Crown icon
                ZStack {
                    Circle()
                        .fill(.white.opacity(0.15))
                        .frame(width: 120, height: 120)

                    Image(systemName: "crown.fill")
                        .font(.system(size: 48))
                        .foregroundColor(.yellow)
                }
                .padding(.bottom, 24)

                // Title
                Text("Unlock the Full\nExperience")
                    .font(.system(size: 28, weight: .bold, design: .rounded))
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)
                    .padding(.bottom, 8)

                Spacer()

                // Benefits list
                VStack(spacing: 0) {
                    BenefitRow(
                        icon: "calendar.badge.clock",
                        title: "Month & Year Views",
                        description: "See your mood patterns across months and years"
                    )

                    Divider()
                        .background(.white.opacity(0.2))

                    BenefitRow(
                        icon: "lightbulb.fill",
                        title: "AI-Powered Insights",
                        description: "Discover trends and patterns in your moods"
                    )

                    Divider()
                        .background(.white.opacity(0.2))

                    BenefitRow(
                        icon: "heart.text.square.fill",
                        title: "Health Data Correlation",
                        description: "Connect your mood with sleep, steps, and more"
                    )

                    Divider()
                        .background(.white.opacity(0.2))

                    BenefitRow(
                        icon: "square.grid.2x2.fill",
                        title: "Interactive Widgets",
                        description: "Log your mood directly from your home screen"
                    )
                }
                .padding(.vertical, 8)
                .background(
                    RoundedRectangle(cornerRadius: 20)
                        .fill(.white.opacity(0.15))
                )
                .padding(.horizontal, 24)

                Spacer()

                // Buttons
                VStack(spacing: 12) {
                    // Subscribe button
                    Button(action: {
                        EventLogger.log(event: "onboarding_subscribe_tapped")
                        showSubscriptionStore = true
                    }) {
                        HStack {
                            Image(systemName: "sparkles")
                                .font(.system(size: 18, weight: .semibold))

                            Text("Get Personal Insights")
                                .font(.system(size: 18, weight: .bold))
                        }
                        .foregroundColor(Color(hex: "11998e"))
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 18)
                        .background(
                            RoundedRectangle(cornerRadius: 16)
                                .fill(.white)
                                .shadow(color: .black.opacity(0.15), radius: 10, y: 5)
                        )
                    }
                    .accessibilityLabel(String(localized: "Get Personal Insights"))
                    .accessibilityHint(String(localized: "Opens subscription options"))

                    // Skip button
                    Button(action: {
                        EventLogger.log(event: "onboarding_complete")
                        EventLogger.log(event: "onboarding_skip_subscription")
                        completionClosure(onboardingData)
                    }) {
                        Text("Maybe Later")
                            .font(.system(size: 16, weight: .medium))
                            .foregroundColor(.white.opacity(0.8))
                    }
                    .accessibilityLabel(String(localized: "Maybe Later"))
                    .accessibilityHint(String(localized: "Skip subscription and complete setup"))
                    .padding(.top, 4)
                }
                .padding(.horizontal, 24)
                .padding(.bottom, 50)
            }
        }
        .sheet(isPresented: $showSubscriptionStore, onDismiss: {
            // After subscription store closes, complete onboarding
            EventLogger.log(event: "onboarding_complete")
            completionClosure(onboardingData)
        }) {
            FeelsSubscriptionStoreView()
        }
    }
}

struct BenefitRow: View {
    let icon: String
    let title: String
    let description: String

    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: icon)
                .font(.system(size: 22))
                .foregroundColor(.white)
                .frame(width: 40)
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text(title)
                    .font(.system(size: 16, weight: .semibold))
                    .foregroundColor(.white)

                Text(description)
                    .font(.system(size: 13))
                    .foregroundColor(.white.opacity(0.8))
            }

            Spacer()
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(title): \(description)")
    }
}

struct OnboardingSubscription_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingSubscription(onboardingData: OnboardingData(), completionClosure: { _ in })
            .environmentObject(IAPManager())
    }
}