beaver_project/app-instance/frontend/components/task-detail/TaskLiveHeader.tsx

'use client';

import Link from 'next/link';
import { ArrowLeft, CheckCircle2, MessageSquare } from 'lucide-react';

import { TaskRuntimeStatusBadge, formatTaskRuntimeDuration, formatTaskRuntimeTime } from '@/components/task-runtime/TaskRuntimeShared';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import type { TaskRuntimeStatus } from '@/lib/task-runtime';
import type { BackendTask } from '@/types';

type Props = {
  task: BackendTask;
  activeLabel: string;
  durationMs: number | null;
  reviewTargetId?: string;
};

const RUNTIME_STATUSES = new Set<string>(['queued', 'running', 'waiting', 'blocked', 'done', 'error', 'cancelled']);

function isRuntimeStatus(status: string): status is TaskRuntimeStatus {
  return RUNTIME_STATUSES.has(status);
}

function humanTaskStatus(status: string, locale: 'zh-CN' | 'en-US') {
  const map: Record<string, [string, string]> = {
    open: ['已创建', 'Open'],
    running: ['执行中', 'Running'],
    awaiting_acceptance: ['等待验收', 'Awaiting acceptance'],
    needs_revision: ['需要修改', 'Needs revision'],
    closed: ['已完成', 'Closed'],
    abandoned: ['已放弃', 'Abandoned'],
  };
  const item = map[status];
  return item ? pickAppText(locale, item[0], item[1]) : status;
}

export function TaskLiveHeader({ task, activeLabel, durationMs, reviewTargetId }: Props) {
  const { locale } = useAppI18n();
  const title = task.short_title || String(task.metadata?.short_title || '') || task.description || task.goal || task.task_id;
  const showReviewLink = Boolean(reviewTargetId && ['awaiting_acceptance', 'needs_revision'].includes(task.status));

  return (
    <header className="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
      <div className="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-3 sm:px-6">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <div className="flex flex-wrap items-center gap-2">
            <Button asChild variant="outline" size="sm">
              <Link href="/tasks">
                <ArrowLeft className="mr-2 h-4 w-4" />
                {pickAppText(locale, '返回任务', 'Back to tasks')}
              </Link>
            </Button>
            <Button asChild variant="ghost" size="sm">
              <Link href="/">
                <MessageSquare className="mr-2 h-4 w-4" />
                {pickAppText(locale, '对话', 'Chat')}
              </Link>
            </Button>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {isRuntimeStatus(task.status) ? (
              <TaskRuntimeStatusBadge status={task.status} />
            ) : (
              <Badge variant="outline" className="text-[11px]">
                {humanTaskStatus(task.status, locale)}
              </Badge>
            )}
            {activeLabel ? <Badge variant="secondary">{activeLabel}</Badge> : null}
            {showReviewLink ? (
              <Button asChild variant="default" size="sm">
                <a href={`#${reviewTargetId}`}>
                  <CheckCircle2 className="mr-2 h-4 w-4" />
                  {pickAppText(locale, '验收', 'Review')}
                </a>
              </Button>
            ) : null}
          </div>
        </div>

        <div className="flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
          <div className="min-w-0">
            <h1 className="truncate text-xl font-semibold leading-tight">{title}</h1>
            {task.description && task.description !== title ? (
              <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">{task.description}</p>
            ) : null}
          </div>
          <div className="flex shrink-0 flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
            <span>
              {pickAppText(locale, '更新', 'Updated')}: {formatTaskRuntimeTime(task.updated_at, locale)}
            </span>
            <span>
              {pickAppText(locale, '耗时', 'Duration')}: {formatTaskRuntimeDuration(durationMs, locale)}
            </span>
          </div>
        </div>
      </div>
    </header>
  );
}