//
//  ResourcePill.swift
//  lichunWebsocket
//
//  Resource display pill for header
//

import SwiftUI

struct ResourcePill: View {
    let icon: String
    let value: String
    let color: Color

    @State private var scale: CGFloat = 1.0
    @State private var isAnimating = false
    @State private var previousValue: String = ""

    var body: some View {
        HStack(spacing: AppSpacing.xxs) {
            Image(systemName: icon)
                .font(.appEmoji)
                .foregroundColor(color)
                .scaleEffect(isAnimating ? 1.2 : 1.0)
            Text(value)
                .font(.appIconLabelBold)
                .foregroundColor(AppColors.primaryText)
        }
        .padding(.horizontal, AppSpacing.sm)
        .padding(.vertical, AppSpacing.xs)
        .background(color.opacity(isAnimating ? 0.25 : 0.15))
        .cornerRadius(AppSpacing.smallCornerRadius)
        .scaleEffect(scale)
        .onChange(of: value) { newValue in
            // Trigger bounce animation when value changes
            guard newValue != previousValue else { return }
            previousValue = newValue

            // Icon pulse
            withAnimation(.spring(response: 0.3, dampingFraction: 0.5)) {
                isAnimating = true
            }

            // Scale bounce
            withAnimation(.spring(response: 0.3, dampingFraction: 0.4)) {
                scale = 1.15
            }

            // Haptic feedback
            let generator = UIImpactFeedbackGenerator(style: .light)
            generator.impactOccurred()

            // Reset animation
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) {
                    scale = 1.0
                    isAnimating = false
                }
            }
        }
        .onAppear {
            previousValue = value
        }
    }
}

// MARK: - Preview
#Preview {
    HStack(spacing: AppSpacing.sm) {
        ResourcePill(icon: "bolt.fill", value: "60", color: AppColors.energy)
        ResourcePill(icon: "dollarsign.circle.fill", value: "$1,200", color: AppColors.money)
        ResourcePill(icon: "gem.fill", value: "25", color: AppColors.diamond)
        ResourcePill(icon: "heart.fill", value: "85%", color: AppColors.health)
    }
    .padding()
    .background(AppColors.background)
}