<script lang="ts">
  import type { Announcement, Color } from '@blind-chess/shared';
  import { moderatorText } from './moderator-strings.js';

  interface Props {
    announcements: Announcement[];
    you: Color;
  }
  let { announcements, you }: Props = $props();

  // Show only entries this viewer is allowed to see.
  const visible = $derived(
    announcements.filter((a) => a.audience === 'both' || a.audience === you),
  );

  let scrollEl: HTMLDivElement | null = $state(null);
  $effect(() => {
    void visible.length;
    if (scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
  });
</script>

<div class="panel">
  <header>Moderator</header>
  <div class="log" bind:this={scrollEl}>
    {#each visible as a, i (i)}
      {@const isAttempt = a.text === 'no_such_piece' || a.text === 'no_legal_moves' || a.text === 'wont_help' || a.text === 'illegal_move'}
      {@const actor = a.ply % 2 === 0 ? 'White' : 'Black'}
      <div class="entry" class:attempt={isAttempt}>
        <span class="ply">{a.ply > 0 ? `#${a.ply}` : ''}</span>
        <span class="text">{isAttempt ? `${actor} — ` : ''}{moderatorText(a.text, a.payload)}</span>
      </div>
    {:else}
      <div class="empty muted">The moderator is silent.</div>
    {/each}
  </div>
</div>

<style>
  .panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
  }
  header {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
  }
  .log {
    padding: 8px 14px;
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
  }
  .entry {
    padding: 4px 0;
    display: flex;
    gap: 8px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
  }
  .entry:last-child { border-bottom: none; }
  .entry.attempt .text { color: var(--text-dim); font-style: italic; }
  .ply {
    color: var(--text-dim);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    flex-shrink: 0;
    width: 32px;
  }
  .empty { padding: 6px 0; font-style: italic; }
</style>
