import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import type { LocalizeFunc } from "../../common/translations/localize";
import "../../components/ha-alert";
import "../../components/ha-button";
import "../../components/progress/ha-progress-bar";
import type { BackupOnboardingInfo } from "../../data/backup_onboarding";
import { onBoardingStyles } from "../styles";

@customElement("onboarding-restore-backup-status")
class OnboardingRestoreBackupStatus extends LitElement {
  @property({ attribute: false }) public localize!: LocalizeFunc;

  @property({ attribute: false })
  public backupInfo!: BackupOnboardingInfo;

  render() {
    return html`
      <h1>
        ${this.localize(
          `ui.panel.page-onboarding.restore.${this.backupInfo.state === "restore_backup" ? "in_progress" : "failed"}`
        )}
      </h1>
      ${this.backupInfo.state === "restore_backup"
        ? html` <p>
            ${this.localize(
              `ui.panel.page-onboarding.restore.in_progress_description`
            )}
          </p>`
        : nothing}
      <div class="card-content">
        ${this.backupInfo.state === "restore_backup"
          ? html`
              <div class="loading">
                <ha-progress-bar indeterminate></ha-progress-bar>
              </div>
            `
          : html`
              <ha-alert alert-type="error">
                ${this.localize(
                  "ui.panel.page-onboarding.restore.failed_status_description"
                )}
              </ha-alert>
              ${this.backupInfo.last_action_event?.reason
                ? html`
                    <div class="failed">
                      <h4>Error:</h4>
                      ${this.backupInfo.last_action_event?.reason}
                    </div>
                  `
                : nothing}
            `}
      </div>
      ${this.backupInfo.state !== "restore_backup"
        ? html`<div class="actions">
            <ha-button @click=${this._back}>
              ${this.localize("ui.panel.page-onboarding.restore.back")}
            </ha-button>
          </div>`
        : nothing}
    `;
  }

  private _back() {
    fireEvent(this, "restore-backup-back");
  }

  static get styles(): CSSResultGroup {
    return [
      onBoardingStyles,
      css`
        h1,
        p {
          text-align: left;
        }
        .actions {
          display: flex;
          justify-content: flex-end;
        }
        .loading {
          display: flex;
          justify-content: center;
          padding: 32px;
        }
        p {
          text-align: center;
          padding: 0 16px;
          font-size: var(--ha-font-size-l);
        }
        .failed {
          padding: 16px 0;
          font-size: var(--ha-font-size-l);
        }
        ha-progress-bar {
          width: 100%;
        }
      `,
    ];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "onboarding-restore-backup-status": OnboardingRestoreBackupStatus;
  }
  interface HASSDomEvents {
    "restore-started";
  }
}
