import SwiftUI

struct FillerWordChip: View {
    let word: String
    let onDelete: () -> Void
    @State private var isHovered = false

    var body: some View {
        HStack(spacing: 4) {
            Text(word)
                .font(ProatFont.klein)
                .foregroundColor(Color.proatText1)

            Button(action: onDelete) {
                Image(systemName: "xmark.circle.fill")
                    .symbolRenderingMode(.hierarchical)
                    .foregroundStyle(isHovered ? Color.proatError : Color.proatText3)
                    .font(.system(size: 10))
            }
            .buttonStyle(.borderless)
            .onHover { hover in
                withAnimation(.easeInOut(duration: 0.2)) {
                    isHovered = hover
                }
            }
        }
        .padding(.horizontal, ProatSpacing.xs)
        .padding(.vertical, 4)
        .background(
            RoundedRectangle(cornerRadius: 6)
                .fill(Color.proatBgSunken)
        )
        .overlay(
            RoundedRectangle(cornerRadius: 6)
                .stroke(Color.proatBorder, lineWidth: 1)
        )
    }
}

struct FillerWordsSettingsView: View {
    @AppStorage("RemoveFillerWords") private var removeFillerWords = true
    @StateObject private var fillerWordManager = FillerWordManager.shared
    @State private var newWord = ""
    @State private var showDuplicateAlert = false

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            HStack {
                Text("Stopwoorden verwijderen")
                InfoTip("Verwijdert automatisch stopwoorden zoals 'eh', 'uhm', 'hmm' uit transcripties.")
                Spacer()
                Toggle("", isOn: $removeFillerWords)
                    .toggleStyle(.switch)
                    .labelsHidden()
            }

            if removeFillerWords {
                VStack(alignment: .leading, spacing: 8) {
                    HStack(spacing: 8) {
                        TextField("Stopwoord toevoegen", text: $newWord)
                            .textFieldStyle(.roundedBorder)
                            .accessibilityLabel("Stopwoord toevoegen")
                            .onSubmit { addWord() }

                        Button(action: addWord) {
                            Image(systemName: "plus.circle.fill")
                                .symbolRenderingMode(.hierarchical)
                                .foregroundStyle(Color.proatTeal)
                                .font(.system(size: 16, weight: .semibold))
                        }
                        .buttonStyle(.borderless)
                        .accessibilityLabel("Stopwoord toevoegen")
                        .disabled(newWord.trimmingCharacters(in: .whitespaces).isEmpty)
                    }
                    .padding(.vertical, 4)

                    if !fillerWordManager.fillerWords.isEmpty {
                        FlowLayout(spacing: 6) {
                            ForEach(fillerWordManager.fillerWords, id: \.self) { word in
                                FillerWordChip(word: word) {
                                    withAnimation(.easeInOut(duration: 0.2)) {
                                        fillerWordManager.removeWord(word)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .alert("Dubbel woord", isPresented: $showDuplicateAlert) {
            Button("OK", role: .cancel) {}
        } message: {
            Text("Dit stopwoord staat al in de lijst.")
        }
    }

    private func addWord() {
        let trimmed = newWord.trimmingCharacters(in: .whitespacesAndNewlines)
        guard !trimmed.isEmpty else { return }

        if fillerWordManager.addWord(trimmed) {
            newWord = ""
        } else {
            showDuplicateAlert = true
        }
    }
}
