app_for_reddit/Reddit App/Views/CommentWriterView.swift

import SwiftUI

struct CommentWriterView: View {
    @Bindable var viewModel: CommentWriterViewModel
    let onOpenInReddit: (URL) -> Void

    var body: some View {
        VStack(spacing: 0) {
            header
            messageBanners
            tabBar

            ScrollView {
                PostPageBoundary {
                    switch viewModel.selectedTab {
                    case .compose:
                        composeContent
                    case .preview:
                        previewContent
                    case .variants:
                        variantsContent
                    }
                }
                .padding(.horizontal, 24)
                .padding(.top, 8)
                .padding(.bottom, 24)
            }
        }
        .background(AppTheme.background)
        .alert("Replace existing comment?", isPresented: $viewModel.showOverwriteConfirmation) {
            Button("Cancel", role: .cancel) {
                viewModel.cancelOverwriteConfirmation()
            }
            Button("Replace", role: .destructive) {
                Task { await viewModel.confirmOverwriteAndGenerate() }
            }
        } message: {
            Text("Generating will replace your current comment text.")
        }
        .onChange(of: viewModel.draft.subreddit) { _, _ in viewModel.notifyDraftEdited() }
        .onChange(of: viewModel.draft.postTitle) { _, _ in viewModel.notifyDraftEdited() }
        .onChange(of: viewModel.draft.postBody) { _, _ in viewModel.notifyDraftEdited() }
        .onChange(of: viewModel.draft.parentComment) { _, _ in viewModel.notifyDraftEdited() }
        .onChange(of: viewModel.draft.body) { _, _ in viewModel.notifyDraftEdited() }
    }

    // MARK: - Header

    private var header: some View {
        HStack(spacing: 14) {
            ModernSidebarIconView(kind: .commentWriter, size: 40)

            VStack(alignment: .leading, spacing: 2) {
                HStack(spacing: 6) {
                    Text("Comment Writer")
                        .font(.system(size: 18, weight: .semibold))
                        .foregroundStyle(AppTheme.textPrimary)

                    if viewModel.hasDraftChanges {
                        Circle()
                            .fill(AppTheme.accentGreen)
                            .frame(width: 6, height: 6)
                            .help("Draft has unsaved edits")
                    }
                }

                Text(viewModel.usesLiveAI ? "Write Reddit-ready comments with OpenAI" : "Write Reddit-ready comments with AI templates")
                    .font(.system(size: 11))
                    .foregroundStyle(AppTheme.textSecondary)
            }

            Spacer()

            headerActions
        }
        .padding(.horizontal, 24)
        .padding(.vertical, 16)
        .overlay(alignment: .bottom) {
            Rectangle()
                .fill(AppTheme.border)
                .frame(height: 1)
        }
    }

    @ViewBuilder
    private var messageBanners: some View {
        if let error = viewModel.errorMessage {
            PostGeneratorMessageBanner(message: error, isError: true)
                .padding(.horizontal, 24)
                .padding(.top, 8)
        } else if let success = viewModel.successMessage {
            PostGeneratorMessageBanner(message: success, isError: false)
                .padding(.horizontal, 24)
                .padding(.top, 8)
        }
    }

    private var headerActions: some View {
        HStack(spacing: 8) {
            Button {
                viewModel.resetDraft()
            } label: {
                Label("Reset", systemImage: "arrow.counterclockwise")
                    .font(.system(size: 11, weight: .medium))
            }
            .buttonStyle(CommentSecondaryButtonStyle())

            Button {
                viewModel.openInReddit(openInApp: onOpenInReddit)
            } label: {
                Label("Open Thread", systemImage: "arrow.up.right.square")
                    .font(.system(size: 11, weight: .medium))
            }
            .buttonStyle(CommentSecondaryButtonStyle())
            .disabled(viewModel.draft.postURL.trimmingCharacters(in: .whitespaces).isEmpty)

            Button {
                viewModel.copyToClipboard()
            } label: {
                Label("Copy", systemImage: "doc.on.doc")
                    .font(.system(size: 11, weight: .medium))
            }
            .buttonStyle(CommentSecondaryButtonStyle())
            .disabled(!viewModel.canExport)

            Button {
                Task { await viewModel.generateComment() }
            } label: {
                HStack(spacing: 6) {
                    if viewModel.isGenerating {
                        ProgressView()
                            .controlSize(.small)
                            .tint(.white)
                    } else {
                        Image(systemName: "sparkles")
                            .font(.system(size: 11, weight: .semibold))
                    }
                    Text(viewModel.isGenerating ? "Generating…" : "Generate")
                        .font(.system(size: 11, weight: .semibold))
                }
                .foregroundStyle(.white)
                .padding(.horizontal, 14)
                .padding(.vertical, 8)
                .background(viewModel.canGenerate ? AppTheme.accentGreen : AppTheme.accentGreen.opacity(0.4))
                .clipShape(RoundedRectangle(cornerRadius: 8))
            }
            .buttonStyle(.plain)
            .disabled(!viewModel.canGenerate)
        }
    }

    // MARK: - Tab Bar

    private var tabBar: some View {
        HStack(spacing: 4) {
            ForEach(CommentWriterTab.allCases) { tab in
                Button {
                    viewModel.selectedTab = tab
                } label: {
                    HStack(spacing: 4) {
                        Text(tab.title)
                            .font(.system(size: 11, weight: .semibold))

                        if tab == .variants, !viewModel.variants.isEmpty {
                            Text("\(viewModel.variants.count)")
                                .font(.system(size: 9, weight: .bold))
                                .foregroundStyle(.white)
                                .padding(.horizontal, 5)
                                .padding(.vertical, 2)
                                .background(AppTheme.accentGreen)
                                .clipShape(Capsule())
                        }
                    }
                    .foregroundStyle(viewModel.selectedTab == tab ? AppTheme.textPrimary : AppTheme.textSecondary)
                    .padding(.horizontal, 14)
                    .padding(.vertical, 8)
                    .background(
                        viewModel.selectedTab == tab
                            ? AppTheme.cardBackground
                            : Color.clear
                    )
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                }
                .buttonStyle(.plain)
            }

            Spacer()
        }
        .padding(.horizontal, 24)
        .padding(.top, 12)
        .padding(.bottom, 4)
    }

    // MARK: - Compose

    private var composeContent: some View {
        ViewThatFits(in: .horizontal) {
            HStack(alignment: .top, spacing: 16) {
                configurationPanel
                editorPanel
            }

            VStack(alignment: .leading, spacing: 16) {
                configurationPanel
                editorPanel
            }
        }
    }

    private var configurationPanel: some View {
        VStack(spacing: 12) {
            PostFormCard(title: "Comment Type", subtitle: "Top-level or reply to a comment") {
                CommentTypePicker(selectedType: Binding(
                    get: { viewModel.draft.commentType },
                    set: { viewModel.selectCommentType($0) }
                ))
            }

            PostFormCard(title: "Thread Context", subtitle: "What are you commenting on?") {
                VStack(alignment: .leading, spacing: 12) {
                    PostFormField(
                        label: "Subreddit",
                        placeholder: "technology",
                        text: $viewModel.draft.subreddit,
                        prefix: "r/"
                    )

                    if !viewModel.draft.subreddit.isEmpty,
                       !PostDraftValidator.isValidSubreddit(viewModel.draft.subreddit) {
                        Text("Use 3–21 characters: letters, numbers, underscores only.")
                            .font(.system(size: 9))
                            .foregroundStyle(Color(hex: 0xF87171))
                    }

                    PostFormField(
                        label: "Post Title",
                        placeholder: "Paste or type the post title",
                        text: $viewModel.draft.postTitle
                    )

                    PostFormTextEditor(
                        label: "Post Body (optional)",
                        placeholder: "Excerpt from the post for better context…",
                        text: $viewModel.draft.postBody,
                        minHeight: 70
                    )

                    if viewModel.draft.commentType == .reply {
                        PostFormTextEditor(
                            label: "Parent Comment",
                            placeholder: "Paste the comment you're replying to…",
                            text: $viewModel.draft.parentComment,
                            minHeight: 90
                        )
                    }

                    PostFormField(
                        label: "Post URL (optional)",
                        placeholder: "https://reddit.com/r/…/comments/…",
                        text: $viewModel.draft.postURL
                    )

                    if !viewModel.draft.postURL.isEmpty,
                       !CommentDraftValidator.isValidRedditURL(viewModel.draft.postURL) {
                        Text("Enter a valid reddit.com URL to open the thread.")
                            .font(.system(size: 9))
                            .foregroundStyle(Color(hex: 0xF87171))
                    }
                }
            }

            PostFormCard(title: "Comment Intent", subtitle: "What should this comment achieve?") {
                CommentIntentPicker(selectedIntent: $viewModel.draft.intent)
            }

            PostFormCard(title: "AI Settings", subtitle: "Tone, length, and style") {
                VStack(alignment: .leading, spacing: 12) {
                    PostFormField(
                        label: "Focus / Angle (optional)",
                        placeholder: "e.g. share personal experience",
                        text: $viewModel.draft.topic
                    )

                    VStack(alignment: .leading, spacing: 6) {
                        Text("Tone")
                            .font(.system(size: 10, weight: .medium))
                            .foregroundStyle(AppTheme.textTertiary)
                        CommentTonePicker(selectedTone: $viewModel.draft.tone)
                    }

                    VStack(alignment: .leading, spacing: 6) {
                        Text("Length")
                            .font(.system(size: 10, weight: .medium))
                            .foregroundStyle(AppTheme.textTertiary)
                        CommentLengthPicker(selectedLength: $viewModel.draft.length)
                    }

                    CommentToggleRow(
                        title: "Use Markdown",
                        subtitle: "Bold, italic, quotes, links",
                        isOn: $viewModel.draft.useMarkdown
                    )

                    if viewModel.draft.commentType == .reply {
                        CommentToggleRow(
                            title: "Quote Parent",
                            subtitle: "Include > blockquote of parent comment",
                            isOn: $viewModel.draft.includeQuote
                        )
                    }

                    VStack(alignment: .leading, spacing: 6) {
                        Text("Variants")
                            .font(.system(size: 10, weight: .medium))
                            .foregroundStyle(AppTheme.textTertiary)
                        CommentVariantCountPicker(selectedCount: $viewModel.draft.variantCount)
                    }
                }
            }

            RedditCommentEtiquetteCard()
        }
        .frame(minWidth: 280, idealWidth: 300, maxWidth: 320)
    }

    private var editorPanel: some View {
        VStack(spacing: 12) {
            PostFormCard(
                title: "Your Comment",
                subtitle: viewModel.draft.useMarkdown
                    ? "Markdown supported — edit after generating"
                    : "Plain text — edit after generating"
            ) {
                PostFormTextEditor(
                    label: "Comment Body",
                    placeholder: "Generate a comment or write your own…",
                    text: $viewModel.draft.body,
                    minHeight: 220
                )
            }

            characterCountFooter

            RedditThreadContextCard(
                postTitle: viewModel.draft.postTitle,
                postBody: viewModel.draft.postBody,
                parentComment: viewModel.draft.parentComment,
                commentType: viewModel.draft.commentType,
                formattedSubreddit: viewModel.formattedSubreddit
            )
        }
        .frame(maxWidth: .infinity)
    }

    private var characterCountFooter: some View {
        HStack {
            Text("\(viewModel.draft.body.count) / \(CommentDraftValidator.maxCommentLength)")
                .font(.system(size: 10))
                .foregroundStyle(
                    viewModel.draft.body.count > CommentDraftValidator.maxCommentLength
                        ? Color(hex: 0xF87171)
                        : AppTheme.textTertiary
                )

            Spacer()

            Text("Reddit limit: 10,000 characters")
                .font(.system(size: 10))
                .foregroundStyle(AppTheme.textTertiary)
        }
    }

    // MARK: - Preview

    private var previewContent: some View {
        HStack {
            Spacer(minLength: 0)

            VStack(spacing: 16) {
                Text("Live Preview")
                    .font(.system(size: 12, weight: .semibold))
                    .foregroundStyle(AppTheme.textSecondary)
                    .frame(maxWidth: .infinity, alignment: .leading)

                RedditCommentPreviewCard(
                    commentBody: viewModel.activeCommentBody,
                    formattedSubreddit: viewModel.formattedSubreddit,
                    commentType: viewModel.draft.commentType,
                    parentComment: viewModel.draft.parentComment
                )

                previewMetadata
            }
            .frame(maxWidth: 560)

            Spacer(minLength: 0)
        }
    }

    private var previewMetadata: some View {
        VStack(alignment: .leading, spacing: 8) {
            metadataRow(label: "Type", value: viewModel.draft.commentType.title)
            metadataRow(label: "Subreddit", value: viewModel.formattedSubreddit)
            metadataRow(label: "Intent", value: viewModel.draft.intent.title)
            metadataRow(label: "Tone", value: viewModel.draft.tone.title)
            metadataRow(label: "Length", value: viewModel.draft.length.title)
            metadataRow(label: "Engine", value: viewModel.usesLiveAI ? "OpenAI" : "Local templates")

            if let best = viewModel.bestVariant {
                metadataRow(label: "Best Score", value: "\(best.score)/100")
            }
        }
        .padding(14)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(
            RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
                .fill(AppTheme.cardBackground)
                .overlay(
                    RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
                        .stroke(AppTheme.cardBorder, lineWidth: 1)
                )
        )
    }

    // MARK: - Variants

    private var variantsContent: some View {
        VStack(spacing: 16) {
            if viewModel.variants.isEmpty {
                CommentWriterEmptyState(
                    icon: "bubble.left.and.bubble.right",
                    title: "No variants yet",
                    subtitle: "Fill in thread context on the Compose tab,\nthen tap Generate to get comment variants."
                )
            } else {
                variantsHeader

                VStack(spacing: 8) {
                    ForEach(viewModel.variants) { variant in
                        CommentVariantRow(
                            variant: variant,
                            isSelected: viewModel.selectedVariantID == variant.id,
                            onSelect: { viewModel.selectVariant(variant) },
                            onApply: { viewModel.applyVariant(variant) }
                        )
                    }
                }

                if !viewModel.activeCommentBody.isEmpty {
                    PostFormCard(title: "Selected Preview", subtitle: "How this variant looks in a thread") {
                        RedditCommentPreviewCard(
                            commentBody: viewModel.activeCommentBody,
                            formattedSubreddit: viewModel.formattedSubreddit,
                            commentType: viewModel.draft.commentType,
                            parentComment: viewModel.draft.parentComment
                        )
                    }
                }
            }
        }
        .frame(maxWidth: 640)
        .frame(maxWidth: .infinity)
    }

    private var variantsHeader: some View {
        HStack {
            VStack(alignment: .leading, spacing: 2) {
                Text("Comment Variants")
                    .font(.system(size: 12, weight: .semibold))
                    .foregroundStyle(AppTheme.textPrimary)
                Text("Tap a variant to preview, or Apply to use it")
                    .font(.system(size: 10))
                    .foregroundStyle(AppTheme.textSecondary)
            }

            Spacer()

            if let best = viewModel.bestVariant {
                HStack(spacing: 6) {
                    Image(systemName: "trophy.fill")
                        .font(.system(size: 10))
                        .foregroundStyle(AppTheme.accentYellow)
                    Text("Best: \(best.score)/100")
                        .font(.system(size: 10, weight: .semibold))
                        .foregroundStyle(AppTheme.textSecondary)
                }
            }
        }
    }

    private func metadataRow(label: String, value: String) -> some View {
        HStack(alignment: .top) {
            Text(label)
                .font(.system(size: 10, weight: .medium))
                .foregroundStyle(AppTheme.textTertiary)
                .frame(width: 70, alignment: .leading)
            Text(value)
                .font(.system(size: 10))
                .foregroundStyle(AppTheme.textSecondary)
                .fixedSize(horizontal: false, vertical: true)
        }
    }
}

#Preview {
    CommentWriterView(viewModel: CommentWriterViewModel()) { _ in }
        .frame(width: 880, height: 720)
}