// Copyright 2013 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import '/strings.m.js';
import './feedback_shared_styles.css.js';
// <if expr="chromeos_ash">
import './js/jelly_colors.js';

// </if>

import {assert} from 'chrome://resources/js/assert.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
import {OpenWindowProxyImpl} from 'chrome://resources/js/open_window_proxy.js';
import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';

import {getCss} from './app.css.js';
import {getHtml} from './app.html.js';
import {FeedbackBrowserProxyImpl} from './js/feedback_browser_proxy.js';
import {BT_DEVICE_REGEX, BT_REGEX, CANNOT_CONNECT_REGEX, CELLULAR_REGEX, DISPLAY_REGEX, FAST_PAIR_REGEX, NEARBY_SHARE_REGEX, SMART_LOCK_REGEX, TETHER_REGEX, THUNDERBOLT_REGEX, USB_REGEX, WIFI_REGEX} from './js/feedback_regexes.js';
import {FEEDBACK_LANDING_PAGE, FEEDBACK_LANDING_PAGE_TECHSTOP, FEEDBACK_LEGAL_HELP_URL, FEEDBACK_PRIVACY_POLICY_URL, FEEDBACK_TERM_OF_SERVICE_URL, openUrlInAppWindow} from './js/feedback_util.js';
import {domainQuestions, questionnaireBegin, questionnaireNotification} from './js/questionnaire.js';
import {takeScreenshot} from './js/take_screenshot.js';

const MAX_ATTACH_FILE_SIZE: number = 3 * 1024 * 1024;
const MAX_SCREENSHOT_WIDTH: number = 100;

export class AppElement extends CrLitElement {
  static get is() {
    return 'feedback-app';
  }

  static override get styles() {
    return getCss();
  }

  override render() {
    return getHtml.bind(this)();
  }

  private formOpenTime: number = new Date().getTime();
  private attachedFileBlob: Blob|null = null;

  /**
   * Which questions have been appended to the issue description text area.
   */
  private appendedQuestions: {[key: string]: boolean} = {};

  /**
   * The object will be manipulated by sendReport().
   */
  private feedbackInfo: chrome.feedbackPrivate.FeedbackInfo = {
    attachedFile: undefined,
    attachedFileBlobUuid: undefined,
    autofillMetadata: '',
    categoryTag: undefined,
    description: '...',
    descriptionPlaceholder: undefined,
    email: undefined,
    flow: chrome.feedbackPrivate.FeedbackFlow.REGULAR,
    fromAutofill: false,
    includeBluetoothLogs: false,
    pageUrl: undefined,
    sendHistograms: undefined,
    systemInformation: [],
    useSystemWindowFrame: false,
    isOffensiveOrUnsafe: undefined,
    aiMetadata: undefined,
  };

  /**
   * Initializes our page.
   * Flow:
   * .) DOMContent Loaded        -> . Request feedbackInfo object
   *                                . Setup page event handlers
   * .) Feedback Object Received -> . take screenshot
   *                                . request email
   *                                . request System info
   *                                . request i18n strings
   * .) Screenshot taken         -> . Show Feedback window.
   */
  override async connectedCallback() {
    super.connectedCallback();

    // Initialize `browserProxy` only after tests had a chance to do setup
    // steps, one of which is to replace the prod proxy with a test version.
    // this.browserProxy = FeedbackBrowserProxyImpl.getInstance();

    const dialogArgs =
        FeedbackBrowserProxyImpl.getInstance().getDialogArguments();
    if (dialogArgs) {
      this.feedbackInfo = JSON.parse(dialogArgs);
    }

    await this.applyData(this.feedbackInfo);

    // Setup our event handlers.
    this.getRequiredElement('#attach-file')
        .addEventListener('change', (e: Event) => this.onFileSelected(e));
    this.getRequiredElement('#attach-file')
        .addEventListener('click', this.onOpenFileDialog.bind(this));
    this.getRequiredElement('#send-report-button').onclick =
        this.sendReport.bind(this);
    this.getRequiredElement('#cancel-button').onclick = (e: Event) =>
        this.cancel(e);
    this.getRequiredElement('#remove-attached-file').onclick =
        this.clearAttachedFile.bind(this);

    // Dispatch event used by tests.
    this.dispatchEvent(new CustomEvent('ready-for-testing'));
  }

  /**
   * Apply updates based on the received `FeedbackInfo` object.
   * @return A promise signaling that all UI updates have finished.
   */
  private applyData(feedbackInfo: chrome.feedbackPrivate.FeedbackInfo):
      Promise<void> {
    if (feedbackInfo.includeBluetoothLogs) {
      assert(
          feedbackInfo.flow ===
          chrome.feedbackPrivate.FeedbackFlow.GOOGLE_INTERNAL);
      this.getRequiredElement('#description-text')
          .addEventListener(
              'input', (e: Event) => this.checkForSendBluetoothLogs(e));
    }

    if (feedbackInfo.showQuestionnaire) {
      assert(
          feedbackInfo.flow ===
          chrome.feedbackPrivate.FeedbackFlow.GOOGLE_INTERNAL);
      this.getRequiredElement('#description-text')
          .addEventListener(
              'input', (e: Event) => this.checkForShowQuestionnaire(e));
    }

    if (this.shadowRoot.querySelector<HTMLElement>(
            '#autofill-checkbox-container') != null &&
        feedbackInfo.flow ===
            chrome.feedbackPrivate.FeedbackFlow.GOOGLE_INTERNAL &&
        feedbackInfo.fromAutofill) {
      this.getRequiredElement('#autofill-checkbox-container').hidden = false;
    }

    this.getRequiredElement('#description-text').textContent =
        feedbackInfo.description;
    if (feedbackInfo.descriptionPlaceholder) {
      this.getRequiredElement<HTMLTextAreaElement>('#description-text')
          .placeholder = feedbackInfo.descriptionPlaceholder;
    }
    if (feedbackInfo.pageUrl) {
      this.getRequiredElement<HTMLInputElement>('#page-url-text').value =
          feedbackInfo.pageUrl;
    }

    const isAiFlow: boolean =
        feedbackInfo.flow === chrome.feedbackPrivate.FeedbackFlow.AI;

    if (isAiFlow) {
      this.getRequiredElement('#free-form-text').textContent =
          loadTimeData.getString('freeFormTextAi');
      this.getRequiredElement('#offensive-container').hidden = false;
      this.getRequiredElement('#log-id-container').hidden = false;
    }

    const isSeaPenFlow: boolean|undefined =
        isAiFlow && feedbackInfo.aiMetadata?.includes('from_sea_pen');

    if (isSeaPenFlow) {
      this.getRequiredElement('#log-id-container').hidden = true;
      this.getRequiredElement('#screenshot-container').hidden = true;
      this.getRequiredElement('#sys-info-container').hidden = true;
    }

    const whenScreenshotUpdated = takeScreenshot().then((screenshotCanvas) => {
      // We've taken our screenshot, show the feedback page without any
      // further delay.
      window.requestAnimationFrame(this.resizeAppWindow.bind(this));

      FeedbackBrowserProxyImpl.getInstance().showDialog();

      // Allow feedback to be sent even if the screenshot failed.
      if (!screenshotCanvas) {
        const checkbox =
            this.getRequiredElement<HTMLInputElement>('#screenshot-checkbox');
        checkbox.disabled = true;
        checkbox.checked = false;
        return Promise.resolve();
      }

      return new Promise<void>((resolve) => {
        screenshotCanvas.toBlob((blob) => {
          const image =
              this.getRequiredElement<HTMLImageElement>('#screenshot-image');
          image.src = URL.createObjectURL(blob!);
          // Only set the alt text when the src url is available, otherwise we'd
          // get a broken image picture instead. crbug.com/773985.
          image.alt = 'screenshot';
          image.classList.toggle(
              'wide-screen', image.width > MAX_SCREENSHOT_WIDTH);
          feedbackInfo.screenshot = blob!;
          resolve();
        });
      });
    });

    const whenEmailUpdated = isAiFlow ?
        Promise.resolve() :
        FeedbackBrowserProxyImpl.getInstance().getUserEmail().then((email) => {
          // Never add an empty option.
          if (!email) {
            return;
          }
          const optionElement = document.createElement('option');
          optionElement.value = email;
          optionElement.text = email;
          optionElement.selected = true;
          // Make sure the "Report anonymously" option comes last.
          this.getRequiredElement('#user-email-drop-down')
              .insertBefore(
                  optionElement,
                  this.getRequiredElement('#anonymous-user-option'));

          // Now we can unhide the user email section:
          this.getRequiredElement('#user-email').hidden = false;
          // Only show email consent checkbox when an email address exists.
          this.getRequiredElement('#consent-container').hidden = false;
        });

    // An extension called us with an attached file.
    if (feedbackInfo.attachedFile) {
      this.getRequiredElement('#attached-filename-text').textContent =
          feedbackInfo.attachedFile.name;
      this.attachedFileBlob = feedbackInfo.attachedFile.data!;
      this.getRequiredElement('#custom-file-container').hidden = false;
      this.getRequiredElement('#attach-file').hidden = true;
    }

    // No URL, file attachment for login screen feedback.
    if (feedbackInfo.flow === chrome.feedbackPrivate.FeedbackFlow.LOGIN) {
      this.getRequiredElement('#page-url').hidden = true;
      this.getRequiredElement('#attach-file-container').hidden = true;
      this.getRequiredElement('#attach-file-note').hidden = true;
    }

    const autofillMetadataUrlElement =
        this.shadowRoot.querySelector<HTMLElement>('#autofill-metadata-url');

    if (autofillMetadataUrlElement) {
      // Opens a new window showing the full anonymized autofill metadata.
      autofillMetadataUrlElement.onclick = (e: Event) => {
        e.preventDefault();

        FeedbackBrowserProxyImpl.getInstance().showAutofillMetadataInfo(
            feedbackInfo.autofillMetadata!);
      };

      autofillMetadataUrlElement.onauxclick = (e: Event) => {
        e.preventDefault();
      };
    }

    const sysInfoUrlElement =
        this.shadowRoot.querySelector<HTMLElement>('#sys-info-url');
    if (sysInfoUrlElement) {
      // Opens a new window showing the full anonymized system+app
      // information.
      sysInfoUrlElement.onclick = (e: Event) => {
        e.preventDefault();

        FeedbackBrowserProxyImpl.getInstance().showSystemInfo();
      };

      sysInfoUrlElement.onauxclick = (e: Event) => {
        e.preventDefault();
      };
    }

    const histogramUrlElement =
        this.shadowRoot.querySelector<HTMLElement>('#histograms-url');
    if (histogramUrlElement) {
      histogramUrlElement.onclick = (e: Event) => {
        e.preventDefault();

        FeedbackBrowserProxyImpl.getInstance().showMetrics();
      };

      histogramUrlElement.onauxclick = (e: Event) => {
        e.preventDefault();
      };
    }

    // The following URLs don't open on login screen, so hide them.
    // TODO(crbug.com/40144717): Find a solution to display them properly.
    // Update: the bluetooth and assistant logs links will work on login
    // screen now. But to limit the scope of this CL, they are still hidden.
    if (feedbackInfo.flow !== chrome.feedbackPrivate.FeedbackFlow.LOGIN) {
      const legalHelpPageUrlElement =
          this.shadowRoot.querySelector<HTMLElement>('#legal-help-page-url');
      if (legalHelpPageUrlElement) {
        this.setupLinkHandlers(
            legalHelpPageUrlElement, FEEDBACK_LEGAL_HELP_URL,
            false /* useAppWindow */);
      }

      const privacyPolicyUrlElement =
          this.shadowRoot.querySelector<HTMLElement>('#privacy-policy-url');
      if (privacyPolicyUrlElement) {
        this.setupLinkHandlers(
            privacyPolicyUrlElement, FEEDBACK_PRIVACY_POLICY_URL,
            false /* useAppWindow */);
      }

      const termsOfServiceUrlElement =
          this.shadowRoot.querySelector<HTMLElement>('#terms-of-service-url');
      if (termsOfServiceUrlElement) {
        this.setupLinkHandlers(
            termsOfServiceUrlElement, FEEDBACK_TERM_OF_SERVICE_URL,
            false /* useAppWindow */);
      }
    }

    // Make sure our focus starts on the description field.
    this.getRequiredElement('#description-text').focus();

    return Promise.all([whenScreenshotUpdated, whenEmailUpdated])
        .then(() => {});
  }

  private async sendFeedbackReport(useSystemInfo: boolean) {
    const ID = Math.round(Date.now() / 1000);
    const FLOW = this.feedbackInfo.flow;

    const result = await FeedbackBrowserProxyImpl.getInstance().sendFeedback(
        this.feedbackInfo, useSystemInfo, this.formOpenTime);

    if (result.status === chrome.feedbackPrivate.Status.SUCCESS) {
      if (FLOW !== chrome.feedbackPrivate.FeedbackFlow.LOGIN &&
          result.landingPageType !==
              chrome.feedbackPrivate.LandingPageType.NO_LANDING_PAGE) {
        const landingPage = result.landingPageType ===
                chrome.feedbackPrivate.LandingPageType.NORMAL ?
            FEEDBACK_LANDING_PAGE :
            FEEDBACK_LANDING_PAGE_TECHSTOP;
        OpenWindowProxyImpl.getInstance().openUrl(landingPage);
      }
    } else {
      console.warn(
          'Feedback: Report for request with ID ' + ID +
          ' will be sent later.');
    }
    this.scheduleWindowClose();
  }

  /**
   * Reads the selected file when the user selects a file.
   * @param fileSelectedEvent The onChanged event for the file input box.
   */
  private onFileSelected(fileSelectedEvent: Event) {
    // <if expr="chromeos_ash">
    // This is needed on CrOS. Otherwise, the feedback window will stay behind
    // the Chrome window.
    FeedbackBrowserProxyImpl.getInstance().showDialog();
    // </if>

    const file = (fileSelectedEvent.target as HTMLInputElement).files![0];
    if (!file) {
      // User canceled file selection.
      this.attachedFileBlob = null;
      return;
    }

    if (file.size > MAX_ATTACH_FILE_SIZE) {
      this.getRequiredElement('#attach-error').hidden = false;

      // Clear our selected file.
      this.getRequiredElement<HTMLInputElement>('#attach-file').value = '';
      this.attachedFileBlob = null;
      return;
    }

    this.attachedFileBlob = file.slice();
  }

  /**
   * Called when user opens the file dialog. Hide 'attach-error' before file
   * dialog is open to prevent a11y bug https://crbug.com/1020047
   */
  private onOpenFileDialog() {
    this.getRequiredElement('#attach-error').hidden = true;
  }

  /**
   * Clears the file that was attached to the report with the initial request.
   * Instead we will now show the attach file button in case the user wants to
   * attach another file.
   */
  private clearAttachedFile() {
    this.getRequiredElement('#custom-file-container').hidden = true;
    this.attachedFileBlob = null;
    this.feedbackInfo.attachedFile = undefined;
    this.getRequiredElement('#attach-file').hidden = false;
  }

  /**
   * Sets up the event handlers for the given |anchorElement|.
   * @param anchorElement The <a> html element.
   * @param url The destination URL for the link.
   * @param useAppWindow true if the URL should be opened inside a new App
   *     Window, false if it should be opened in a new tab.
   */
  private setupLinkHandlers(
      anchorElement: HTMLElement, url: string, useAppWindow: boolean) {
    anchorElement.onclick = (e: Event) => {
      e.preventDefault();
      if (useAppWindow) {
        openUrlInAppWindow(url);
      } else {
        window.open(url, '_blank');
      }
    };

    anchorElement.onauxclick = (e: Event) => {
      e.preventDefault();
    };
  }

  /**
   * Checks if any keywords related to bluetooth have been typed. If they are,
   * we show the bluetooth logs option, otherwise hide it.
   * @param inputEvent The input event for the description textarea.
   */
  private checkForSendBluetoothLogs(inputEvent: Event) {
    const value = (inputEvent.target as HTMLInputElement).value;
    const isRelatedToBluetooth = BT_REGEX.test(value) ||
        CANNOT_CONNECT_REGEX.test(value) || TETHER_REGEX.test(value) ||
        SMART_LOCK_REGEX.test(value) || NEARBY_SHARE_REGEX.test(value) ||
        FAST_PAIR_REGEX.test(value) || BT_DEVICE_REGEX.test(value);
    this.getRequiredElement('#bluetooth-checkbox-container').hidden =
        !isRelatedToBluetooth;
  }

  /**
   * Checks if any keywords have associated questionnaire in a domain. If so,
   * we append the questionnaire in
   * getRequiredElement('description-text').
   * @param inputEvent The input event for the description textarea.
   */
  private checkForShowQuestionnaire(inputEvent: Event) {
    const toAppend = [];

    // Match user-entered description before the questionnaire to reduce false
    // positives due to matching the questionnaire questions and answers.
    const value = (inputEvent.target as HTMLInputElement).value;
    const questionnaireBeginPos = value.indexOf(questionnaireBegin);
    const matchedText = questionnaireBeginPos >= 0 ?
        value.substring(0, questionnaireBeginPos) :
        value;

    if (BT_REGEX.test(matchedText)) {
      toAppend.push(...domainQuestions['bluetooth']);
    }

    if (WIFI_REGEX.test(matchedText)) {
      toAppend.push(...domainQuestions['wifi']);
    }

    if (CELLULAR_REGEX.test(matchedText)) {
      toAppend.push(...domainQuestions['cellular']);
    }

    if (DISPLAY_REGEX.test(matchedText)) {
      toAppend.push(...domainQuestions['display']);
    }

    if (THUNDERBOLT_REGEX.test(matchedText)) {
      toAppend.push(...domainQuestions['thunderbolt']);
    } else if (USB_REGEX.test(matchedText)) {
      toAppend.push(...domainQuestions['usb']);
    }

    if (toAppend.length === 0) {
      return;
    }

    const textarea =
        this.getRequiredElement<HTMLTextAreaElement>('#description-text');
    const savedCursor = textarea.selectionStart;
    if (Object.keys(this.appendedQuestions).length === 0) {
      textarea.value += '\n\n' + questionnaireBegin + '\n';
      this.getRequiredElement('#questionnaire-notification').textContent =
          questionnaireNotification;
    }

    for (const question of toAppend) {
      if (question in this.appendedQuestions) {
        continue;
      }

      textarea.value += '* ' + question + ' \n';
      this.appendedQuestions[question] = true;
    }

    // After appending text, the web engine automatically moves the cursor to
    // the end of the appended text, so we need to move the cursor back to where
    // the user was typing before.
    textarea.selectionEnd = savedCursor;
  }

  /**
   * Updates the description-text box based on whether it was valid.
   * If invalid, indicate an error to the user. If valid, remove indication of
   * the error.
   */
  private updateDescription(wasValid: boolean) {
    // Set visibility of the alert text for users who don't use a screen
    // reader.
    this.getRequiredElement('#description-empty-error').hidden = wasValid;

    // Change the textarea's aria-labelled by to ensure the screen reader does
    // (or doesn't) read the error, as appropriate.
    // If it does read the error, it should do so _before_ it reads the normal
    // description.
    const description =
        this.getRequiredElement<HTMLTextAreaElement>('#description-text');
    description.setAttribute(
        'aria-labelledby',
        (wasValid ? '' : 'description-empty-error ') + 'free-form-text');
    // Indicate whether input is valid.
    description.setAttribute('aria-invalid', String(!wasValid));
    if (!wasValid) {
      // Return focus to field so user can correct error.
      description.focus();
    }

    // We may have added or removed a line of text, so make sure the app window
    // is the right size.
    this.resizeAppWindow();
  }

  /**
   * Sends the report; after the report is sent, we need to be redirected to
   * the landing page, but we shouldn't be able to navigate back, hence
   * we open the landing page in a new tab and sendReport closes this tab.
   * @return Whether the report was sent.
   */
  private sendReport(): boolean {
    const textarea =
        this.getRequiredElement<HTMLTextAreaElement>('#description-text');
    if (textarea.value.length === 0) {
      this.updateDescription(false);
      return false;
    }
    // This isn't strictly necessary, since if we get past this point we'll
    // succeed, but for future-compatibility (and in case we later add more
    // failure cases after this), re-hide the alert and reset the aria label.
    this.updateDescription(true);

    // Prevent double clicking from sending additional reports.
    this.getRequiredElement<HTMLButtonElement>('#send-report-button').disabled =
        true;
    if (!this.feedbackInfo.attachedFile && this.attachedFileBlob) {
      this.feedbackInfo.attachedFile = {
        name: this.getRequiredElement<HTMLInputElement>('#attach-file').value,
        data: this.attachedFileBlob,
      };
    }

    const consentCheckboxValue: boolean =
        this.getRequiredElement<HTMLInputElement>('#consent-checkbox').checked;
    this.feedbackInfo.systemInformation = [
      {
        key: 'feedbackUserCtlConsent',
        value: String(consentCheckboxValue),
      },
    ];

    const isAiFlow: boolean =
        this.feedbackInfo.flow === chrome.feedbackPrivate.FeedbackFlow.AI;
    const isSeaPenFlow: boolean|undefined =
        isAiFlow && this.feedbackInfo.aiMetadata?.includes('from_sea_pen');
    if (isAiFlow) {
      this.feedbackInfo.isOffensiveOrUnsafe =
          this.getRequiredElement<HTMLInputElement>('#offensive-checkbox')
              .checked;
      if (isSeaPenFlow ||
          !this.getRequiredElement<HTMLInputElement>('#log-id-checkbox')
               .checked) {
        this.feedbackInfo.aiMetadata = undefined;
      }
    }

    this.feedbackInfo.description = textarea.value;
    this.feedbackInfo.pageUrl =
        this.getRequiredElement<HTMLInputElement>('#page-url-text').value;
    this.feedbackInfo.email =
        this.getRequiredElement<HTMLSelectElement>('#user-email-drop-down')
            .value;

    let useSystemInfo = false;
    let useHistograms = false;
    const checkbox =
        this.shadowRoot.querySelector<HTMLInputElement>('#sys-info-checkbox');
    // SeaPen flow doesn't collect system info data.
    if (checkbox != null && checkbox.checked && !isSeaPenFlow) {
      // Send histograms along with system info.
      useHistograms = true;
      useSystemInfo = true;
    }

    const autofillCheckbox = this.shadowRoot.querySelector<HTMLInputElement>(
        '#autofill-metadata-checkbox');
    if (autofillCheckbox != null && autofillCheckbox.checked &&
        !this.getRequiredElement('#autofill-checkbox-container').hidden) {
      this.feedbackInfo.sendAutofillMetadata = true;
    }

    this.feedbackInfo.sendHistograms = useHistograms;

    if (this.getRequiredElement<HTMLInputElement>('#screenshot-checkbox')
            .checked) {
      // The user is okay with sending the screenshot and tab titles.
      this.feedbackInfo.sendTabTitles = true;
    } else {
      // The user doesn't want to send the screenshot, so clear it.
      this.feedbackInfo.screenshot = undefined;
    }

    let productId: number|undefined =
        parseInt('' + this.feedbackInfo.productId, 10);
    if (isNaN(productId)) {
      // For apps that still use a string value as the |productId|, we must
      // clear that value since the API uses an integer value, and a conflict in
      // data types will cause the report to fail to be sent.
      productId = undefined;
    }
    this.feedbackInfo.productId = productId;

    // Request sending the report, show the landing page (if allowed)
    this.sendFeedbackReport(useSystemInfo);

    return true;
  }

  /**
   * Click listener for the cancel button.
   */
  private cancel(e: Event) {
    e.preventDefault();
    this.scheduleWindowClose();
  }

  private resizeAppWindow() {
    // TODO(crbug.com/1167223): The UI is now controlled by a WebDialog delegate
    // which is set to not resizable for now. If needed, a message handler can
    // be added to respond to resize request.
  }

  /**
   * Close the window after 100ms delay.
   */
  private scheduleWindowClose() {
    setTimeout(() => FeedbackBrowserProxyImpl.getInstance().closeDialog(), 100);
  }

  /**
   * TODO(crbug.com/41481648): A helper function in favor of converting feedback
   * UI from non-web component HTML to PolymerElement. It's better to be
   * replaced by polymer's $ helper dictionary.
   */
  getRequiredElement<T extends HTMLElement = HTMLElement>(query: string): T {
    const el = this.shadowRoot.querySelector<T>(query);
    assert(el);
    assert(el instanceof HTMLElement);
    return el;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'feedback-app': AppElement;
  }
}

customElements.define(AppElement.is, AppElement);