import { LitElement, html, css, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { when } from 'lit/directives/when.js';
import {
  AIModelVerdict,
  renderVerdict,
  getStatusVariant,
} from '../utils/verdict';
import { DuplicatePair, checkAIVerdict } from '../api';

@customElement('issue-detail-view')
export class IssueDetailView extends LitElement {
  @property({ type: Object }) pair: DuplicatePair | null = null;

  @state()
  private aiVerdict: AIModelVerdict | null = null;

  @state()
  private loadingVerdict = false;

  static styles = css`
    .detail-view-card {
      padding: var(--sl-spacing-large);
      background-color: var(--sl-color-neutral-0);
    }
    .detail-section {
      margin-bottom: var(--sl-spacing-large);
    }
    .detail-section:last-child {
      margin-bottom: 0;
    }
    .detail-section h3 {
      font-size: var(--sl-font-size-medium);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .detail-issue-key {
      color: var(--sl-color-neutral-600);
      font-weight: normal;
    }
    .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-wrap;
      word-wrap: break-word;
      max-height: 200px;
      overflow-y: auto;
    }
    .issue-id-link {
      color: var(--sl-color-primary-600);
      text-decoration: none;
    }
    .issue-id-link:hover {
      text-decoration: underline;
    }
    .issue-id {
      font-weight: 400;
      margin-right: var(--sl-spacing-x-small);
    }
    .issue-status {
      font-size: var(--sl-font-size-x-small);
      text-transform: uppercase;
    }
    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--sl-spacing-medium);
    }
    .compliance-title {
      display: block;
      margin-top: var(--sl-spacing-medium);
      margin-bottom: var(--sl-spacing-x-small);
      font-weight: var(--sl-font-weight-semibold);
    }
    .actions-container {
      display: flex;
      justify-content: flex-end;
    }
  `;

  willUpdate(changedProperties: Map<string, unknown>) {
    if (changedProperties.has('pair') && this.pair) {
      this.fetchVerdict();
    }
  }

  async fetchVerdict() {
    if (!this.pair || this.loadingVerdict) return;
    this.loadingVerdict = true;
    this.aiVerdict = null;
    try {
      this.aiVerdict = await checkAIVerdict(
        this.pair.issue1.id,
        this.pair.issue2.id
      );
    } catch (error) {
      console.error('Failed to fetch Ai Review:', error);
    } finally {
      this.loadingVerdict = false;
    }
  }

  render() {
    if (!this.pair) {
      return nothing;
    }

    const { issue1, issue2 } = this.pair;

    return html`
      <div class="detail-section">
        <h3>
          <span> ${issue1.title} </span>
          <sl-badge
            variant=${getStatusVariant(issue1.status)}
            class="issue-status"
            >${issue1.status}</sl-badge
          >
        </h3>
        ${when(
          issue1.description,
          () =>
            html`<div class="issue-description">
              ${unsafeHTML(issue1.description)}
            </div>`
        )}
      </div>

      <div class="detail-section">
        <h3>
          <span> ${issue2.title} </span>
          <sl-badge
            variant=${getStatusVariant(issue2.status)}
            class="issue-status"
            >${issue2.status}</sl-badge
          >
        </h3>
        ${when(
          issue2.description,
          () =>
            html`<div class="issue-description">
              ${unsafeHTML(issue2.description)}
            </div>`
        )}
      </div>

      <div class="detail-section">
        <div class="review-header">
          <h3>AI Review</h3>
          ${when(
            this.aiVerdict,
            () => html` <div>${renderVerdict(this.aiVerdict)}</div> `
          )}
        </div>

        ${when(
          this.loadingVerdict,
          () => html`<sl-spinner></sl-spinner>`,
          () =>
            when(
              this.aiVerdict,
              () => html`
                <div>
                  <b class="compliance-title">Reason</b>
                  <div class="issue-description">
                    ${this.aiVerdict?.reason?.trim() ||
                    'No reasoning provided.'}
                  </div>
                </div>

                ${when(
                  this.aiVerdict?.suggestion,
                  () => html`
                    <div>
                      <b class="compliance-title">Suggestion for Improvement</b>
                      <div class="issue-description">
                        ${this.aiVerdict?.suggestion?.trim()}
                      </div>
                    </div>
                  `
                )}
              `,
              () => html`<p>Could not load verdict.</p>`
            )
        )}
      </div>

      <div class="actions-container">
        <sl-button
          variant="primary"
          size="small"
          @click=${() => this.dispatchEvent(new CustomEvent('resolve'))}
          ?disabled=${this.aiVerdict?.resolution === 'resolved'}
        >
          <sl-icon slot="prefix" name="check-circle"></sl-icon>
          Resolve
        </sl-button>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'issue-detail-view': IssueDetailView;
  }
}
