import SwiftUI

struct MeView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                // 顶部标题
                HStack {
                    Spacer()
                    Text("我的")
                        .font(.system(size: 22, weight: .semibold))
                        .foregroundColor(.white)
                    Spacer()
                }
                .padding(.top, 20)
                
                // 用户头像区域
                VStack(spacing: 16) {
                    Circle()
                        .fill(Color.white.opacity(0.2))
                        .frame(width: 80, height: 80)
                        .overlay(
                            Image(systemName: "person.fill")
                                .font(.system(size: 40))
                                .foregroundColor(.white)
                        )
                    
                    Text("用户昵称")
                        .font(.system(size: 18, weight: .medium))
                        .foregroundColor(.white)
                    
                    Text("ID: 123456789")
                        .font(.system(size: 14))
                        .foregroundColor(.white.opacity(0.7))
                }
                .padding(.top, 30)
                
                // 功能菜单
                VStack(spacing: 12) {
                    MenuItemView(icon: "gearshape", title: "设置", action: {})
                    MenuItemView(icon: "person.circle", title: "个人信息", action: {})
                    MenuItemView(icon: "heart", title: "我的收藏", action: {})
                    MenuItemView(icon: "clock", title: "浏览历史", action: {})
                    MenuItemView(icon: "questionmark.circle", title: "帮助与反馈", action: {})
                }
                .padding(.horizontal, 20)
                .padding(.top, 40)
                
                // 退出登录按钮
                Button(action: {}) {
                    HStack {
                        Image(systemName: "rectangle.portrait.and.arrow.right")
                            .font(.system(size: 16))
                        Text("退出登录")
                            .font(.system(size: 16, weight: .medium))
                    }
                    .foregroundColor(.red)
                    .frame(maxWidth: .infinity)
                    .frame(height: 50)
                    .background(
                        Color.white.opacity(0.1)
                            .cornerRadius(12)
                    )
                }
                .padding(.horizontal, 20)
                .padding(.top, 30)
                
                // 底部安全区域
                Color.clear.frame(height: 100)
            }
        }
    }
}

// MARK: - 菜单项组件
struct MenuItemView: View {
    let icon: String
    let title: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            HStack(spacing: 16) {
                Image(systemName: icon)
                    .font(.system(size: 20))
                    .foregroundColor(.white)
                    .frame(width: 24)
                
                Text(title)
                    .font(.system(size: 16))
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity, alignment: .leading)
                
                Image(systemName: "chevron.right")
                    .font(.system(size: 14))
                    .foregroundColor(.white.opacity(0.6))
            }
            .padding(.horizontal, 20)
            .frame(height: 56)
            .background(
                Color.white.opacity(0.1)
                    .cornerRadius(12)
            )
        }
        .buttonStyle(PlainButtonStyle())
    }
}