/**
 * ODRL Policy Viewer Component
 *
 * A Lit web component for displaying ODRL policies in a user-friendly format.
 *
 * Usage:
 * ```html
 * <odrl-policy-viewer .policy=${policyObject}></odrl-policy-viewer>
 * ```
 *
 * Attributes:
 * - policy: OdrlPolicy object to display
 * - compact: boolean (optional) - Show compact view
 */

import {
  type OdrlPolicy,
  OdrlPolicyRenderer,
} from "@startinblox/solid-tems-shared";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

@customElement("odrl-policy-viewer")
export class OdrlPolicyViewer extends LitElement {
  @property({ type: Object })
  policy?: OdrlPolicy;

  @property({ type: Boolean })
  compact = false;

  static styles = css`
    :host {
      display: block;
      font-family: system-ui, -apple-system, sans-serif;
    }

    .odrl-policy {
      font-size: 0.9em;
      line-height: 1.5;
    }

    .odrl-header {
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e0e0e0;
    }

    .odrl-type {
      font-weight: bold;
      font-size: 1.1em;
      color: #1976d2;
    }

    .odrl-id {
      font-size: 0.85em;
      color: #666;
      font-family: monospace;
      margin-top: 0.25rem;
      word-break: break-all;
    }

    .odrl-section {
      margin-bottom: 1.5rem;
    }

    .odrl-section h4 {
      margin: 0 0 0.5rem 0;
      font-size: 1em;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .odrl-prohibitions h4 {
      color: #d32f2f;
    }

    .odrl-obligations h4 {
      color: #f57c00;
    }

    .odrl-section ul {
      margin: 0;
      padding-left: 1.5rem;
    }

    .odrl-section li {
      margin-bottom: 0.5rem;
    }

    .odrl-constraints {
      font-size: 0.9em;
      color: #555;
      margin-top: 0.25rem;
    }

    .odrl-constraints li {
      margin-bottom: 0.25rem;
    }

    .odrl-duties {
      font-size: 0.9em;
      color: #f57c00;
      margin-top: 0.5rem;
      font-weight: 500;
    }

    .odrl-duties-list {
      font-size: 0.95em;
      color: #666;
    }

    .odrl-duties-list li {
      margin-bottom: 0.25rem;
    }

    .compact {
      font-size: 0.85em;
    }

    .compact .odrl-section {
      margin-bottom: 1rem;
    }

    .compact .odrl-section h4 {
      font-size: 0.95em;
    }

    .no-policy {
      color: #999;
      font-style: italic;
      padding: 1rem;
      text-align: center;
    }

    .error {
      color: #d32f2f;
      padding: 1rem;
      background: #ffebee;
      border-radius: 4px;
      font-size: 0.9em;
    }
  `;

  render() {
    if (!this.policy) {
      return html`<div class="no-policy">No policy available</div>`;
    }

    try {
      const renderer = new OdrlPolicyRenderer(this.policy);
      const htmlContent = renderer.renderAsHtml();

      return html`
        <div class="${this.compact ? "compact" : ""}">
          ${unsafeHTML(htmlContent)}
        </div>
      `;
    } catch (error) {
      console.error("Error rendering ODRL policy:", error);
      return html`
        <div class="error">
          Error rendering policy: ${(error as Error).message}
        </div>
      `;
    }
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "odrl-policy-viewer": OdrlPolicyViewer;
  }
}