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

type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto-fit' | 'auto-fill';
type GridGap = 'sm' | 'md' | 'lg';
type GridPadding = 'none' | 'sm' | 'md' | 'lg';
type GridRowMode = 'auto' | 'equal' | 'min-content' | 'max-content';
type GridJustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
type GridAlignContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
type GridAlignItems = 'start' | 'center' | 'end' | 'stretch';

@Component({
  selector: 'ui-grid-container',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-grid-container"
      [class.ui-grid-container--gap-sm]="gap === 'sm'"
      [class.ui-grid-container--gap-md]="gap === 'md'"
      [class.ui-grid-container--gap-lg]="gap === 'lg'"
      [class.ui-grid-container--padding-none]="padding === 'none'"
      [class.ui-grid-container--padding-sm]="padding === 'sm'"
      [class.ui-grid-container--padding-md]="padding === 'md'"
      [class.ui-grid-container--padding-lg]="padding === 'lg'"
      [class.ui-grid-container--cols-1]="columns === 1"
      [class.ui-grid-container--cols-2]="columns === 2"
      [class.ui-grid-container--cols-3]="columns === 3"
      [class.ui-grid-container--cols-4]="columns === 4"
      [class.ui-grid-container--cols-5]="columns === 5"
      [class.ui-grid-container--cols-6]="columns === 6"
      [class.ui-grid-container--auto-fit]="columns === 'auto-fit'"
      [class.ui-grid-container--auto-fill]="columns === 'auto-fill'"
      [class.ui-grid-container--rows-auto]="rowMode === 'auto'"
      [class.ui-grid-container--rows-equal]="rowMode === 'equal'"
      [class.ui-grid-container--rows-min-content]="rowMode === 'min-content'"
      [class.ui-grid-container--rows-max-content]="rowMode === 'max-content'"
      [class.ui-grid-container--dense]="dense"
      [class.ui-grid-container--justify-start]="justifyContent === 'start'"
      [class.ui-grid-container--justify-center]="justifyContent === 'center'"
      [class.ui-grid-container--justify-end]="justifyContent === 'end'"
      [class.ui-grid-container--justify-space-between]="justifyContent === 'space-between'"
      [class.ui-grid-container--justify-space-around]="justifyContent === 'space-around'"
      [class.ui-grid-container--justify-space-evenly]="justifyContent === 'space-evenly'"
      [class.ui-grid-container--align-start]="alignContent === 'start'"
      [class.ui-grid-container--align-center]="alignContent === 'center'"
      [class.ui-grid-container--align-end]="alignContent === 'end'"
      [class.ui-grid-container--align-space-between]="alignContent === 'space-between'"
      [class.ui-grid-container--align-space-around]="alignContent === 'space-around'"
      [class.ui-grid-container--align-space-evenly]="alignContent === 'space-evenly'"
      [class.ui-grid-container--items-start]="alignItems === 'start'"
      [class.ui-grid-container--items-center]="alignItems === 'center'"
      [class.ui-grid-container--items-end]="alignItems === 'end'"
      [class.ui-grid-container--items-stretch]="alignItems === 'stretch'"
      [style.grid-template-columns]="customColumns || null"
      [style.grid-template-rows]="customRows || null"
      [style.grid-template-areas]="templateAreas || null"
      [attr.role]="role"
      [attr.aria-label]="ariaLabel">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './grid-container.component.scss'
})
export class GridContainerComponent {
  @Input() columns: GridColumns = 'auto-fit';
  @Input() gap: GridGap = 'md';
  @Input() padding: GridPadding = 'md';
  @Input() rowMode: GridRowMode = 'auto';
  @Input() dense = false;
  @Input() justifyContent: GridJustifyContent | null = null;
  @Input() alignContent: GridAlignContent | null = null;
  @Input() alignItems: GridAlignItems = 'stretch';
  
  // Advanced CSS Grid Properties
  @Input() customColumns: string | null = null;
  @Input() customRows: string | null = null;
  @Input() templateAreas: string | null = null;
  
  // Accessibility
  @Input() role: string = 'grid';
  @Input() ariaLabel: string | null = null;
}