<script lang="ts">
  import { ripple } from "$lib/actions/ripple";
  import type { Chat } from "$lib/api/types";
  import Avatar from "$lib/components/ui/Avatar.svelte";
  import { formatListDate } from "$lib/format/datetime";
  import { accounts } from "$lib/stores/accounts.svelte";
  import { peers } from "$lib/stores/peers.svelte";

  interface Props {
    chat: Chat;
    onclick: () => void;
    selected: boolean;
  }

  let { chat, selected, onclick }: Props = $props();

  const title = $derived(
    chat.title ??
      (chat.chat_id > 0 ? "Удалённый аккаунт" : `Chat ${chat.chat_id}`)
  );
  const avatarKind = $derived(chat.chat_id > 0 ? "peer" : "chat");
  const ownId = $derived(accounts.selected?.tg_user_id ?? null);
  const showSender = $derived(
    chat.kind === "group" && chat.last_sender_id !== null
  );

  $effect(() => {
    if (showSender && chat.last_sender_id !== ownId) {
      peers.ensure([chat.last_sender_id as number]);
    }
  });

  const senderPrefix = $derived.by(() => {
    if (!showSender) {
      return "";
    }
    if (chat.last_sender_id === ownId) {
      return "You: ";
    }
    const peer = peers.get(chat.last_sender_id as number);
    if (!peer) {
      return "";
    }
    return `${peer.first_name ?? peer.username ?? peer.peer_id}: `;
  });

  const preview = $derived(
    chat.last_text ?? (chat.message_count > 0 ? "Media" : "")
  );
</script>

<button
  type="button"
  class="Chat ListItem-button"
  class:selected
  use:ripple
  {onclick}
>
  <Avatar
    name={title}
    colorKey={chat.chat_id}
    avatar={{ kind: avatarKind, id: chat.chat_id }}
    hasAvatar={chat.has_avatar}
  />
  <div class="info">
    <div class="info-row">
      <h3 class="title">{title}</h3>
      <span class="date">{formatListDate(chat.last_date)}</span>
    </div>
    <div class="subtitle">
      <span class="last-message">
        {#if senderPrefix}
          <span class="sender">{senderPrefix}</span>
        {/if}
        {preview}
      </span>
    </div>
  </div>
</button>

<style lang="scss">
  .Chat {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.625rem;

    width: 100%;
    padding: 0.5625rem 0.5rem;
    border: 0;
    border-radius: 0.625rem;

    text-align: start;
    color: var(--color-text);
    background-color: transparent;
    transition: background-color 0.15s ease;

    --ripple-color: var(--color-interactive-element-hover);

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-chat-hover);
      }
    }

    &.selected {
      background-color: var(--color-chat-active);

      .title,
      .date,
      .last-message,
      .sender {
        color: var(--color-white);
      }
    }
  }

  .info {
    overflow: hidden;
    flex: 1;
    min-width: 0;
  }

  .info-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .title {
    overflow: hidden;
    flex: 1;

    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .date {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
  }

  .subtitle {
    margin-top: 0.125rem;
  }

  .last-message {
    overflow: hidden;
    display: block;

    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sender {
    color: var(--color-text);
  }
</style>
