aragrp/components/playground/playground-output-panel.tsx

"use client";

import { Terminal } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";
import type { InteractionLog } from "./types";

interface PlaygroundOutputPanelProps {
  latestLog: InteractionLog | null;
  logs: InteractionLog[];
}

export function PlaygroundOutputPanel({ latestLog, logs }: PlaygroundOutputPanelProps) {
  const preview = latestLog
    ? {
        interactionId: latestLog.id,
        model: latestLog.model,
        mode: latestLog.responseMode,
        durationMs: latestLog.durationMs,
        user: latestLog.userMessage,
        assistant: latestLog.assistantMessage,
        timestamp: latestLog.timestamp,
      }
    : null;

  return (
    <div className="space-y-4">
      <div className="rounded-xl border bg-muted/30 p-3">
        <div className={cn("mb-2 flex items-center gap-2", type.caption)}>
          <Terminal className="size-3.5" aria-hidden />
          <span>آخرین پاسخ</span>
        </div>
        {preview ? (
          <pre className={cn("max-h-52 overflow-auto rounded-lg bg-background/80 p-3 text-foreground", type.code)}>
            {JSON.stringify(preview, null, 2)}
          </pre>
        ) : (
          <p className={cn("rounded-lg bg-background/80 p-3", type.caption)}>
            هنوز تعاملی ثبت نشده است. یک پیام ارسال کنید تا خروجی ساختاریافته اینجا
            نمایش داده شود.
          </p>
        )}
      </div>

      <div className="space-y-2">
        <p className={cn(type.caption, "font-medium")}>لاگ اجرا</p>
        <ScrollArea className="h-48 rounded-xl border bg-muted/20 sm:h-56">
          <div className="space-y-2 p-3">
            {logs.length === 0 ? (
              <p className={type.caption}>لاگی برای نمایش وجود ندارد.</p>
            ) : (
              logs
                .slice()
                .reverse()
                .map((log) => (
                  <div
                    key={log.id}
                    className={cn("rounded-lg border bg-background/70 px-3 py-2", type.code)}
                  >
                    <p className="font-medium text-foreground">
                      {new Date(log.timestamp).toLocaleTimeString("fa-IR")}
                    </p>
                    <p className="text-muted-foreground">
                      مدل: {log.model} · مدت: {log.durationMs}ms
                    </p>
                    <p className="mt-1 line-clamp-2 break-words text-foreground/80">
                      {log.userMessage}
                    </p>
                  </div>
                ))
            )}
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}