{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<Hds::PageHeader class="has-top-padding-l has-bottom-padding-m" as |PH|>
  <PH.Title>
    Client Usage
  </PH.Title>

  {{#if @activityTimestamp}}
    <PH.Subtitle data-test-activity-timestamp>
      Dashboard last updated:
      {{date-format @activityTimestamp "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
      <Hds::Button
        @color="tertiary"
        @icon="reload"
        @isIconOnly={{true}}
        @size="small"
        @text="Refresh page"
        data-test-button="Refresh page"
        {{on "click" this.refreshRoute}}
      />
    </PH.Subtitle>
  {{/if}}
  <PH.Description>
    {{#if (and this.version.isEnterprise @billingStartTime)}}
      {{! Enterprise should always have a @billingStartTime but as a fallback allow the user to query dates manually. }}
      {{! A dropdown renders in Clients::DateRange to query specific dates if we have a @billingStartTime }}
      <p class="has-text-weight-semibold">
        {{if this.flags.isHvdManaged "For data period: " "For billing period: "}}
        <span data-test-date-range="start">{{this.formattedStartDate}}</span>
        -
        <span data-test-date-range="end">{{this.formattedEndDate}}</span>
      </p>
    {{else if (and @startTimestamp @endTimestamp)}}
      {{! If these timestamps exist an initial query has already been made using the modal in Clients::DateRange }}
      <div class="has-top-padding-m">
        <Hds::Text::Display @tag="h3">Client counting period</Hds::Text::Display>
        <Hds::Text::Body @tag="p" @size="100" color="faint">Click 'Edit' to select a different date range.</Hds::Text::Body>
        <Hds::Text::Body @tag="p">
          <span data-test-date-range="start">{{this.formattedStartDate}}</span>
          -
          <span data-test-date-range="end">{{this.formattedEndDate}}</span>
          <Hds::Button
            @size="small"
            @text="Edit"
            @isInline="true"
            @color="tertiary"
            @icon="edit"
            @iconPosition="trailing"
            data-test-date-range-edit
            {{on "click" (fn (mut this.showEditModal) true)}}
          />
        </Hds::Text::Body>
      </div>
    {{/if}}
  </PH.Description>

  <PH.Actions class="align-items-end align-self-end">
    {{#if this.showExportButton}}
      <Hds::Button
        class="has-font-weight-normal"
        data-test-export-button
        @text="Export activity data"
        @color="secondary"
        @icon="download"
        {{on "click" (fn (mut this.showExportModal) true)}}
      />
    {{/if}}
    <Clients::DateRange
      @startTimestamp={{@startTimestamp}}
      @endTimestamp={{@endTimestamp}}
      @billingStartTime={{@billingStartTime}}
      @retentionMonths={{@retentionMonths}}
      @onChange={{@onChange}}
      @showEditModal={{this.showEditModal}}
      @setEditModalVisible={{this.setEditModalVisible}}
      class={{if (and this.version.isCommunity this.startDate this.endDate) "position-absolute"}}
    />
  </PH.Actions>

</Hds::PageHeader>

{{#if this.showExportModal}}
  <Hds::Modal id="attribution-csv-download-modal" class="has-text-left" @onClose={{this.resetModal}} as |M|>
    <M.Header @icon="info" data-test-export-modal-title>
      Export activity data
    </M.Header>
    <M.Body>
      {{#if this.exportChartData.isRunning}}
        <p class="has-bottom-margin-s">
          Your export request is being processed. This may take some time; please do not navigate away from this page.
        </p>
        <p class="has-bottom-margin-s has-text-centered">
          <Icon @name="loading" @size="24" />
        </p>
      {{else}}
        <p class="has-bottom-margin-s">
          This file will include an export of the clients that had activity within the date range below. See the
          <DocLink @path="/vault/api-docs/system/internal-counters#activity-export">activity export documentation</DocLink>
          for more details.
        </p>
        <p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p>
        <p class="has-bottom-margin-s" data-test-export-date-range>
          {{this.formattedStartDate}}
          {{#if this.showEndDate}}
            {{"-"}}
            {{this.formattedEndDate}}
          {{/if}}
        </p>

        <Hds::Form::Select::Field
          class="has-bottom-margin-s"
          {{on "change" this.setExportFormat}}
          data-test-download-format
          as |F|
        >
          <F.Label>Export format</F.Label>
          <F.Options>
            <option value="csv" selected={{eq this.exportFormat "csv"}}>CSV</option>
            <option value="jsonl" selected={{eq this.exportFormat "jsonl"}}>JSON Lines</option>
          </F.Options>
        </Hds::Form::Select::Field>
      {{/if}}

      {{#if this.downloadError}}
        <Hds::Alert @type="inline" @color="critical" as |A|>
          <A.Title>CSV export failed</A.Title>
          <A.Description data-test-export-error>{{this.downloadError}}</A.Description>
        </Hds::Alert>
      {{/if}}
    </M.Body>
    <M.Footer as |F|>
      <Hds::ButtonSet>
        <Hds::Button
          @text="Export"
          {{on "click" (perform this.exportChartData this.formattedCsvFileName)}}
          data-test-confirm-button
        />
        <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} />
      </Hds::ButtonSet>
      {{#if @upgradesDuringActivity}}
        <Hds::Alert class="has-top-padding-m" @type="compact" @color="warning" data-test-export-upgrade-warning as |A|>
          <A.Description>
            <strong>Data contains {{pluralize @upgradesDuringActivity.length "upgrade"}}:</strong>
          </A.Description>
          <A.Description>
            <ul class="bullet">
              {{#each @upgradesDuringActivity as |upgrade|}}
                <li>
                  {{upgrade.version}}
                  {{this.parseAPITimestamp upgrade.timestampInstalled "(MMM d, yyyy)"}}
                </li>
              {{/each}}
            </ul>
          </A.Description>
          <A.Description>
            Visit our
            <Hds::Link::Inline
              @isHrefExternal={{true}}
              @href={{doc-link
                "/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
              }}
            >
              Client count FAQ
            </Hds::Link::Inline>
            for more information.
          </A.Description>
        </Hds::Alert>
      {{/if}}
    </M.Footer>
  </Hds::Modal>
{{/if}}