import { html, LitElement, nothing, type PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button";
import "../../components/ha-spinner";
import { testAssistSatelliteConnection } from "../../data/assist_satellite";
import type { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
import { AssistantSetupStyles } from "./styles";

@customElement("ha-voice-assistant-setup-step-check")
export class HaVoiceAssistantSetupStepCheck extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public assistEntityId?: string;

  @state() private _status?: "success" | "timeout";

  @state() private _showLoader = false;

  protected override willUpdate(changedProperties: PropertyValues<this>): void {
    super.willUpdate(changedProperties);
    if (!this.hasUpdated) {
      this._testConnection();
      return;
    }
    if (
      this._status === "success" &&
      changedProperties.has("hass") &&
      this.hass.states[this.assistEntityId!]?.state === "idle"
    ) {
      this._nextStep();
    }
  }

  protected override render() {
    return html`<div class="content">
      ${this._status === "timeout"
        ? html`<img
              src="/static/images/voice-assistant/error.png"
              alt="Casita Home Assistant error logo"
            />
            <h1>
              ${this.hass.localize(
                "ui.panel.config.voice_assistants.satellite_wizard.check.failed_title"
              )}
            </h1>
            <p class="secondary">
              ${this.hass.localize(
                "ui.panel.config.voice_assistants.satellite_wizard.check.failed_secondary"
              )}
            </p>
            <div class="footer">
              <ha-button
                appearance="plain"
                href=${documentationUrl(
                  this.hass,
                  "/voice_control/troubleshooting/#i-dont-get-a-voice-response"
                )}
              >
                ${this.hass.localize(
                  "ui.panel.config.voice_assistants.satellite_wizard.check.help"
                )}</ha-button
              >
              <ha-button @click=${this._testConnection}
                >${this.hass.localize(
                  "ui.panel.config.voice_assistants.satellite_wizard.check.retry"
                )}</ha-button
              >
            </div>`
        : html`<img
              src="/static/images/voice-assistant/hi.png"
              alt="Casita Home Assistant hi logo"
            />
            <h1>
              ${this.hass.localize(
                "ui.panel.config.voice_assistants.satellite_wizard.check.title"
              )}
            </h1>
            <p class="secondary">
              ${this.hass.localize(
                "ui.panel.config.voice_assistants.satellite_wizard.check.secondary"
              )}
            </p>

            ${this._showLoader ? html`<ha-spinner></ha-spinner>` : nothing}`}
    </div>`;
  }

  private async _testConnection() {
    this._status = undefined;
    this._showLoader = false;
    const timeout = setTimeout(() => {
      this._showLoader = true;
    }, 3000);
    const result = await testAssistSatelliteConnection(
      this.hass,
      this.assistEntityId!
    );
    clearTimeout(timeout);
    this._showLoader = false;
    this._status = result.status;
  }

  private _nextStep() {
    fireEvent(this, "next-step", { noPrevious: true });
  }

  static styles = AssistantSetupStyles;
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-voice-assistant-setup-step-check": HaVoiceAssistantSetupStepCheck;
  }
}
