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())
                
                // 姓名和ID
                VStack(alignment: .leading, spacing: 4) {
                    Text("用户名")
                        .font(.headline)
                        .foregroundColor(.primary)
                    
                    Text("ID: 12345678")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
                
                Spacer()
            }
            .padding(.horizontal, 16)
            .padding(.top, 16)
            
            VStack(alignment: .leading, spacing: 8) {
                Text("会员等级")
                    .font(.headline)
                    .foregroundColor(.primary)
                Text("会员时间")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                Text("会员中心")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(16)
            .background(Color.clear)
            .padding(.horizontal, 16)
            
            VStack(spacing: 12) {
                // memories
                Button(action: {
                    print("memories")
                }) {
                    HStack(spacing: 16) {
                        Image(systemName: "crown.fill")
                            .foregroundColor(.orange)
                            .frame(width: 24, height: 24)
                        
                        Text("My Memories")
                            .font(.headline)
                            .foregroundColor(.primary)
                        
                        Spacer()
                    }
                    .padding()
                    .cornerRadius(10)
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                
                // Box
                Button(action: {
                    print("Box")
                }) {
                    HStack(spacing: 16) {
                        Image(systemName: "clock.fill")
                            .foregroundColor(.blue)
                            .frame(width: 24, height: 24)
                        Text("My Bind Box")
                            .font(.headline)
                            .foregroundColor(.primary)
                        
                        Spacer()
                    }
                    .padding()
                    .cornerRadius(10)
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                
                // setting
                Button(action: {
                    withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                        showSettings = true
                    }
                }) {
                    HStack(spacing: 16) {
                        Image(systemName: "person.circle.fill")
                            .foregroundColor(.purple)
                            .frame(width: 24, height: 24)
                        Text("Setting")
                            .font(.headline)
                            .foregroundColor(.primary)
                        Spacer()
                        Image(systemName: "chevron.right")
                            .foregroundColor(.gray)
                    }
                    .padding()
                    .background(Color.clear)
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color.gray.opacity(0.2), lineWidth: 1)
                    )
                    .contentShape(Rectangle()) // 使整个区域可点击
                }
                .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
            }
            .padding(.horizontal, 16)
            Spacer()
        }
        .frame(width: UIScreen.main.bounds.width * 0.8)
        .background(Color(red: 0.87, green: 0.87, blue: 0.87))
        .cornerRadius(20, corners: [.topRight, .bottomRight])
        .edgesIgnoringSafeArea(.all)
    }
}

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