gramora/gramora/Views/WordsCountView.swift

import SwiftUI

struct WordsCountView: View {
    @StateObject private var viewModel = WordsCountViewModel()

    var body: some View {
        GeometryReader { proxy in
            let dynamicHorizontalPadding = min(max(proxy.size.width * 0.045, AppTheme.contentPadding), 52)
            let dynamicBottomPadding = min(max(proxy.size.height * 0.04, 20), 40)

            VStack(alignment: .leading, spacing: 0) {
                header
                    .padding(.bottom, 24)

                contentCard
                    .frame(maxWidth: .infinity, maxHeight: .infinity)

                if let errorMessage = viewModel.errorMessage {
                    Text(errorMessage)
                        .font(.system(size: 14))
                        .foregroundStyle(.red)
                        .padding(.top, 12)
                }
            }
            .frame(maxWidth: 1200, maxHeight: .infinity, alignment: .topLeading)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            .padding(.horizontal, dynamicHorizontalPadding)
            .padding(.top, AppTheme.brandLabelTopInset)
            .padding(.bottom, dynamicBottomPadding)
        }
        .onChange(of: viewModel.text) { _ in
            viewModel.handleTextChange()
        }
    }

    private var header: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading, spacing: 8) {
                Text("Words Count")
                    .font(.system(size: 30, weight: .bold))
                    .foregroundStyle(AppTheme.textPrimary)

                HStack(spacing: 0) {
                    Text("Count ")
                        .foregroundStyle(AppTheme.textSecondary)
                    Text("every word")
                        .fontWeight(.semibold)
                        .foregroundStyle(AppTheme.teal)
                    Text(". Write with ")
                        .foregroundStyle(AppTheme.textSecondary)
                    Text("precision")
                        .fontWeight(.semibold)
                        .foregroundStyle(AppTheme.teal)
                    Text(".")
                        .foregroundStyle(AppTheme.textSecondary)
                }
                .font(.system(size: 15))
            }

            Spacer()

            IconButton {
                SettingsGearIcon()
            } action: {}
            .accessibilityLabel("Settings")
        }
    }

    private var contentCard: some View {
        VStack(alignment: .leading, spacing: AppTheme.contentCardSpacing) {
            YourContentHeader()

            Text(viewModel.wordCountLabel)
                .font(.system(size: 18, weight: .semibold))
                .foregroundStyle(AppTheme.textPrimary)

            statsRow

            VStack(alignment: .leading, spacing: 6) {
                ThinCaretTextEditor(
                    text: $viewModel.text,
                    placeholder: "Type or paste your text here to count words...",
                    maxWords: WordsCountViewModel.maxWords,
                    onWordLimitReached: viewModel.notifyWordLimitReached
                )
                    .font(.system(size: 14))
                    .foregroundStyle(AppTheme.textPrimary)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .frame(minHeight: 96)
                    .background(Color.white)
                    .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                    .overlay(
                        RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius)
                            .stroke(AppTheme.inputBorder, lineWidth: 1)
                    )

                Text(viewModel.wordCountLimitLabel)
                    .font(.system(size: 11))
                    .foregroundStyle(AppTheme.textMuted)
                    .frame(maxWidth: .infinity, alignment: .trailing)
            }
            .frame(maxHeight: .infinity)

            HStack(spacing: 8) {
                ToolbarButton(title: "Paste Text", iconName: "doc.on.clipboard") {
                    viewModel.pasteText()
                }

                ToolbarButton(title: "Upload File", iconName: "square.and.arrow.up") {
                    viewModel.uploadFile()
                }

                Spacer()

                ClearButton {
                    viewModel.clearText()
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .inputContentCardPadding()
        .background(AppTheme.cardBackground)
        .clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
        .overlay(
            RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius)
                .stroke(AppTheme.border, lineWidth: 1)
        )
        .shadow(color: AppTheme.cardShadow, radius: 16, y: 6)
    }

    private var statsRow: some View {
        HStack(spacing: 12) {
            StatItem(title: "Words", value: "\(viewModel.wordCount)")
            StatItem(title: "Sentences", value: "\(viewModel.sentenceCount)")
            StatItem(title: "Paragraphs", value: "\(viewModel.paragraphCount)")
            StatItem(title: "Characters", value: "\(viewModel.characterCount)")
            Spacer(minLength: 0)
        }
        .padding(.vertical, 6)
    }
}

private struct StatItem: View {
    let title: String
    let value: String

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(value)
                .font(.system(size: 20, weight: .semibold))
                .foregroundStyle(AppTheme.teal)

            Text(title)
                .font(.system(size: 12))
                .foregroundStyle(AppTheme.textMuted)
        }
        .frame(minWidth: 96, alignment: .leading)
        .padding(.horizontal, 14)
        .padding(.vertical, 10)
        .background(AppTheme.tealLight)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(value) \(title)")
    }
}