//
//  LoadingPlaceholder.swift
//  SportsTime
//
//  Skeleton placeholder shapes with gentle opacity pulse animation.
//

import SwiftUI

enum LoadingPlaceholder {
    static let animationDuration: Double = 1.2
    static let minOpacity: Double = 0.3
    static let maxOpacity: Double = 0.5

    static func rectangle(width: CGFloat, height: CGFloat) -> PlaceholderRectangle {
        PlaceholderRectangle(width: width, height: height)
    }

    static func circle(diameter: CGFloat) -> PlaceholderCircle {
        PlaceholderCircle(diameter: diameter)
    }

    static func capsule(width: CGFloat, height: CGFloat) -> PlaceholderCapsule {
        PlaceholderCapsule(width: width, height: height)
    }

    static var card: PlaceholderCard {
        PlaceholderCard()
    }

    static var listRow: PlaceholderListRow {
        PlaceholderListRow()
    }
}

// MARK: - Placeholder Rectangle

struct PlaceholderRectangle: View {
    let width: CGFloat
    let height: CGFloat

    @State private var isAnimating = false
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        RoundedRectangle(cornerRadius: 4)
            .fill(placeholderColor)
            .frame(width: width, height: height)
            .opacity(isAnimating ? LoadingPlaceholder.maxOpacity : LoadingPlaceholder.minOpacity)
            .accessibilityHidden(true)
            .onAppear {
                guard !Theme.Animation.prefersReducedMotion else { return }
                withAnimation(.easeInOut(duration: LoadingPlaceholder.animationDuration).repeatForever(autoreverses: true)) {
                    isAnimating = true
                }
            }
    }

    private var placeholderColor: Color {
        colorScheme == .dark ? Theme.cardBackgroundElevated(colorScheme) : Theme.textMuted(colorScheme)
    }
}

// MARK: - Placeholder Circle

struct PlaceholderCircle: View {
    let diameter: CGFloat

    @State private var isAnimating = false
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        Circle()
            .fill(placeholderColor)
            .frame(width: diameter, height: diameter)
            .opacity(isAnimating ? LoadingPlaceholder.maxOpacity : LoadingPlaceholder.minOpacity)
            .accessibilityHidden(true)
            .onAppear {
                guard !Theme.Animation.prefersReducedMotion else { return }
                withAnimation(.easeInOut(duration: LoadingPlaceholder.animationDuration).repeatForever(autoreverses: true)) {
                    isAnimating = true
                }
            }
    }

    private var placeholderColor: Color {
        colorScheme == .dark ? Theme.cardBackgroundElevated(colorScheme) : Theme.textMuted(colorScheme)
    }
}

// MARK: - Placeholder Capsule

struct PlaceholderCapsule: View {
    let width: CGFloat
    let height: CGFloat

    @State private var isAnimating = false
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        Capsule()
            .fill(placeholderColor)
            .frame(width: width, height: height)
            .opacity(isAnimating ? LoadingPlaceholder.maxOpacity : LoadingPlaceholder.minOpacity)
            .accessibilityHidden(true)
            .onAppear {
                guard !Theme.Animation.prefersReducedMotion else { return }
                withAnimation(.easeInOut(duration: LoadingPlaceholder.animationDuration).repeatForever(autoreverses: true)) {
                    isAnimating = true
                }
            }
    }

    private var placeholderColor: Color {
        colorScheme == .dark ? Theme.cardBackgroundElevated(colorScheme) : Theme.textMuted(colorScheme)
    }
}

// MARK: - Placeholder Card (Trip Card Skeleton)

struct PlaceholderCard: View {
    @State private var isAnimating = false
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.sm) {
            // Header row
            HStack {
                placeholderRect(width: 60, height: 20)
                Spacer()
                placeholderRect(width: 40, height: 16)
            }

            // Title and subtitle
            VStack(alignment: .leading, spacing: 4) {
                placeholderRect(width: 120, height: 16)
                placeholderRect(width: 160, height: 14)
            }

            // Stats row
            HStack(spacing: Theme.Spacing.sm) {
                placeholderRect(width: 70, height: 14)
                placeholderRect(width: 60, height: 14)
            }
        }
        .padding(Theme.Spacing.md)
        .frame(width: 200)
        .background(Theme.cardBackground(colorScheme))
        .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
        .overlay {
            RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
                .stroke(Theme.surfaceGlow(colorScheme), lineWidth: 1)
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Loading content")
        .onAppear {
            guard !Theme.Animation.prefersReducedMotion else { return }
            withAnimation(.easeInOut(duration: LoadingPlaceholder.animationDuration).repeatForever(autoreverses: true)) {
                isAnimating = true
            }
        }
    }

    private func placeholderRect(width: CGFloat, height: CGFloat) -> some View {
        RoundedRectangle(cornerRadius: 4)
            .fill(placeholderColor)
            .frame(width: width, height: height)
            .opacity(isAnimating ? LoadingPlaceholder.maxOpacity : LoadingPlaceholder.minOpacity)
    }

    private var placeholderColor: Color {
        colorScheme == .dark ? Theme.cardBackgroundElevated(colorScheme) : Theme.textMuted(colorScheme)
    }
}

// MARK: - Placeholder List Row

struct PlaceholderListRow: View {
    @State private var isAnimating = false
    @Environment(\.colorScheme) private var colorScheme

    var body: some View {
        HStack(spacing: Theme.Spacing.md) {
            placeholderCircle(diameter: 40)

            VStack(alignment: .leading, spacing: 6) {
                placeholderRect(width: 140, height: 16)
                placeholderRect(width: 100, height: 12)
            }

            Spacer()

            placeholderRect(width: 50, height: 14)
        }
        .padding(Theme.Spacing.md)
        .onAppear {
            guard !Theme.Animation.prefersReducedMotion else { return }
            withAnimation(.easeInOut(duration: LoadingPlaceholder.animationDuration).repeatForever(autoreverses: true)) {
                isAnimating = true
            }
        }
    }

    private func placeholderRect(width: CGFloat, height: CGFloat) -> some View {
        RoundedRectangle(cornerRadius: 4)
            .fill(placeholderColor)
            .frame(width: width, height: height)
            .opacity(isAnimating ? LoadingPlaceholder.maxOpacity : LoadingPlaceholder.minOpacity)
    }

    private func placeholderCircle(diameter: CGFloat) -> some View {
        Circle()
            .fill(placeholderColor)
            .frame(width: diameter, height: diameter)
            .opacity(isAnimating ? LoadingPlaceholder.maxOpacity : LoadingPlaceholder.minOpacity)
    }

    private var placeholderColor: Color {
        colorScheme == .dark ? Theme.cardBackgroundElevated(colorScheme) : Theme.textMuted(colorScheme)
    }
}

// MARK: - Preview

#Preview("Loading Placeholders") {
    VStack(spacing: 30) {
        HStack(spacing: 20) {
            LoadingPlaceholder.rectangle(width: 100, height: 20)
            LoadingPlaceholder.circle(diameter: 40)
            LoadingPlaceholder.capsule(width: 80, height: 24)
        }

        LoadingPlaceholder.card

        LoadingPlaceholder.listRow
            .background(Theme.cardBackground(.dark))
    }
    .padding(20)
    .themedBackground()
}
