import APIClient
import ComposableArchitecture
import Localization
import SwiftUI

public struct ExcludeStylesField<FocusValue: Hashable>: View {
    @Binding var excludeStyles: String
    let characterLimit: Int
    let placeholder: String
    var focusedField: FocusState<FocusValue?>.Binding?
    var focusValue: FocusValue?
    
    public init(
        excludeStyles: Binding<String>,
        characterLimit: Int,
        placeholder: String = L10n.FeatureCreateClip.excludeStylesPlaceholder,
        focusedField: FocusState<FocusValue?>.Binding? = nil,
        focusValue: FocusValue? = nil
    ) {
        self._excludeStyles = excludeStyles
        self.characterLimit = characterLimit
        self.placeholder = placeholder
        self.focusedField = focusedField
        self.focusValue = focusValue
    }
    
    public var body: some View {
        HStack(spacing: 8) {
            Image.FigmaMCP.musicNoteSlash
                .figmaMCPIconStyle(
                    size: 16,
                    semanticColor: excludeStyles.isEmpty
                        ? Color.FigmaMCP.Semantic.fogDense
                        : Color.FigmaMCP.Semantic.foregroundPrimary
                )
                .frame(width: 16, height: 16)
            
            CharacterLimitedTextField(
                placeholder: placeholder,
                text: $excludeStyles,
                axis: .vertical,
                characterLimit: characterLimit
            )
            .figmaMCPTypography(TypographyV1.FigmaMCP.xSmallTitle)
            .foregroundColor(Color.FigmaMCP.Semantic.foregroundPrimary)
            .tracking(0.24)
            .modify { view in
                if let focusedField = focusedField, let focusValue = focusValue {
                    view.focused(focusedField, equals: focusValue)
                } else {
                    view
                }
            }
            .lineLimit(1...5)
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .frame(height: 48)
        .background(Color.FigmaMCP.Semantic.backgroundPrimary)
        .cornerRadius(12)
    }
}