// CRM chat-view reference (extracted from app/page.tsx)
// LINE_GREEN='#06C755'

// --- per-person inbound bubble color ---

// Soft per-person bubble palette for inbound messages (left side).
// Keyed by sender id so each person in a group gets a stable, distinct color.
function inboundBubble(id: string): { bg: string; nameColor: string } {
  const palette = [
    { bg: "#ffffff", nameColor: "#374151" },
    { bg: "#e0f2fe", nameColor: "#0369a1" },
    { bg: "#fef3c7", nameColor: "#b45309" },
    { bg: "#fce7f3", nameColor: "#be185d" },
    { bg: "#ede9fe", nameColor: "#6d28d9" },
    { bg: "#dcfce7", nameColor: "#15803d" },
    { bg: "#ffe4e6", nameColor: "#be123c" },
  ];
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) % palette.length;
  return palette[h];
}

// --- timeline render: text / image / video / file-card, inbound+outbound ---

              {/* message timeline — chat layout: outbound right (green), inbound left (per-person color) */}
              <div className="flex-1 overflow-y-auto px-5 py-4 space-y-2.5" style={{ background: "#eef1f4" }}>
                {msgLoading ? (
                  <div className="text-center text-[13px]" style={{ color: "#9ca3af" }}>加载中…</div>
                ) : messages.length === 0 ? (
                  <div className="text-center text-[13px] pt-6" style={{ color: "#9ca3af" }}>还没有对话记录</div>
                ) : (
                  messages.map((m, i) => {
                    const isOut = m.direction === "out";
                    const senderId = m.user_id || selected.user_id;
                    const palette = inboundBubble(senderId);
                    const prev = messages[i - 1];
                    // show sender label when inbound and sender changed (useful for group chats)
                    const showName =
                      !isOut &&
                      (!prev || prev.direction === "out" || (prev.user_id || "") !== (m.user_id || ""));
                    const hasImage = Boolean(m.image_url);
                    const isVideo = (m.msg_type === "视频") && Boolean(m.file_url);
                    const hasFile = !isVideo && Boolean(m.file_url);
                    const hasMedia = hasImage || isVideo;
                    return (
                      <div
                        key={m.id}
                        className="flex"
                        style={{ justifyContent: isOut ? "flex-end" : "flex-start" }}
                      >
                        <div className="max-w-[78%]">
                          {showName && (
                            <div className="text-[11px] font-medium mb-0.5 px-1" style={{ color: palette.nameColor }}>
                              {m.display_name || "对方"}
                            </div>
                          )}
                          <div
                            className="text-[14px] shadow-sm overflow-hidden"
                            style={{
                              background: isOut ? LINE_GREEN : palette.bg,
                              color: isOut ? "white" : "#111827",
                              borderRadius: 16,
                              borderTopRightRadius: isOut ? 4 : 16,
                              borderTopLeftRadius: isOut ? 16 : 4,
                              padding: hasMedia ? 4 : hasFile ? 8 : "8px 14px",
                            }}
                          >
                            {hasImage && (
                              // eslint-disable-next-line @next/next/no-img-element
                              <a href={m.image_url as string} target="_blank" rel="noreferrer">
                                <img
                                  src={m.image_url as string}
                                  alt="图片"
                                  className="rounded-xl block"
                                  style={{ maxWidth: 240, maxHeight: 320, objectFit: "cover" }}
                                />
                              </a>
                            )}
                            {isVideo && (
                              // biome-ignore lint/a11y/useMediaCaption: user-sent LINE video has no caption track
                              <video
                                src={m.file_url as string}
                                controls
                                preload="metadata"
                                className="rounded-xl block"
                                style={{ maxWidth: 240, maxHeight: 320, background: "#000" }}
                              />
                            )}
                            {hasFile && (
                              <a
                                href={m.file_url as string}
                                target="_blank"
                                rel="noreferrer"
                                className="flex items-center gap-2.5 rounded-xl px-3 py-2"
                                style={{ background: isOut ? "rgba(255,255,255,0.16)" : "#f8fafc", minWidth: 180, textDecoration: "none" }}
                              >
                                <span style={{ fontSize: 26, lineHeight: 1 }}>📄</span>
                                <span className="min-w-0">
                                  <span className="block font-semibold text-[13px] truncate" style={{ color: isOut ? "white" : "#111827", maxWidth: 180 }}>
                                    {m.file_name || "文件"}
                                  </span>
                                  <span className="block text-[11px]" style={{ color: isOut ? "rgba(255,255,255,0.8)" : "#6b7280" }}>
                                    点击打开 / 下载
                                  </span>
                                </span>
                              </a>
                            )}
                            {m.content && m.content !== "[图片]" && m.content !== "[视频]" && !(hasFile && m.content === `[文件] ${m.file_name}`) && (
                              <div style={{ padding: hasMedia || hasFile ? "6px 6px 4px" : 0 }}>{m.content}</div>
                            )}
                          </div>
                          <div
                            className="flex items-center gap-2 mt-1 px-1"
                            style={{ justifyContent: isOut ? "flex-end" : "flex-start" }}
                          >
                            {!isOut && m.group_name && (
                              <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ background: "#e0e7ff", color: "#4338ca" }}>
                                👥 {m.group_name}
                              </span>
                            )}
                            <span className="text-[10px]" style={{ color: "#9ca3af" }}>{relativeTime(m.received_at)}</span>
                          </div>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>

