import APIClient
import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

public struct ExpandedPlayerGenerationCompletePill: View {
    let clips: [Clip]
    let playTapped: () -> Void

    @State private var shouldAnimateIn: Bool = false

    public init(
        clips: [Clip],
        playTapped: @escaping () -> Void
    ) {
        self.clips = clips
        self.playTapped = playTapped
    }

    public var body: some View {
        HStack(spacing: 12) {
            ZStack {
                ForEach(Array(clips.enumerated()), id: \.offset) { index, clip in
                    let isLeft = index % 2 == 0
                    let offset: CGFloat = shouldAnimateIn ? (isLeft ? -5 : 5) : 0
                    let rotation: CGFloat = shouldAnimateIn ? (isLeft ? -10 : 10) : 0
                    RemoteImage(url: clip.largeImageUrl, fallbackId: clip.id.remoteId)
                        .frame(width: 24, height: 32)
                        .background(Color.SemanticV2.backgroundSmokeDense)
                        .clipShape(RoundedRectangle(cornerRadius: 6))
                        .rotationEffect(.degrees(rotation))
                        .offset(x: offset)
                        .animation(.easeInOut(duration: 0.3).delay(0.3), value: shouldAnimateIn)
                        .shadow(color: Color.SemanticV2.backgroundSmokeDense, radius: 1, x: 0, y: 0)
                }
            }
            .opacity(shouldAnimateIn ? 1.0 : 0.0)
            .padding(.leading, 8)
            .padding(.trailing, 4)
            Text(L10n.FeatureOmniPlayer.newSongsReady)
                .typographyV1(.body1.size { _ in 14.0 }.lineHeight(24.0))
                .foregroundStyle(Color.SemanticV2.omniplayerWhite)
                .multilineTextAlignment(.center)

            Image.Icon.chevronLeft
                .resizable()
                .rotationEffect(.degrees(180))
                .foregroundStyle(Color.SemanticV2.omniplayerWhite)
                .frame(width: 16, height: 16)
                .padding(2.5)
                .background {
                    Circle()
                        .fill(Color.SemanticV2.backgroundTertiaryGlass)
                }
        }
        .padding(.horizontal, 12)
        .frame(height: 44)
        .fixedSize(horizontal: false, vertical: true)
        .background {
            Capsule()
                .fill(.thinMaterial)
                .strokeBorder(Color.SemanticV2.backgroundFogThick, lineWidth: 0.5, antialiased: false)
        }
        .shadow(color: Color.SemanticV2.backgroundSmokeDense, radius: 2, x: 0, y: 0)
        .onAppear {
            shouldAnimateIn = true
        }
        .onDisappear {
            shouldAnimateIn = false
        }
        .onTapGesture {
            playTapped()
        }
    }
}