//
//  OnboardingWelcome.swift
//  Reflect
//
//  Created by Claude Code on 12/10/24.
//

import SwiftUI

struct OnboardingWelcome: View {
    var onNext: (() -> Void)? = nil

    var body: some View {
        ZStack {
            // Gradient background
            LinearGradient(
                colors: [Color(hex: "667eea"), Color(hex: "764ba2")],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()

            VStack(spacing: 0) {
                Spacer()

                // App icon/logo area
                ZStack {
                    Circle()
                        .fill(.white.opacity(0.15))
                        .frame(width: 160, height: 160)

                    Circle()
                        .fill(.white.opacity(0.2))
                        .frame(width: 120, height: 120)

                    Image(systemName: "heart.fill")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                }
                .padding(.bottom, 40)

                // Title
                Text("Welcome to Reflect")
                    .font(.largeTitle.weight(.bold))
                    .foregroundColor(.white)
                    .padding(.bottom, 12)

                // Subtitle
                Text("Track your mood, discover patterns,\nand understand yourself better.")
                    .font(.headline.weight(.medium))
                    .foregroundColor(.white.opacity(0.9))
                    .multilineTextAlignment(.center)
                    .fixedSize(horizontal: false, vertical: true)
                    .padding(.horizontal, 40)

                Spacer()

                // Feature highlights
                VStack(spacing: 16) {
                    FeatureRow(icon: "bell.badge.fill", title: "Daily Reminders", description: "Never forget to log your mood")
                    FeatureRow(icon: "chart.bar.fill", title: "Beautiful Insights", description: "See your mood patterns over time")
                    FeatureRow(icon: "paintpalette.fill", title: "Fully Customizable", description: "Make it yours with themes & colors")
                }
                .padding(.horizontal, 30)
                .padding(.bottom, 24)

                // Continue button
                Button(action: { onNext?() }) {
                    Text("Get Started")
                        .font(.headline.weight(.semibold))
                        .foregroundColor(Color(hex: "667eea"))
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background(
                            RoundedRectangle(cornerRadius: 16)
                                .fill(.white)
                        )
                }
                .padding(.horizontal, 30)
                .padding(.bottom, 40)
                .accessibilityIdentifier(AccessibilityID.Onboarding.nextButton)
            }
        }
        .accessibilityElement(children: .contain)
        .accessibilityIdentifier(AccessibilityID.Onboarding.welcomeScreen)
    }
}

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

    var body: some View {
        HStack(spacing: 16) {
            ZStack {
                Circle()
                    .fill(.white.opacity(0.2))
                    .frame(width: 50, height: 50)

                Image(systemName: icon)
                    .font(.title3)
                    .foregroundColor(.white)
            }
            .accessibilityHidden(true)

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

                Text(description)
                    .font(.subheadline)
                    .foregroundColor(.white.opacity(0.8))
            }

            Spacer()
        }
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(title): \(description)")
    }
}

struct OnboardingWelcome_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingWelcome()
    }
}