import SwiftUI

/// A dedicated page to explain the "second" blind box requirement
/// and guide the user to upload 20 images and 5 videos without mixing
/// with the generic MediaUploadView responsibilities.
struct SecondOnboardingView: View {
    @EnvironmentObject private var router: Router

    var body: some View {
        ZStack {
            Color.themeTextWhiteSecondary.ignoresSafeArea()

            VStack(spacing: 0) {
                // Simple header
                SimpleNaviHeader(title: "Create Your Second Blind Box") {
                    router.pop()
                }
                .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)

                VStack(spacing: 20) {
                    // Hero / Illustration
                    SVGImageHtml(svgName: "IP1")
                        .frame(width: 140, height: 80)
                        .padding(.top, 24)

                    VStack(spacing: 8) {
                        Text("Upload Requirements")
                            .font(Typography.font(for: .title2, family: .quicksandBold))
                            .foregroundColor(.themeTextMessageMain)
                        Text("To generate your next blind box, please upload:")
                            .font(Typography.font(for: .body))
                            .foregroundColor(.themeTextMessage)
                        VStack(alignment: .leading, spacing: 6) {
                            HStack(spacing: 8) {
                                SVGImage(svgName: "Upload").frame(width: 20, height: 20)
                                Text("20 Images")
                                    .font(Typography.font(for: .body))
                                    .foregroundColor(.themeTextMessageMain)
                            }
                            HStack(spacing: 8) {
                                SVGImage(svgName: "Upload").frame(width: 20, height: 20)
                                Text("5 Videos")
                                    .font(Typography.font(for: .body))
                                    .foregroundColor(.themeTextMessageMain)
                            }
                        }
                        .padding(.top, 4)
                    }
                    .padding(.horizontal)

                    // Tips
                    HStack(spacing: 6) {
                        SVGImage(svgName: "Tips").frame(width: 16, height: 16)
                        Text("Higher quality media helps create better memories.")
                            .font(.caption)
                            .foregroundColor(.black)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(3)
                    }
                    .background(Color.themeTextWhite.cornerRadius(6))
                    .padding(.horizontal)

                    Spacer()

                    // Primary CTAs
                    VStack(spacing: 12) {
                        Button(action: {
                            router.navigate(to: .mediaUpload)
                        }) {
                            Text("Start Uploading")
                                .font(.headline)
                                .foregroundColor(.themeTextMessageMain)
                                .frame(maxWidth: .infinity)
                                .frame(height: 56)
                                .background(Color.themePrimary)
                                .cornerRadius(28)
                                .padding(.horizontal, 24)
                        }

                        Button(action: {
                            router.navigate(to: .userInfo)
                        }) {
                            Text("Upload Avatar First")
                                .font(.subheadline)
                                .foregroundColor(.themeTextMessage)
                        }
                        .padding(.bottom, 24)
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
                .cornerRadius(16)
                .padding()

                Spacer()
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

#Preview {
    SecondOnboardingView().environmentObject(Router.shared)
}