apes/ui/colony/src/components/MessageItem.tsx

import { useState } from "react";
import type { Message } from "@/types/Message";

interface Props {
  message: Message;
  replyTarget?: Message;
  onReply: (id: string) => void;
}

const TYPE_BORDER: Record<string, string> = {
  text: "",
  code: "border-l-2 border-amber-500/70",
  result: "border-l-2 border-emerald-500/70",
  error: "border-l-2 border-red-500/70",
  plan: "border-l-2 border-blue-500/70",
};

const TYPE_LABEL: Record<string, { text: string; color: string }> = {
  code: { text: "CODE", color: "text-amber-500" },
  result: { text: "RES", color: "text-emerald-500" },
  error: { text: "ERR", color: "text-red-500" },
  plan: { text: "PLAN", color: "text-blue-500" },
};

function timeAgo(dateStr: string): string {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return "now";
  if (mins < 60) return `${mins}m`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h`;
  return `${Math.floor(hrs / 24)}d`;
}

export function MessageItem({ message, replyTarget, onReply }: Props) {
  const [metaOpen, setMetaOpen] = useState(false);
  const isAgent = message.user.role === "agent";
  const isDeleted = !!message.deleted_at;
  const border = TYPE_BORDER[message.type] || "";
  const label = TYPE_LABEL[message.type];
  const meta = message.metadata as Record<string, string> | null;

  return (
    <div
      className={`group relative px-3 py-2 md:px-4 transition-colors hover:bg-white/[0.03] ${
        isAgent ? "bg-white/[0.02]" : ""
      }`}
    >
      {/* Agent glow — left edge */}
      {isAgent && (
        <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-blue-500/30" />
      )}

      {/* Reply context */}
      {replyTarget && (
        <div className="mb-1 text-[10px] md:text-[11px] text-muted-foreground flex items-center gap-1 opacity-60 pl-7 md:pl-9">
          <span>^</span>
          <span className="font-medium">{replyTarget.user.display_name}</span>
          <span className="truncate max-w-40 md:max-w-80">{replyTarget.content}</span>
        </div>
      )}

      <div className={`flex items-start gap-2 md:gap-3 ${border} ${border ? "pl-2 md:pl-3" : ""}`}>
        {/* Avatar — small on mobile */}
        <div
          className={`w-5 h-5 md:w-6 md:h-6 flex-shrink-0 flex items-center justify-center text-[9px] md:text-[10px] font-bold rounded-sm ${
            isAgent
              ? "bg-blue-500/20 text-blue-400"
              : "bg-secondary text-muted-foreground"
          }`}
        >
          {message.user.display_name[0]}
        </div>

        <div className="flex-1 min-w-0">
          {/* Header */}
          <div className="flex items-center gap-1.5 md:gap-2 text-[10px] md:text-[11px] flex-wrap">
            <span className={`font-bold ${isAgent ? "text-blue-400" : "text-foreground"}`}>
              {message.user.display_name}
            </span>
            {isAgent && (
              <span className="text-[9px] px-1 bg-blue-500/20 rounded-sm text-blue-400">
                AGT
              </span>
            )}
            {label && (
              <span className={`text-[9px] md:text-[10px] font-bold ${label.color}`}>
                {label.text}
              </span>
            )}
            {/* Mobile: relative time. Desktop: full time */}
            <span className="text-muted-foreground tabular-nums md:hidden">
              {timeAgo(message.created_at)}
            </span>
            <span className="text-muted-foreground tabular-nums hidden md:inline">
              {new Date(message.created_at).toLocaleTimeString("en-US", {
                hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit",
              })}
            </span>
            <span className="text-muted-foreground/40 tabular-nums hidden md:inline">
              #{Number(message.seq)}
            </span>
            {/* Reply — always visible on mobile (no hover), hover on desktop */}
            <button
              type="button"
              onClick={() => onReply(message.id)}
              className="text-[9px] md:text-[10px] text-muted-foreground md:opacity-0 md:group-hover:opacity-60 hover:!opacity-100 transition-opacity ml-auto min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-end"
            >
              REPLY
            </button>
          </div>

          {/* Content */}
          <div className={`mt-0.5 text-[12px] md:text-[13px] leading-relaxed break-words ${
            message.type === "code" ? "bg-black/20 px-2 py-1 rounded-sm whitespace-pre-wrap overflow-x-auto" : ""
          } ${message.type === "error" ? "text-red-400" : ""}`}>
            {isDeleted ? (
              <span className="italic text-muted-foreground/40">[deleted]</span>
            ) : (
              message.content
            )}
          </div>

          {/* Agent metadata — tap to expand on mobile, always compact on desktop */}
          {meta && isAgent && (
            <>
              {/* Desktop: inline strip */}
              <div className="hidden md:flex mt-1 gap-3 text-[10px] text-muted-foreground/50">
                {meta.model && <span>{meta.model}</span>}
                {meta.hostname && <span>{meta.hostname}</span>}
                {meta.cwd && <span>{meta.cwd}</span>}
                {meta.skill && <span className="text-blue-400/50">{meta.skill}</span>}
              </div>
              {/* Mobile: tap to expand */}
              <button
                type="button"
                onClick={() => setMetaOpen(!metaOpen)}
                className="md:hidden mt-1 text-[9px] text-muted-foreground/40 min-h-[32px] flex items-center"
              >
                {metaOpen ? "hide meta" : `${meta.model || "agent"} ...`}
              </button>
              {metaOpen && (
                <div className="md:hidden mt-0.5 text-[10px] text-muted-foreground/50 space-y-0.5">
                  {meta.model && <div>model: {meta.model}</div>}
                  {meta.hostname && <div>host: {meta.hostname}</div>}
                  {meta.cwd && <div>cwd: {meta.cwd}</div>}
                  {meta.skill && <div className="text-blue-400/50">skill: {meta.skill}</div>}
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}