import SwiftUI

// MARK: - ChatDetailSkeletonView

/// Android parity: `MessageSkeletonList` composable in ChatDetailComponents.kt.
/// Shows shimmer placeholder message bubbles while chat messages are loading from DB.
/// Uses TimelineView (.animation) for clock-based shimmer that never restarts on view rebuild.
struct ChatDetailSkeletonView: View {

    /// Max bubble width (same as real messages).
    var maxBubbleWidth: CGFloat = 270

    /// Predefined bubble specs matching Android's `heightRandom` / `widthRandom` arrays.
    /// (outgoing, widthFraction, height)
    private static let bubbleSpecs: [(outgoing: Bool, widthFrac: CGFloat, height: CGFloat)] = [
        (false, 0.55, 44),
        (true,  0.70, 80),
        (false, 0.45, 36),
        (true,  0.60, 52),
        (false, 0.75, 68),
        (true,  0.50, 44),
        (false, 0.65, 60),
        (true,  0.82, 96),
        (false, 0.40, 36),
        (true,  0.55, 48),
    ]

    var body: some View {
        TimelineView(.animation) { timeline in
            let phase = shimmerPhase(from: timeline.date)
            ScrollView {
                VStack(spacing: 6) {
                    ForEach(0..<Self.bubbleSpecs.count, id: \.self) { index in
                        let spec = Self.bubbleSpecs[index]
                        skeletonBubble(
                            outgoing: spec.outgoing,
                            width: maxBubbleWidth * spec.widthFrac,
                            height: spec.height,
                            phase: phase
                        )
                    }
                }
                .padding(.horizontal, 8)
                .padding(.top, 8)
                .padding(.bottom, 80)
            }
            .scrollIndicators(.hidden)
            .allowsHitTesting(false)
        }
    }

    // MARK: - Skeleton Bubble

    @ViewBuilder
    private func skeletonBubble(
        outgoing: Bool,
        width: CGFloat,
        height: CGFloat,
        phase: CGFloat
    ) -> some View {
        HStack(spacing: 6) {
            if outgoing { Spacer(minLength: 0) }

            if !outgoing {
                // Avatar circle placeholder (incoming messages)
                Circle()
                    .fill(shimmerGradient(phase: phase))
                    .frame(width: 32, height: 32)
            }

            RoundedRectangle(cornerRadius: 18, style: .continuous)
                .fill(shimmerGradient(phase: phase))
                .frame(width: width, height: height)

            if !outgoing { Spacer(minLength: 0) }
        }
    }

    // MARK: - Shimmer Helpers (same pattern as SearchSkeletonView)

    /// Clock-based phase — never resets on view rebuild.
    private func shimmerPhase(from date: Date) -> CGFloat {
        let elapsed = date.timeIntervalSinceReferenceDate
        let cycle: Double = 1.5
        return CGFloat(elapsed.truncatingRemainder(dividingBy: cycle) / cycle)
    }

    private func shimmerGradient(phase: CGFloat) -> LinearGradient {
        let position = phase * 2.0 - 0.5
        return LinearGradient(
            colors: [
                Color.gray.opacity(0.06),
                Color.gray.opacity(0.14),
                Color.gray.opacity(0.06),
            ],
            startPoint: UnitPoint(x: position - 0.3, y: 0),
            endPoint: UnitPoint(x: position + 0.3, y: 0)
        )
    }
}
