import SwiftUI

struct ChatHeaderPlayer: View {
    let songTitle: String
    let currentTime: String
    let totalTime: String
    let progress: Double // 0.0 to 1.0
    let artworkGradient: LinearGradient
    let isPlaying: Bool
    let onPlayPause: () -> Void
    let onExpand: () -> Void
    let onClose: () -> Void
    
    var body: some View {
        VStack(spacing: 0) {
            // Main content
            HStack(spacing: 12) {
                // Album artwork with play/pause button
                ZStack {
                    ArtworkShader(gradient: artworkGradient, isAlive: true)
                        .frame(width: 40, height: 40)
                        .cornerRadius(12)
                    
                    Button(action: onPlayPause) {
                        if isPlaying {
                            Image("Icon/pause")
                                .resizable()
                                .frame(width: 16, height: 16)
                                .foregroundColor(Constants.Colors.Foreground.primary)
                        } else {
                            Image("Icon/play")
                                .resizable()
                                .frame(width: 16, height: 16)
                                .foregroundColor(Constants.Colors.Foreground.primary)
                        }
                    }
                    .buttonStyle(PlainButtonStyle())
                }
                
                // Song info
                VStack(alignment: .leading, spacing: 0) {
                    Text(songTitle)
                        .font(Constants.Typography.small)
                        .kerning(0.28)
                        .foregroundColor(Constants.Colors.Foreground.primary)
                        .lineLimit(1)
                    
                    Text("\(currentTime) / \(totalTime)")
                        .font(Constants.Typography.timecode)
                        .kerning(0.2)
                        .foregroundColor(Constants.Colors.Foreground.primary.opacity(0.3))
                        .shadow(color: .black.opacity(0.35), radius: 2, x: 0, y: 0)
                }
                
                Spacer()
                
                // Action buttons
                HStack(spacing: 16) {
                    // Expand button
                    Button(action: onExpand) {
                        Image("Icon/expand-content")
                            .resizable()
                            .renderingMode(.template)
                            .frame(width: 24, height: 24)
                            .foregroundColor(Constants.Colors.Foreground.primary.opacity(0.3))
                    }
                    .buttonStyle(PlainButtonStyle())
                    
                    // Close button
                    Button(action: onClose) {
                        Image("Icon/close")
                            .resizable()
                            .renderingMode(.template)
                            .frame(width: 24, height: 24)
                            .foregroundColor(Constants.Colors.Foreground.primary.opacity(0.3))
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 12)
            
            // Progress bar
            ZStack(alignment: .leading) {
                Rectangle()
                    .fill(Constants.Colors.Foreground.primary.opacity(0.3))
                    .frame(height: 2)
                
                Rectangle()
                    .fill(Constants.Colors.Accent.brand)
                    .frame(width: max(0, progress * UIScreen.main.bounds.width), height: 2)
            }
        }
        .background(.ultraThinMaterial)
        .overlay(
            Rectangle()
                .stroke(Constants.Colors.Border.primary, lineWidth: 1)
                .mask(
                    VStack {
                        Spacer()
                        Rectangle().frame(height: 1)
                    }
                )
        )
    }
}

#Preview {
    let sampleGradient = LinearGradient(
        colors: [
            Color(red: 0.8, green: 0.4, blue: 0.9),
            Color(red: 0.4, green: 0.6, blue: 1.0)
        ],
        startPoint: .topLeading,
        endPoint: .bottomTrailing
    )
    
    VStack(spacing: 20) {
        ChatHeaderPlayer(
            songTitle: "Summertime (#1)",
            currentTime: "0:20",
            totalTime: "2:00",
            progress: 0.167, // 20 seconds out of 120
            artworkGradient: sampleGradient,
            isPlaying: true,
            onPlayPause: { print("Play/Pause tapped") },
            onExpand: { print("Expand tapped") },
            onClose: { print("Close tapped") }
        )
        
        ChatHeaderPlayer(
            songTitle: "Best Friend Forever",
            currentTime: "1:45",
            totalTime: "3:20",
            progress: 0.525,
            artworkGradient: sampleGradient,
            isPlaying: false,
            onPlayPause: { print("Play/Pause tapped") },
            onExpand: { print("Expand tapped") },
            onClose: { print("Close tapped") }
        )
    }
    .padding()
    .background(Constants.Colors.Background.primary)
}