//
//  SkeletonView.swift
//  lichunWebsocket
//
//  Skeleton/shimmer loading components for async content
//

import SwiftUI

// MARK: - Skeleton Base View
struct SkeletonView: View {
    @State private var isAnimating = false

    let cornerRadius: CGFloat

    init(cornerRadius: CGFloat = AppSpacing.cornerRadius) {
        self.cornerRadius = cornerRadius
    }

    var body: some View {
        Rectangle()
            .fill(
                LinearGradient(
                    colors: [
                        AppColors.surfaceElevated,
                        AppColors.cardBackground.opacity(0.5)
                    ],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .overlay(
                Rectangle()
                    .fill(
                        LinearGradient(
                            colors: [
                                Color.clear,
                                Color(hex: 0xFFE8DC).opacity(0.4),  // Warm peachy shimmer
                                Color(hex: 0xFFF5F0).opacity(0.5),  // Soft cream shimmer
                                Color(hex: 0xFFE8DC).opacity(0.4),
                                Color.clear
                            ],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .offset(x: isAnimating ? 400 : -400)
                    .animation(
                        .linear(duration: 2.0)
                        .repeatForever(autoreverses: false),
                        value: isAnimating
                    )
            )
            .cornerRadius(cornerRadius)
            .shadow(color: .black.opacity(0.03), radius: 2, x: 0, y: 1)
            .onAppear {
                isAnimating = true
            }
    }
}

// MARK: - Specific Skeleton Components
struct SkeletonCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            // Header
            SkeletonView()
                .frame(height: 20)
                .frame(width: 150)

            // Content lines
            SkeletonView()
                .frame(height: 16)

            SkeletonView()
                .frame(height: 16)
                .frame(width: 200)

            // Footer
            HStack {
                SkeletonView()
                    .frame(width: 60, height: 12)

                Spacer()

                SkeletonView()
                    .frame(width: 80, height: 12)
            }
        }
        .padding(AppSpacing.md)
        .background(
            ZStack {
                RoundedRectangle(cornerRadius: 16)
                    .fill(AppColors.cardBackground)

                // Warm gradient overlay
                RoundedRectangle(cornerRadius: 16)
                    .fill(
                        LinearGradient(
                            colors: [
                                Color.white.opacity(0.5),
                                Color(hex: 0xFFF8F3).opacity(0.3)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
            }
        )
        .overlay(
            RoundedRectangle(cornerRadius: 16)
                .stroke(AppColors.secondaryText.opacity(0.3), lineWidth: 1)
        )
        .shadow(color: .black.opacity(0.05), radius: 8, x: 0, y: 4)
    }
}

struct SkeletonAvatar: View {
    let size: CGFloat

    init(size: CGFloat = AppSpacing.avatarSizeMedium) {
        self.size = size
    }

    var body: some View {
        SkeletonView(cornerRadius: size / 2)
            .frame(width: size, height: size)
    }
}

struct SkeletonListItem: View {
    var body: some View {
        HStack(spacing: AppSpacing.md) {
            SkeletonAvatar(size: AppSpacing.avatarSizeSmall)

            VStack(alignment: .leading, spacing: AppSpacing.xs) {
                SkeletonView()
                    .frame(height: 16)
                    .frame(width: 120)

                SkeletonView()
                    .frame(height: 12)
                    .frame(width: 80)
            }

            Spacer()
        }
        .padding(.horizontal, AppSpacing.md)
        .padding(.vertical, AppSpacing.sm)
    }
}

// MARK: - Loading State Wrapper
struct LoadingStateView<Content: View>: View {
    let isLoading: Bool
    let content: Content
    let skeletonCount: Int

    init(
        isLoading: Bool,
        skeletonCount: Int = 3,
        @ViewBuilder content: () -> Content
    ) {
        self.isLoading = isLoading
        self.skeletonCount = skeletonCount
        self.content = content()
    }

    var body: some View {
        if isLoading {
            VStack(spacing: AppSpacing.md) {
                ForEach(0..<skeletonCount, id: \.self) { _ in
                    SkeletonListItem()
                }
            }
        } else {
            content
        }
    }
}

// MARK: - Preview
#if DEBUG
struct SkeletonView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            AppColors.background
                .ignoresSafeArea()

            VStack(spacing: AppSpacing.xl) {
                Text("Skeleton Components")
                    .font(.appLargeTitle)
                    .foregroundColor(AppColors.primaryText)

                // Base skeleton
                SkeletonView()
                    .frame(height: 50)
                    .padding(.horizontal, AppSpacing.md)

                // Skeleton avatar
                SkeletonAvatar()

                // Skeleton list item
                SkeletonListItem()

                // Skeleton card
                SkeletonCard()
                    .padding(.horizontal, AppSpacing.md)

                // Loading state wrapper
                LoadingStateView(isLoading: true, skeletonCount: 2) {
                    Text("Content loaded")
                        .font(.appBody)
                        .foregroundColor(AppColors.primaryText)
                }
            }
            .padding()
        }
    }
}
#endif