sed on the event (e.g., new tab,
    // current tab)
    const where = lazy.BrowserUtils.whereToOpenLink(event, false, true);
    win.openLinkIn(url, where, params);

    this.dispatchEvent(
      new CustomEvent("LinkPreviewCard:dismiss", {
        detail: event.target.dataset.source ?? "error",
      })
    );
  }

  /**
   * Handles retry request for key points generation.
   *
   * @param {MouseEvent} event - The click event.
   */
  handleRetry(event) {
    event.preventDefault();
    // Dispatch retry event to be handled by LinkPreview.sys.mjs
    this.dispatchEvent(new CustomEvent("LinkPreviewCard:retry"));
  }

  /**
   * Toggles the expanded state of the key points section
   *
   * @param {MouseEvent} _event - The click event
   */
  toggleKeyPoints(_event) {
    // Do not allow collapsing while a download is in progress.
    if (this.progress >= 0) {
      return;
    }
    Services.prefs.setBoolPref(
      "browser.ml.linkPreview.collapsed",
      !this.collapsed
    );

    // When expanded, if there are existing key points, we won't trigger
    // another generation
    if (!this.collapsed) {
      this.dispatchEvent(new CustomEvent("LinkPreviewCard:generate"));
    }
  }

  updated(_properties) {
    if (this.optinRef.value) {
      this.optinRef.value.headingIcon = LinkPreviewCard.AI_ICON;
    }

    if (this.firstTimeModalRef.value) {
      this.firstTimeModalRef.value.headingIcon = LinkPreviewCard.AI_ICON;
      this.firstTimeModalRef.value.iconAtEnd = true;
      this.firstTimeModalRef.value.footerMessageL10nId = "";

      if (this.progress >= 0) {
        this.firstTimeModalRef.value.isLoading = true;
        this.firstTimeModalRef.value.progressStatus = this.progress;
      }
    }
  }

  /**
   * Get the appropriate Fluent ID for the error message based on the error state.
   *
   * @returns {string} The Fluent ID for the error message.
   */
  get errorMessageL10nId() {
    if (this.isMissingDataErrorState) {
      return "link-preview-generation-error-missing-data-v2";
    } else if (this.generationError) {
      return "link-preview-generation-error-unexpected";
    }
    return "";
  }

  /**
   * Renders the error generation card for when we have a generation error.
   *
   * @returns {import('lit').TemplateResult} The error generation card HTML
   */
  renderErrorGenerationCard() {
    // Only show the retry link if we have a generation error that's not a memory error
    const showRetryLink =
      this.generationError &&
      this.generationError.name !== "NotEnoughMemoryError";

    return html`
      <div class="ai-content">
        <p class="og-error-message-container">
          <span
            class="og-error-message"
            data-l10n-id=${this.errorMessageL10nId}
          ></span>
          ${showRetryLink
            ? html`
                <span class="retry-link">
                  <a
                    href="#"
                    @click=${this.handleRetry}
                    data-l10n-id="link-preview-generation-retry"
                  ></a>
                </span>
              `
            : ""}
        </p>
      </div>
    `;
  }

  /**
   * Renders a placeholder generation card for the opt-in mode,
   * showing only loading animations without real content.
   *
   * @returns {import('lit').TemplateResult} The opt-in placeholder card HTML
   */
  renderOptInPlaceholderCard() {
    return html`
      <div class="ai-content">
        <h3
          class="keypoints-header"
          @click=${this._handleOptinDeny}
          tabindex="0"
          role="button"
          aria-expanded=${!this.collapsed}
        >
          <div class="chevron-icon"></div>
          <span data-l10n-id="link-preview-key-points-header"></span>
          <img
            class="icon"
            xmlns="http://www.w3.org/1999/xhtml"
            role="presentation"
            src="chrome://global/skin/icons/highlights.svg"
          />
        </h3>
        <div class="keypoints-content ${this.collapsed ? "hidden" : ""}">
          <ul class="keypoints-list">
            ${
              /* Always show 3 placeholder loading items */
              Array(LinkPreviewCard.PLACEHOLDER_COUNT)
                .fill()
                .map(
                  () =>
                    html` <li class="content-item loading static">
                      <div></div>
                      <div></div>
                      <div></div>
                    </li>`
                )
            }
          </ul>
          ${this.renderModelOptIn()}
        </div>
      </div>
    `;
  }

  /**
   * Renders the normal generation card for displaying key points.
   *
   * @param {string} pageUrl - URL of the page being previewed
   * @returns {import('lit').TemplateResult} The normal generation card HTML
   */
  renderNormalGenerationCard(pageUrl) {
    // Extract the links section into its own variable
    const linksSection = html`
      <p data-l10n-id="link-preview-key-points-disclaimer"></p>
    `;

    return html`
      <div class="ai-content">
        <h3
          class="keypoints-header"
          @click=${this.toggleKeyPoints}
          tabindex="0"
          role="button"
          aria-expanded=${!this.collapsed}
        >
          <span data-l10n-id="link-preview-key-points-header"></span>
          <img
            class="icon"
            xmlns="http://www.w3.org/1999/xhtml"
            role="presentation"
            src="chrome://global/skin/icons/highlights.svg"
          />
        </h3>
        <div class="keypoints-content ${this.collapsed ? "hidden" : ""}">
          <ul class="keypoints-list">
            ${
              /* All populated content items */
              this.keyPoints.map(
                item => html`<li class="content-item">${item}</li>`
              )
            }
            ${
              /* Loading placeholders with three divs each */
              this.generating || this.progress >= 0
                ? Array(
                    Math.max(
                      0,
                      LinkPreviewCard.PLACEHOLDER_COUNT - this.keyPoints.length
                    )
                  )
                    .fill()
                    .map(
                      () =>
                        html` <li
                          class="content-item loading ${this.progress >= 0
                            ? "static"
                            : ""}"
                        >
                          <div></div>
                          <div></div>
                          <div></div>
                        </li>`
                    )
                : []
            }
          </ul>
          ${!(this.generating || this.progress >= 0)
            ? html`
                <div class="visit-link-container">
                  <a
                    @click=${this.handleLink}
                    data-source="visit"
                    href=${pageUrl}
                    class="visit-link"
                  >
                    <span data-l10n-id="link-preview-visit-link"></span>
                  </a>
                </div>
              `
            : ""}
          ${this.renderModalFirstTime()}
          ${!(this.generating || this.progress >= 0)
            ? html`
                <hr />
                ${linksSection}
              `
            : ""}
        </div>
      </div>
    `;
  }

  /**
   * Renders the model opt-in component that prompts users to optin to AI features.
   * This component allows users to opt in or out of the link preview AI functionality
   * and includes a support link for more information.
   *
   * @returns {import('lit').TemplateResult} The model opt-in component HTML
   */
  renderModelOptIn() {
    return html`
      <model-optin
        ${ref(this.optinRef)}
        headingIcon=${LinkPreviewCard.AI_ICON}
        headingL10nId="link-preview-optin-title"
        iconAtEnd
        messageL10nId="link-preview-optin-message"
        @MlModelOptinConfirm=${this._handleOptinConfirm}
        @MlModelOptinDeny=${this._handleOptinDeny}
      >
      </model-optin>
    `;
  }

  /**
   * Renders the first-time setup modal with progress bar.
   * Shows a modal-style component when progress is being tracked (this.progress >= 0).
   *
   * @returns {import('lit').TemplateResult} The first-time setup modal HTML
   */
  renderModalFirstTime() {
    if (this.progress < 0) {
      return "";
    }

    return html`
      <model-optin
        ${ref(this.firstTimeModalRef)}
        headingL10nId="link-preview-first-time-setup-title"
        messageL10nId="link-preview-first-time-setup-message"
        progressStatus=${this.progress}
        @MlModelOptinCancelDownload=${this._handleCancelDownload}
      >
      </model-optin>
    `;
  }

  /**
   * Handles the user confirming the opt-in prompt for link preview.
   * Sets preference values to enable the feature, hides the prompt for future sessions,
   * and triggers a retry to generate the preview.
   */
  _handleOptinConfirm() {
    Services.prefs.setBoolPref("browser.ml.linkPreview.optin", true);

    this.dispatchEvent(new CustomEvent("LinkPreviewCard:generate"));
  }

  /**
   * Handles the user canceling the first-time model download.
   */
  _handleCancelDownload() {
    this.dispatchEvent(new CustomEvent("LinkPreviewCard:cancelDownload"));
  }

  /**
   * Handles the user denying the opt-in prompt for link preview.
   * Sets preference values to disable the feature and hides
   * the prompt for future sessions.
   */
  _handleOptinDeny() {
    Services.prefs.setBoolPref("browser.ml.linkPreview.optin", false);
    Services.prefs.setBoolPref("browser.ml.linkPreview.collapsed", true);

    Glean.genaiLinkpreview.cardAiConsent.record({ option: "cancel" });
  }

  /**
   * Renders the appropriate content card based on state.
   *
   * @param {string} pageUrl - URL of the page being previewed
   * @returns {import('lit').TemplateResult} The content card HTML
   */
  renderKeyPointsSection(pageUrl) {
    if (!this.canShowKeyPoints) {
      return "";
    }

    // Determine if there's any generation error state
    const isGenerationError =
      this.isMissingDataErrorState || this.generationError;

    // If we should show the opt-in prompt, show our special placeholder card
    if (!this.optin && !this.collapsed) {
      return this.renderOptInPlaceholderCard();
    }

    if (isGenerationError) {
      return this.renderErrorGenerationCard(pageUrl);
    }

    // Always render the ai-content, otherwise we won't have header to expand/collapse
    return this.renderNormalGenerationCard(pageUrl);
  }

  /**
   * Renders the link preview element.
   *
   * @returns {import('lit').TemplateResult} The rendered HTML template.
   */
  render() {
    const articleData = this.pageData?.article || {};
    const pageUrl = this.pageData?.url || "about:blank";
    const siteName =
      articleData.siteName || this.pageData?.urlComponents?.domain || "";

    const { title, description, imageUrl } = this.pageData.meta;

    const readingTimeMinsFast = articleData.readingTimeMinsFast || "";
    const readingTimeMinsSlow = articleData.readingTimeMinsSlow || "";
    const readingTimeMinsFastStr =
      lazy.numberFormat.format(readingTimeMinsFast);
    const readingTimeRange = lazy.numberFormat.formatRange(
      readingTimeMinsFast,
      readingTimeMinsSlow
    );

    // Check if both metadata and article text content are missing
    const isMissingAllContent = !description && !articleData.textContent;

    const filename = this.pageData?.urlComponents?.filename;

    // Error Link Preview card UI: A simplified version of the preview card showing only an error message
    // and a link to visit the URL. This is a fallback UI for cases when we don't have
    // enough metadata to generate a useful preview.
    const errorCard = html`
      <div class="og-card">
        <div class="og-card-content">
          <div class="og-error-content">
            <p
              class="og-error-message"
              data-l10n-id="link-preview-error-message-v2"
            ></p>
            <a
              class="og-card-title"
              @click=${this.handleLink}
              data-l10n-id="link-preview-visit-link"
              href=${pageUrl}
            ></a>
          </div>
        </div>
      </div>
    `;

    // Normal Link Preview card UI: Shown when we have sufficient metadata (at least title and description)
    // Displays rich preview information including optional elements like site name, image,
    // reading time, and AI-generated key points if available
    const normalCard = html`
      <div class="og-card">
        <div class="og-card-content">
          ${imageUrl.startsWith("https://")
            ? html` <img class="og-card-img" src=${imageUrl} alt=${title} /> `
            : ""}
          ${siteName
            ? html`
                <div class="page-info-and-card-setting-container">
                  <span class="site-name">${siteName}</span>
                </div>
              `
            : ""}
          <h2 class="og-card-title">
            <a @click=${this.handleLink} data-source="title" href=${pageUrl}
              >${title || filename}</a
            >
          </h2>
          ${description
            ? html`<p class="og-card-description">${description}</p>`
            : ""}
          <div class="reading-time-settings-container">
            ${readingTimeMinsFast && readingTimeMinsSlow
              ? html`
                  <div
                    class="og-card-reading-time"
                    data-l10n-id="link-preview-reading-time"
                    data-l10n-args=${JSON.stringify({
                      range:
                        readingTimeMinsFast === readingTimeMinsSlow
                          ? `~${readingTimeMinsFastStr}`
                          : `${readingTimeRange}`,
                      rangePlural:
                        readingTimeMinsFast === readingTimeMinsSlow
                          ? lazy.pluralRules.select(readingTimeMinsFast)
                          : lazy.pluralRules.selectRange(
                              readingTimeMinsFast,
                              readingTimeMinsSlow
                            ),
                    })}
                  ></div>
                `
              : html`<div></div>`}
            <moz-button
              type="icon ghost"
              iconSrc="chrome://global/skin/icons/settings.svg"
              data-l10n-id="link-preview-settings-button"
              data-l10n-attrs="title"
              @click=${this.handleSettingsClick}
            >
            </moz-button>
          </div>
        </div>
        ${this.renderKeyPointsSection(pageUrl)}
      </div>
    `;

    return html`
      <link
        rel="stylesheet"
        href="chrome://browser/content/genai/content/link-preview-card.css"
      />
      ${isMissingAllContent ? errorCard : normalCard}
    `;
  }
}

customElements.define("link-preview-card", LinkPreviewCard);
PK