'use client'
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { formatUnreadBadgeCount, getStageColorClass, getStageLabel } from './stageUtils';
import moment from 'moment';

const getInitials = (name?: string) => {
  const parts = String(name || '')
    .trim()
    .split(/\s+/)
    .filter(Boolean);
  if (parts.length >= 2) {
    return `${parts[0][0] || ''}${parts[1][0] || ''}`.toUpperCase();
  }
  return String(name || '')
    .trim()
    .slice(0, 2)
    .toUpperCase();
};

const ConversationItem = (props: {
  item: any;
  isSelected: boolean;
  unreadCount: number;
  lastMessagePreview?: string;
  lastMessageAt?: number;
  translations: any;
  /** Campaign name only when main tab is All */
  showCampaignName?: boolean;
  onClick: () => void;
}) => {
  const {
    item,
    isSelected,
    unreadCount,
    lastMessagePreview,
    lastMessageAt,
    translations,
    showCampaignName = false,
    onClick,
  } = props;
  const name = item?.influencer?.display_name;
  const campaignName = item?.campaign?.campaign_name;
  const initials = getInitials(name);
  const status = item?.status;

  const formatTime = (ts?: number) => {
    if (!ts) return '';
    const m = ts > 1e12 ? moment(ts) : moment.unix(ts);
    if (m.isSame(moment(), 'day'))
      return m
        .fromNow(true)
        .replace(' minutes', 'm')
        .replace(' minute', ' min') + ' ago'
        // .replace('a few seconds', 'a few seconds') ;
    if (m.isSame(moment().subtract(1, 'day'), 'day')) return 'Yesterday';
    return m.format('DD MMM');
  };  

  return (
    <button
      type="button"
      onClick={onClick}
      className={`w-full text-left flex items-start gap-3 sm:px-3 px-2 py-3 border-b border-lightGray/60 transition-colors relative ${isSelected
        ? 'bg-primary/10 border-l-4 border-l-primary'
        : 'hover:bg-neutral-50 border-l-4 border-l-transparent'
        }`}
    >
      <div className="relative shrink-0">
        {item?.influencer?.image ? (
          <div className="w-11 h-11 rounded-full bg-primary/15 flex items-center justify-center text-primary font-bold text-sm">
            <ImageWithFallback src={item?.influencer?.image} alt={name} width={44} height={44} className="w-full h-full object-cover rounded-full" />
          </div>
        ) : (
          <div className="w-11 h-11 rounded-full bg-primary/15 flex items-center justify-center text-primary font-bold text-sm">
            {initials}
          </div>
        )}
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center justify-between gap-2">
          <h5
            className={`text-sm truncate ${isSelected ? 'font-bold text-primary' : unreadCount > 0 ? 'font-bold' : 'font-semibold'
              }`}
          >
            {name}
          </h5>
          <div className="flex items-center gap-1.5 shrink-0">
            <span className={`text-[11px] ${isSelected ? 'text-primary/70' : 'text-neutral-400'}`}>
              {formatTime(lastMessageAt)}
            </span>
            {unreadCount > 0 && !isSelected && (
              <span className="min-w-4 h-4 px-0.5 rounded-full bg-primary text-white text-[10px] flex items-center justify-center">
                {formatUnreadBadgeCount(unreadCount)}
              </span>
            )}
          </div>
        </div>
        <p className={`text-xs line-clamp-1 mt-0.5 ${isSelected ? 'text-neutral-700' : 'text-neutral-500'}`}>
          {lastMessagePreview || item?.message || '—'}
        </p>
        {status && (
          <div className="flex items-center mt-1.5">
            <span className={`text-[10px] font-semibold px-2 py-0.5 rounded ${getStageColorClass(status)}`}>
              {getStageLabel(status, translations)}
            </span>
            {showCampaignName && campaignName && (
              <span className="text-[10px] font-semibold ml-2">{campaignName}</span>
            )}
          </div>
        )}
      </div>
    </button>
  );
};

export default ConversationItem;