import { html } from '../lib/preact.js';
import { getStatusMeta, STATUS_PRIORITY } from '../utils/status.js';
import { SessionCard } from './SessionCard.js';

export function SessionGroup({ projectName, projectDir, sessions, onCardClick, conversations, onFetchConversation, onRespond, onDismiss }) {
  if (sessions.length === 0) return null;

  // Status summary for chips
  const statusCounts = {};
  for (const s of sessions) {
    statusCounts[s.status] = (statusCounts[s.status] || 0) + 1;
  }

  // Group header dot uses the most urgent status
  const worstStatus = sessions.reduce((worst, s) => {
    return (STATUS_PRIORITY[s.status] ?? 99) < (STATUS_PRIORITY[worst] ?? 99) ? s.status : worst;
  }, 'done');
  const worstMeta = getStatusMeta(worstStatus);

  return html`
    <section class="mb-12">
      <div class="mb-4 flex flex-wrap items-center gap-2.5 border-b border-selection/50 pb-3">
        <span class="h-2.5 w-2.5 rounded-full ${worstMeta.dot}"></span>
        <h2 class="font-display text-body font-semibold text-bright">${projectName}</h2>
        <span class="rounded-full border border-selection/80 bg-bg/55 px-2 py-0.5 font-mono text-micro text-dim">
          ${sessions.length} agent${sessions.length === 1 ? '' : 's'}
        </span>
        ${Object.entries(statusCounts).map(([status, count]) => {
          const meta = getStatusMeta(status);
          return html`
            <span key=${status} class="rounded-full border px-2 py-0.5 font-mono text-micro ${meta.badge}">
              ${count} ${meta.label.toLowerCase()}
            </span>
          `;
        })}
      </div>
      ${projectDir && projectDir !== 'unknown' && html`
        <div class="-mt-2 mb-3 truncate font-mono text-micro text-dim/60">${projectDir}</div>
      `}

      <div class="flex flex-wrap gap-4">
        ${sessions.map(session => html`
          <${SessionCard}
            key=${session.session_id}
            session=${session}
            onClick=${onCardClick}
            conversation=${conversations[session.session_id]}
            onFetchConversation=${onFetchConversation}
            onRespond=${onRespond}
            onDismiss=${onDismiss}
          />
        `)}
      </div>
    </section>
  `;
}