<script lang="ts">
  import { layout } from '$lib/stores/layout.svelte.js';
  import { SYMBOL_GROUPS } from '$lib/symbols.js';

  function toggle(group: string) {
    layout.toggleGroupHidden(group);
  }

  let hasHidden = $derived(layout.symbols.some(s => s.hidden));
</script>

<div class="visibility-bar">
  {#each SYMBOL_GROUPS as group}
    <button
      class="group-chip"
      class:hidden-group={layout.hiddenGroups.has(group)}
      onclick={() => toggle(group)}
      title={layout.hiddenGroups.has(group) ? `Show ${group}` : `Hide ${group}`}
    >
      {group}
    </button>
  {/each}
  {#if hasHidden}
    <button class="show-all-btn" onclick={() => layout.showAllHidden()}>
      Show Hidden
    </button>
  {/if}
</div>

<style>
  .visibility-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #1a1a2e;
    border-bottom: 1px solid #0f3460;
    flex-shrink: 0;
  }

  .group-chip {
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 12px;
    border: 1px solid #0f3460;
    background: #16213e;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }

  .group-chip:hover {
    border-color: #e94560;
  }

  .group-chip.hidden-group {
    background: transparent;
    color: #555;
    border-color: #333;
    text-decoration: line-through;
  }

  .show-all-btn {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 12px;
    border: 1px solid #e94560;
    background: transparent;
    color: #e94560;
    cursor: pointer;
    transition: all 0.15s;
  }

  .show-all-btn:hover {
    background: #e94560;
    color: #fff;
  }
</style>
