"use client";

import { Clock, Package } from "lucide-react";
import Image from "next/image";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import type { Chat } from "@/lib/hooks/use-chat";
import { formatTimeAgo } from "@/lib/utils";

interface ChatListItemProps {
  chat: Chat;
  currentUserId: number;
  onChatClick: () => void;
}

export function ChatListItem({
  chat,
  currentUserId,
  onChatClick,
}: ChatListItemProps) {
  const otherUser =
    chat.buyer_id === currentUserId ? chat.seller_cache : chat.buyer_cache;

  const unreadCount =
    chat.buyer_id === currentUserId
      ? chat.buyer_unread_count
      : chat.seller_unread_count;

  const listing = chat.listing_cache;

  return (
    <Card
      className="p-4 cursor-pointer hover:bg-accent transition-colors"
      onClick={onChatClick}
    >
      <div className="flex items-start gap-3">
        {/* Avatar do outro usuário */}
        <Avatar className="h-12 w-12 flex-shrink-0">
          <AvatarFallback>
            {(otherUser.character_name || otherUser.username)
              .charAt(0)
              .toUpperCase()}
          </AvatarFallback>
        </Avatar>

        {/* Conteúdo */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between mb-1">
            <h4 className="font-semibold text-sm truncate">
              {otherUser.character_name || otherUser.username}
            </h4>
            {unreadCount > 0 && (
              <Badge
                variant="destructive"
                className="h-5 min-w-5 px-1.5 text-xs"
              >
                {unreadCount}
              </Badge>
            )}
          </div>

          {/* Preview do item */}
          <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
            <Package className="h-3 w-3 flex-shrink-0" />
            <span className="truncate">{listing.item_name}</span>
          </div>

          {/* Preview da última mensagem */}
          {chat.last_message_preview && (
            <p className="text-xs text-muted-foreground truncate mb-1">
              {chat.last_message_preview}
            </p>
          )}

          {/* Timestamp */}
          {chat.last_message_at && (
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <Clock className="h-3 w-3" />
              <span>{formatTimeAgo(new Date(chat.last_message_at))}</span>
            </div>
          )}
        </div>

        {/* Imagem do item (opcional) */}
        {listing.item_image_url && (
          <div className="relative w-12 h-12 rounded-lg bg-muted flex-shrink-0 overflow-hidden">
            <Image
              src={listing.item_image_url}
              alt={listing.item_name}
              fill
              className="object-cover"
              onError={(e) => {
                e.currentTarget.style.display = "none";
              }}
            />
          </div>
        )}
      </div>
    </Card>
  );
}