<app-data-table
  [columns]="columns()"
  [rows]="timezones()"
  [actions]="actions()"
  [totalRecords]="totalRecords()"
  [pageIndex]="queryState.pageIndex()"
  [pageSize]="queryState.pageSize()"
  tableTitle="Timezones"
  buttonTitle="Add"
  [showSearch]="true"
  [showAddButton]="true"
  searchPlaceholder="Search timezones..."
  [searchDebounceTime]="300"
  toolTip="Add Timezone"
  (addClicked)="onAddTimezone()"
  (searchChanged)="onSearch($event)"
  (pageChanged)="onPageChange($event)"
  (sortChanged)="onSortChange($event)"
  (actionClicked)="onActionClick($event)"
>
  <ng-template appDataTableCell="ianaId" let-value="value">
    <span class="block max-w-72 truncate font-semibold" title="{{ value }}">{{ value }}</span>
  </ng-template>
  <ng-template appDataTableCell="displayName" let-value="value">
    <span class="block max-w-72 truncate" title="{{ value }}">{{ value }}</span>
  </ng-template>
</app-data-table>

<app-confirm-dialog
  title="Delete Timezone"
  text="Do you really want to delete this timezone?"
  confirmButtonText="Delete"
  cancelButtonText="Cancel"
  (confirmed)="onDeleteConfirmed()"
  (cancelled)="onDeleteCancelled()"
/>

<modal
  [open]="showModal()"
  [title]="modalTitle()"
  size="md"
  [submitAction]="submitAction()"
  [submitLabel]="submitLabel()"
  [loadingLabel]="loadingLabel()"
  [loading]="saving() || modalLoading()"
  [showSubmitButton]="!isViewMode()"
  [cancelLabel]="isViewMode() ? 'Close' : 'Cancel'"
  (closed)="closeModal()"
  (submitted)="saveTimezone()"
>
  @if (modalLoading()) {
    <div class="flex min-h-32 items-center justify-center" role="status" aria-live="polite">
      <span class="ti ti-loader-2 animate-spin text-2xl text-primary" aria-hidden="true"></span>
      <span class="ms-2">Loading timezone...</span>
    </div>
  } @else {
    <form [formGroup]="timezoneForm" (ngSubmit)="saveTimezone()" autocomplete="off">
      <div class="grid grid-cols-12 gap-x-5 gap-y-5">
        <div class="col-span-12 md:col-span-6">
          <app-form-input
            formControlName="ianaId"
            inputId="timezone-iana-id"
            variant="floating"
            label="IANA Timezone ID"
            placeholder="Id"
            help="e.g.: Asia/Kolkata"
            autocomplete="off"
            [required]="true"
            [readonly]="isViewMode()"
            [maxLength]="64"
            [submitAttempted]="submitAttempted()"
            [validationMessages]="{
              required: 'Timezone ID is required.',
              maxlength: 'Timezone ID must be 64 characters or fewer.',
              pattern: 'Use a valid IANA timezone ID, for example Asia/Kolkata or America/New_York.'
            }"
          />
        </div>
        <div class="col-span-12 md:col-span-6">
          <app-form-input
            formControlName="displayName"
            inputId="timezone-display-name"
            variant="floating"
            label="Display Name"
            placeholder="Name"
            help="e.g.: India Standard Time"
            autocomplete="off"
            [required]="true"
            [readonly]="isViewMode()"
            [maxLength]="128"
            [submitAttempted]="submitAttempted()"
            [validationMessages]="{
              required: 'Timezone display name is required.',
              maxlength: 'Timezone display name must be 128 characters or fewer.',
              pattern: 'Timezone display name cannot contain only whitespace.'
            }"
          />
        </div>
        <div class="col-span-12 md:col-span-6">
          <app-form-input
            formControlName="utcOffsetMinutes"
            inputId="timezone-utc-offset"
            variant="floating"
            label="UTC Offset (minutes)"
            type="number"
            inputMode="numeric"
            placeholder="Minutes"
            help="Enter an offset from -720 (-12:00) to 840 (+14:00)."
            [required]="true"
            [readonly]="isViewMode()"
            [min]="-720"
            [max]="840"
            [step]="1"
            [submitAttempted]="submitAttempted()"
            [validationMessages]="{
              required: 'UTC offset is required.',
              min: 'UTC offset must be between -12:00 and +14:00.',
              max: 'UTC offset must be between -12:00 and +14:00.'
            }"
          />
        </div>
        @if (isViewMode() && selectedTimezone(); as timezone) {
          <div class="col-span-12 md:col-span-6 pt-1">
            <span class="block text-sm text-textmuted">Formatted UTC Offset</span>
            <span class="mt-2 block font-semibold">{{ formatUtcOffset(timezone.utcOffsetMinutes) }}</span>
          </div>
          <div class="col-span-12 md:col-span-6">
            <span class="block text-sm text-textmuted">Status</span>
            <span class="badge mt-2" [class.bg-success]="timezone.isActive" [class.bg-danger]="!timezone.isActive">
              {{ timezone.isActive ? 'Active' : 'Inactive' }}
            </span>
          </div>
        }
      </div>
    </form>
  }
</modal>
