//
//  OnboardingTime.swift
//  Reflect (iOS)
//
//  Created by Trey Tartt on 1/20/22.
//

import SwiftUI

struct OnboardingTime: View {
    @ObservedObject var onboardingData: OnboardingData

    var formatter: DateFormatter {
        let dateFormatter = DateFormatter()
        dateFormatter.timeStyle = .short
        return dateFormatter
    }

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

            VStack(spacing: 0) {
                Spacer()

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

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

                // Title
                Text("When should we\nremind you?")
                    .font(.title.weight(.bold))
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)
                    .padding(.bottom, 12)

                // Subtitle
                Text("Pick a time that works for your daily check-in")
                    .font(.body.weight(.medium))
                    .foregroundColor(.white.opacity(0.85))
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 40)

                Spacer()

                // Time picker card
                VStack(spacing: 16) {
                    DatePicker("", selection: $onboardingData.date, displayedComponents: .hourAndMinute)
                        .datePickerStyle(.wheel)
                        .labelsHidden()
                        .colorScheme(.light)
                        .accessibilityLabel(String(localized: "Reminder time"))
                        .accessibilityHint(String(localized: "Select when you want to be reminded"))
                }
                .padding(.vertical, 20)
                .padding(.horizontal, 24)
                .background(
                    RoundedRectangle(cornerRadius: 24)
                        .fill(.white)
                        .shadow(color: .black.opacity(0.1), radius: 20, y: 10)
                )
                .padding(.horizontal, 30)

                Spacer()

                // Info text
                HStack(spacing: 12) {
                    Image(systemName: "info.circle.fill")
                        .font(.title3)
                        .foregroundColor(.white.opacity(0.8))
                        .accessibilityHidden(true)

                    Text("You'll get a gentle reminder at \(formatter.string(from: onboardingData.date)) every day")
                        .font(.subheadline.weight(.medium))
                        .foregroundColor(.white.opacity(0.9))
                }
                .padding(.horizontal, 30)
                .padding(.bottom, 80)
                .accessibilityElement(children: .combine)
            }
        }
        .accessibilityIdentifier(AccessibilityID.Onboarding.timeScreen)
    }
}

struct OnboardingTime_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            OnboardingTime(onboardingData: OnboardingData())

            OnboardingTime(onboardingData: OnboardingData())
                .preferredColorScheme(.dark)
        }
    }
}