Frontend Components: Unit 2 — Document Management

struct EditorView: View {
    @Bindable var document: MarkdownDocument
    @State private var viewModel: EditorViewModel

    init(document: MarkdownDocument) {
        self.document = document
        self._viewModel = State(initialValue: document.viewModel
            ?? EditorViewModel(document: document))
    }

    var body: some View {
        WYSIWYGTextView(viewModel: viewModel, settings: .shared)
            .toolbar { EditorToolbar(viewModel: viewModel) }
            .onAppear { document.viewModel = viewModel }
    }
}

struct EditorToolbar: ToolbarContent {
    @Bindable var viewModel: EditorViewModel

    var body: some ToolbarContent {
        ToolbarItemGroup(placement: .automatic) {
            // Heading group
            Button { viewModel.setHeading(level: 1) } label: {
                Label("Heading 1", systemImage: "number")
            }
            .help("Heading 1 (Cmd+1)")

            Button { viewModel.setHeading(level: 2) } label: {
                Label("Heading 2", systemImage: "number")
            }
            .help("Heading 2 (Cmd+2)")

            Button { viewModel.setHeading(level: 3) } label: {
                Label("Heading 3", systemImage: "number")
            }
            .help("Heading 3 (Cmd+3)")

            Divider()

            // Inline formatting group
            Button { viewModel.toggleBold() } label: {
                Label("Bold", systemImage: "bold")
            }
            .help("Bold (Cmd+B)")

            Button { viewModel.toggleItalic() } label: {
                Label("Italic", systemImage: "italic")
            }
            .help("Italic (Cmd+I)")

            Button { viewModel.toggleStrikethrough() } label: {
                Label("Strikethrough", systemImage: "strikethrough")
            }
            .help("Strikethrough")

            Button { viewModel.toggleInlineCode() } label: {
                Label("Inline Code", systemImage: "chevron.left.forwardslash.chevron.right")
            }
            .help("Inline Code (Cmd+Shift+K)")

            Divider()

            // Insert group
            Button { viewModel.insertLink() } label: {
                Label("Link", systemImage: "link")
            }
            .help("Link (Cmd+K)")

            Button { viewModel.insertImage() } label: {
                Label("Image", systemImage: "photo")
            }
            .help("Insert Image")
        }
    }
}

struct PreferencesView: View {
    @Bindable var settings = EditorSettings.shared

    var body: some View {
        TabView {
            EditorPreferencesTab(settings: settings)
                .tabItem { Label("Editor", systemImage: "pencil") }

            AppearancePreferencesTab(settings: settings)
                .tabItem { Label("Appearance", systemImage: "paintbrush") }
        }
        .frame(width: 450, height: 300)
    }
}

struct EditorPreferencesTab: View {
    @Bindable var settings: EditorSettings

    var body: some View {
        Form {
            Picker("Font Family", selection: $settings.fontFamily) {
                ForEach(FontCatalog.all) { font in
                    Text(font.displayName).tag(font.id)
                }
            }

            Stepper("Font Size: \(settings.fontSize, specifier: "%.0f") pt",
                    value: $settings.fontSize, in: 10...24, step: 1)

            HStack {
                Text("Line Spacing: \(settings.lineSpacing, specifier: "%.1f")x")
                Slider(value: $settings.lineSpacing, in: 1.0...2.0, step: 0.1)
            }

            Divider()

            Toggle("Enable Focus Mode by default", isOn: $settings.defaultFocusMode)
            Toggle("Enable Typewriter Scroll by default", isOn: $settings.defaultTypewriterScroll)

            Divider()

            Button("Reset to Defaults") { settings.reset() }
        }
        .padding()
    }
}

struct AppearancePreferencesTab: View {
    @Bindable var settings: EditorSettings

    var body: some View {
        Form {
            Picker("Appearance", selection: $settings.appearanceOverride) {
                ForEach(AppearanceMode.allCases, id: \.self) { mode in
                    Text(mode.rawValue.capitalized).tag(mode)
                }
            }
            .pickerStyle(.radioGroup)

            GroupBox("Preview") {
                Text("The quick brown fox jumps over the lazy dog.\n**Bold text** and *italic text* with `inline code`.")
                    .font(.custom(settings.fontFamily, size: settings.fontSize))
                    .lineSpacing(settings.fontSize * (settings.lineSpacing - 1.0))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(8)
            }
        }
        .padding()
    }
}

// In ShoechooApp .commands block
.commands {
    // File commands (Cmd+N, Cmd+O, Cmd+S, Cmd+Shift+S)
    // are provided by DocumentGroup automatically

    // Format commands (from Unit 1, registered here for menu visibility)
    CommandGroup(replacing: .textFormatting) {
        Button("Bold") { focusedViewModel?.toggleBold() }
            .keyboardShortcut("b", modifiers: .command)
        Button("Italic") { focusedViewModel?.toggleItalic() }
            .keyboardShortcut("i", modifiers: .command)
        Button("Link") { focusedViewModel?.insertLink() }
            .keyboardShortcut("k", modifiers: .command)
        Button("Inline Code") { focusedViewModel?.toggleInlineCode() }
            .keyboardShortcut("k", modifiers: [.command, .shift])
    }
    CommandGroup(after: .textFormatting) {
        ForEach(1...6, id: \.self) { level in
            Button("Heading \(level)") { focusedViewModel?.setHeading(level: level) }
                .keyboardShortcut(KeyEquivalent(Character("\(level)")), modifiers: .command)
        }
    }

    // View commands
    CommandGroup(after: .toolbar) {
        Button("Toggle Focus Mode") { focusedViewModel?.toggleFocusMode() }
            .keyboardShortcut("f", modifiers: [.command, .shift])
        Button("Toggle Typewriter Scroll") { focusedViewModel?.toggleTypewriterScroll() }
            .keyboardShortcut("t", modifiers: [.command, .shift])
    }
}

// FocusedValue key for accessing the active document's ViewModel
struct FocusedViewModelKey: FocusedValueKey {
    typealias Value = EditorViewModel
}

extension FocusedValues {
    var editorViewModel: EditorViewModel? {
        get { self[FocusedViewModelKey.self] }
        set { self[FocusedViewModelKey.self] = newValue }
    }
}

// In EditorView:
.focusedValue(\.editorViewModel, viewModel)

// In ShoechooApp commands:
@FocusedValue(\.editorViewModel) var focusedViewModel

// In Info.plist or via UTType extension
extension UTType {
    static let markdown = UTType(
        exportedAs: "net.danluu.markdown",
        conformingTo: .plainText
    )
}

// Document type declaration
// Supported file extensions: .md, .markdown, .mdown, .mkd
// MIME type: text/markdown