/**
 * <breakpilot-compliance-score> Web Component
 *
 * Displays a circular compliance score indicator
 *
 * Usage:
 * <breakpilot-compliance-score
 *   score="75"
 *   size="medium"
 *   show-label="true">
 * </breakpilot-compliance-score>
 */

import { BreakPilotElement, COMMON_STYLES } from './base'

export class ComplianceScoreElement extends BreakPilotElement {
  static get observedAttributes(): string[] {
    return ['score', 'size', 'show-label', 'label']
  }

  private get score(): number {
    const value = parseInt(this.getAttribute('score') || '0', 10)
    return Math.max(0, Math.min(100, value))
  }

  private get size(): 'small' | 'medium' | 'large' {
    return (this.getAttribute('size') as 'small' | 'medium' | 'large') || 'medium'
  }

  private get showLabel(): boolean {
    return this.getAttribute('show-label') !== 'false'
  }

  private get label(): string {
    return this.getAttribute('label') || 'Compliance Score'
  }

  private getColor(score: number): string {
    if (score >= 80) return '#16a34a' // Green
    if (score >= 60) return '#f59e0b' // Yellow
    if (score >= 40) return '#f97316' // Orange
    return '#dc2626' // Red
  }

  protected render(): void {
    const sizes = {
      small: { width: 80, strokeWidth: 6, fontSize: 18 },
      medium: { width: 120, strokeWidth: 8, fontSize: 24 },
      large: { width: 160, strokeWidth: 10, fontSize: 32 },
    }

    const { width, strokeWidth, fontSize } = sizes[this.size]
    const radius = (width - strokeWidth) / 2
    const circumference = radius * 2 * Math.PI
    const offset = circumference - (this.score / 100) * circumference
    const color = this.getColor(this.score)

    const styles = `
      ${COMMON_STYLES}

      :host {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
      }

      .score-container {
        position: relative;
      }

      svg {
        transform: rotate(-90deg);
      }

      .background-circle {
        fill: none;
        stroke: #e5e5e5;
      }

      .progress-circle {
        fill: none;
        stroke: ${color};
        stroke-linecap: round;
        transition: stroke-dashoffset 0.5s ease-in-out;
      }

      .score-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: ${fontSize}px;
        font-weight: 700;
        color: ${color};
      }

      .label {
        margin-top: 8px;
        font-size: 14px;
        color: #666;
        text-align: center;
      }
    `

    this.shadow.innerHTML = `
      <style>${styles}</style>
      <div class="score-container">
        <svg width="${width}" height="${width}">
          <circle
            class="background-circle"
            cx="${width / 2}"
            cy="${width / 2}"
            r="${radius}"
            stroke-width="${strokeWidth}"
          />
          <circle
            class="progress-circle"
            cx="${width / 2}"
            cy="${width / 2}"
            r="${radius}"
            stroke-width="${strokeWidth}"
            stroke-dasharray="${circumference}"
            stroke-dashoffset="${offset}"
          />
        </svg>
        <div class="score-text">${this.score}%</div>
      </div>
      ${this.showLabel ? `<div class="label">${this.label}</div>` : ''}
    `
  }
}

// Register the custom element
if (typeof customElements !== 'undefined') {
  customElements.define('breakpilot-compliance-score', ComplianceScoreElement)
}
