"use client";

import { useRouter } from "next/navigation";
import { formatJalaliDateTime } from "@/components/jalali-date-picker/utils";
import type { AiConversation } from "@/features/ai/types";
import { aiDict } from "@/features/ai/dict";

type AiConversationListItemProps = {
  conversation: AiConversation;
};

export function AiConversationListItem({
  conversation,
}: AiConversationListItemProps) {
  const router = useRouter();
  const latestMessage = conversation.messages[0];

  return (
    <button
      type="button"
      onClick={() => router.push(`/panel/ai/conversations/${conversation.id}`)}
      className="flex w-full flex-col gap-2 rounded-3xl bg-card p-4 text-start shadow-soft-sm transition-transform hover:scale-[1.01] active:scale-[0.99] sm:p-5"
    >
      <div className="flex items-center justify-between gap-3">
        <h2 className="min-w-0 truncate text-base font-bold text-card-foreground">
          {conversation.agent.name}
        </h2>
        {conversation.lastMessageAt ? (
          <span className="shrink-0 text-xs text-muted-foreground" dir="ltr">
            {formatJalaliDateTime(conversation.lastMessageAt)}
          </span>
        ) : null}
      </div>

      {latestMessage ? (
        <p className="line-clamp-2 text-sm leading-6 text-muted-foreground">
          {latestMessage.role === "USER" ? "شما: " : ""}
          {latestMessage.content}
        </p>
      ) : (
        <p className="text-sm text-muted-foreground">{aiDict.emptyChat}</p>
      )}
    </button>
  );
}