beaver_project/app-instance/frontend/app/(app)/notifications/[scheduledRunId]/page.tsx

'use client';

import React, { useEffect, useMemo, useRef, useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { ArrowLeft, Check, Loader2, RefreshCw, Send, Settings2 } from 'lucide-react';

import { getNotification, sendMessage } from '@/lib/api';
import type { ChatMessage, NotificationDetail } from '@/types';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { containedLongTextClass } from '@/lib/text-wrapping';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { ChatWorkbench } from '@/components/chat-workbench/ChatWorkbench';

type ReplyIntent = 'revise_once' | 'update_future';

export default function NotificationDetailPage() {
  const { locale } = useAppI18n();
  const params = useParams<{ scheduledRunId: string }>();
  const scheduledRunId = decodeURIComponent(params.scheduledRunId);
  const [detail, setDetail] = useState<NotificationDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [intent, setIntent] = useState<ReplyIntent | null>(null);
  const [input, setInput] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const viewportRef = useRef<HTMLDivElement>(null);
  const replyTextareaId = `notification-reply-${scheduledRunId}`;

  const load = React.useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setDetail(await getNotification(scheduledRunId));
    } catch (err: any) {
      setError(err.message || pickAppText(locale, '加载通知详情失败', 'Failed to load notification detail'));
    } finally {
      setLoading(false);
    }
  }, [locale, scheduledRunId]);

  useEffect(() => {
    void load();
  }, [load]);

  const messages = useMemo<ChatMessage[]>(() => {
    if (!detail) return [];
    const runId = detail.run_id;
    const scoped = detail.detail.messages.filter((message) => !runId || message.run_id === runId || message.scheduled_run_id === detail.scheduled_run_id);
    if (scoped.length > 0) return scoped;
    return [
      { role: 'user', content: detail.message, timestamp: detail.started_at || undefined },
      { role: 'assistant', content: detail.output || detail.error || '', timestamp: detail.finished_at || detail.started_at || undefined, run_id: detail.run_id || undefined, task_id: detail.task_id || null },
    ];
  }, [detail]);

  const formatTime = (value?: string | null) => {
    if (!value) return '-';
    return new Date(value).toLocaleString(locale);
  };

  const submitReply = async () => {
    if (!detail || !intent || !input.trim() || submitting) return;
    setSubmitting(true);
    setError(null);
    try {
      await sendMessage(
        input.trim(),
        detail.notification_session_id,
        undefined,
        {
          replyToScheduledRunId: detail.scheduled_run_id,
          scheduledReplyIntent: intent,
        }
      );
      setInput('');
      await load();
    } catch (err: any) {
      setError(err.message || pickAppText(locale, '提交修改失败', 'Failed to submit revision'));
    } finally {
      setSubmitting(false);
    }
  };

  if (loading) {
    return (
      <main className="flex h-[calc(100vh-4rem)] items-center justify-center text-muted-foreground">
        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
        {pickAppText(locale, '加载中', 'Loading')}
      </main>
    );
  }

  if (!detail) {
    return (
      <main className="mx-auto max-w-4xl px-4 py-6 sm:px-6 sm:py-8">
        <Link href="/notifications" className="inline-flex h-11 items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
          <ArrowLeft className="h-4 w-4" />
          {pickAppText(locale, '返回通知', 'Back to notifications')}
        </Link>
        <p className="mt-8 text-destructive">{error || pickAppText(locale, '通知不存在', 'Notification not found')}</p>
      </main>
    );
  }

  return (
    <main className="flex h-[calc(100vh-4rem)] flex-col bg-background">
      <div className="border-b border-[#E6E1DE] bg-[#F7F6F5] px-4 py-4 sm:px-6">
        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3">
          <div className="min-w-0">
            <Link href="/notifications" className="mb-2 inline-flex h-11 items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
              <ArrowLeft className="h-4 w-4" />
              {pickAppText(locale, '通知列表', 'Notifications')}
            </Link>
            <div className="flex min-w-0 flex-wrap items-center gap-2">
              <h1 className={`min-w-0 max-w-full text-lg font-semibold sm:text-xl ${containedLongTextClass}`}>{detail.title || detail.job_name}</h1>
              <Badge variant={detail.status === 'error' ? 'destructive' : 'secondary'} className="shrink-0">{detail.status}</Badge>
              {detail.engaged && <Badge className="shrink-0">{pickAppText(locale, '已接入 Task', 'Task linked')}</Badge>}
            </div>
            <p className="mt-1 text-sm text-muted-foreground">
              {pickAppText(locale, '生成时间', 'Generated')}: {formatTime(detail.started_at)}
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="outline" size="sm" className="h-11" onClick={() => void load()}>
              <RefreshCw className="mr-2 h-4 w-4" />
              {pickAppText(locale, '刷新', 'Refresh')}
            </Button>
            {detail.task_id && (
              <Button asChild size="sm" className="h-11">
                <Link href={`/tasks/${encodeURIComponent(detail.task_id)}`}>{pickAppText(locale, '查看任务', 'Open task')}</Link>
              </Button>
            )}
          </div>
        </div>
      </div>

      {error && <div className={`mx-auto w-full max-w-6xl px-4 pt-3 text-sm text-destructive sm:px-6 ${containedLongTextClass}`}>{error}</div>}

      <div className="min-h-0 flex-1">
        <ChatWorkbench
          messages={messages}
          isThinking={submitting}
          messagesEndRef={messagesEndRef}
          messageViewportRef={viewportRef}
          processRuns={[]}
          processEvents={[]}
          processArtifacts={[]}
          selectedRunId={null}
          onSelectRun={() => {}}
          onFeedback={() => {}}
          onRequestRevision={() => {}}
        />
      </div>

      <div className="border-t border-[#E6E1DE] bg-background px-4 py-4 sm:px-6">
        <div className="mx-auto max-w-5xl">
          <div className="mb-2 flex flex-wrap gap-2">
            <Button
              type="button"
              size="sm"
              variant={intent === 'revise_once' ? 'default' : 'outline'}
              className="h-11"
              aria-pressed={intent === 'revise_once'}
              onClick={() => setIntent('revise_once')}
            >
              <RefreshCw className="mr-2 h-4 w-4" />
              {pickAppText(locale, '修改这次', 'Revise this')}
            </Button>
            <Button
              type="button"
              size="sm"
              variant={intent === 'update_future' ? 'default' : 'outline'}
              className="h-11"
              aria-pressed={intent === 'update_future'}
              onClick={() => setIntent('update_future')}
            >
              <Settings2 className="mr-2 h-4 w-4" />
              {pickAppText(locale, '以后按这样', 'Apply going forward')}
            </Button>
            {detail.engaged && (
              <span className="inline-flex min-h-11 items-center gap-1 text-xs text-muted-foreground">
                <Check className="h-3.5 w-3.5" />
                {pickAppText(locale, '这条通知已经接入 Task', 'This notification is linked to a Task')}
              </span>
            )}
          </div>
          {intent && (
            <div className="rounded-[20px] border border-[#E6E1DE] bg-white p-3 shadow-[0_6px_18px_rgba(0,0,0,0.06)]">
              <label htmlFor={replyTextareaId} className="mb-2 block px-2 text-xs font-medium text-muted-foreground">
                {intent === 'update_future'
                  ? pickAppText(locale, '以后这类通知的调整说明', 'Future notification adjustment')
                  : pickAppText(locale, '本次通知的修改说明', 'Revision note for this notification')}
              </label>
              <textarea
                id={replyTextareaId}
                value={input}
                onChange={(event) => setInput(event.target.value)}
                placeholder={
                  intent === 'update_future'
                    ? pickAppText(locale, '告诉我以后这类通知要怎么调整...', 'Describe how future notifications should change...')
                    : pickAppText(locale, '告诉我这次内容要怎么改...', 'Describe how this result should change...')
                }
                className={`block min-h-20 w-full resize-none border-0 bg-transparent px-2 py-1 text-sm leading-6 outline-none ${containedLongTextClass}`}
              />
              <div className="flex justify-end">
                <Button size="sm" className="h-11" onClick={() => void submitReply()} disabled={!input.trim() || submitting}>
                  {submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
                  {pickAppText(locale, '发送', 'Send')}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}