User Achievements Badges

import SwiftUI

struct UserBadgesAchievements: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 32) {
                    // User Profile Section
                    VStack(spacing: 8) {
                        Image(systemName: "person.crop.circle.fill")
                            .resizable()
                            .frame(width: 80, height: 80)
                            .foregroundColor(.blue)
                        Text("John Doe")
                            .font(.title2)
                            .fontWeight(.bold)
                        Text("@johndoe")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    .padding(.top, 16)

                    // Earned Badges
                    VStack(alignment: .leading, spacing: 16) {
                        Text("Your Badges")
                            .font(.headline)
                            .padding(.horizontal)
                        LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
                            ForEach(earnedBadges) { badge in
                                BadgeView(badge: badge, locked: false)
                            }
                        }
                        .padding(.horizontal)
                    }

                    // Locked Badges
                    VStack(alignment: .leading, spacing: 16) {
                        Text("Locked Badges")
                            .font(.headline)
                            .padding(.horizontal)
                        LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
                            ForEach(lockedBadges) { badge in
                                BadgeView(badge: badge, locked: true)
                            }
                        }
                        .padding(.horizontal)
                    }
                }
                .padding(.bottom, 32)
            }
            .navigationTitle("Achievements")
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.10), Color.purple.opacity(0.08)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
            )
        }
    }
}

struct UserBadge: Identifiable {
    let id = UUID()
    let icon: String // SF Symbol
    let name: String
    let level: String
}

let earnedBadges: [UserBadge] = [
    .init(icon: "flame.fill", name: "Streak", level: "7 days"),
    .init(icon: "star.fill", name: "Gold Member", level: "Level 3"),
    .init(icon: "bolt.fill", name: "Active", level: "Level 2"),
    .init(icon: "crown.fill", name: "Champion", level: "Top 10%"),
    .init(icon: "heart.fill", name: "Supporter", level: "Level 1"),
    .init(icon: "trophy.fill", name: "Winner", level: "3x")
]

let lockedBadges: [UserBadge] = [
    .init(icon: "flame", name: "Streak Master", level: "30 days"),
    .init(icon: "star", name: "Platinum", level: "Level 5"),
    .init(icon: "bolt", name: "Ultra Active", level: "Level 5"),
    .init(icon: "crown", name: "Legend", level: "Top 1%"),
    .init(icon: "heart", name: "Super Supporter", level: "Level 5"),
    .init(icon: "trophy", name: "Grand Winner", level: "10x")
]

struct BadgeView: View {
    let badge: UserBadge
    let locked: Bool
    var body: some View {
        VStack(spacing: 8) {
            ZStack {
                Circle()
                    .fill(locked ? Color(.systemGray5) : Color.blue.opacity(0.18))
                    .frame(width: 56, height: 56)
                Image(systemName: badge.icon)
                    .font(.title2)
                    .foregroundColor(locked ? .gray : .blue)
            }
            Text(badge.name)
                .font(.subheadline)
                .fontWeight(.semibold)
                .foregroundColor(locked ? .gray : .primary)
                .lineLimit(1)
            Text(badge.level)
                .font(.caption)
                .foregroundColor(locked ? .gray : .secondary)
                .lineLimit(1)
        }
        .frame(width: 90)
        .padding(8)
        .background(
            RoundedRectangle(cornerRadius: 16, style: .continuous)
                .fill(Color(.systemBackground).opacity(locked ? 0.5 : 0.8))
        )
    }
}