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

type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
type ContainerPadding = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
type ContainerVariant = 'default' | 'card' | 'section' | 'hero' | 'flex' | 'grid' | 'centered' | 'prose';
type ContainerBackground = 'transparent' | 'surface' | 'surface-secondary' | 'surface-elevated';
type FlexDirection = 'row' | 'column';
type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
type GridColumns = 2 | 3 | 4 | 'auto';
type ScrollDirection = 'y' | 'x' | 'both';

@Component({
  selector: 'ui-container',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      [ngClass]="getClasses()"
      [style.max-width]="customMaxWidth"
      [style.min-height]="customMinHeight"
      [style.max-height]="customMaxHeight"
      [attr.role]="role">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './container.component.scss'
})
export class ContainerComponent {
  @Input() size: ContainerSize = 'lg';
  @Input() variant: ContainerVariant = 'default';
  @Input() background: ContainerBackground = 'transparent';
  @Input() padding?: ContainerPadding;
  @Input() paddingY?: ContainerPadding;
  @Input() flexDirection?: FlexDirection;
  @Input() flexJustify?: FlexJustify;
  @Input() gridColumns?: GridColumns;
  @Input() scrollable?: ScrollDirection;
  @Input() responsive = true;
  @Input() customMaxWidth?: string;
  @Input() customMinHeight?: string;
  @Input() customMaxHeight?: string;
  @Input() role?: string;

  getClasses(): Record<string, boolean> {
    const classes: Record<string, boolean> = {
      'ui-container': true,
      [`ui-container--${this.size}`]: true,
      'ui-container--responsive': this.responsive
    };

    if (this.variant !== 'default') {
      classes[`ui-container--${this.variant}`] = true;
    }

    if (this.background !== 'transparent') {
      classes[`ui-container--${this.background}`] = true;
    }

    if (this.padding) {
      classes[`ui-container--padding-${this.padding}`] = true;
    }

    if (this.paddingY) {
      classes[`ui-container--padding-y-${this.paddingY}`] = true;
    }

    if (this.flexDirection && this.variant === 'flex') {
      classes[`ui-container--flex-${this.flexDirection}`] = true;
    }

    if (this.flexJustify && this.variant === 'flex') {
      classes[`ui-container--flex-${this.flexJustify}`] = true;
    }

    if (this.gridColumns && this.variant === 'grid') {
      classes[`ui-container--grid-${this.gridColumns}`] = true;
    }

    if (this.scrollable === 'y') {
      classes['ui-container--scrollable'] = true;
    } else if (this.scrollable === 'x') {
      classes['ui-container--scrollable-x'] = true;
    } else if (this.scrollable === 'both') {
      classes['ui-container--scrollable-both'] = true;
    }

    return classes;
  }
}