<div class="habit-tracker-container">
  <div class="navigation-bar">
    <div class="nav-controls">
      <button
        mat-icon-button
        (click)="prevWeek()"
        [matTooltip]="T.F.SIMPLE_COUNTER.HABIT_TRACKER.PREV_WEEK | translate"
      >
        <mat-icon>chevron_left</mat-icon>
      </button>
      <span class="range-label">{{ dateRangeLabel() }}</span>
      <button
        mat-icon-button
        (click)="nextWeek()"
        [matTooltip]="T.F.SIMPLE_COUNTER.HABIT_TRACKER.NEXT_WEEK | translate"
        [disabled]="dayOffset() >= 0"
      >
        <mat-icon>chevron_right</mat-icon>
      </button>
    </div>
    <div class="nav-controls">
      <button
        mat-button
        (click)="resetToToday()"
        class="today-btn"
        [disabled]="dayOffset() === 0"
      >
        {{ T.F.SIMPLE_COUNTER.HABIT_TRACKER.TODAY | translate }}
      </button>
    </div>
  </div>

  <div
    class="habit-grid"
    cdkDropList
    [cdkDropListData]="simpleCounters()"
    (cdkDropListDropped)="drop($event)"
  >
    <div class="header-row">
      <div class="header-spacer"></div>
      @for (day of days(); track day.str) {
        <div class="day-header">
          <div class="day-name">
            {{ day.date | localeDate: 'EEE' : undefined : locale() }}
          </div>
          <div class="day-date">
            {{ day.date | localeDate: 'dd' : undefined : locale() }}
          </div>
        </div>
      }
    </div>

    @for (counter of simpleCounters(); track counter.id) {
      <div
        class="habit-row"
        cdkDrag
        [cdkDragStartDelay]="dragDelayForTouch()"
      >
        <div
          class="habit-title"
          (click)="openEditSettings(counter)"
          (contextmenu)="openEditSettings(counter); $event.preventDefault()"
        >
          @if (counter.icon && counter.icon.startsWith(':')) {
            <mat-icon
              [svgIcon]="counter.icon"
              class="habit-icon"
            ></mat-icon>
          } @else if (counter.icon) {
            <mat-icon class="habit-icon">{{ counter.icon }}</mat-icon>
          } @else {
            <div class="habit-initial">{{ counter.title.charAt(0).toUpperCase() }}</div>
          }
          <span class="habit-name">{{ counter.title }}</span>
        </div>
        @for (day of days(); track day.str) {
          <div
            class="day-cell"
            [class.is-disabled]="!isDayEnabled(counter, day.dow)"
            [attr.aria-disabled]="!isDayEnabled(counter, day.dow) || null"
            (click)="onCellClick(counter, day.str, day.dow)"
            (contextmenu)="onCellContextMenu($event, counter, day.str, day.dow)"
            (mousedown)="onPressStart(counter, day.str, day.dow)"
            (mouseup)="onPressEnd()"
            (mouseleave)="onPressEnd()"
            (touchstart)="onPressStart(counter, day.str, day.dow)"
            (touchend)="onPressEnd()"
          >
            <div
              class="check-circle"
              [class.is-done]="getVal(counter, day.str) >= (counter.streakMinValue || 1)"
            >
              @if (
                getProgress(counter, day.str) > 0 &&
                getProgress(counter, day.str) < 100 &&
                !isSimpleCompletion(counter)
              ) {
                <svg
                  class="progress-ring"
                  viewBox="0 0 32 32"
                >
                  <circle
                    class="progress-ring-circle"
                    stroke="currentColor"
                    stroke-width="2"
                    fill="transparent"
                    r="14"
                    cx="16"
                    cy="16"
                    [style.stroke-dasharray]="'88 88'"
                    [style.stroke-dashoffset]="
                      88 - (88 * getProgress(counter, day.str)) / 100
                    "
                  ></circle>
                </svg>
              }
              @if (isSimpleCompletion(counter) && getVal(counter, day.str) > 0) {
                <mat-icon>check</mat-icon>
              } @else if (getDisplayValue(counter, day.str)) {
                <span class="value-text">{{ getDisplayValue(counter, day.str) }}</span>
              }
            </div>
          </div>
        }
      </div>
    }
  </div>

  <div class="footer-actions">
    <button
      mat-stroked-button
      tabindex="1"
      (click)="addHabit()"
      class="add-habit-btn"
    >
      <mat-icon>playlist_add</mat-icon>
      <span class="mdc-button__label">{{
        T.F.SIMPLE_COUNTER.HABIT_TRACKER.ADD_HABIT | translate
      }}</span>
    </button>
  </div>

  @if (disabledSimpleCounters().length > 0) {
    <div class="disabled-section">
      <button
        class="disabled-section-header"
        (click)="showDisabled.set(!showDisabled())"
      >
        <mat-icon>{{ showDisabled() ? 'expand_less' : 'expand_more' }}</mat-icon>
        <span
          >{{ T.F.SIMPLE_COUNTER.HABIT_TRACKER.DISABLED_HABITS | translate }} ({{
            disabledSimpleCounters().length
          }})</span
        >
      </button>
      @if (showDisabled()) {
        <div class="disabled-list">
          @for (counter of disabledSimpleCounters(); track counter.id) {
            <div class="disabled-item">
              <div class="disabled-item-info">
                @if (counter.icon && counter.icon.startsWith(':')) {
                  <mat-icon [svgIcon]="counter.icon"></mat-icon>
                } @else if (counter.icon) {
                  <mat-icon>{{ counter.icon }}</mat-icon>
                }
                <span>{{ counter.title }}</span>
              </div>
              <div class="disabled-item-actions">
                <button
                  mat-icon-button
                  (click)="enableHabit(counter.id)"
                  [matTooltip]="T.F.SIMPLE_COUNTER.FORM.L_IS_ENABLED | translate"
                >
                  <mat-icon>visibility</mat-icon>
                </button>
                <button
                  mat-icon-button
                  (click)="openEditSettings(counter)"
                  [matTooltip]="T.G.EDIT | translate"
                >
                  <mat-icon>edit</mat-icon>
                </button>
                <button
                  mat-icon-button
                  (click)="deleteHabit(counter)"
                  [matTooltip]="T.G.DELETE | translate"
                >
                  <mat-icon>delete</mat-icon>
                </button>
              </div>
            </div>
          }
        </div>
      }
    </div>
  }
</div>
