import { Component, ViewChild } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';

@Component({
    imports: [InlineAIAssistModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div id="container" style="height: 350px; width: 650px;">
            <button id="summarizeBtn" class="e-btn e-primary" (click)="onClick()">Content Summarize</button>
            <div id="editableText" contenteditable="true">
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity.</p>
            </div>
            <ejs-inlineaiassist id="inlineAssist" #inlineAssistComponent
                [relateTo]="'#summarizeBtn'"
                [responseSettings]="responseSetting"
                popupWidth="500px"
                (promptRequest)="onPromptRequest($event)">
            </ejs-inlineaiassist>
        </div>
    `,
    styles: [`#editableText { width: 100%; min-height: 120px; padding: 12px; border: 1px solid; }`]
})
export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement;
            if (editable && this.inlineAssistComponent.prompts.length > 0) {
                const lastResponse = this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1].response;
                editable.innerHTML = '<p>' + lastResponse + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect: this.itemSelect
    }

    onClick(): void {
        this.inlineAssistComponent.showPopup();
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
            let response = 'Connect this component to OpenAI or Azure AI services for real-time prompt processing.';
            this.inlineAssistComponent.addResponse(response);
        }, 1000);
    };
}

// Handle accept/reject responses
public itemSelect = (args: ResponseItemSelectEventArgs) => {
    if (args.command.label === 'Accept') {
        // Apply the AI response to your content
        const content = this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1].response;
        this.applyResponse(content);
        this.inlineAssistComponent.hidePopup();
    } else if (args.command.label === 'Discard') {
        this.inlineAssistComponent.hidePopup();
    }
}

// Execute a specific prompt with custom command
public executeCommand(prompt: string) => {
    this.inlineAssistComponent.showPopup();
    this.inlineAssistComponent.executePrompt(prompt);
}

// Example usage: Summarize, Translate, or Make Professional
this.executeCommand('Summarize the content');

// Organize commands into logical groups
public commandSetting: CommandSettingsModel = {
    commands: [
        { label: 'Summarize', prompt: 'Summarize...', groupBy: 'Improve content' },
        { label: 'Shorten', prompt: 'Shorten...', groupBy: 'Improve content' },
        { label: 'Translate', prompt: 'Translate...', groupBy: 'Edit content' },
    ]
}

// Toggle between response display modes
public responseMode: string = 'Popup'; // or 'Inline'

// Use Inline for seamless in-place editing
// Use Popup for review-based workflows