import { useTranslation } from 'react-i18next';
import { delegateStatusBadge } from '../../lib/delegateRuns';
import type { DelegateStreamEntry } from '../../hooks/useJobStream';

interface ConsoleNode extends DelegateStreamEntry {
  children: ConsoleNode[];
}

/** delegateStreams（フラット）を親子ツリーに。孤児は root 扱い（取りこぼし無し）。 */
function buildTree(streams: Record<string, DelegateStreamEntry>): ConsoleNode[] {
  const nodes = new Map<string, ConsoleNode>();
  for (const e of Object.values(streams)) nodes.set(e.delegateRunId, { ...e, children: [] });
  const roots: ConsoleNode[] = [];
  for (const node of nodes.values()) {
    const parent = node.parentRunId ? nodes.get(node.parentRunId) : undefined;
    if (parent) {
      parent.children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

function ConsoleCard({ node }: { node: ConsoleNode }) {
  const { t } = useTranslation('detail');
  const badge = delegateStatusBadge(node.status);
  const running = node.status === 'running';
  return (
    <div className="border border-hairline rounded-lg bg-canvas/60 overflow-hidden">
      <div className="flex items-center gap-2 px-3 py-1.5 bg-surface/50 border-b border-hairline">
        <span className={`inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-medium ${badge.cls}`}>
          {t(badge.labelKey)}
        </span>
        <span className="text-[13px] text-slate-700 font-medium leading-tight truncate flex-1">
          {node.description}
        </span>
      </div>
      {(node.text || node.currentTool) && (
        <div className="px-3 py-2 text-[12px] text-slate-700 leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere]">
          {node.currentTool ? (
            <span className="text-slate-500 italic">
              {t('subtasks.delegateRunningTool', { tool: node.currentTool })}
            </span>
          ) : (
            <>
              {node.text}
              {running && (
                <span className="inline-block w-0.5 h-3.5 bg-slate-400 animate-pulse ml-0.5 align-text-bottom" />
              )}
            </>
          )}
        </div>
      )}
      {node.children.length > 0 && (
        <div className="pl-4 pr-2 pb-2 space-y-1.5">
          {node.children.map((c) => <ConsoleCard key={c.delegateRunId} node={c} />)}
        </div>
      )}
    </div>
  );
}

/**
 * delegate ライブコンソール: 実行中の delegate サブエージェントの出力を
 * チャット欄に専用枠でストリーム表示する。streams が空なら何も出さない。
 *
 * 表示は status==='running' の run だけに絞る（delegate は直列実行なので
 * 走っているのは1本＋その入れ子のみ）。完了した run はチャットに溜めず、
 * 履歴は「概要>サブ実行」が担う（ライブ=チャット / 履歴=概要 の役割分担）。
 * これで 50 件連続スイープでもカードが積み上がらない。
 *
 * originJobId == null の run → 親パーティション（上部）
 * originJobId が truthy の run → サブタスクパーティション（見出し配下）
 */
export function DelegateLiveConsole({ streams }: { streams: Record<string, DelegateStreamEntry> }) {
  const { t } = useTranslation('detail');

  const running = Object.fromEntries(
    Object.entries(streams).filter(([, e]) => e.status === 'running'),
  );

  // originJobId で親 / サブタスクに振り分け
  const parentEntries: Record<string, DelegateStreamEntry> = {};
  const subtaskEntries: Record<string, DelegateStreamEntry> = {};
  for (const [id, e] of Object.entries(running)) {
    if (e.originJobId == null) {
      parentEntries[id] = e;
    } else {
      subtaskEntries[id] = e;
    }
  }

  const parentTree = buildTree(parentEntries);
  const subtaskTree = buildTree(subtaskEntries);

  if (parentTree.length === 0 && subtaskTree.length === 0) return null;

  return (
    <div className="max-w-[85%] w-full space-y-1.5">
      {parentTree.map((n) => <ConsoleCard key={n.delegateRunId} node={n} />)}
      {subtaskTree.length > 0 && (
        <>
          <div className="text-[11px] font-semibold text-slate-500 uppercase tracking-wide px-1 pt-1">
            {t('delegateRuns.subtaskSectionHeading')}
          </div>
          {subtaskTree.map((n) => <ConsoleCard key={n.delegateRunId} node={n} />)}
        </>
      )}
    </div>
  );
}
