import { LitElement, html, css, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { when } from 'lit/directives/when.js';
import { getStatusVariant, getComplianceVariant } from '../utils/verdict';
import { Issue, IssueComplianceResult } from '../types';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';

@customElement('single-issue-detail-view')
export class SingleIssueDetailView extends LitElement {
  @property({ type: Object }) issue: Issue | null = null;
  @property({ type: Object }) complianceResult: IssueComplianceResult | null =
    null;

  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 .row {
      font-size: var(--sl-font-size-medium);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .review-section {
      margin-top: 3rem;
    }

    .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;
    }
    .issue-status {
      font-size: var(--sl-font-size-x-small);
      text-transform: uppercase;
    }
    .compliance-reason {
      margin-top: var(--sl-spacing-small);
    }
    .compliance-rows {
      display: flex;
      flex-direction: column;
      gap: var(--sl-spacing-small);
    }
  `;

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

    return html`
      <div class="detail-section">
        <h3>
          <span> ${this.issue.title} </span>
          <sl-badge
            variant=${getStatusVariant(this.issue.status)}
            class="issue-status"
            >${this.issue.status}</sl-badge
          >
        </h3>
        ${when(
          this.issue.description,
          () =>
            html`<div class="issue-description">
              ${unsafeHTML(this.issue.description)}
            </div>`,
          () =>
            html`<sl-alert variant="primary" open>
              <sl-icon slot="icon" name="info-circle"></sl-icon>
              No description provided.
            </sl-alert>`
        )}
      </div>

      <slot name="additional-info"></slot>

      ${when(
        this.complianceResult,
        () => html`
          <div class="review-section">
            <h3>${this.complianceResult!.name} Review</h3>
            <sl-badge
              variant=${getComplianceVariant(
                this.complianceResult!.compliance_factor
              )}
              pill
            >
              ${(this.complianceResult!.compliance_factor * 100).toFixed(0)}%
            </sl-badge>
            <div class="issue-description compliance-reason">
              ${this.complianceResult!.reason}
            </div>
          </div>
        `
      )}
    `;
  }
}

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