import SwiftUI
import SwiftData

struct DictionarySettingsView: View {
    @Environment(\.modelContext) private var modelContext
    @State private var selectedSection: DictionarySection = .replacements
    @State private var isShowingSettings = false
    let whisperPrompt: WhisperPrompt
    
    enum DictionarySection: String, CaseIterable {
        case replacements = "Vervangingen"
        case spellings = "Woordenboek"
        
        var description: String {
            switch self {
            case .spellings:
                return "Voeg woorden toe zodat Proat ze goed herkent"
            case .replacements:
                return "Vervang automatisch bepaalde woorden of zinnen door eigen tekst "
            }
        }
        
        var icon: String {
            switch self {
            case .spellings:
                return "character.book.closed.fill"
            case .replacements:
                return "arrow.2.squarepath"
            }
        }
    }
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                heroSection
                mainContent
            }
        }
        .frame(minWidth: 600, minHeight: 500)
        .background(Color.proatBgBase)
        .slidingPanel(isPresented: $isShowingSettings, width: 400) {
            DictionarySettingsPanel {
                withAnimation(.smooth(duration: 0.3)) {
                    isShowingSettings = false
                }
            }
        }
    }
    
    private var heroSection: some View {
        CompactHeroSection(
            icon: "brain.filled.head.profile",
            title: "Woordenboekinstellingen",
            description: "Verbeter de transcriptienauwkeurigheid van Proat door het je woorden te leren",
            maxDescriptionWidth: 500
        )
    }
    
    private var mainContent: some View {
        VStack(spacing: ProatSpacing.xl) {
            sectionSelector
            selectedSectionContent
        }
        .padding(.horizontal, ProatSpacing.xl)
        .padding(.vertical, ProatSpacing.xl)
    }

    private var sectionSelector: some View {
        VStack(alignment: .leading, spacing: ProatSpacing.l) {
            HStack {
                Text("Kies onderdeel")
                    .font(ProatFont.titel)
                    .foregroundColor(.proatText1)

                Spacer()

                Button {
                    withAnimation(.smooth(duration: 0.3)) {
                        isShowingSettings.toggle()
                    }
                } label: {
                    Image(systemName: "gear")
                        .font(.system(size: 18, weight: .medium))
                        .foregroundColor(isShowingSettings ? .proatTeal : .proatText3)
                }
                .buttonStyle(.plain)
                .help("Woordenboekinstellingen")
            }

            HStack(spacing: ProatSpacing.m) {
                ForEach(DictionarySection.allCases, id: \.self) { section in
                    SectionCard(
                        section: section,
                        isSelected: selectedSection == section,
                        action: { selectedSection = section }
                    )
                }
            }
        }
    }

    private var selectedSectionContent: some View {
        VStack(alignment: .leading, spacing: ProatSpacing.l) {
            switch selectedSection {
            case .spellings:
                VocabularyView(whisperPrompt: whisperPrompt)
                    .proatCard()
            case .replacements:
                WordReplacementView()
                    .proatCard()
            }
        }
    }
}

struct SectionCard: View {
    let section: DictionarySettingsView.DictionarySection
    let isSelected: Bool
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            VStack(alignment: .leading, spacing: ProatSpacing.s) {
                Image(systemName: section.icon)
                    .font(.system(size: 28))
                    .symbolRenderingMode(.hierarchical)
                    .foregroundStyle(isSelected ? Color.proatTeal : Color.proatText3)

                VStack(alignment: .leading, spacing: 4) {
                    Text(section.rawValue)
                        .font(ProatFont.sectie)
                        .foregroundColor(.proatText1)

                    Text(section.description)
                        .font(ProatFont.body)
                        .foregroundStyle(Color.proatText2)
                        .fixedSize(horizontal: false, vertical: true)
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(ProatSpacing.m)
            .background(isSelected ? Color.proatTealTint : Color.proatBgRaised)
            .clipShape(RoundedRectangle(cornerRadius: ProatRadius.kaart, style: .continuous))
            .overlay(
                RoundedRectangle(cornerRadius: ProatRadius.kaart, style: .continuous)
                    .stroke(isSelected ? Color.proatTeal : Color.proatBorder, lineWidth: isSelected ? 1.5 : 1)
            )
            .proatShadowKaart()
        }
        .buttonStyle(.plain)
    }
}
