/**
 * @license
 * Copyright 2025 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import '@material/web/chips/assist-chip.js';
import '@material/web/icon/icon.js';
import '@material/web/menu/menu.js';
import '@material/web/menu/menu-item.js';
import '@material/web/textfield/filled-text-field.js';

import {MdMenu} from '@material/web/menu/menu';
import {css, html, LitElement} from 'lit';
import {customElement, query, state} from 'lit/decorators.js';
import {when} from 'lit/directives/when.js';

import {ContextItem, ContextItemType} from '../../api/ai-code-review';
import {chatModelToken} from '../../models/chat/chat-model';
import {resolve} from '../../models/dependency';
import {assertIsDefined} from '../../utils/common-util';
import {fire, fireAlert} from '../../utils/event-util';
import {subscribe} from '../lit/subscription-controller';
import {classMap} from 'lit/directives/class-map.js';
import {materialStyles} from '../../styles/gr-material-styles';

@customElement('context-input-chip')
export class ContextInputChip extends LitElement {
  @query('#contextMenu') private contextMenu?: MdMenu;

  @query('.add-link-input') private addLinkInput?: HTMLInputElement;

  @state() linkInputText = '';

  @state() selectedContextMenuItem: ContextItemType | null = null;

  @state() addLinkDialogOpened = false;

  @state() contextMenuItems: readonly ContextItemType[] = [];

  @state() private supportsAddContext = true;

  private readonly getChatModel = resolve(this, chatModelToken);

  constructor() {
    super();
    subscribe(
      this,
      () => this.getChatModel().contextItemTypes$,
      (contextItemTypes: readonly ContextItemType[]) => {
        this.contextMenuItems = contextItemTypes;
      }
    );
    subscribe(
      this,
      () => this.getChatModel().provider$,
      provider => {
        this.supportsAddContext = provider?.supports_add_context ?? true;
      }
    );
  }

  static override styles = [
    materialStyles,
    css`
      .context-input-container {
        position: relative;
      }
      /* .mat-mdc-standard-chip replaced by md-assist-chip */
      md-assist-chip {
        --md-assist-chip-container-height: 22px;
        --md-assist-chip-label-text-size: var(--font-size-small);
        --md-assist-chip-label-text-weight: var(--font-weight-medium);
        --md-assist-chip-label-text-color: var(--primary-text-color);
        --md-assist-chip-outline-color: var(--border-color);
        --md-assist-chip-hover-label-text-color: var(--primary-text-color);
        --md-assist-chip-focus-label-text-color: var(--primary-text-color);
        --md-assist-chip-pressed-label-text-color: var(--primary-text-color);
        --md-assist-chip-hover-icon-color: var(--primary-text-color);
        --md-assist-chip-focus-icon-color: var(--primary-text-color);
        --md-assist-chip-pressed-icon-color: var(--primary-text-color);
        overflow: hidden;
        margin: 0;
        border-color: var(--border-color);
        background-color: transparent;
        border-radius: 8px;
      }
      .add-icon {
        color: var(--primary-text-color);
      }
      .add-link-container {
        position: absolute;
        text-align: center;
        width: 200px;
        left: 0;
        bottom: 25px;
      }
      .add-link-input {
        padding: var(--spacing-m);
        margin-left: var(--spacing-m);
        margin-right: var(--spacing-m);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background-color: var(--background-color-primary);
        font-family: var(--font-family);
        font-size: var(--font-size-normal);
        /* input color often defaults to browser/os default which might be dark even on dark mode if not set */
        color: var(--primary-text-color);
        outline: none;
        width: 100%;
        height: 23px;
        max-width: 100%;
      }
      .add-link-input::placeholder {
        color: var(--chat-card-placeholder-text-color);
      }
      .add-link-input:focus {
        background-color: var(--background-color-primary);
        border: 1px solid var(--border-color);
      }
      .context-menu-icon {
        width: 14px;
        height: 14px;
        margin-left: var(--spacing-m);
      }
      .hidden {
        visibility: hidden;
        pointer-events: none;
      }
      md-menu-item {
        white-space: nowrap;
        --md-menu-item-top-space: var(--spacing-s);
        --md-menu-item-bottom-space: var(--spacing-s);
        --md-menu-item-leading-space: var(--spacing-m);
        --md-menu-item-trailing-space: var(--spacing-m);
        --md-menu-item-one-line-container-height: 24px;
      }
    `,
  ];

  override render() {
    return html`
      <div class="context-input-container">
        <md-assist-chip
          id="addContextChip"
          class=${classMap({
            hidden: !this.supportsAddContext,
          })}
          .label=${'Add Context'}
          title="Add context to your query"
          aria-label="Add context to your query"
          @click=${() => this.contextMenu && (this.contextMenu.open = true)}
        >
          <md-icon slot="icon" class="add-icon">add</md-icon>
        </md-assist-chip>
        <md-menu id="contextMenu" anchor="addContextChip" y-offset="4">
          ${this.contextMenuItems.map(
            (item: ContextItemType) => html`
              <md-menu-item @click=${() => this.showLinkDialogInput(item)}>
                <md-icon slot="start">${item.icon}</md-icon>
                <div slot="headline">${item.name}</div>
              </md-menu-item>
            `
          )}
        </md-menu>
        ${when(
          this.addLinkDialogOpened,
          () => html`
            <div class="add-link-container">
              <input
                class="add-link-input"
                name="search"
                role="searchbox"
                tabindex="0"
                autocomplete="off"
                spellcheck="false"
                .placeholder=${this.selectedContextMenuItem!.placeholder}
                aria-label="Add external link"
                .value=${this.linkInputText}
                @input=${(e: Event) =>
                  (this.linkInputText = (e.target as HTMLInputElement).value)}
                @keydown=${(e: KeyboardEvent) => {
                  if (e.key === 'Enter') this.addLinkContext();
                  if (e.key === 'Escape') this.closeMenu();
                }}
                @blur=${() => this.closeMenu()}
              />
            </div>
          `
        )}
      </div>
    `;
  }

  protected async showLinkDialogInput(contextMenuItem: ContextItemType) {
    this.addLinkDialogOpened = true;
    this.selectedContextMenuItem = contextMenuItem;
    await this.updateComplete;
    this.addLinkInput?.focus();
  }

  protected addLinkContext() {
    assertIsDefined(this.selectedContextMenuItem, 'selected context menu item');
    const contextItem = this.selectedContextMenuItem.parse(this.linkInputText);
    if (contextItem) {
      fire(this, 'context-item-added', contextItem);
    } else {
      fireAlert(this, 'Could not parse the provided link.');
    }
    this.closeMenu();
    this.linkInputText = '';
  }

  private closeMenu() {
    this.addLinkDialogOpened = false;
    if (this.contextMenu) this.contextMenu.open = false;
  }
}

export interface ContextItemAddedEvent extends CustomEvent<ContextItem> {
  type: 'context-item-added';
}

declare global {
  interface HTMLElementEventMap {
    'context-item-added': ContextItemAddedEvent;
  }
  interface HTMLElementTagNameMap {
    'context-input-chip': ContextInputChip;
  }
}