import SwiftUI

struct EditorHeader: View {
    let title: String
    let songTitle: String
    let artworkGradient: LinearGradient?
    let isPlaying: Bool
    let progress: Double
    let onBackTap: () -> Void
    let onPlayPause: () -> Void
    let onProgressChange: (Double) -> Void
    
    init(title: String = "Edit Lyrics", songTitle: String = "Song Title (#1)", artworkGradient: LinearGradient? = nil, isPlaying: Bool = false, progress: Double = 0.0, onBackTap: @escaping () -> Void, onPlayPause: @escaping () -> Void = {}, onProgressChange: @escaping (Double) -> Void = { _ in }) {
        self.title = title
        self.songTitle = songTitle
        self.artworkGradient = artworkGradient
        self.isPlaying = isPlaying
        self.progress = progress
        self.onBackTap = onBackTap
        self.onPlayPause = onPlayPause
        self.onProgressChange = onProgressChange
    }
    
    var body: some View {
        VStack(spacing: 0) {
            // Main header content
            HStack(alignment: .center, spacing: 0) {
                // Left side - Back button and title
                HStack(alignment: .center, spacing: 12) {
                    backButton
                    titleText
                }
                
                Spacer()
                
                // Right side - Mini artwork/player
                if let gradient = artworkGradient {
                    miniArtworkPlayer(gradient: gradient)
                }
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 12)
            
            // Progress bar at bottom
            progressBar
        }
    }
    
    private var backButton: some View {
        Button(action: onBackTap) {
            Image("Icon/chevron-left")
                .resizable()
                .renderingMode(.template)
                .foregroundColor(Constants.Colors.Foreground.primary)
                .frame(width: 24, height: 24)
        }
        .buttonStyle(PlainButtonStyle())
        .frame(width: 40, height: 40)
        .contentShape(Rectangle())
    }
    
    private var titleText: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text(title)
                .font(Constants.Typography.mediumTitle)
                .foregroundColor(Constants.Colors.Foreground.primary)
                .tracking(0.32)
            
            Text(songTitle)
                .font(Constants.Typography.xSmallRegular)
                .foregroundColor(Constants.Colors.Foreground.secondary)
                .tracking(0.24)
        }
    }
    
    private func miniArtworkPlayer(gradient: LinearGradient) -> some View {
        Button(action: onPlayPause) {
            ZStack {
                ArtworkShader(gradient: gradient, isAlive: true)
                    .frame(width: 40, height: 40)
                    .cornerRadius(12)
                
                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())
    }
    
    private var progressBar: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                // Background track
                Rectangle()
                    .fill(Color.white.opacity(0.3))
                    .frame(height: 2)
                
                // Progress fill
                Rectangle()
                    .fill(Constants.Colors.Accent.brand)
                    .frame(width: geometry.size.width * CGFloat(progress), height: 2)
            }
            .contentShape(Rectangle())
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        let newProgress = Double(value.location.x / geometry.size.width)
                        let clampedProgress = max(0, min(1, newProgress))
                        onProgressChange(clampedProgress)
                    }
            )
        }
        .frame(height: 2)
    }
}

#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) {
        EditorHeader(
            title: "Edit Lyrics",
            songTitle: "Summertime (#1)",
            artworkGradient: sampleGradient,
            isPlaying: true,
            progress: 0.3,
            onBackTap: {
                print("Back button tapped")
            },
            onPlayPause: {
                print("Play/Pause tapped")
            },
            onProgressChange: { newProgress in
                print("Progress changed to: \(newProgress)")
            }
        )
        .background(Constants.Colors.Background.secondary)
        
        EditorHeader(
            title: "Edit Lyrics",
            songTitle: "Best Friend Forever (#2)",
            artworkGradient: sampleGradient,
            isPlaying: false,
            progress: 0.7,
            onBackTap: {
                print("Back button tapped")
            },
            onPlayPause: {
                print("Play/Pause tapped")
            },
            onProgressChange: { newProgress in
                print("Progress changed to: \(newProgress)")
            }
        )
        .background(Constants.Colors.Background.secondary)
        
        Spacer()
    }
    .background(Constants.Colors.Background.primary)
}