import { CSSResultGroup, LitElement, PropertyValues, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import {
  hasConfigOrEntityChanged,
  fireEvent,
  HomeAssistant,
  ServiceCallRequest,
} from 'custom-card-helpers';
import registerTemplates from 'ha-template';
import get from 'lodash/get';
import localize, { localizeValue } from './localize';
import styles from './styles.css';
import buildConfig from './config';
import {
  Template,
  LawnMowerCardAction,
  LawnMowerCardConfig,
  LawnMowerEntity,
  HassEntity,
  LawnMowerEntityState,
  LawnMowerServiceCallParams,
  LawnMowerActionParams,
} from './types';
import DEFAULT_IMAGE from './lawn-mower.svg';

registerTemplates();

// String in the right side will be replaced by Rollup
const PKG_VERSION = 'PKG_VERSION_VALUE';

console.info(
  `%c LAWN-MOWER-CARD %c ${PKG_VERSION}`,
  'color: white; background: blue; font-weight: 700;',
  'color: blue; background: white; font-weight: 700;',
);

if (!customElements.get('ha-icon-button')) {
  customElements.define(
    'ha-icon-button',
    class extends (customElements.get('paper-icon-button') ?? HTMLElement) {},
  );
}

@customElement('lawn-mower-card')
export class LawnMowerCard extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private config!: LawnMowerCardConfig;
  @state() private requestInProgress = false;
  @state() private thumbUpdater: ReturnType<typeof setInterval> | null = null;

  static get styles(): CSSResultGroup {
    return styles;
  }

  public static async getConfigElement() {
    await import('./editor');
    return document.createElement('lawn-mower-card-editor');
  }

  static getStubConfig(_: unknown, entities: string[]) {
    const [lawnMowerEntity] = entities.filter((eid) =>
      eid.startsWith('lawn_mower'),
    );

    return {
      entity: lawnMowerEntity ?? '',
    };
  }

  get entity(): LawnMowerEntity | undefined {
    if (!this.hass || !this.config?.entity) {
      return undefined;
    }
    return this.hass.states[this.config.entity] as LawnMowerEntity;
  }

  get map(): HassEntity | null {
    if (!this.hass || !this.config.map) {
      return null;
    }
    return this.hass.states[this.config.map];
  }

  public setConfig(config: LawnMowerCardConfig): void {
    this.config = buildConfig(config);
  }

  public getCardSize(): number {
    if (!this.config) {
      return 3;
    }
    return this.config.compact_view ? 3 : 8;
  }

  public shouldUpdate(changedProps: PropertyValues): boolean {
    if (!this.config) {
      return false;
    }
    return hasConfigOrEntityChanged(this, changedProps, false);
  }

  protected updated(changedProps: PropertyValues) {
    if (!this.config) {
      return;
    }
    if (
      changedProps.get('hass') &&
      this.config.entity &&
      (changedProps.get('hass') as HomeAssistant).states[this.config.entity]
        .state !== this.hass.states[this.config.entity].state
    ) {
      this.requestInProgress = false;
    }
  }

  public connectedCallback() {
    super.connectedCallback();
    if (!this.config) {
      return;
    }
    if (!this.config.compact_view && this.map) {
      this.requestUpdate();
      this.thumbUpdater = setInterval(
        () => this.requestUpdate(),
        this.config.map_refresh * 1000,
      );
    }
  }

  public disconnectedCallback() {
    super.disconnectedCallback();
    if (this.map && this.thumbUpdater) {
      clearInterval(this.thumbUpdater);
    }
  }

  private handleMore(entityId: string = this.entity?.entity_id || ''): void {
    fireEvent(
      this,
      'hass-more-info',
      {
        entityId,
      },
      {
        bubbles: false,
        composed: true,
      },
    );
  }

  private callService(action: LawnMowerCardAction) {
    const { service, service_data } = action;
    const [domain, name] = service.split('.');
    this.hass.callService(domain, name, service_data);
  }

  private callLawnMowerService(
    service: ServiceCallRequest['service'],
    params: LawnMowerServiceCallParams = { request: true },
    options: ServiceCallRequest['serviceData'] = {},
  ) {
    if (!this.config?.entity) {
      return;
    }
    this.hass.callService('lawn_mower', service, {
      entity_id: this.config.entity,
      ...options,
    });

    if (params.request) {
      this.requestInProgress = true;
      this.requestUpdate();
    }
  }

  private handleSpeed(e: PointerEvent): void {
    const fan_speed = (<HTMLDivElement>e.target).getAttribute('value');
    this.callLawnMowerService(
      'set_fan_speed',
      { request: false },
      { fan_speed },
    );
  }

  private handleLawnMowerAction(
    action: string,
    params: LawnMowerActionParams = { request: true },
  ) {
    return () => {
      if (!this.config.actions[action]) {
        return this.callLawnMowerService(
          params.defaultService || action,
          params,
        );
      }

      this.callService(this.config.actions[action]);
    };
  }

  private getAttributes(entity: LawnMowerEntity) {
    const { status, state, activity } = entity.attributes;

    return {
      ...entity.attributes,
      // Use activity attribute (Gardena) or raw_activity (other brands) for detailed status
      raw_activity: entity.attributes.raw_activity ?? activity,
      // Prefer entity.state (HA mapped state like "docked", "mowing") over
      // attributes.status/state which may be device-level (e.g. Gardena "OK")
      status: status ?? state ?? entity.state,
    };
  }

  private getBatteryIcon(level: number, isCharging: boolean): string {
    const prefix = isCharging ? 'mdi:battery-charging' : 'mdi:battery';
    if (level > 90)
      return isCharging ? 'mdi:battery-charging-100' : 'mdi:battery';
    if (level < 10)
      return isCharging
        ? 'mdi:battery-charging-outline'
        : 'mdi:battery-outline';
    const iconLevel = Math.floor(level / 10) * 10;
    return `${prefix}-${iconLevel}`;
  }

  private findBatterySensor(): string | undefined {
    const mainEntity = this.config.entity;
    const entities = (this.hass as Record<string, unknown>).entities as
      | Record<string, Record<string, unknown>>
      | undefined;
    const deviceId = entities?.[mainEntity]?.device_id;
    if (!deviceId) return undefined;
    const entries = Object.entries(entities || {});
    for (const [id, e] of entries) {
      if (
        (e as Record<string, unknown>).device_id === deviceId &&
        id.startsWith('sensor.') &&
        this.hass.states[id]?.attributes?.device_class === 'battery'
      ) {
        return id;
      }
    }
    return undefined;
  }

  private renderBattery(): Template {
    let battery_level;
    let battery_icon;
    let entityId = this.config.battery;
    const isCharging = this.entity?.attributes?.battery_state === 'CHARGING';

    if (entityId) {
      battery_level = Number(this.hass.states[entityId].state);
      if (isNaN(battery_level)) {
        return nothing;
      }

      battery_icon = this.getBatteryIcon(battery_level, isCharging);
    } else {
      ({ battery_level, battery_icon } = this.getAttributes(this.entity!));

      // Calculate icon from battery_level if no battery_icon attribute (e.g. Gardena)
      if (!battery_icon && battery_level != null) {
        const level = Number(battery_level);
        if (isNaN(level)) {
          return nothing;
        }
        battery_icon = this.getBatteryIcon(level, isCharging);
      }

      // Auto-detect battery sensor on same device if no level found
      if (battery_level == null) {
        entityId = this.findBatterySensor();
        if (entityId && this.hass.states[entityId]) {
          battery_level = Number(this.hass.states[entityId].state);
          if (!isNaN(battery_level)) {
            battery_icon = this.getBatteryIcon(battery_level, isCharging);
          }
        }
      }
    }

    return html`
      <div class="tip" @click="${() => this.handleMore(entityId)}">
        <ha-icon icon="${battery_icon}"></ha-icon>
        <span class="icon-title">${battery_level}%</span>
      </div>
    `;
  }

  private renderTemperature(): Template {
    let value;
    let icon;
    const entityId = this.config.temperature;

    if (entityId) {
      value = Number(this.hass.states[entityId].state);
      if (isNaN(value)) {
        return nothing;
      }
      icon = 'mdi:thermometer';
    } else {
      return nothing;
    }

    return html`
      <div class="tip" @click="${() => this.handleMore(entityId)}">
        <ha-icon icon="${icon}"></ha-icon>
        <span class="icon-title">${value}°C</span>
      </div>
    `;
  }

  private renderHumidity(): Template {
    let value;
    let icon;
    const entityId = this.config.humidity;

    if (entityId) {
      value = Number(this.hass.states[entityId].state);
      if (isNaN(value)) {
        return nothing;
      }
      icon = 'mdi:water-percent';
    } else {
      return nothing;
    }

    return html`
      <div class="tip" @click="${() => this.handleMore(entityId)}">
        <ha-icon icon="${icon}"></ha-icon>
        <span class="icon-title">${value}%</span>
      </div>
    `;
  }

  private renderMapOrImage(state: LawnMowerEntityState): Template {
    if (!this.config.compact_view && this.map) {
      return this.map?.attributes?.entity_picture
        ? html`
            <img
              class="map"
              src="${this.map.attributes.entity_picture}&v=${Date.now()}"
              @click=${() => this.handleMore(this.config.map)}
            />
          `
        : nothing;
    }

    const src =
      this.config.image === 'default' ? DEFAULT_IMAGE : this.config.image;
    const animated = this.config.animated ? ' animated' : '';

    return html`
      <img
        class="lawn-mower ${state}${animated}"
        src="${src}"
        @click="${() => this.handleMore()}"
      />
    `;
  }

  private renderStats(state: LawnMowerEntityState): Template {
    const statsList =
      this.config.stats[state] || this.config.stats.default || [];

    const stats = statsList.map(
      ({ entity_id, attribute, value_template, unit, subtitle }) => {
        if (!entity_id && !attribute) {
          return nothing;
        }

        let state = '';

        if (entity_id && attribute) {
          state = get(this.hass.states[entity_id].attributes, attribute);
        } else if (attribute) {
          state = get(this.entity?.attributes, attribute);
        } else if (entity_id) {
          state = this.hass.states[entity_id].state;
        } else {
          return nothing;
        }

        const localizedState = localizeValue(state);

        const value = value_template
          ? html`
              <ha-template
                hass=${this.hass}
                template=${value_template}
                value=${localizedState}
                variables=${{ value: localizedState }}
              ></ha-template>
            `
          : html`${localizedState}`;

        return html`
          <div class="stats-block" @click="${() => this.handleMore(entity_id)}">
            <span class="stats-value">${value}</span>
            ${unit}
            <div class="stats-subtitle">${subtitle}</div>
          </div>
        `;
      },
    );

    if (!stats.length) {
      return nothing;
    }

    return html`<div class="stats">${stats}</div>`;
  }

  private renderName(): Template {
    const { friendly_name } = this.getAttributes(this.entity!);

    if (!this.config.show_name) {
      return nothing;
    }

    return html` <div class="lawn-mower-name">${friendly_name}</div> `;
  }

  private renderStatus(): Template {
    if (!this.config.show_status) {
      return nothing;
    }
    const { status, raw_activity } = this.getAttributes(this.entity!);

    let actualStatus = status;
    if (raw_activity) {
      //use raw_activity instead of status because it is more detailed
      actualStatus = raw_activity;
    }
    const localizedStatus =
      localize(`status.${actualStatus.toLowerCase()}`) || actualStatus;

    const progressBar = html`
      <ha-circular-progress
        .indeterminate="true"
        size="small"
      ></ha-circular-progress>
    `;

    return html`
      <div class="status">
        <span
          class="status-text"
          alt=${localizedStatus}
          title="${actualStatus}"
        >
          ${localizedStatus}
        </span>
        ${this.requestInProgress ? progressBar : ''}
      </div>
    `;
  }

  private renderShortcuts(): Template {
    if (!this.config.show_shortcuts) {
      return nothing;
    }

    const buttons = this.config.shortcuts.map(
      ({ name, service, icon, service_data, link }) => {
        if (link) {
          return html` <ha-icon-button label="${name}">
            <a
              rel="noreferrer"
              href="${link}"
              target="_blank"
              style="--icon-primary-color: var(--vc-toolbar-icon-color); color: var(--vc-toolbar-icon-color);"
            >
              <ha-icon
                icon="${icon}"
                style="--icon-primary-color: var(--vc-toolbar-icon-color); color: var(--vc-toolbar-icon-color);"
              ></ha-icon>
            </a>
          </ha-icon-button>`;
        } else {
          const execute = () => {
            if (service) {
              return this.callService({ service, service_data });
            }
          };
          return html`
            <ha-icon-button label="${name}" @click="${execute}">
              <ha-icon icon="${icon}"></ha-icon>
            </ha-icon-button>
          `;
        }
      },
    );

    return html` <div class="shortcuts">${buttons}</div> `;
  }

  private renderToolbar(state: LawnMowerEntityState): Template {
    const { raw_activity } = this.getAttributes(this.entity!);

    if (!this.config.show_toolbar) {
      return nothing;
    }

    switch (state) {
      case 'on':
      case 'auto':
      case 'spot':
      case 'edge':
      case 'single_room':
      case 'edgecut':
      case 'mowing': {
        return html`
          <div class="toolbar">
            <paper-button @click="${this.handleLawnMowerAction('pause')}">
              <ha-icon icon="hass:pause"></ha-icon>
              ${localize('common.pause')}
            </paper-button>
            <paper-button @click="${this.handleLawnMowerAction('stop')}">
              <ha-icon icon="hass:stop"></ha-icon>
              ${localize('common.stop')}
            </paper-button>
            <paper-button
              @click="${this.handleLawnMowerAction('dock')}"
            >
              <ha-icon icon="hass:home-map-marker"></ha-icon>
              ${localize('common.return_to_base')}
            </paper-button>
          </div>
        `;
      }

      case 'paused': {
        return html`
          <div class="toolbar">
            <paper-button
              @click="${this.handleLawnMowerAction('resume', {
                defaultService: 'start',
                request: true,
              })}"
            >
              <ha-icon icon="hass:play"></ha-icon>
              ${localize('common.continue')}
            </paper-button>
            <paper-button
              @click="${this.handleLawnMowerAction('dock')}"
            >
              <ha-icon icon="hass:home-map-marker"></ha-icon>
              ${localize('common.return_to_base')}
            </paper-button>
          </div>
        `;
      }

      case 'returning': {
        return html`
          <div class="toolbar">
            <paper-button @click="${this.handleLawnMowerAction('stop')}">
              <ha-icon icon="hass:stop"></ha-icon>
              ${localize('common.stop')}
            </paper-button>
          </div>
        `;
      }
      case 'docked':
      case 'idle':
      default: {
        const dockButton = html`
          <paper-button
            @click="${this.handleLawnMowerAction('dock')}"
          >
            <ha-icon icon="hass:home-map-marker"></ha-icon>
            ${localize('common.return_to_base')}
          </paper-button>
        `;

        const stopButton = html`
          <paper-button @click="${this.handleLawnMowerAction('stop')}">
            <ha-icon icon="hass:stop"></ha-icon>
            ${localize('common.stop')}
          </paper-button>
        `;

        const locateButton = html`
          <paper-button @click="${this.handleLawnMowerAction('locate')}">
            <ha-icon icon="hass:map-marker"></ha-icon>
            ${localize('common.locate')}
          </paper-button>
        `;

        const rawLower = raw_activity?.toLowerCase();
        const isCharging =
          rawLower === 'charging_with_task_suspend' ||
          rawLower === 'charging_with_queued_task' ||
          rawLower === 'charging' ||
          rawLower === 'ok_charging';
        const isIdle =
          state === 'idle' ||
          rawLower === 'standby' ||
          rawLower === 'stopped_in_garden';

        return html`
          <div class="toolbar">
            <paper-button @click="${this.handleLawnMowerAction('start')}">
              <ha-icon icon="hass:play"></ha-icon>
              ${localize('common.start')}
            </paper-button>
            ${this.config.actions['locate'] ? locateButton : ''}
            ${isCharging ? stopButton : ''} ${isIdle ? dockButton : ''}
          </div>
        `;
      }
    }
  }

  private renderUnavailable(): Template {
    return html`
      <ha-card>
        <div class="preview not-available">
          <div class="metadata">
            <div class="not-available">
              ${localize('common.not_available')}
            </div>
          <div>
        </div>
      </ha-card>
    `;
  }

  protected render(): Template {
    if (!this.config || !this.hass) {
      return nothing;
    }
    if (!this.config.entity) {
      return this.renderUnavailable();
    }
    if (!this.entity) {
      return this.renderUnavailable();
    }

    if (this.config.compact_view) {
      return html`
        <ha-card class="preview-compact">
          <div class="preview">
            <div class="header">
              <div class="tips">
                ${this.renderMapOrImage(this.entity?.state || '')}
                ${this.renderStatus()} ${this.renderTemperature()}
                ${this.renderHumidity()} ${this.renderBattery()}
              </div>
              <ha-icon-button
                class="more-info"
                icon="mdi:dots-vertical"
                ?more-info="true"
                @click="${() => this.handleMore()}"
                ><ha-icon icon="mdi:dots-vertical"></ha-icon
              ></ha-icon-button>
            </div>
          </div>
          ${this.renderToolbar(this.entity?.state || '')}
          ${this.renderShortcuts()}
        </ha-card>
      `;
    }

    return html`
      <ha-card>
        <div class="preview">
          <div class="header">
            <div class="tips">
              ${this.renderTemperature()} ${this.renderHumidity()}
              ${this.renderBattery()}
            </div>
            <ha-icon-button
              class="more-info"
              icon="mdi:dots-vertical"
              ?more-info="true"
              @click="${() => this.handleMore()}"
              ><ha-icon icon="mdi:dots-vertical"></ha-icon
            ></ha-icon-button>
          </div>

          ${this.renderMapOrImage(this.entity?.state || '')}

          <div class="metadata">
            ${this.renderName()} ${this.renderStatus()}
          </div>

          ${this.renderStats(this.entity?.state || '')}
        </div>

        ${this.renderToolbar(this.entity?.state || '')}
        ${this.renderShortcuts()}
      </ha-card>
    `;
  }
}

declare global {
  interface Window {
    customCards?: unknown[];
  }
}

window.customCards = window.customCards || [];
window.customCards.push({
  preview: true,
  type: 'lawn-mower-card',
  name: localize('common.name'),
  description: localize('common.description'),
});