import { LitElement, html, css, unsafeCSS } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import {
Issue,
getComplianceImprovementSuggestion,
updateIssueContent,
} from '../api';
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import './single-issue-detail-view.ts';
import consoleStyles from '../styles/console-styles.css?inline';
@customElement('improve-compliance-modal')
export class ImproveComplianceModal extends LitElement {
static styles = [
unsafeCSS(consoleStyles),
css`
.comparison-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sl-spacing-medium);
}
.comparison-panel h3 {
margin-top: 0;
padding-bottom: var(--sl-spacing-small);
border-bottom: 1px solid var(--sl-color-neutral-200);
margin-bottom: var(--sl-spacing-medium);
}
.loading-suggestion {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
gap: var(--sl-spacing-small);
}
.issue-description {
font-size: var(--sl-font-size-small);
color: var(--sl-color-neutral-700);
background-color: var(--sl-color-neutral-100);
border: 1px solid var(--sl-color-neutral-200);
border-radius: var(--sl-border-radius-medium);
padding: var(--sl-spacing-medium);
white-space: pre-line;
overflow-wrap: break-word;
max-height: 400px;
overflow-y: auto;
}
.compliance-title {
display: block;
margin-top: var(--sl-spacing-medium);
margin-bottom: var(--sl-spacing-x-small);
font-weight: var(--sl-font-weight-semibold);
}
`,
];
@property({ type: Boolean }) open = false;
@property({ type: Object }) issue: Issue | null = null;
@property({ type: String }) promptName = '';
@state() private _isSubmitting = false;
@state() private _isLoadingSuggestion = false;
@state() private _suggestionError: string | null = null;
@state() private _suggestedTitle = '';
@state() private _suggestedDescription = '';
@state() private _suggestedChanges = '';
updated(changedProperties: Map<string, unknown>) {
if (changedProperties.has('open') && this.open) {
this.handleOpen();
}
}
private async handleOpen() {
if (!this.issue) return;
this._suggestionError = null;
this._suggestedTitle = '';
this._suggestedDescription = '';
this._suggestedChanges = '';
this.fetchSuggestion();
}
private handleClose() {
this.open = false;
this.dispatchEvent(
new CustomEvent('close', { bubbles: true, composed: true })
);
}
private async fetchSuggestion() {
if (!this.issue) return;
this._isLoadingSuggestion = true;
this._suggestionError = null;
try {
const suggestion = await getComplianceImprovementSuggestion(
this.issue.id,
this.promptName
);
this._suggestedTitle = suggestion.title;
this._suggestedDescription = suggestion.description;
this._suggestedChanges = suggestion.changes;
} catch (error) {
this._suggestionError =
error instanceof Error ? error.message : 'Failed to load suggestion.';
console.error('Failed to get compliance suggestion:', error);
} finally {
this._isLoadingSuggestion = false;
}
}
private async _handleSubmit() {
if (!this.issue) return;
this._isSubmitting = true;
this._suggestionError = null;
console.log('[Modal] Handling submit for issue:', this.issue.id);
console.log('[Modal] With data:', {
title: this._suggestedTitle,
description: this._suggestedDescription,
});
try {
const response = await updateIssueContent(
this.issue.id,
this._suggestedTitle,
this._suggestedDescription
);
console.log('[Modal] API call successful, response:', response);
const summary = `Issue ${this.issue.key} was successfully updated.`;
const detail = { issueId: this.issue.id, summary };
console.log('[Modal] Dispatching on-submit event with detail:', detail);
this.dispatchEvent(
new CustomEvent('on-submit', {
bubbles: true,
composed: true,
detail,
})
);
this.handleClose();
} catch (error) {
console.error('[Modal] API call failed:', error);
// Consider showing a toast notification on error
} finally {
this._isSubmitting = false;
}
}
render() {
return html`
<sl-dialog
label="Improve Issue Compliance"
class="dialog-overview large"
.open=${this.open}
@sl-hide=${this.handleClose}
>
${this.issue
? html`
<div class="comparison-container">
<div class="comparison-panel">
<h3>Original Issue</h3>
<single-issue-detail-view
.issue=${this.issue}
></single-issue-detail-view>
</div>
<div class="comparison-panel">
<h3>Suggested Improvement</h3>
${this._isLoadingSuggestion
? html`<div class="loading-suggestion">
<sl-spinner></sl-spinner>
<span>Generating suggestion...</span>
</div>`
: this._suggestionError
? html`<sl-alert variant="danger" open
><sl-icon
slot="icon"
name="exclamation-octagon"
></sl-icon
>${this._suggestionError}</sl-alert
>`
: html`
<sl-input
label="Title"
.value=${this._suggestedTitle}
@sl-input=${(e: Event) =>
(this._suggestedTitle = (
e.target as HTMLInputElement
).value)}
></sl-input>
<br />
<sl-textarea
label="Description"
.value=${this._suggestedDescription}
@sl-input=${(e: Event) =>
(this._suggestedDescription = (
e.target as HTMLInputElement
).value)}
rows="10"
></sl-textarea>
<br />
<div>
<b class="compliance-title">Changes</b>
<div class="issue-description">
${this._suggestedChanges}
</div>
</div>
`}
</div>
</div>
`
: ''}
<sl-button slot="footer" @click=${this.handleClose}>Cancel</sl-button>
<sl-button
slot="footer"
type="button"
variant="primary"
.loading=${this._isSubmitting}
@click=${this._handleSubmit}
>Update Issue</sl-button
>
</sl-dialog>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'improve-compliance-modal': ImproveComplianceModal;
}
}
