beaver_project/app-instance/frontend/app/(app)/office/page.tsx

'use client';

import Link from 'next/link';
import React from 'react';
import {
  Activity,
  ArrowRight,
  Clock3,
  FolderKanban,
  Loader2,
  Sparkles,
  Users,
} from 'lucide-react';

import { OfficeStatusBadge, formatOfficeTime, progressPercent } from '@/components/office/OfficeShared';
import { TaskManagementTabs } from '@/components/task-management/TaskManagementTabs';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { buildOfficeTaskList, isOfficeTaskTerminal } from '@/lib/office';
import { appConnectionStatusLabel } from '@/lib/i18n/common';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { useChatStore } from '@/lib/store';

function TaskCard({
  taskId,
  title,
  sessionLabel,
  rootActorName,
  status,
  updatedAt,
  memberCount,
  activeRuns,
  artifactCount,
  errorCount,
  currentStageLabel,
  progressLabel,
  progressValue,
  locale,
}: {
  taskId: string;
  title: string;
  sessionLabel: string;
  rootActorName: string;
  status: Parameters<typeof OfficeStatusBadge>[0]['status'];
  updatedAt: string;
  memberCount: number;
  activeRuns: number;
  artifactCount: number;
  errorCount: number;
  currentStageLabel: string | null;
  progressLabel: string;
  progressValue: number;
  locale: 'zh-CN' | 'en-US';
}) {
  return (
    <Card className="border-border/80 transition-colors hover:border-primary/30">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0 flex-1">
            <CardTitle className="truncate text-lg">{title}</CardTitle>
            <CardDescription className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
              <span>{pickAppText(locale, '会话', 'Session')}: {sessionLabel}</span>
              <span>{pickAppText(locale, '主 Agent', 'Lead agent')}: {rootActorName}</span>
              <span>{pickAppText(locale, '更新于', 'Updated')} {formatOfficeTime(updatedAt, locale)}</span>
            </CardDescription>
          </div>
          <OfficeStatusBadge status={status} />
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-3 sm:grid-cols-4">
          <Metric icon={Users} label={pickAppText(locale, '成员', 'Members')} value={String(memberCount)} />
          <Metric icon={Activity} label={pickAppText(locale, '活跃', 'Active')} value={String(activeRuns)} />
          <Metric icon={FolderKanban} label={pickAppText(locale, '产物', 'Artifacts')} value={String(artifactCount)} />
          <Metric icon={Sparkles} label={pickAppText(locale, '异常', 'Alerts')} value={String(errorCount)} />
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between gap-3 text-sm">
            <span className="truncate text-muted-foreground">{progressLabel}</span>
            {currentStageLabel ? <span className="truncate font-medium">{currentStageLabel}</span> : null}
          </div>
          <div className="h-2.5 overflow-hidden rounded-full bg-secondary">
            <div
              className="h-full rounded-full bg-primary transition-all"
              style={{ width: `${progressValue}%` }}
            />
          </div>
        </div>

        <div className="flex justify-end">
          <Button asChild size="sm">
            <Link href={`/office/${encodeURIComponent(taskId)}`}>
              {pickAppText(locale, '进入办公室', 'Open office')}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

function Metric({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string;
}) {
  return (
    <div className="rounded-xl border border-border/60 bg-muted/30 px-3 py-3">
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <Icon className="h-3.5 w-3.5" />
        <span>{label}</span>
      </div>
      <div className="mt-2 text-lg font-semibold">{value}</div>
    </div>
  );
}

export default function OfficeListPage() {
  const { locale } = useAppI18n();
  const sessionId = useChatStore((state) => state.sessionId);
  const sessions = useChatStore((state) => state.sessions);
  const processRuns = useChatStore((state) => state.processRuns);
  const processEvents = useChatStore((state) => state.processEvents);
  const processArtifacts = useChatStore((state) => state.processArtifacts);
  const wsStatus = useChatStore((state) => state.wsStatus);

  const tasks = React.useMemo(
    () => buildOfficeTaskList({
      sessionId,
      sessions,
      processRuns,
      processEvents,
      processArtifacts,
    }, locale),
    [locale, processArtifacts, processEvents, processRuns, sessionId, sessions]
  );

  const activeTasks = tasks.filter((task) => !isOfficeTaskTerminal(task.status));
  const recentTasks = tasks.filter((task) => isOfficeTaskTerminal(task.status));

  return (
    <div className="mx-auto max-w-7xl space-y-6 p-6">
      <TaskManagementTabs />

      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight">Office</h1>
          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
            {pickAppText(
              locale,
              '基于当前会话的真实运行数据，展示主 Agent 与子 Agent 的任务现场。任务结束后会从活跃现场移除，但保留回看入口。',
              'Show the live task floor for the lead agent and its sub-agents using real runtime data from the current session. Finished tasks leave the active floor but remain available for review.'
            )}
          </p>
        </div>
        <Card className="min-w-[280px] border-border/70">
          <CardContent className="flex items-center justify-between gap-4 p-4">
            <div>
              <div className="text-xs text-muted-foreground">{pickAppText(locale, '当前会话', 'Current session')}</div>
              <div className="mt-1 font-medium">{sessionId}</div>
            </div>
            <div className="text-right">
              <div className="text-xs text-muted-foreground">{pickAppText(locale, '连接状态', 'Connection')}</div>
              <div className="mt-1 font-medium">{appConnectionStatusLabel(wsStatus, wsStatus === 'connected' ? true : null, locale)}</div>
            </div>
          </CardContent>
        </Card>
      </div>

      {wsStatus === 'connecting' && tasks.length === 0 ? (
        <div className="flex items-center gap-3 rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          {pickAppText(locale, '正在等待运行时数据...', 'Waiting for runtime data...')}
        </div>
      ) : null}

      {tasks.length === 0 ? (
        <Card className="border-dashed">
          <CardContent className="flex flex-col items-center justify-center py-16 text-center">
            <Clock3 className="h-10 w-10 text-muted-foreground/50" />
            <h2 className="mt-4 text-xl font-semibold">{pickAppText(locale, '当前没有可展示的任务现场', 'No task floor is available yet')}</h2>
            <p className="mt-2 max-w-xl text-sm text-muted-foreground">
              {pickAppText(
                locale,
                '先回到对话页发起一次主 Agent 任务。开始执行后，这里会出现活跃的 office 卡片。',
                'Start a lead-agent task from the chat page first. Once it begins running, active office cards will appear here.'
              )}
            </p>
            <Button asChild className="mt-6">
              <Link href="/">{pickAppText(locale, '回到对话', 'Back to chat')}</Link>
            </Button>
          </CardContent>
        </Card>
      ) : (
        <>
          <section className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-xl font-semibold">{pickAppText(locale, '活跃 Office', 'Active office')}</h2>
                <p className="text-sm text-muted-foreground">{pickAppText(locale, '正在运行中的任务现场会优先显示。', 'Running task floors are shown first.')}</p>
              </div>
              <div className="text-sm text-muted-foreground">{pickAppText(locale, `${activeTasks.length} 个任务`, `${activeTasks.length} tasks`)}</div>
            </div>
            {activeTasks.length === 0 ? (
              <Card className="border-dashed">
                <CardContent className="py-10 text-center text-sm text-muted-foreground">
                  {pickAppText(locale, '当前没有活跃任务，下面可以查看最近结束的任务。', 'There are no active tasks right now. Recent finished tasks are listed below.')}
                </CardContent>
              </Card>
            ) : (
              <div className="grid gap-4 lg:grid-cols-2">
                {activeTasks.map((task) => (
                  <TaskCard
                    key={task.taskId}
                    taskId={task.taskId}
                    title={task.title}
                    sessionLabel={task.sessionLabel}
                    rootActorName={task.rootActorName}
                    status={task.status}
                    updatedAt={task.updatedAt}
                    memberCount={task.memberCount}
                    activeRuns={task.activeRuns}
                    artifactCount={task.artifactCount}
                    errorCount={task.errorCount}
                    currentStageLabel={task.currentStageLabel}
                    progressLabel={task.progress.label}
                    progressValue={progressPercent(task.progress.value, task.progress.max)}
                    locale={locale}
                  />
                ))}
              </div>
            )}
          </section>

          <section className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-xl font-semibold">{pickAppText(locale, '最近结束', 'Recently finished')}</h2>
                <p className="text-sm text-muted-foreground">{pickAppText(locale, '已完成、失败或取消的任务仍保留回看入口。', 'Completed, failed, or cancelled tasks remain available for review.')}</p>
              </div>
              <div className="text-sm text-muted-foreground">{pickAppText(locale, `${recentTasks.length} 个任务`, `${recentTasks.length} tasks`)}</div>
            </div>
            {recentTasks.length === 0 ? (
              <Card className="border-dashed">
                <CardContent className="py-10 text-center text-sm text-muted-foreground">
                  {pickAppText(locale, '还没有历史任务。', 'There is no task history yet.')}
                </CardContent>
              </Card>
            ) : (
              <div className="grid gap-4 lg:grid-cols-2">
                {recentTasks.map((task) => (
                  <TaskCard
                    key={task.taskId}
                    taskId={task.taskId}
                    title={task.title}
                    sessionLabel={task.sessionLabel}
                    rootActorName={task.rootActorName}
                    status={task.status}
                    updatedAt={task.updatedAt}
                    memberCount={task.memberCount}
                    activeRuns={task.activeRuns}
                    artifactCount={task.artifactCount}
                    errorCount={task.errorCount}
                    currentStageLabel={task.currentStageLabel}
                    progressLabel={task.progress.label}
                    progressValue={progressPercent(task.progress.value, task.progress.max)}
                    locale={locale}
                  />
                ))}
              </div>
            )}
          </section>
        </>
      )}
    </div>
  );
}