import SwiftUI

struct ChatHeader: View {
    let onBackTap: () -> Void
    let onLibraryTap: () -> Void
    let onEditTap: (() -> Void)?
    let title: String?
    let badgeCount: Int?
    
    init(
        onBackTap: @escaping () -> Void,
        onLibraryTap: @escaping () -> Void,
        onEditTap: (() -> Void)? = nil,
        title: String? = nil,
        badgeCount: Int? = nil
    ) {
        self.onBackTap = onBackTap
        self.onLibraryTap = onLibraryTap
        self.onEditTap = onEditTap
        self.title = title
        self.badgeCount = badgeCount
    }
    
    var body: some View {
        HStack(spacing: 12) {
            // Left section - Back button
            backButton
            
            // Center-left section - Title and credits
            titleSection
            
            Spacer()
            
            // Right section - Compose and Library buttons
            HStack(spacing: 8) {
                // Show compose button only when there's a title (filled state)
                if title != nil && onEditTap != nil {
                    composeButton
                }
                libraryButton
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .frame(height: 64)
        .background(
            Constants.Colors.Background.primary
        )
    }
    
    private var backButton: some View {
        Button {
            onBackTap()
        } label: {
            Image("Icon/chevron-left")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 24, height: 24)
                .foregroundColor(Constants.Colors.Foreground.primary)
        }
        .buttonStyle(PlainButtonStyle())
    }
    
    private var titleSection: some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(title ?? "Chat")
                .font(.custom("PP Neue Montreal", size: 18))
                .fontWeight(.medium)
                .foregroundColor(Constants.Colors.Foreground.primary)
                .tracking(0.36)
                .lineLimit(1)
            
            // Credits display underneath title
            CreditsDisplay()
        }
    }
    
    private var composeButton: some View {
        MediumButton(
            title: "",
            leftIconAssetName: "Icon/compose",
            variant: .primary,
            isIconOnly: true,
            action: onEditTap ?? {}
        )
    }
    
    private var libraryButton: some View {
        MediumButton(
            title: "",
            leftIconAssetName: "Icon/library",
            variant: .primary,
            isIconOnly: true,
            action: onLibraryTap
        )
    }
    
}

#Preview {
    VStack(spacing: 20) {
        // Empty State (Chat)
        ChatHeader(
            onBackTap: { print("Back tapped") },
            onLibraryTap: { print("Library tapped") }
        )
        
        // Filled State (with title)
        ChatHeader(
            onBackTap: { print("Back tapped") },
            onLibraryTap: { print("Library tapped") },
            onEditTap: { print("Edit tapped") },
            title: "Song about my best friend",
            badgeCount: 2
        )
        
        Spacer()
    }
    .background(Constants.Colors.Background.primary)
}