import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'ui-screen-reader-only',
  standalone: true,
  imports: [CommonModule],
  template: `
    <span 
      [class]="getClasses()"
      [attr.aria-live]="ariaLive"
      [attr.aria-atomic]="ariaAtomic"
      [attr.role]="role"
    >
      <ng-content></ng-content>
    </span>
  `,
  styles: [`
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .sr-only-focusable {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .sr-only-focusable:focus,
    .sr-only-focusable:active {
      position: static;
      width: auto;
      height: auto;
      padding: 0.5rem 1rem;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;
      background: var(--a11y-skip-link-bg, #fff);
      color: var(--a11y-skip-link-color, #000);
      border: 1px solid var(--a11y-skip-link-border, #007bff);
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 10000;
    }

    .status-message {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .status-message.status-visible {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip: auto;
      white-space: normal;
      padding: 0.5rem 1rem;
      margin: 4px 0;
      background: var(--a11y-skip-link-bg, #fff);
      border-left: 4px solid var(--a11y-focus-color, #007bff);
      border-radius: 0 4px 4px 0;
    }

    .status-message.status-error {
      border-left-color: var(--a11y-error-color, #dc3545);
    }

    .status-message.status-success {
      border-left-color: var(--a11y-success-color, #28a745);
    }

    .status-message.status-warning {
      border-left-color: var(--a11y-warning-color, #ffc107);
    }

    .instructions {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (prefers-contrast: high) {
      .sr-only-focusable:focus,
      .sr-only-focusable:active {
        background: ButtonFace;
        color: ButtonText;
        border-color: ButtonText;
      }
      
      .status-message.status-visible {
        background: ButtonFace;
        color: ButtonText;
        border-color: ButtonText;
      }
    }
  `]
})
export class ScreenReaderOnlyComponent {
  @Input() type: 'default' | 'focusable' | 'status' | 'instructions' = 'default';
  @Input() statusType?: 'error' | 'success' | 'warning';
  @Input() visible = false;
  @Input() ariaLive?: 'polite' | 'assertive' | 'off';
  @Input() ariaAtomic?: 'true' | 'false';
  @Input() role?: string;

  /**
   * Get CSS classes based on component configuration
   */
  getClasses(): string {
    const classes: string[] = [];

    switch (this.type) {
      case 'focusable':
        classes.push('sr-only-focusable');
        break;
        
      case 'status':
        classes.push('status-message');
        if (this.visible) {
          classes.push('status-visible');
        }
        if (this.statusType) {
          classes.push(`status-${this.statusType}`);
        }
        break;
        
      case 'instructions':
        classes.push('instructions');
        break;
        
      default:
        classes.push('sr-only');
        break;
    }

    return classes.join(' ');
  }
}