const TaskRow = ({ task, onComplete, onClick, onCopy, activeIcon, IconCmp: IconCmpProp, draggable, onDragStart, onDragEnd, onDragOver, onDrop }) => {
  const isStale = (Date.now() - task.createdAt) > 86400000;

  const IconCmp = IconCmpProp || (activeIcon === 'star' ? Star :
                  activeIcon === 'heart' ? Heart :
                  activeIcon === 'sparkle' ? Sparkles : CheckCircle);

  const today = new Date();
  today.setHours(0,0,0,0);
  const isOverdue = task.dueDate && new Date(task.dueDate) < today;
  const hasDate = !!task.dueDate;
  const cat = getCategory(task.category);

  return (
    <div className={`group flex items-center gap-4 p-4 rounded-2xl cursor-pointer transition-all duration-200 ${isOverdue ? 'bg-red-50/60 border border-red-200 shadow-glow' : 'card-glass border border-white/60 shadow-glow hover:shadow-glow-lg hover:border-pink-200'} hover:-translate-y-0.5 ${task._newlyImported ? 'task-inbox-pop' : ''}`}
         onClick={onClick}
         draggable={draggable}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
         onDragOver={onDragOver}
         onDrop={onDrop}
         title={`Created: ${new Date(task.createdAt).toLocaleString()}${task.dueDate ? `\nDue: ${new Date(task.dueDate).toLocaleDateString()}` : ''}${cat ? `\nCategory: ${cat.name}` : ''}`}>
      <button onClick={e => { e.stopPropagation(); onComplete(e); }} className="text-pink-200 hover:text-pink-400 relative transition-colors">
        <Heart size={24} /><IconCmp size={24} className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
      </button>
      <div className="flex-1 min-w-0">
         <div className={`truncate text-lg font-medium ${isOverdue ? 'text-red-500' : 'text-slate-700'} flex items-center gap-2`}>
           {task.isProject && <span title="Project" className="shrink-0 text-[10px] font-extrabold uppercase tracking-wide bg-indigo-100 text-indigo-500 px-2 py-0.5 rounded-full">📁 Project</span>}
           <span className="truncate">{task.text}</span>
         </div>
         {task.isProject && task.subtasks?.length > 0 && (
           <div className="mt-1 text-[11px] text-slate-400 font-medium">{task.subtasks.filter(s => s.done).length}/{task.subtasks.length} steps done</div>
         )}
         {(task.tags?.length > 0 || task.contexts?.length > 0 || hasDate || task.category) && (
           <div className="flex gap-2 mt-2 flex-wrap">
             {hasDate && <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-full ${isOverdue ? 'bg-red-100 text-red-500 animate-pulse' : 'bg-slate-100 text-slate-400'}`}>{new Date(task.dueDate).toLocaleDateString()}</span>}
             {cat && <span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-full ${cat.cls}`}>{cat.emoji} {cat.name}</span>}
             {task.contexts?.map(ctx => <span key={ctx} className="bg-sky-100 text-sky-600 text-[10px] font-bold px-2 py-0.5 rounded-full">{ctx}</span>)}
             {task.tags?.map(tag => <span key={tag} className="bg-pink-100 text-pink-500 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">{tag}</span>)}
           </div>
         )}
      </div>
      <button onClick={e => { e.stopPropagation(); onCopy && onCopy(); }} className="text-pink-200 hover:text-pink-500 transition-colors opacity-0 group-hover:opacity-100 shrink-0" title="Copy task"><Copy size={20}/></button>
      <HeartDisplay count={getDisplayHearts(task)} isStale={isStale} />
    </div>
  );
};

window.TaskRow = TaskRow;