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

type BoxSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
type BoxDisplay = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid';
type BoxPosition = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
type BoxOverflow = 'visible' | 'hidden' | 'scroll' | 'auto';

@Component({
  selector: 'ui-box',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [style.width]="width"
      [style.height]="height"
      [style.min-width]="minWidth"
      [style.min-height]="minHeight"
      [style.max-width]="maxWidth"
      [style.max-height]="maxHeight"
      [attr.role]="role">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './box.component.scss'
})
export class BoxComponent {
  // Padding variants
  @Input() p?: BoxSpacing; // all sides
  @Input() px?: BoxSpacing; // horizontal (left + right)
  @Input() py?: BoxSpacing; // vertical (top + bottom)
  @Input() pt?: BoxSpacing; // top
  @Input() pr?: BoxSpacing; // right
  @Input() pb?: BoxSpacing; // bottom
  @Input() pl?: BoxSpacing; // left

  // Margin variants
  @Input() m?: BoxSpacing; // all sides
  @Input() mx?: BoxSpacing; // horizontal (left + right)
  @Input() my?: BoxSpacing; // vertical (top + bottom)
  @Input() mt?: BoxSpacing; // top
  @Input() mr?: BoxSpacing; // right
  @Input() mb?: BoxSpacing; // bottom
  @Input() ml?: BoxSpacing; // left

  // Display and layout
  @Input() display?: BoxDisplay;
  @Input() position?: BoxPosition;
  @Input() overflow?: BoxOverflow;

  // Dimensions
  @Input() width?: string;
  @Input() height?: string;
  @Input() minWidth?: string;
  @Input() minHeight?: string;
  @Input() maxWidth?: string;
  @Input() maxHeight?: string;

  // Visual
  @Input() rounded = false;
  @Input() shadow = false;
  @Input() border = false;

  // Accessibility
  @Input() role?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-box': true
    };

    // Display
    if (this.display) {
      classes[`ui-box--display-${this.display}`] = true;
    }

    // Position
    if (this.position && this.position !== 'static') {
      classes[`ui-box--position-${this.position}`] = true;
    }

    // Overflow
    if (this.overflow && this.overflow !== 'visible') {
      classes[`ui-box--overflow-${this.overflow}`] = true;
    }

    // Padding classes
    if (this.p) classes[`ui-box--p-${this.p}`] = true;
    if (this.px) classes[`ui-box--px-${this.px}`] = true;
    if (this.py) classes[`ui-box--py-${this.py}`] = true;
    if (this.pt) classes[`ui-box--pt-${this.pt}`] = true;
    if (this.pr) classes[`ui-box--pr-${this.pr}`] = true;
    if (this.pb) classes[`ui-box--pb-${this.pb}`] = true;
    if (this.pl) classes[`ui-box--pl-${this.pl}`] = true;

    // Margin classes
    if (this.m) classes[`ui-box--m-${this.m}`] = true;
    if (this.mx) classes[`ui-box--mx-${this.mx}`] = true;
    if (this.my) classes[`ui-box--my-${this.my}`] = true;
    if (this.mt) classes[`ui-box--mt-${this.mt}`] = true;
    if (this.mr) classes[`ui-box--mr-${this.mr}`] = true;
    if (this.mb) classes[`ui-box--mb-${this.mb}`] = true;
    if (this.ml) classes[`ui-box--ml-${this.ml}`] = true;

    // Visual styles
    if (this.rounded) classes['ui-box--rounded'] = true;
    if (this.shadow) classes['ui-box--shadow'] = true;
    if (this.border) classes['ui-box--border'] = true;

    return classes;
  }
}