<script lang="ts">
  import type { ChatMessage } from '../lib/model';
  import { t } from '../lib/i18n/index.svelte';

  let {
    messages,
    myId,
    busy,
    onsend,
    onnudge,
  }: {
    messages: ChatMessage[];
    myId: string;
    busy: boolean;
    onsend: (text: string) => void;
    onnudge: () => void;
  } = $props();

  let text = $state('');

  function send() {
    const v = text.trim();
    if (!v) return;
    onsend(v);
    text = '';
  }
</script>

<div class="chat">
  <div class="list">
    {#if messages.length === 0}
      <p class="empty">{t('chat.empty')}</p>
    {/if}
    {#each messages as m (m.id)}
      {#if m.kind === 'nudge'}
        <div class="note">{t('chat.nudge')}</div>
      {:else}
        <div class="msg" class:mine={m.senderId === myId}>{m.body}</div>
      {/if}
    {/each}
  </div>
  <div class="input">
    <input
      maxlength="60"
      placeholder={t('chat.placeholder')}
      bind:value={text}
      onkeydown={(e) => e.key === 'Enter' && send()}
    />
    <button onclick={send} disabled={busy}>{t('chat.send')}</button>
    <button class="nudge" onclick={onnudge} disabled={busy}>{t('chat.nudge')}</button>
  </div>
</div>

<style>
  .chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 56vh;
  }
  .list {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
  }
  .empty {
    color: var(--text-muted);
    text-align: center;
    margin: auto;
  }
  .msg {
    align-self: flex-start;
    max-width: 80%;
    padding: 7px 11px;
    border-radius: 12px;
    background: var(--surface-2);
  }
  .msg.mine {
    align-self: flex-end;
    background: var(--accent);
    color: var(--accent-text);
  }
  .note {
    align-self: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
  }
  .input {
    display: flex;
    gap: 6px;
  }
  .input input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
  }
  .input button {
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-weight: 600;
  }
</style>
