import { memo } from "react";
import { Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { formatTime, truncateTitle } from "./utils";
import type { ConversationWithSessionResponse } from "@/client/models/conversationWithSessionResponse";

interface ChatItemProps {
  conv: ConversationWithSessionResponse;
  active: boolean;
  onSelect: () => void;
  onDelete: (id: string) => void;
}

export const ChatItem = memo(function ChatItem({
  conv,
  active,
  onSelect,
  onDelete,
}: ChatItemProps) {
  const initials = (conv.title || "AI").slice(0, 2).toUpperCase();

  return (
    <div
      role="button"
      tabIndex={0}
      aria-current={active ? "page" : undefined}
      aria-label={conv.title || "Untitled chat"}
      className={cn(
        "group relative flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-[background-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        active
          ? "bg-primary/[0.08] text-foreground ring-1 ring-primary/15"
          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground hover:shadow-sm",
      )}
      onClick={onSelect}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onSelect();
        }
      }}
    >
      {/* Active indicator pill */}
      {active && (
        <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary/70" />
      )}

      {/* Avatar */}
      <span
        className={cn(
          "grid size-7 shrink-0 place-items-center rounded-lg text-[10px] font-bold transition-colors",
          active
            ? "bg-primary/15 text-primary/70"
            : "bg-muted/60 text-muted-foreground/50 group-hover:bg-primary/10 group-hover:text-primary/60",
        )}
        aria-hidden="true"
      >
        {initials}
      </span>

      {/* Title & time */}
      <div className="min-w-0 flex-1">
        <div className="flex items-center justify-between gap-1.5">
          <span className="truncate text-[12px] font-medium leading-tight">
            {truncateTitle(conv.title)}
          </span>
          <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/40">
            {formatTime(conv.last_message_at || conv.created_at)}
          </span>
        </div>
      </div>

      {/* Delete */}
      <button
        type="button"
        className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground/30 opacity-0 transition-[background-color,color,opacity] duration-200 hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
        onClick={(e) => {
          e.stopPropagation();
          onDelete(conv.id);
        }}
        aria-label={`Delete chat "${conv.title || "Untitled"}"`}
      >
        <Trash2 className="size-3" aria-hidden="true" />
      </button>
    </div>
  );
});
