import SwiftUI
import ComponentLibrary

/// A compact view showing the currently referenced song with artwork and play/pause controls
struct ReferencedSong: View {
    let songTitle: String
    let artworkGradient: LinearGradient
    let isPlaying: Bool
    let onPlayPause: () -> Void
    let onClose: () -> Void

    var body: some View {
        VStack {
            HStack(spacing: 8) {
                // Mini artwork with play/pause
                Button(action: onPlayPause) {
                    ZStack {
                        ArtworkShader(gradient: artworkGradient, isAlive: isPlaying)
                            .frame(width: 28, height: 28)
                            .cornerRadius(8)

                        // Play/Pause icon overlay
                        if isPlaying {
                            Image.FigmaMCP.pause
                                .figmaMCPIconStyle(
                                    size: Image.FigmaMCPSize.small,
                                    semanticColor: .white
                                )
                        } else {
                            Image.FigmaMCP.play
                                .figmaMCPIconStyle(
                                    size: Image.FigmaMCPSize.small,
                                    semanticColor: .white
                                )
                        }
                    }
                }
                .buttonStyle(PlainButtonStyle())

                // Song title
                Text(songTitle.uppercased())
                    .figmaMCPTypography(TypographyV1.FigmaMCP.timecode)
                    .tracking(0.2)
                    .foregroundColor(ChatConstants.Colors.Foreground.primary)
                    .lineLimit(1)

                Spacer()

                // Close button
                Button(action: onClose) {
                    Image.FigmaMCP.close
                        .figmaMCPIconStyle(
                            size: Image.FigmaMCPSize.small,
                            semanticColor: ChatConstants.Colors.Foreground.tertiary
                        )
                }
                .buttonStyle(PlainButtonStyle())
            }
            .padding(.leading, 8)
            .padding(.trailing, 12)
            .padding(.vertical, 8)
            .background(ChatConstants.Colors.Background.Fog.thin)
            .cornerRadius(12)
        }
        .padding(.horizontal, 16)
    }
}

#Preview {
    VStack {
        ReferencedSong(
            songTitle: "Song Title (#1)",
            artworkGradient: LinearGradient(
                colors: [Color.blue, Color.purple],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            ),
            isPlaying: true,
            onPlayPause: { print("Play/Pause tapped") },
            onClose: { print("Close tapped") }
        )

        Spacer()
    }
    .background(ChatConstants.Colors.Background.primary)
}