import SwiftUI
import Bedrock

/// Shows a preview of a ritual preset before creation.
struct RitualPreviewStepView: View {
    let preset: RitualPreset
    let ritualIndex: Int?      // e.g., 1 for "Ritual 1 of 2"
    let totalRituals: Int?     // e.g., 2
    let onStartRitual: () -> Void
    let onSkip: () -> Void
    
    @State private var animateContent = false
    
    /// Header text based on whether this is part of a multi-ritual flow
    private var headerText: String {
        if let index = ritualIndex, let total = totalRituals {
            return String(localized: "Ritual \(index) of \(total)")
        } else {
            return String(localized: "Your first ritual")
        }
    }
    
    var body: some View {
        VStack(spacing: Design.Spacing.xxLarge) {
            Spacer()
                .frame(height: Design.Spacing.large)
            
            // Header
            Text(headerText)
                .font(.title2)
                .fontWeight(.bold)
                .foregroundStyle(AppTextColors.primary)
                .multilineTextAlignment(.center)
                .opacity(animateContent ? 1 : 0)
            
            // Ritual preview card
            VStack(alignment: .leading, spacing: Design.Spacing.large) {
                // Title and theme
                HStack(spacing: Design.Spacing.medium) {
                    Image(systemName: preset.iconName)
                        .font(.title)
                        .foregroundStyle(AppAccent.primary)
                    
                    VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
                        Text(preset.title)
                            .font(.title3)
                            .fontWeight(.semibold)
                            .foregroundStyle(AppTextColors.primary)
                        
                        Text(preset.theme)
                            .font(.subheadline)
                            .foregroundStyle(AppTextColors.secondary)
                    }
                }
                
                Divider()
                    .background(AppBorder.subtle)
                
                // Habits list
                VStack(alignment: .leading, spacing: Design.Spacing.small) {
                    ForEach(preset.habits) { habit in
                        HStack(spacing: Design.Spacing.small) {
                            Image(systemName: habit.symbolName)
                                .font(.body)
                                .foregroundStyle(AppTextColors.secondary)
                                .frame(width: 24)
                            
                            Text(habit.title)
                                .font(.body)
                                .foregroundStyle(AppTextColors.primary)
                        }
                    }
                }
                
                Divider()
                    .background(AppBorder.subtle)
                
                // Duration and time
                HStack(spacing: Design.Spacing.large) {
                    Label {
                        Text(String(localized: "\(preset.durationDays) days"))
                            .font(.caption)
                            .foregroundStyle(AppTextColors.secondary)
                    } icon: {
                        Image(systemName: "calendar")
                            .foregroundStyle(AppTextColors.tertiary)
                    }
                    
                    Label {
                        Text(preset.timeOfDay.displayName)
                            .font(.caption)
                            .foregroundStyle(AppTextColors.secondary)
                    } icon: {
                        Image(systemName: preset.timeOfDay.symbolName)
                            .foregroundStyle(AppTextColors.tertiary)
                    }
                }
            }
            .padding(Design.Spacing.large)
            .background(AppSurface.card)
            .clipShape(.rect(cornerRadius: Design.CornerRadius.large))
            .padding(.horizontal, Design.Spacing.large)
            .opacity(animateContent ? 1 : 0)
            .offset(y: animateContent ? 0 : 20)
            
            Spacer()
            
            // Actions
            VStack(spacing: Design.Spacing.medium) {
                // Primary CTA
                Button(action: onStartRitual) {
                    Text(String(localized: "Start This Ritual"))
                        .font(.headline)
                        .foregroundStyle(AppTextColors.inverse)
                        .frame(maxWidth: .infinity)
                        .frame(height: AppMetrics.Size.buttonHeight)
                        .background(AppAccent.primary)
                        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
                }
                
                // Skip option
                Button(action: onSkip) {
                    Text(String(localized: "Skip for now"))
                        .font(.subheadline)
                        .foregroundStyle(AppTextColors.secondary)
                }
            }
            .padding(.horizontal, Design.Spacing.xxLarge)
            .opacity(animateContent ? 1 : 0)
            
            Spacer()
                .frame(height: Design.Spacing.xxLarge)
        }
        .onAppear {
            withAnimation(.easeOut(duration: 0.5)) {
                animateContent = true
            }
        }
    }
}

#Preview("Single Ritual") {
    ZStack {
        LinearGradient(
            colors: [AppSurface.primary, AppSurface.secondary],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .ignoresSafeArea()
        
        RitualPreviewStepView(
            preset: RitualPresetLibrary.healthPresets[0],
            ritualIndex: nil,
            totalRituals: nil,
            onStartRitual: {},
            onSkip: {}
        )
    }
}

#Preview("Multi Ritual 1 of 2") {
    ZStack {
        LinearGradient(
            colors: [AppSurface.primary, AppSurface.secondary],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .ignoresSafeArea()
        
        RitualPreviewStepView(
            preset: RitualPresetLibrary.healthPresets[0],
            ritualIndex: 1,
            totalRituals: 2,
            onStartRitual: {},
            onSkip: {}
        )
    }
}
