import SwiftUI

struct RemixSelectionView: View {
    @Binding var isPresented: Bool
    let songTitle: String = "Nocturnal Appiration"
    let onCoverSelected: () -> Void
    let onExtendSelected: () -> Void
    
    init(isPresented: Binding<Bool>, onCoverSelected: @escaping () -> Void = {}, onExtendSelected: @escaping () -> Void = {}) {
        self._isPresented = isPresented
        self.onCoverSelected = onCoverSelected
        self.onExtendSelected = onExtendSelected
    }
    
    var body: some View {
        VStack(spacing: 0) {
            // Grabber
            Grabber()
            
            // Content
            VStack(spacing: 16) {
                // Header with artwork and title
                VStack(spacing: 16) {
                    // Artwork
                    Image("Artwork/2") // Using the video track artwork
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 80, height: 100)
                        .clipShape(RoundedRectangle(cornerRadius: 16))
                    
                    // Title and remixes button
                    VStack(spacing: 8) {
                        Text("Remix \"\(songTitle)\"")
                            .font(Constants.Typography.largeTitle)
                            .foregroundColor(Constants.Colors.Foreground.primary)
                            .tracking(0.36)
                        
                        Button(action: {
                            // Handle see remixes
                        }) {
                            HStack(spacing: 4) {
                                Text("See 43 remixes")
                                    .font(Constants.Typography.xSmallTitle)
                                    .foregroundColor(Constants.Colors.Foreground.primary)
                                    .tracking(0.24)
                                
                                Image("Icon/chevron-right")
                                    .resizable()
                                    .frame(width: 16, height: 16)
                                    .foregroundColor(Constants.Colors.Foreground.tertiary)
                            }
                            .padding(.horizontal, 16)
                            .frame(height: 32)
                            .background(Constants.Colors.Background.Fog.thin)
                            .clipShape(RoundedRectangle(cornerRadius: 100))
                        }
                        .buttonStyle(PlainButtonStyle())
                    }
                }
                
                // Options List
                VStack(spacing: 0) {
                    RemixOption(
                        iconName: "Icon/cover-create",
                        title: "Cover",
                        description: "Give the song a new genre or vibe",
                        action: {
                            // Close the remix selection sheet first
                            isPresented = false
                            // Notify parent to present remix create view
                            onCoverSelected()
                        }
                    )
                    
                    RemixOption(
                        iconName: "Icon/extend-right",
                        title: "Extend",
                        description: "Add a new part to the end or middle",
                        action: {
                            // Close the remix selection sheet first
                            isPresented = false
                            // Notify parent to present extend create view
                            onExtendSelected()
                        },
                        isLast: true
                    )
                    
                }
                .background(Constants.Colors.Background.Fog.thin)
                .clipShape(RoundedRectangle(cornerRadius: 16))
            }
            .padding(.horizontal, 16)
            
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct RemixOption: View {
    let iconName: String
    let title: String
    let description: String
    let action: () -> Void
    let isLast: Bool
    
    init(iconName: String, title: String, description: String, action: @escaping () -> Void, isLast: Bool = false) {
        self.iconName = iconName
        self.title = title
        self.description = description
        self.action = action
        self.isLast = isLast
    }
    
    var body: some View {
        Button(action: action) {
            HStack(spacing: 10) {
                // Icon
                Image(iconName)
                    .resizable()
                    .frame(width: 24, height: 24)
                    .foregroundColor(Constants.Colors.Foreground.primary)
                
                // Title and Description
                VStack(alignment: .leading, spacing: 0) {
                    Text(title)
                        .font(Constants.Typography.mediumTitle)
                        .foregroundColor(Constants.Colors.Foreground.primary)
                        .tracking(0.32)
                        .frame(maxWidth: .infinity, alignment: .leading)
                    
                    Text(description)
                        .font(Constants.Typography.xSmallRegular)
                        .foregroundColor(Constants.Colors.Foreground.tertiary)
                        .tracking(0.24)
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                
                // Chevron
                Image("Icon/chevron-right")
                    .resizable()
                    .frame(width: 16, height: 16)
                    .foregroundColor(Constants.Colors.Foreground.tertiary)
            }
            .padding(16)
        }
        .buttonStyle(PlainButtonStyle())
        
        // Divider (except for last item)
        if !isLast {
            Rectangle()
                .fill(Constants.Colors.Background.Fog.thick)
                .frame(height: 1)
                .padding(.leading, 50) // Align with text content
        }
    }
}

#Preview {
    RemixSelectionView(isPresented: .constant(true))
}