{{!--
  ApplicationV2 template for Seek Results Preview Dialog
  Matches the visibility manager's design and styling
--}}

<div class="seek-preview-content">
  {{!-- Seeker Information Panel --}}
  <div class="seeker-info">
    <div class="seeker-image">
      <img src="{{seeker.image}}" data-tooltip="{{seeker.name}}" />
    </div>
    <div class="seeker-details">
      <h3 class="seeker-name">{{seeker.name}}</h3>
      <p class="hint">{{seeker.actionLabel}}</p>
      {{#if seekFeatBadges}}
        <div class="action-context-badges">
      {{#each seekFeatBadges as |b|}}
        <span class="badge badge-feat" data-tooltip="{{b.tooltip}}">
          <i class="{{b.icon}}"></i>
          <span class="badge-label">{{b.label}}</span>
        </span>
      {{/each}}
        </div>
      {{/if}}
      {{#if suppressedSensesBadge}}
        <div class="action-context-badges">
          <span class="badge badge-warning" data-tooltip="{{suppressedSensesBadge.tooltip}}">
            <i class="{{suppressedSensesBadge.icon}}"></i>
            <span class="badge-label">{{suppressedSensesBadge.label}}</span>
          </span>
        </div>
      {{/if}}
    </div>
  </div>

  {{!-- Reactions System --}}
  {{#if hasReactions}}
    <div class="reactions-section">
      <div class="reactions-header">
        <button class="reactions-toggle-button {{#if hasReactions}}has-available{{/if}}" data-action="toggleReactions" data-tooltip="{{localize 'PF2E_VISIONER.REACTIONS.BUTTON_TOOLTIP'}}">
          <i class="fas fa-bolt-auto"></i>
          <span class="button-label">{{localize 'PF2E_VISIONER.REACTIONS.BUTTON_LABEL'}}</span>
          <i class="fas fa-chevron-down reactions-chevron"></i>
        </button>
      </div>
      
      <div class="reactions-dropdown" style="display: none;">
        <div class="reactions-dropdown-header">
          <h4>{{localize 'PF2E_VISIONER.REACTIONS.DROPDOWN_TITLE'}}</h4>
        </div>
        
        <div class="reactions-list">
          {{#each availableReactions}}
            <div class="reaction-item {{#if applied}}applied{{else}}available{{/if}}">
              <button class="reaction-button" data-reaction="{{key}}" {{#if applied}}disabled{{/if}}>
                <div class="reaction-icon">
                  <i class="{{icon}}"></i>
                </div>
                <div class="reaction-content">
                  <div class="reaction-name">{{localize name}}</div>
                  <div class="reaction-description">{{localize description}}</div>
                </div>
                <div class="reaction-status">
                  {{#if applied}}
                    <i class="fas fa-check-circle applied-icon"></i>
                  {{else}}
                    <i class="fas fa-arrow-right use-icon"></i>
                  {{/if}}
                </div>
              </button>
            </div>
          {{/each}}
        </div>
      </div>
    </div>
  {{/if}}

  {{!-- Encounter Filter + Ignore Allies (Encounter-only shown when relevant; Ignore allies always shown) --}}
  <div class="encounter-filter-section">
    {{#if showEncounterFilter}}
  <label class="encounter-filter-checkbox">
      <input type="checkbox" {{#if encounterOnly}}checked{{/if}} data-action="toggleEncounterFilter" data-tooltip="{{localize 'PF2E_VISIONER.UI.ENCOUNTER_FILTER_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.ENCOUNTER_FILTER_TEXT"}}</span>
    </label>
    {{/if}}
  <label class="ignore-allies-filter-checkbox">
      <input type="checkbox" {{#if ignoreAllies}}checked{{/if}} data-action="toggleIgnoreAllies" data-tooltip="{{localize 'PF2E_VISIONER.UI.IGNORE_ALLIES_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.IGNORE_ALLIES"}}</span>
    </label>
  <label class="hide-foundry-hidden-filter-checkbox">
      <input type="checkbox" {{#if hideFoundryHidden}}checked{{/if}} data-action="toggleHideFoundryHidden" data-tooltip="{{localize 'PF2E_VISIONER.UI.HIDE_FOUNDRY_HIDDEN_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.HIDE_FOUNDRY_HIDDEN"}}</span>
    </label>
  <label class="show-only-changes-filter-checkbox">
      <input type="checkbox" {{#if showOnlyChanges}}checked{{/if}} data-action="toggleShowOnlyChanges" data-tooltip="{{localize 'PF2E_VISIONER.UI.SHOW_ONLY_CHANGES_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.SHOW_ONLY_CHANGES"}}</span>
    </label>
  <label class="ignore-walls-filter-checkbox">
      <input type="checkbox" {{#if ignoreWalls}}checked{{/if}} data-action="toggleIgnoreWalls" data-tooltip="{{localize 'PF2E_VISIONER.UI.IGNORE_WALLS'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.IGNORE_WALLS"}}</span>
    </label>
  {{#unless detectionFilterDisabled}}
  <label class="filter-by-los-checkbox">
      <input type="checkbox" {{#if filterByDetection}}checked{{/if}} data-action="toggleFilterByDetection" data-tooltip="{{localize 'PF2E_VISIONER.UI.FILTER_BY_DETECTION_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.FILTER_BY_DETECTION_LABEL"}}</span>
    </label>
  {{/unless}}
  </div>

  {{!-- Results Table --}}
  {{#if bulkOverrideStates}}
  <div class="bulk-action-group">
    {{> "pf2e-visioner.bulk-override"}}
  </div>
  {{/if}}
  <div class="results-table-container">
    <table class="visibility-table seek-results-table">
      <thead>
        <tr>
          <th class="token-image">{{localize "PF2E_VISIONER.UI.TOKEN"}}</th>
          <th class="token-name">{{localize "PF2E_VISIONER.UI.NAME"}}</th>
          {{#if avsEnabled}}
            <th class="detected-by">{{localize "PF2E_VISIONER.SEEK_AUTOMATION.DETECTED_BY"}}</th>
          {{/if}}
          <th class="roll-result">{{localize "PF2E_VISIONER.SEEK_AUTOMATION.ROLL_VS_DC"}}</th>
          <th class="outcome">{{localize "PF2E_VISIONER.SEEK_AUTOMATION.OUTCOME"}}</th>
          <th class="visibility-change">{{localize "PF2E_VISIONER.SEEK_AUTOMATION.VISIBILITY_CHANGE"}}</th>
          <th class="actions">{{localize "PF2E_VISIONER.UI.ACTIONS"}}</th>
        </tr>
      </thead>
      <tbody>
        {{#each outcomes as |outcome|}}
          <tr class="token-row" {{#unless outcome._isWall}}data-token-id="{{outcome.target.id}}"{{/unless}} {{#if outcome._isWall}}data-wall-id="{{outcome.wallId}}"{{/if}}>
            <td class="token-image">
              {{#if outcome._isWall}}
                <img src="{{outcome.wallImg}}" data-tooltip="{{outcome.wallIdentifier}}" width="28" height="28" />
              {{else}}
                <span class="token-img-wrapper">
                  <img src="{{outcome.tokenImage}}" data-tooltip="{{outcome.target.name}}" width="28" height="28" />
                  {{#if outcome.target.document.hidden}}
                    <span class="foundry-hidden-indicator" data-tooltip="{{localize 'PF2E_VISIONER.UI.FOUNDRY_HIDDEN'}}"><i class="fas fa-eye-slash"></i></span>
                  {{/if}}
                </span>
              {{/if}}
            </td>
            <td class="token-name">
              {{#if outcome._isWall}}
                <strong data-tooltip="{{outcome.wallIdentifier}}">{{outcome.wallIdentifier}}</strong>
              {{else}}
                <div class="token-name-and-tags">
                  <strong data-tooltip="{{outcome.target.name}}">{{outcome.target.name}}</strong>
                </div>
              {{/if}}
            </td>
            {{#if ../avsEnabled}}
              <td class="detected-by">
                {{#if outcome.detectedBySense}}
                  {{{senseIcon outcome.detectedBySense}}}
                {{else}}
                  <span class="no-detection">—</span>
                {{/if}}
              </td>
            {{/if}}
            <td class="roll-result">
              {{#if outcome.isPointOut}}
                <span class="point-out-indicator">{{localize "PF2E_VISIONER.UI.POINT_OUT_INDICATOR"}}</span>
                <br><small class="stealth-dc">{{localize "PF2E_VISIONER.UI.TARGET_DC"}} {{outcome.dc}}</small>
              {{else}}
                <div class="roll-vs-dc">
                  <div class="roll-dc-line">
                    <span class="roll-total">{{outcome.rollTotal}}</span>
                    <span class="vs-text">{{localize "PF2E_VISIONER.UI.VS_DC"}}</span>
                    <span class="dc-value">{{outcome.dc}}</span>
                  </div>
                  <div class="margin-display">({{outcome.marginText}})</div>
                </div>
              {{/if}}
            </td>
            <td class="outcome {{outcome.outcomeClass}}" {{#if outcome.unmetCondition}}data-tooltip="{{outcome.unmetCondition}}"{{/if}}>
              {{outcome.outcomeLabel}}
              {{#if outcome.deferred}}
                <span class="tag tag-deferred" data-tooltip="{{localize 'PF2E_VISIONER.DIALOG_TITLES.SEEK_DEFERRED'}}" style="font-size:0.75em; padding:1px 5px; border-radius:8px; background:var(--color-border-light-2, #aaa); color:var(--color-text-dark-primary, #333); margin-left:4px; white-space:nowrap;">
                  <i class="fas fa-clock" style="margin-right:2px;"></i>{{localize 'PF2E_VISIONER.DIALOG_TITLES.SEEK_DEFERRED_SHORT'}}
                </span>
              {{/if}}
              {{#if outcome.sneakyFeatApplied}}
                <span class="sneaky-feat-indicator" data-tooltip="{{localize 'PF2E_VISIONER.SNEAKY_FEAT.TOOLTIP'}}">
                  <i class="fas fa-mask"></i>
                  {{localize "PF2E_VISIONER.SNEAKY_FEAT.VISIBILITY_CAPPED"}}
                </span>
              {{/if}}
            </td>
            <td class="visibility-change">
              <div class="visibility-change-with-override">
                <span class="old-visibility-state {{#if outcome.isOldStateAvsControlled}}avs-controlled{{/if}}">
                  {{{visibilityIcon outcome.oldVisibility}}}
                  {{#if outcome.isOldStateAvsControlled}}
                    <span class="avs-tag-small" data-tooltip="{{localize 'PF2E_VISIONER.UI.AVS_CONTROLLED'}}">
                      <i class="fas fa-bolt-auto"></i>
                    </span>
                  {{/if}}
                </span>
                <i class="fas fa-arrow-right position-arrow" aria-hidden="true"></i>
                <div class="override-icons" data-target="{{#unless outcome._isWall}}{{outcome.target.id}}{{/unless}}" data-wall-id="{{#if outcome._isWall}}{{outcome.wallId}}{{/if}}">
                  {{#each outcome.availableStates as |state|}}
                    <button type="button" class="state-icon {{#if state.selected}}selected{{/if}} {{#if state.calculatedOutcome}}calculated-outcome{{/if}} {{state.cssClass}}" 
                            data-state="{{state.value}}" data-target="{{outcome.target.id}}" 
                            data-tooltip="{{localize 'PF2E_VISIONER.UI.OVERRIDE_TO_STATE' label=state.label}}">
                      <i class="{{state.icon}}"></i>
                    </button>
                  {{/each}}
                  <input type="hidden" name="override.{{outcome.target.id}}" value="{{outcome.overrideState}}" />
                </div>
              </div>
            </td>
                        <td class="actions">
              {{#unless outcome._isWall}}
                <button type="button" class="row-timer-toggle" data-token-id="{{outcome.target.id}}" data-tooltip="{{localize 'PF2E_VISIONER.TIMED_OVERRIDE.SET_DURATION_FOR_ROW'}}">
                  <i class="fas fa-clock"></i>
                </button>
                <button type="button" class="row-action-btn apply-change" data-action="applyChange" data-token-id="{{outcome.target.id}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.APPLY_VISIBILITY_CHANGE'}}">
                  <i class="fas fa-check"></i>
                </button>
                <button type="button" class="row-action-btn revert-change" data-action="revertChange" data-token-id="{{outcome.target.id}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.REVERT_TO_ORIGINAL'}}">
                  <i class="fas fa-undo"></i>
                </button>
              {{/unless}}
            </td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

  {{!-- Bulk Actions --}}
  <div class="seek-preview-dialog-bulk-actions-header">
    <div class="seek-preview-dialog-bulk-actions-info">
      <span class="seek-preview-dialog-changes-count">{{changesCount}}</span> of <span class="seek-preview-dialog-total-count">{{totalCount}}</span> targets will have visibility changes.
    </div>
    <div class="seek-preview-dialog-bulk-actions-buttons">
      <button type="button" class="bulk-action-btn apply-all" data-action="applyAll" data-tooltip="{{localize 'PF2E_VISIONER.UI.APPLY_ALL_CHANGES'}}">
        <i class="fas fa-check-circle"></i> {{localize "PF2E_VISIONER.UI.APPLY_ALL"}}
      </button>
      <button type="button" class="bulk-action-btn revert-all" data-action="revertAll" data-tooltip="{{localize 'PF2E_VISIONER.UI.REVERT_ALL_CHANGES'}}" disabled>
        <i class="fas fa-undo"></i> {{localize "PF2E_VISIONER.UI.REVERT_ALL"}}
      </button>
    </div>
  </div>
</div>