import { Component, Input, ChangeDetectionStrategy, computed, signal, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

export type ProgressCircleSize = 'sm' | 'md' | 'lg' | 'xl';
export type ProgressCircleVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
export type ProgressCircleStroke = 'thin' | 'default' | 'thick' | 'extra-thick';

@Component({
  selector: 'ui-progress-circle',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-progress-circle"
      [class]="containerClasses()"
      [attr.aria-label]="ariaLabel || 'Progress indicator'"
      [attr.aria-valuenow]="indeterminate ? null : value"
      [attr.aria-valuemin]="indeterminate ? null : 0"
      [attr.aria-valuemax]="indeterminate ? null : max"
      [attr.aria-valuetext]="ariaValueText"
      [attr.role]="'progressbar'">
      
      <svg 
        class="ui-progress-circle__svg"
        [attr.viewBox]="viewBox"
        [attr.width]="svgSize()"
        [attr.height]="svgSize()">
        
        <!-- Background track -->
        <circle
          class="ui-progress-circle__track"
          [attr.cx]="center"
          [attr.cy]="center"
          [attr.r]="radius"
          [attr.stroke-width]="strokeWidth" />
        
        <!-- Progress circle -->
        @if (!indeterminate) {
          <circle
            class="ui-progress-circle__progress"
            [attr.cx]="center"
            [attr.cy]="center"
            [attr.r]="radius"
            [attr.stroke-width]="strokeWidth"
            [attr.stroke-dasharray]="circumference"
            [attr.stroke-dashoffset]="progressOffset()" />
        } @else {
          <circle
            class="ui-progress-circle__progress"
            [attr.cx]="center"
            [attr.cy]="center"
            [attr.r]="radius"
            [attr.stroke-width]="strokeWidth" />
        }
      </svg>
      
      <!-- Label content -->
      @if (showLabel) {
        <div class="ui-progress-circle__label" [class]="labelClasses()">
          @if (labelContent) {
            {{ labelContent }}
          } @else {
            <ng-content></ng-content>
          }
        </div>
      }
    </div>
  `,
  styleUrl: './progress-circle.component.scss'
})
export class ProgressCircleComponent {
  @Input() value = 0;
  @Input() max = 100;
  @Input() size: ProgressCircleSize = 'md';
  @Input() variant: ProgressCircleVariant = 'primary';
  @Input() stroke: ProgressCircleStroke = 'default';
  @Input() disabled = false;
  @Input() indeterminate = false;
  @Input() showLabel = false;
  @Input() labelContent = '';
  @Input() ariaLabel = '';
  @Input() ariaValueText = '';

  // Constants for SVG calculations
  private readonly _center = 20;
  private readonly _baseRadius = 16;
  
  // Computed properties for SVG dimensions
  center = this._center;
  radius = this._baseRadius;
  viewBox = `0 0 ${this._center * 2} ${this._center * 2}`;

  // Computed signals
  private _normalizedValue = computed(() => {
    const val = Math.max(0, Math.min(this.max, this.value));
    return val;
  });

  private _percentage = computed(() => {
    return this.max === 0 ? 0 : (this._normalizedValue() / this.max) * 100;
  });

  circumference = computed(() => 2 * Math.PI * this.radius);

  progressOffset = computed(() => {
    const progress = this._percentage();
    return this.circumference() - (progress / 100) * this.circumference();
  });

  svgSize = computed(() => {
    const sizeMap = {
      sm: 24,
      md: 32, 
      lg: 40,
      xl: 64
    };
    return sizeMap[this.size];
  });

  strokeWidth = computed(() => {
    const strokeMap = {
      thin: 1,
      default: 2,
      thick: 3,
      'extra-thick': 4
    };
    return strokeMap[this.stroke];
  });

  containerClasses = computed(() => {
    const classes = [
      `ui-progress-circle--${this.size}`,
      `ui-progress-circle--${this.variant}`,
      `ui-progress-circle--${this.stroke}`
    ];

    if (this.disabled) classes.push('ui-progress-circle--disabled');
    if (this.indeterminate) classes.push('ui-progress-circle--indeterminate');

    return classes.join(' ');
  });

  labelClasses = computed(() => {
    const classes = [
      `ui-progress-circle__label--${this.size}`
    ];

    if (this.disabled) classes.push('ui-progress-circle__label--disabled');

    return classes.join(' ');
  });

  // Utility methods
  getPercentage(): number {
    return this._percentage();
  }

  getValue(): number {
    return this._normalizedValue();
  }

  isComplete(): boolean {
    return this._normalizedValue() >= this.max;
  }
}