<script lang="ts">
  import { getAllProcessors } from "../audio/processors/registry";
  import type { AudioProcessor, ProcessorCategory } from "../audio/processors/AudioProcessor";

  interface Props {
    onselect: (processor: AudioProcessor) => void;
    selectedCategory: ProcessorCategory | 'All';
    onselectcategory: (category: ProcessorCategory | 'All') => void;
  }

  let { onselect, selectedCategory, onselectcategory }: Props = $props();

  const allProcessors = getAllProcessors();

  const allCategories: ProcessorCategory[] = [
    'Amplitude',
    'Filter',
    'Time',
    'Space',
    'Pitch',
    'Modulation',
    'Distortion',
    'Spectral',
    'Utility'
  ];

  const categoryCountsMap = $derived.by(() => {
    const counts = new Map<ProcessorCategory, number>();
    for (const processor of allProcessors) {
      const category = processor.getCategory();
      counts.set(category, (counts.get(category) || 0) + 1);
    }
    return counts;
  });

  const filteredProcessors = $derived(
    selectedCategory === 'All'
      ? allProcessors.sort((a, b) => a.getName().localeCompare(b.getName()))
      : allProcessors
          .filter(p => p.getCategory() === selectedCategory)
          .sort((a, b) => a.getName().localeCompare(b.getName()))
  );
</script>

<div class="processor-popup">
  <div class="popup-sidebar">
    <button
      class="category-filter"
      class:active={selectedCategory === 'All'}
      onclick={() => onselectcategory('All')}
    >
      All ({allProcessors.length})
    </button>
    {#each allCategories as category}
      <button
        class="category-filter"
        class:active={selectedCategory === category}
        onclick={() => onselectcategory(category)}
      >
        {category} ({categoryCountsMap.get(category) || 0})
      </button>
    {/each}
  </div>
  <div class="processors-grid">
    {#each filteredProcessors as processor}
      <button
        class="processor-tile"
        data-description={processor.getDescription()}
        onclick={() => onselect(processor)}
      >
        {processor.getName()}
      </button>
    {/each}
  </div>
</div>

<style>
  .processor-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0a0a0a;
    border: 2px solid #fff;
    z-index: 1000;
    width: 90vw;
    max-width: 500px;
    margin-bottom: 0.5rem;
    max-height: 60vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }

  .popup-sidebar {
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
    border-right: 1px solid #333;
    min-width: 80px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
  }

  .popup-sidebar::-webkit-scrollbar {
    width: 3px;
  }

  .popup-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .popup-sidebar::-webkit-scrollbar-thumb {
    background: #444;
  }

  .category-filter {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.4rem;
    background-color: #1a1a1a;
    border: none;
    border-bottom: 1px solid #2a2a2a;
    color: #888;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
  }

  .category-filter:hover {
    background-color: #222;
    color: #aaa;
  }

  .category-filter.active {
    background-color: #0a0a0a;
    color: #fff;
  }

  .processors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
  }

  .processor-tile {
    background-color: #1a1a1a;
    border: 1px solid #444;
    padding: 0.5rem 0.4rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: 0.8rem;
    color: #fff;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .processor-tile:hover {
    background-color: #2a2a2a;
    border-color: #646cff;
  }

  .processor-tile::after {
    content: attr(data-description);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background-color: #0a0a0a;
    border: 1px solid #444;
    color: #ccc;
    font-size: 0.85rem;
    width: max-content;
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1001;
    margin-bottom: 0.25rem;
    display: none;
  }

  @media (min-width: 768px) {
    .processor-popup {
      width: 550px;
      max-width: 550px;
    }

    .popup-sidebar {
      min-width: 100px;
    }

    .category-filter {
      font-size: 0.7rem;
      padding: 0.5rem 0.6rem;
    }

    .processors-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      padding: 0.6rem;
    }

    .processor-tile {
      font-size: 0.85rem;
      padding: 0.6rem 0.5rem;
    }

    .processor-tile::after {
      display: block;
      max-width: 300px;
    }

    .processor-tile:hover::after {
      opacity: 1;
    }
  }

  @media (min-width: 1024px) {
    .processor-popup {
      width: 650px;
      max-width: 650px;
    }

    .popup-sidebar {
      min-width: 110px;
    }

    .processors-grid {
      grid-template-columns: repeat(4, 1fr);
      padding: 0.75rem;
    }

    .processor-tile {
      font-size: 0.85rem;
      padding: 0.6rem 0.4rem;
    }
  }
</style>
