import SwiftUI

struct AvatarBoxView: View {
    @Environment(\.dismiss) private var dismiss
    @EnvironmentObject private var router: Router
    @State private var isAnimating = false
    
    var body: some View {
        ZStack {
            // Background color
            Color.white
                .ignoresSafeArea()
            
            VStack(spacing: 0) {
                // Navigation Bar
                HStack {
                    Button(action: {
                        dismiss()
                    }) {
                        Image(systemName: "chevron.left")
                            .font(.system(size: 17, weight: .medium))
                            .foregroundColor(.black)
                            .padding()
                    }
                    
                    Spacer()
                    
                    Text("动画页面")
                        .font(.headline)
                        .foregroundColor(.black)
                    
                    Spacer()
                    
                    // Invisible spacer to center the title
                    Color.clear
                        .frame(width: 44, height: 44)
                }
                .frame(height: 44)
                .background(Color.white)
                
                Spacer()
                
                // Animated Content
                ZStack {
                    // Pulsing circle animation
                    Circle()
                        .fill(Color.blue.opacity(0.2))
                        .frame(width: 200, height: 200)
                        .scaleEffect(isAnimating ? 1.5 : 1.0)
                        .opacity(isAnimating ? 0.5 : 1.0)
                        .animation(
                            Animation.easeInOut(duration: 1.5)
                                .repeatForever(autoreverses: true),
                            value: isAnimating
                        )
                    
                    // Center icon
                    Image(systemName: "sparkles")
                        .font(.system(size: 60))
                        .foregroundColor(.blue)
                        .rotationEffect(.degrees(isAnimating ? 360 : 0))
                        .animation(
                            Animation.linear(duration: 8)
                                .repeatForever(autoreverses: false),
                            value: isAnimating
                        )
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                
                Spacer()
                
                // Bottom Button
                Button(action: {
                    router.navigate(to: .feedbackView)
                }) {
                    Text("Continue")
                        .font(.headline)
                        .foregroundColor(.themeTextMessageMain)
                        .frame(maxWidth: .infinity)
                        .frame(height: 56)
                        .background(Color.themePrimary)
                        .cornerRadius(25)
                        .padding(.horizontal, 24)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .navigationBarBackButtonHidden(true)
        .navigationBarHidden(true)
        .onAppear {
            isAnimating = true
        }
    }
}

// MARK: - Preview
struct AvatarBoxView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            AvatarBoxView()
                .environmentObject(Router.shared)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}