import type { Task } from '../../types';
import { getMemberTasks, taskStatusBadge, taskSubtitle } from '../../lib/teamStatus';

interface MemberTaskTooltipProps {
  memberId: string;
  tasks: Task[];
  isStatic: boolean;
  activeProjectId: string | null;
  onProjectClick: (taskId: string | null) => void;
}

export function MemberTaskTooltip({
  memberId,
  tasks,
  isStatic,
  activeProjectId,
  onProjectClick,
}: MemberTaskTooltipProps) {
  const memberTasks = getMemberTasks(memberId, tasks, 'project');
  if (memberTasks.length === 0) return null;

  return (
    <div className={`member-tooltip ${isStatic ? 'is-static' : ''}`}>
      <div className="tooltip-header">
        참여 중인 업무 ({memberTasks.length})
      </div>
      <div className="tooltip-list">
        {memberTasks.map((task) => {
          const badge = taskStatusBadge(task);
          const isActive = activeProjectId === task.id;
          const subtitle = taskSubtitle(task);
          const pmName = task.pmMember?.name ?? '미정';
          const assigneeNames = task.assigneeMembers?.length
            ? task.assigneeMembers.map((m) => m.name).join(', ')
            : '미정';

          return (
            <div
              key={task.id}
              className={`tooltip-item ${isActive ? 'active' : ''}`}
              onClick={(e) => {
                e.stopPropagation();
                onProjectClick(isActive ? null : task.id);
              }}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  e.stopPropagation();
                  onProjectClick(isActive ? null : task.id);
                }
              }}
            >
              <div className="tooltip-item-row">
                <span className="tooltip-dot" aria-hidden />
                <div className="tooltip-item-body">
                  <div className="tooltip-title">
                    {task.title}
                    {subtitle && <span className="tooltip-sub">{subtitle}</span>}
                  </div>
                  {isActive && (
                    <div className="tooltip-project-detail">
                      <span>
                        PM: <strong>{pmName}</strong>
                      </span>
                      <span className="tooltip-detail-sep" aria-hidden>·</span>
                      <span>
                        담당자: <strong>{assigneeNames}</strong>
                      </span>
                    </div>
                  )}
                </div>
                <span className={`tooltip-badge tooltip-badge-${badge.variant}`}>
                  {badge.label}
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
