import { IoCheckmarkDoneSharp } from 'react-icons/io5';

import Avatar from '../../ui/Avatar';
import type { DialogRowPresenterProps } from '../types';

/** Inbox в духе Instagram: карточки на сером поле, без сплошных линий как в WhatsApp Web. */
const InstagramDialogRow = ({
  avatarId,
  title,
  preview,
  timeLabel,
  selected,
  closed,
  switchBlocked,
  onClick,
  showReadCheck,
  unread,
}: DialogRowPresenterProps) => (
  <div className="px-0.5">
    <button
      type="button"
      disabled={switchBlocked}
      onClick={onClick}
      className={`
        relative w-full flex items-center gap-3 rounded-2xl px-3 py-2.5 text-left
        transition-all duration-150 tg-press
        ${
          selected
            ? 'bg-[var(--tg-bg)] shadow-md ring-1 ring-black/[0.07] dark:ring-white/[0.12]'
            : 'bg-[var(--tg-bg)]/80 hover:bg-[var(--tg-bg)] shadow-sm'
        }
        ${closed && !selected ? 'opacity-55' : ''}
        ${switchBlocked ? 'opacity-45 cursor-not-allowed' : ''}
      `}
    >
      <Avatar id={avatarId} size={56} className="shrink-0" />

      <div className="flex-1 min-w-0 flex flex-col gap-1">
        <div className="flex items-baseline justify-between gap-2 min-w-0">
          <span
            className={`truncate text-[15px] font-bold tracking-tight ${
              selected
                ? 'text-[var(--tg-text-primary)]'
                : 'text-[var(--tg-text-primary)]'
            }`}
          >
            {title}
          </span>
          <span className="shrink-0 text-[12px] tabular-nums text-[var(--tg-text-secondary)]">
            {timeLabel}
          </span>
        </div>
        <div className="flex items-center gap-1.5 min-w-0">
          {showReadCheck && (
            <IoCheckmarkDoneSharp
              size={14}
              className="shrink-0 text-[var(--tg-accent)]"
            />
          )}
          <span
            className={`flex-1 min-w-0 truncate text-[14px] leading-snug ${
              unread > 0 && !selected
                ? 'text-[var(--tg-text-primary)] font-semibold'
                : 'text-[var(--tg-text-secondary)] font-normal'
            }`}
          >
            {preview}
          </span>
          {unread > 0 && (
            <span
              className={`shrink-0 min-w-[22px] h-[22px] px-1.5 inline-flex items-center justify-center rounded-full text-[12px] font-bold ${
                selected
                  ? 'bg-[var(--tg-accent)] text-white'
                  : 'bg-[var(--tg-accent)] text-white'
              }`}
            >
              {unread > 99 ? '99+' : unread}
            </span>
          )}
        </div>
      </div>
    </button>
  </div>
);

export default InstagramDialogRow;
