//
//  StatBar.swift
//  lichunWebsocket
//
//  Stat bar component for displaying character stats with cozy gradient design
//

import SwiftUI

struct StatBar: View {
    let label: String?
    let value: Int
    let maxValue: Int = 100
    let color: Color
    var showPercentage: Bool = true
    var height: CGFloat = 12

    @State private var animatedValue: CGFloat = 0
    @State private var barScale: CGFloat = 1.0
    @State private var glowIntensity: Double = 0.4
    @State private var previousValue: Int = 0

    var body: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            if let label = label {
                HStack {
                    Text(label)
                        .font(.appCaption)
                        .foregroundColor(AppColors.secondaryText)
                    Spacer()
                    if showPercentage {
                        Text("\(value)")
                            .font(.system(size: 14, weight: .bold, design: .rounded))
                            .foregroundColor(AppColors.primaryText)
                    }
                }
            }

            GeometryReader { geometry in
                ZStack(alignment: .leading) {
                    // Background with subtle gradient
                    RoundedRectangle(cornerRadius: height / 2)
                        .fill(color.opacity(0.15))
                        .frame(height: height)

                    // Foreground gradient
                    RoundedRectangle(cornerRadius: height / 2)
                        .fill(
                            LinearGradient(
                                colors: [color.lighter(by: 0.2), color],
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                        .frame(
                            width: geometry.size.width * animatedValue / CGFloat(maxValue),
                            height: height
                        )
                        .shadow(color: color.opacity(glowIntensity), radius: 4, x: 0, y: 2)
                        .scaleEffect(y: barScale, anchor: .center)

                    // Shine overlay on top half
                    RoundedRectangle(cornerRadius: height / 2)
                        .fill(
                            LinearGradient(
                                colors: [.white.opacity(0.3), .clear],
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .frame(
                            width: geometry.size.width * animatedValue / CGFloat(maxValue),
                            height: height / 2
                        )
                        .offset(y: -height / 4)
                        .scaleEffect(y: barScale, anchor: .center)
                }
            }
            .frame(height: height)
        }
        .onAppear {
            // Initialize
            animatedValue = CGFloat(min(max(value, 0), maxValue))
            previousValue = value
        }
        .onChange(of: value) { newValue in
            let clampedValue = CGFloat(min(max(newValue, 0), maxValue))
            let wasIncrease = newValue > previousValue
            previousValue = newValue

            // Animate bar width change
            withAnimation(.spring(response: 0.6, dampingFraction: 0.65)) {
                animatedValue = clampedValue
            }

            // Pulse effect
            if wasIncrease {
                // Growing animation
                withAnimation(.spring(response: 0.25, dampingFraction: 0.5)) {
                    barScale = 1.15
                    glowIntensity = 0.7
                }
            } else {
                // Shrinking animation
                withAnimation(.spring(response: 0.25, dampingFraction: 0.5)) {
                    barScale = 0.9
                    glowIntensity = 0.2
                }
            }

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

            // Reset scale
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.25) {
                withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
                    barScale = 1.0
                    glowIntensity = 0.4
                }
            }
        }
    }
}

// MARK: - Preview
#if DEBUG
struct StatBar_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: AppSpacing.md) {
            StatBar(label: "Health", value: 85, color: AppColors.health)
            StatBar(label: "Happiness", value: 70, color: AppColors.happiness)
            StatBar(label: "Intelligence", value: 60, color: AppColors.intelligence)
            StatBar(label: nil, value: 45, color: AppColors.primary, showPercentage: false)
        }
        .padding()
        .background(Color.black)
    }
}
#endif