webmail-client/frontend/src/components/list/MessageList.tsx

import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef } from "react";

import { useT } from "../../i18n";
import type { Address, ThreadSummary } from "../../lib/types";
import { Icon } from "../Icon";

function timeLabel(iso: string): string {
  const d = new Date(iso);
  const now = new Date();
  if (d.toDateString() === now.toDateString())
    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  if (d.getFullYear() === now.getFullYear())
    return d.toLocaleDateString([], { month: "short", day: "numeric" });
  return d.toLocaleDateString([], { year: "2-digit", month: "short", day: "numeric" });
}

// Stable per-sender hue so a sender's avatar keeps a consistent colour.
function hue(key: string): number {
  let h = 0;
  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) % 360;
  return h;
}

function initials(p: Address | undefined): string {
  const name = (p?.name || p?.email || "?").trim();
  const words = name.split(/\s+/).filter(Boolean);
  if (words.length >= 2) return (words[0][0] + words[words.length - 1][0]).toUpperCase();
  return name.slice(0, 2).toUpperCase();
}

// Monocolor paperclip (inherits currentColor) — replaces the old emoji.
function Paperclip() {
  return (
    <svg
      width="17"
      height="17"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      className="shrink-0"
    >
      <path d="M12.5 6.5l-5.2 5.2a2.5 2.5 0 0 1-3.5-3.5l5.4-5.4a1.6 1.6 0 0 1 2.3 2.3l-5.3 5.3a0.8 0.8 0 0 1-1.1-1.1l4.9-4.9" />
    </svg>
  );
}

// Virtualized thread list (SPEC §2 list/MessageList.tsx).
export function MessageList({
  threads,
  selectedId,
  folder,
  onSelect,
  onArchive,
  onRestore,
  onTrash,
  onDeletePermanent,
  onTogglePin,
  checkedIds,
  onToggleCheck,
}: {
  threads: ThreadSummary[];
  selectedId?: string;
  folder: string;
  onSelect: (id: string) => void;
  onArchive: (id: string) => void;
  onRestore: (id: string) => void;
  onTrash: (id: string) => void;
  onDeletePermanent: (id: string) => void;
  onTogglePin: (id: string, pinned: boolean) => void;
  checkedIds: Set<string>;
  onToggleCheck: (id: string) => void;
}) {
  const t = useT();
  const parentRef = useRef<HTMLDivElement>(null);
  // In Trash/Spam/Archive the middle action restores; elsewhere it archives.
  const isRemovalFolder = folder === "trash" || folder === "junk" || folder === "archive";

  // Row selection: hovering an avatar reveals a checkbox; once anything is checked,
  // every row shows a checkbox (selection mode) until all are cleared.
  const checkMode = checkedIds.size > 0;

  const virtualizer = useVirtualizer({
    count: threads.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 75, // 68 row + 7px gap
    overscan: 8,
  });

  if (threads.length === 0) {
    return <div className="p-6 text-[15px] text-app-faint">{t("mail.noConversations")}</div>;
  }

  return (
    <div ref={parentRef} className="h-full overflow-y-auto" data-testid="message-list">
      <div style={{ height: virtualizer.getTotalSize(), position: "relative", width: "100%" }}>
        {virtualizer.getVirtualItems().map((item) => {
          const thread = threads[item.index];
          const unread = thread.unread_count > 0;
          const selected = selectedId === thread.id;
          const checked = checkedIds.has(thread.id);
          const primary = thread.participants[0];
          const names =
            thread.participants.map((p) => p.name || p.email).join(",  ") || "(no one)";
          const extra = Math.max(0, thread.participants.length - 1);
          const avatarBg = `hsl(${hue(primary?.email || primary?.name || "?")} 45% 45%)`;
          const stop = (fn: () => void) => (e: React.MouseEvent) => {
            e.stopPropagation();
            fn();
          };
          return (
            <div
              key={thread.id}
              role="button"
              tabIndex={0}
              onClick={() => onSelect(thread.id)}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") onSelect(thread.id);
              }}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: item.size,
                transform: `translateY(${item.start}px)`,
              }}
              className="group absolute inset-x-0 cursor-pointer px-2 pt-[7px]"
            >
              <div
                className={`flex h-full items-center gap-3 rounded-lg px-3 ${
                  selected || checked ? "bg-app-active" : "group-hover:bg-app-hover"
                }`}
              >
                {/* Avatar, replaced by a selection checkbox on avatar-hover or once
                    selection mode is active. An unread dot sits in the left margin. */}
                <div className="group/av relative ml-5 h-[33px] w-[33px] shrink-0">
                  {unread && (
                    <span
                      aria-hidden
                      className="absolute -left-[21px] top-1/2 h-2 w-2 -translate-y-1/2 rounded-full bg-app-accent"
                    />
                  )}
                  <div className={checkMode ? "hidden" : "contents group-hover/av:hidden"}>
                    <span
                      className="flex h-[33px] w-[33px] items-center justify-center rounded-full text-[13px] font-semibold text-white"
                      style={{ backgroundColor: avatarBg }}
                    >
                      {initials(primary)}
                    </span>
                    {extra > 0 && (
                      <span className="absolute -bottom-1 -left-1.5 rounded-full bg-app-hover px-1 text-[10px] font-medium text-app-muted ring-2 ring-app-surface">
                        +{extra}
                      </span>
                    )}
                  </div>
                  <button
                    type="button"
                    aria-label={t("mail.select")}
                    aria-pressed={checked}
                    onClick={stop(() => onToggleCheck(thread.id))}
                    className={`absolute inset-0 items-center justify-center ${
                      checkMode ? "flex" : "hidden group-hover/av:flex"
                    }`}
                  >
                    <span
                      className={`flex h-[17px] w-[17px] items-center justify-center rounded-md border-2 transition-colors ${
                        checked
                          ? "border-app-accent bg-app-accent text-white"
                          : "border-app-faint hover:border-app-muted"
                      }`}
                    >
                      {checked && (
                        <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M3.5 8.5l3 3 6-7" />
                        </svg>
                      )}
                    </span>
                  </button>
                </div>

                {/* Sender column */}
                <div className="flex w-[200px] min-w-0 shrink items-center gap-1.5">
                  <span
                    className={`truncate text-[15px] ${
                      unread ? "font-black text-app-fg" : "text-app-fg"
                    }`}
                  >
                    {names}
                  </span>
                  {thread.message_count > 1 && (
                    <span className="shrink-0 rounded-full bg-app-hover px-1.5 text-[12px] text-app-muted">
                      {thread.message_count}
                    </span>
                  )}
                </div>

                {/* Subject + snippet (extra left margin -> 3x the gap to the sender). */}
                <div className="ml-6 flex min-w-0 flex-1 flex-col justify-center">
                  <div
                    className={`truncate text-[14px] ${
                      unread ? "font-black text-app-fg" : "text-app-fg"
                    }`}
                  >
                    {thread.subject}
                  </div>
                  <div className="truncate text-xs text-app-faint">{thread.snippet}</div>
                </div>

                {/* Right rail: four evenly-spaced icons, vertically centred. The
                    paperclip and pin keep fixed slots (archive/trash reserve their
                    space while hidden), and the date is an overlay on the right that
                    is simply hidden on hover to reveal archive + trash — so nothing
                    ever shifts between the normal and hover states. */}
                <div className="relative flex shrink-0 items-center justify-end gap-5">
                  {/* Attachment: fixed slot (reserved even when empty) so the rail
                      width — and thus the excerpt width — is the same in every row. */}
                  <span className="flex w-[17px] shrink-0 justify-center text-app-faint">
                    {thread.has_attachments && <Paperclip />}
                  </span>
                  {/* Pin: pink and always shown when pinned; otherwise revealed on hover. */}
                  <button
                    type="button"
                    title={thread.pinned ? t("mail.unpin") : t("mail.pin")}
                    onClick={stop(() => onTogglePin(thread.id, thread.pinned))}
                    className={
                      thread.pinned
                        ? "text-[rgb(220_129_143)]"
                        : "invisible text-app-muted hover:text-app-fg group-hover:visible"
                    }
                  >
                    <Icon name="pin" size={17} />
                  </button>
                  {/* Archive (or Restore in Trash/Spam/Archive) + delete: hover-only,
                      but reserve their slots always. In Trash, delete is permanent. */}
                  {isRemovalFolder ? (
                    <button
                      type="button"
                      title={t("mail.restore")}
                      onClick={stop(() => onRestore(thread.id))}
                      className="invisible text-app-muted hover:text-app-fg group-hover:visible"
                    >
                      <Icon name="restore" size={17} />
                    </button>
                  ) : (
                    <button
                      type="button"
                      title={t("mail.archive")}
                      onClick={stop(() => onArchive(thread.id))}
                      className="invisible text-app-muted hover:text-app-fg group-hover:visible"
                    >
                      <Icon name="archive" size={15} />
                    </button>
                  )}
                  <button
                    type="button"
                    title={t("mail.delete")}
                    onClick={stop(() =>
                      folder === "trash" ? onDeletePermanent(thread.id) : onTrash(thread.id),
                    )}
                    className="invisible mr-[7px] text-app-muted hover:text-app-fg group-hover:visible"
                  >
                    <Icon name="trash" size={17} />
                  </button>
                  {/* Date overlay, aligned to the right edge (over the archive/trash
                      slots); hidden on hover so the actions show through. */}
                  <span
                    className={`absolute inset-y-0 right-0 flex items-center whitespace-nowrap text-[13px] tabular-nums text-app-faint group-hover:hidden ${
                      unread ? "font-bold" : ""
                    }`}
                  >
                    {timeLabel(thread.last_message_at)}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}