import SwiftUI
import Bedrock

/// The time selection screen where users choose when they want to build habits.
struct TimeSelectionStepView: View {
    @Binding var selectedTime: OnboardingTimePreference?
    let onContinue: () -> Void
    
    @State private var animateCards = false
    
    var body: some View {
        VStack(spacing: Design.Spacing.xxLarge) {
            Spacer()
                .frame(height: Design.Spacing.large)
            
            // Header
            VStack(spacing: Design.Spacing.small) {
                Text(String(localized: "When do you want to build habits?"))
                    .font(.title2)
                    .fontWeight(.bold)
                    .foregroundStyle(AppTextColors.primary)
                    .multilineTextAlignment(.center)
            }
            .padding(.horizontal, Design.Spacing.large)
            
            // Time preference cards
            VStack(spacing: Design.Spacing.medium) {
                ForEach(Array(OnboardingTimePreference.allCases.enumerated()), id: \.element.id) { index, time in
                    TimeCardView(
                        time: time,
                        isSelected: selectedTime == time,
                        onTap: {
                            withAnimation(.easeInOut(duration: Design.Animation.quick)) {
                                selectedTime = time
                            }
                        }
                    )
                    .opacity(animateCards ? 1 : 0)
                    .offset(y: animateCards ? 0 : 20)
                    .animation(
                        .easeOut(duration: 0.4).delay(Double(index) * 0.1),
                        value: animateCards
                    )
                }
            }
            .padding(.horizontal, Design.Spacing.large)
            
            Spacer()
            
            // Continue button (only shown when a time is selected)
            if selectedTime != nil {
                Button(action: onContinue) {
                    Text(String(localized: "Continue"))
                        .font(.headline)
                        .foregroundStyle(AppTextColors.inverse)
                        .frame(maxWidth: .infinity)
                        .frame(height: AppMetrics.Size.buttonHeight)
                        .background(AppAccent.primary)
                        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
                }
                .padding(.horizontal, Design.Spacing.xxLarge)
                .padding(.bottom, Design.Spacing.xxLarge)
                .transition(.move(edge: .bottom).combined(with: .opacity))
            }
        }
        .animation(.easeInOut(duration: Design.Animation.quick), value: selectedTime != nil)
        .onAppear {
            withAnimation {
                animateCards = true
            }
        }
    }
}

/// A single time preference card.
private struct TimeCardView: View {
    let time: OnboardingTimePreference
    let isSelected: Bool
    let onTap: () -> Void
    
    var body: some View {
        Button(action: onTap) {
            HStack(spacing: Design.Spacing.medium) {
                // Icon
                Image(systemName: time.symbolName)
                    .font(.system(size: 28))
                    .foregroundStyle(isSelected ? AppAccent.primary : AppTextColors.secondary)
                    .frame(width: 44)
                
                // Text
                VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
                    Text(time.displayName)
                        .font(.headline)
                        .foregroundStyle(AppTextColors.primary)
                    
                    Text(time.subtitle)
                        .font(.subheadline)
                        .foregroundStyle(AppTextColors.secondary)
                }
                
                Spacer()
                
                // Selection indicator
                if isSelected {
                    Image(systemName: "checkmark.circle.fill")
                        .font(.title2)
                        .foregroundStyle(AppAccent.primary)
                }
            }
            .padding(Design.Spacing.large)
            .background(
                RoundedRectangle(cornerRadius: Design.CornerRadius.large)
                    .fill(isSelected ? AppAccent.primary.opacity(0.15) : AppSurface.card)
            )
            .overlay(
                RoundedRectangle(cornerRadius: Design.CornerRadius.large)
                    .stroke(
                        isSelected ? AppAccent.primary : Color.clear,
                        lineWidth: 2
                    )
            )
        }
        .buttonStyle(.plain)
        .accessibilityLabel(time.displayName)
        .accessibilityHint(time.subtitle)
    }
}

#Preview {
    ZStack {
        LinearGradient(
            colors: [AppSurface.primary, AppSurface.secondary],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .ignoresSafeArea()
        
        TimeSelectionStepView(
            selectedTime: .constant(nil),
            onContinue: {}
        )
    }
}
