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

import SwiftUI

struct OnboardingWelcome: View {
    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 Feels")
                    .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)
                    .padding(.horizontal, 40)

                Spacer()

                // Feature highlights
                VStack(spacing: 20) {
                    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, 40)

                // Swipe hint
                HStack(spacing: 8) {
                    Text("Swipe to get started")
                        .font(.subheadline.weight(.medium))
                        .foregroundColor(.white.opacity(0.7))
                    Image(systemName: "chevron.right")
                        .font(.subheadline.weight(.semibold))
                        .foregroundColor(.white.opacity(0.7))
                }
                .padding(.bottom, 60)
                .accessibilityLabel(String(localized: "Swipe right to continue"))
                .accessibilityHint(String(localized: "Swipe to the next onboarding step"))
            }
        }
        .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()
    }
}