import SwiftUI

struct IncomingMessageLoading: View {
    @State private var rotationAngle: Double = 0
    @State private var shimmerOffset: Double = -1.0
    
    var body: some View {
        HStack(spacing: 5) {
            // Programmatic loading spinner
            Circle()
                .stroke(
                    AngularGradient(
                        colors: [
                            Constants.Colors.Accent.brand,
                            Constants.Colors.Accent.brand.opacity(0.8),
                            Constants.Colors.Accent.brand.opacity(0.6),
                            Constants.Colors.Accent.brand.opacity(0.4),
                            Constants.Colors.Accent.brand.opacity(0.2),
                            Constants.Colors.Accent.brand.opacity(0)
                        ],
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(130)
                    ),
                    lineWidth: 3
                )
                .frame(width: 24, height: 24)
                .rotationEffect(Angle(degrees: rotationAngle))
                .frame(width: 40, height: 40) // Outer frame to match original loader size
                .onAppear {
                    withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
                        rotationAngle = 360
                    }
                }
            
            // Simple "Crafting..." text with shimmer
            ZStack {
                // Base text at 30% opacity
                Text("Crafting...")
                    .font(Constants.Typography.smallTitle)
                    .tracking(0.28)
                    .foregroundColor(Constants.Colors.Accent.brand)
                
                // Shimmer highlight at 100% opacity
                Text("Crafting...")
                    .font(Constants.Typography.smallTitle)
                    .tracking(0.28)
                    .foregroundColor(.white)
                    .mask(
                        Rectangle()
                            .fill(
                                LinearGradient(
                                    colors: [
                                        Color.clear,
                                        Color.white,
                                        Color.clear
                                    ],
                                    startPoint: UnitPoint(x: shimmerOffset - 0.5, y: 0.5),
                                    endPoint: UnitPoint(x: shimmerOffset + 0.5, y: 0.5)
                                )
                            )
                    )
            }
            .onAppear {
                withAnimation(.linear(duration: 1.8).repeatForever(autoreverses: false)) {
                    shimmerOffset = 1.2
                }
            }
            
            Spacer()
        }
    }
}

#Preview {
    VStack(alignment: .leading, spacing: 20) {
        IncomingMessageLoading()
        
        Spacer()
    }
    .padding(.horizontal, 16)
    .background(Constants.Colors.Background.primary)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}