<script lang="ts">
  import type { AISessionItem, WorkbenchChannel, WorkbenchProject } from './types';

  export let project: WorkbenchProject;
  export let channels: WorkbenchChannel[];
  export let selectedChannelID: string;
  export let tags: string[];
  export let recentSessions: AISessionItem[];
  export let onSelectChannel: (channelID: string) => void;

  const channelIcons: Record<WorkbenchChannel['icon'], string> = {
    home: '\u2302',
    mail: '\u2709',
    list: '\u2630',
    sparkles: '\u2726',
    file: '\u25A4',
    clock: '\u25F7',
    link: '\u21AA',
  };

  $: sortedChannels = [...channels].sort((left, right) => left.sortOrder - right.sortOrder);
</script>

<aside class="channel-sidebar" aria-label="Project channels">
  <header>
    <div>
      <p>Current project</p>
      <h2>{project.name}</h2>
    </div>
    <button aria-label="Project settings" disabled>&#9881;</button>
  </header>

  <ul class="tag-row" aria-label="Project tags">
    {#each tags as tag}
      <li>#{tag}</li>
    {/each}
  </ul>

  <section class="channel-group">
    {#each sortedChannels as channel}
      <button
        class:active={channel.id === selectedChannelID}
        aria-pressed={channel.id === selectedChannelID}
        aria-label={`${channel.title}${channel.count ? ` ${channel.count}` : ''}`}
        on:click={() => onSelectChannel(channel.id)}
      >
        <span class="channel-icon" aria-hidden="true">{channelIcons[channel.icon]}</span>
        <span>{channel.title}</span>
        {#if channel.count !== undefined}
          <small>{channel.count}</small>
        {/if}
      </button>
    {/each}
  </section>

  <section class="recent-sessions" aria-label="Recent sessions">
    <h3>Recent sessions</h3>
    <ul>
      {#each recentSessions as session}
        <li>
          <span>{session.title}</span>
          <small>{session.updatedAt}</small>
        </li>
      {/each}
    </ul>
  </section>
</aside>
