<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<nz-spin [nzSpinning]="loading" [nzTip]="'Loading...'" nzSize="large">
  <div class="status-header">
    <div class="status-container" style="padding: 0 16px">
      <h3 style="margin: 0; padding: 0; font-size: 16px">{{ 'status.page' | i18n }}</h3>
      <header-i18n showLangText="false" class="langs"></header-i18n>
    </div>
  </div>
  <div class="status-banner" [style]="'background:' + (statusOrg.color || 'transparent')">
    <a [href]="statusOrg.home" target="_blank">
      <img class="status-logo" [src]="statusOrg.logo" alt="" />
    </a>
  </div>
</nz-spin>

<nz-spin *ngIf="showMode == 'component'" [nzSpinning]="loading" [nzTip]="'Loading...'" nzSize="large">
  <div class="status-content">
    <div class="status-container" style="padding: 20px 0">
      <h3 style="margin: 0; padding: 0; font-size: 16px">{{ statusOrg.name }}</h3>
      <a
        *ngIf="statusOrg.feedback"
        [href]="statusOrg.feedback.includes('@') ? 'mailto:' + statusOrg.feedback : statusOrg.feedback"
        target="_blank"
      >
        <button nzType="primary" nz-button>
          {{ 'status.public.feedback' | i18n }}
          <span nz-icon nzType="question-circle"></span>
        </button>
      </a>
    </div>
    <div
      *ngIf="statusOrg.state == 0"
      class="org-status br-8"
      style="background-color: #28a745; display: flex; justify-content: space-between"
    >
      <div>
        <span nz-icon style="color: #f0f0f0" nzType="check-circle" nzTheme="outline"></span>
        <span style="color: #f0f0f0; margin-left: 5px"> {{ 'status.public.org.state.0' | i18n }} </span>
      </div>
      <div>
        <span style="color: #f0f0f0; margin-right: 4px; font-size: 1rem">
          <i nz-icon nzType="field-time"></i> {{ statusOrg.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}
        </span>
      </div>
    </div>
    <div
      *ngIf="statusOrg.state == 1"
      class="org-status br-8"
      style="background-color: #e56c23; display: flex; justify-content: space-between"
    >
      <div>
        <span nz-icon style="color: #f0f0f0" nzType="exclamation-circle" nzTheme="outline"></span>
        <span style="color: #f0f0f0; margin-left: 5px"> {{ 'status.public.org.state.1' | i18n }} </span>
      </div>
      <div>
        <span style="color: #f0f0f0; margin-right: 4px; font-size: 1rem">
          <i nz-icon nzType="field-time"></i> {{ statusOrg.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}
        </span>
      </div>
    </div>
    <div
      *ngIf="statusOrg.state == 2"
      class="org-status br-8"
      style="background-color: #ff2f2f; display: flex; justify-content: space-between"
    >
      <div>
        <span nz-icon style="color: #f0f0f0" nzType="close-circle" nzTheme="outline"></span>
        <span style="color: #f0f0f0; margin-left: 5px"> {{ 'status.public.org.state.2' | i18n }} </span>
      </div>
      <div>
        <span style="color: #f0f0f0; margin-right: 4px; font-size: 1rem">
          <i nz-icon nzType="field-time"></i> {{ statusOrg.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}
        </span>
      </div>
    </div>
    <div style="margin-top: 20px">
      <div *ngFor="let component of componentStatus" class="component-status br-8">
        <div style="margin: 10px; display: flex; justify-content: space-between">
          <div style="font-weight: bold; font-size: 1rem">
            <span>{{ component.info.name }}</span>
            <span
              style="margin-left: 5px"
              nz-icon
              nzType="question-circle"
              nzTheme="outline"
              nz-tooltip
              nzTooltipPlacement="right"
              [nzTooltipTitle]="component.info.description"
            ></span>
          </div>
          <div *ngIf="component.info.state == 0" style="font-weight: bold">
            <span style="color: #28a745">{{ 'status.component.state.0' | i18n }}</span>
            <span nz-icon style="color: #28a745; margin-left: 5px" nzType="check-circle" nzTheme="outline"></span>
          </div>
          <div *ngIf="component.info.state == 1" style="font-weight: bold">
            <span style="color: #ff2f2f">{{ 'status.component.state.1' | i18n }}</span>
            <span nz-icon style="color: #ff2f2f; margin-left: 5px" nzType="exclamation-circle" nzTheme="outline"></span>
          </div>
          <div *ngIf="component.info.state == 2" style="font-weight: bold">
            <span>{{ 'status.component.state.2' | i18n }}</span>
            <span nz-icon style="margin-left: 5px" nzType="stop" nzTheme="outline"></span>
          </div>
        </div>
        <div style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px; display: flex">
          <div
            *ngFor="let historyItem of component.history"
            class="history-block br-8"
            [style]="'background:' + calculateHistoryBlockRgb(historyItem)"
            nz-popover
            [nzPopoverContent]="contentTemplate"
            nzPopoverPlacement="bottom"
          >
            <ng-template #contentTemplate>
              <div>
                <p style="font-weight: bold">{{ historyItem.timestamp | date : 'YYYY-MM-dd HH:mm:ss' }}</p>
                <p>Uptime {{ (100 * historyItem.uptime).toFixed(2) }}%</p>
                <p>{{ 'status.component.state.0' | i18n }} {{ historyItem.normal }}s</p>
                <p>{{ 'status.component.state.1' | i18n }} {{ historyItem.abnormal }}s</p>
                <p>{{ 'status.component.state.2' | i18n }} {{ historyItem.unknowing }}s</p>
              </div>
            </ng-template>
          </div>
        </div>
        <div style="margin: 10px; display: flex; justify-content: space-between; font-size: 0.75rem">
          <span>{{ 'status.public.today' | i18n }}</span>
          <span>{{ 'status.public.30-day' | i18n }}</span>
        </div>
      </div>
    </div>
  </div>
</nz-spin>

<nz-spin *ngIf="showMode == 'incident'" [nzSpinning]="incidentLoading" [nzTip]="'Loading...'" nzSize="large">
  <div class="status-content">
    <div class="status-container" style="padding: 0 0">
      <h3 style="margin: 0; padding: 0">{{ 'status.public.to-incident' | i18n }} </h3>
      <div>
        <nz-date-picker
          nzAllowClear="false"
          nzMode="year"
          [(ngModel)]="incidentYear"
          (ngModelChange)="loadStatusPageIncident()"
          [nzDisabledDate]="disabledDatePick"
        ></nz-date-picker>
        <button
          nz-button
          nzType="primary"
          nz-tooltip
          (click)="loadStatusPageIncident()"
          [nzTooltipTitle]="'common.refresh' | i18n"
          style="margin-left: 4px"
        >
          <i nz-icon nzType="sync" nzTheme="outline"></i>
        </button>
      </div>
    </div>
    <div class="status-incident">
      <nz-collapse>
        @for (incident of incidentStatus; track incident) {
        <nz-collapse-panel
          [nzHeader]="incident.name"
          [nzExtra]="incidentHeaderExtra"
          nzShowArrow="true"
          [style]="{ 'font-size': '14px', 'font-weight': 'bold' }"
        >
          <div style="margin-bottom: 20px; display: flex; justify-content: space-between; font-size: 14px; font-weight: normal">
            <span>
              {{ 'status.incident.public.start-at' | i18n }} {{ incident.startTime || incident.endTime | date : 'YYYY-MM-dd HH:mm:ss' }}
            </span>
            <span>
              {{ 'status.incident.public.update-at' | i18n }} {{ incident.endTime || incident.startTime | date : 'YYYY-MM-dd HH:mm:ss' }}
            </span>
          </div>

          <nz-timeline>
            @for (content of incident.contents; track content) {
            <nz-timeline-item nzColor="gray">
              <nz-card nzSize="small" style="width: 100%">
                <nz-list nzSize="small" nzSplit="false">
                  <nz-list-item style="color: #666666; padding: 0; font-weight: normal">
                    <span>{{ content.timestamp | date : 'YYYY-MM-dd HH:mm:ss' }}</span>
                    <nz-tag [nzBordered]="false" *ngIf="content.state == 0" [nzColor]="'#ff2f2f'">
                      {{ 'status.incident.state.0' | i18n }}
                    </nz-tag>
                    <nz-tag [nzBordered]="false" *ngIf="content.state == 1" [nzColor]="'#e56c23'">
                      {{ 'status.incident.state.1' | i18n }}
                    </nz-tag>
                    <nz-tag [nzBordered]="false" *ngIf="content.state == 2" [nzColor]="'#19a7e7'">
                      {{ 'status.incident.state.2' | i18n }}
                    </nz-tag>
                    <nz-tag [nzBordered]="false" *ngIf="content.state == 3" [nzColor]="'#28a745'">
                      {{ 'status.incident.state.3' | i18n }}
                    </nz-tag>
                  </nz-list-item>
                  <nz-list-item style="padding: 10px 0; font-weight: normal">
                    {{ content.message }}
                  </nz-list-item>
                </nz-list>
              </nz-card>
            </nz-timeline-item>
            }
          </nz-timeline>
          <ng-template #incidentHeaderExtra>
            <span [ngStyle]="{ color: getStatusBorderColor(incident.state) }">
              {{ 'status.incident.state.' + incident.state | i18n }}
            </span>
          </ng-template>
        </nz-collapse-panel>
        }
      </nz-collapse>
    </div>
  </div>
</nz-spin>

<nz-divider style="margin: 20px 0"></nz-divider>

<div *ngIf="showMode == 'component'">
  <div class="status-container" style="padding: 0 0 100px 0; font-size: 0.75rem">
    <a nz-button nzType="link" href="https://github.com/apache/hertzbeat" target="_blank" style="padding: 0">
      {{ 'status.public.power-by' | i18n }}
    </a>
    <button nzType="text" (click)="showIncident()" nz-button>
      {{ 'status.public.to-incident' | i18n }} <span nz-icon nzType="right-circle"></span
    ></button>
  </div>
</div>

<div *ngIf="showMode == 'incident'">
  <div class="status-container" style="padding: 0 0 100px 0; font-size: 0.75rem">
    <a nz-button nzType="link" href="https://github.com/apache/hertzbeat" target="_blank" style="padding: 0">
      {{ 'status.public.power-by' | i18n }}
    </a>
    <button nzType="text" (click)="showComponent()" nz-button>
      <span nz-icon nzType="left-circle"></span> {{ 'status.public.to-component' | i18n }}
    </button>
  </div>
</div>
