import SwiftUI

struct UserProfileModal: View {
    @Binding var showModal: Bool
    @Binding var showSettings: Bool
    
    var body: some View {
        // Modal content with transparent background
        VStack(spacing: 20) {
            Spacer()
                .frame(height: UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
            // 用户信息区域
            HStack(alignment: .center, spacing: 16) {
                Image(systemName: "person.circle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 60, height: 60)
                    .foregroundColor(.blue)
                    .clipShape(Circle())

                VStack(alignment: .leading, spacing: 10) {
                    Text("Name")
                        .font(Typography.font(for: .body))
                        .fontWeight(.bold)
                        .foregroundColor(.themeTextMessageMain)
                    HStack(spacing: 4) {
                        Text("ID: 12345678")
                            .font(.system(size: 14))
                            .foregroundColor(.themeTextMessageMain)

                        Button(action: {
                            UIPasteboard.general.string = "12345678"
                        }) {
                            Image(systemName: "doc.on.doc")
                                .font(.system(size: 12))
                                .foregroundColor(.themeTextMessageMain)
                        }
                    }
                }

                Spacer()
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .fill(Color.white)
                    .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
            )
            .padding(.horizontal)

            ZStack(alignment: .center) {
                // SVG背景 - 确保铺满整个区域
                SVGImage(svgName: "Pioneer")
                    .frame(maxWidth: .infinity, maxHeight: .infinity) 
                    .scaledToFill()
                
                // 内容区域
                VStack(alignment: .leading, spacing: 6) {
                    Text("Pioneer")
                        .font(Typography.font(for: .title3))
                        .fontWeight(.bold)
                        .foregroundColor(.themeTextMessageMain)
                        .padding(.top, 6)
                    
                    Text("Expires on :")
                        .font(.system(size: 12))
                        .foregroundColor(.themeTextMessageMain)
                        .padding(.top, 2)
                    
                    Text("March 15, 2025")
                        .font(.system(size: 12))
                        .fontWeight(.bold)
                        .foregroundColor(.themeTextMessageMain)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 32)
                // 可以添加内边距使内容不紧贴边缘
                .padding(.vertical, 12)
            }
            .frame(height: 112)
            .frame(maxWidth: .infinity)
            .clipped() // 确保内容不会超出边界
    
            
            VStack(spacing: 12) {
                // upload
                Button(action: {
                   Router.shared.navigate(to: .mediaUpload)
                }) {
                    HStack(spacing: 16) {
                       SVGImage(svgName: "Upload")
                            .foregroundColor(.orange)
                            .frame(width: 20, height: 20)
                        
                        Text("Upload Resources")
                            .font(Typography.font(for: .body))
                            .fontWeight(.bold)
                            .foregroundColor(.themeTextMessageMain)
                        
                        Spacer()
                    }
                    .padding()
                    .cornerRadius(10)
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                
                // memories
                Button(action: {
                   Router.shared.navigate(to: .mediaUpload)
                }) {
                    HStack(spacing: 16) {
                       SVGImage(svgName: "Memory")
                            .foregroundColor(.orange)
                            .frame(width: 20, height: 20)
                        
                        Text("My Memories")
                            .font(Typography.font(for: .body))
                            .fontWeight(.bold)
                            .foregroundColor(.themeTextMessageMain)
                        
                        Spacer()
                    }
                    .padding()
                    .cornerRadius(10)
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式

                // Box
                Button(action: {
                   Router.shared.navigate(to: .mediaUpload)
                }) {
                    HStack(spacing: 16) {
                       SVGImage(svgName: "Box")
                            .foregroundColor(.orange)
                            .frame(width: 20, height: 20)
                        
                        Text("My Blind Box")
                            .font(Typography.font(for: .body))
                            .fontWeight(.bold)
                            .foregroundColor(.themeTextMessageMain)
                        
                        Spacer()
                    }
                    .padding()
                    .cornerRadius(10)
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                
                // setting
                Button(action: {
                   withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                        showSettings = true
                    }
                }) {
                    HStack(spacing: 16) {
                       SVGImage(svgName: "Set")
                            .foregroundColor(.orange)
                            .frame(width: 20, height: 20)
                        
                        Text("Setting")
                            .font(Typography.font(for: .body))
                            .fontWeight(.bold)
                            .foregroundColor(.themeTextMessageMain)
                        
                        Spacer()
                    }
                    .padding()
                    .cornerRadius(10)
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .fill(Color.white)
                    .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
            )
            .padding(.horizontal)
            Spacer()
        }
        .frame(width: UIScreen.main.bounds.width * 0.8)
        .background(Color.themeTextWhiteSecondary)
        .cornerRadius(20, corners: [.topRight, .bottomRight])
        .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    UserProfileModal(showModal: .constant(true), showSettings: .constant(false))
}