aragrp/components/playground/playground-tools-sheet.tsx

"use client";

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { type } from "@/lib/typography";
import { PlaygroundOutputPanel } from "./playground-output-panel";
import { PlaygroundSettingsPanel } from "./playground-settings-panel";
import { PLAYGROUND_SCENARIOS } from "./playground-prompts";
import type { InteractionLog, PlaygroundSettings } from "./types";

export type ToolsTab = "settings" | "output" | "scenarios";

interface PlaygroundToolsSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  activeTab: ToolsTab;
  onTabChange: (tab: ToolsTab) => void;
  settings: PlaygroundSettings;
  onSettingsChange: (settings: PlaygroundSettings) => void;
  latestLog: InteractionLog | null;
  logs: InteractionLog[];
  onSelectScenario: (scenarioId: string, prompt: string) => void;
  activeScenarioId?: string | null;
}

export function PlaygroundToolsSheet({
  open,
  onOpenChange,
  activeTab,
  onTabChange,
  settings,
  onSettingsChange,
  latestLog,
  logs,
  onSelectScenario,
  activeScenarioId = null,
}: PlaygroundToolsSheetProps) {
  function handleScenarioSelect(scenarioId: string, prompt: string) {
    onSelectScenario(scenarioId, prompt);
    onOpenChange(false);
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
        <SheetHeader className="border-b px-4 py-4 text-start">
          <SheetTitle>ابزارهای آزمایش</SheetTitle>
          <SheetDescription>تنظیمات، خروجی و کتابخانه سناریوها</SheetDescription>
        </SheetHeader>

        <Tabs
          value={activeTab}
          onValueChange={(value) => onTabChange(value as ToolsTab)}
          className="flex min-h-0 flex-1 flex-col gap-0"
        >
          <div className="border-b px-4 py-3">
            <TabsList className="grid h-9 w-full grid-cols-3">
              <TabsTrigger value="settings" className={type["body-sm"]}>
                تنظیمات
              </TabsTrigger>
              <TabsTrigger value="output" className={type["body-sm"]}>
                خروجی
              </TabsTrigger>
              <TabsTrigger value="scenarios" className={type["body-sm"]}>
                سناریوها
              </TabsTrigger>
            </TabsList>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
            <TabsContent value="settings" className="mt-0">
              <PlaygroundSettingsPanel
                settings={settings}
                onChange={onSettingsChange}
                idPrefix="sheet"
              />
            </TabsContent>

            <TabsContent value="output" className="mt-0">
              <PlaygroundOutputPanel latestLog={latestLog} logs={logs} />
            </TabsContent>

            <TabsContent value="scenarios" className="mt-0">
              <div className="space-y-3">
                <p className={cn(type["body-sm"], "text-muted-foreground")}>
                  انتخاب سناریو، پرامپت را در کادر پیام قرار می‌دهد تا بتوانید قبل از
                  ارسال آن را ویرایش کنید.
                </p>
                <div className="flex flex-col gap-2">
                  {PLAYGROUND_SCENARIOS.map((scenario) => (
                    <Button
                      key={scenario.id}
                      type="button"
                      variant={activeScenarioId === scenario.id ? "default" : "secondary"}
                      size="sm"
                      className="h-auto min-h-[var(--btn-height-sm)] justify-start whitespace-normal px-[var(--btn-px-sm)] py-2 text-start"
                      onClick={() => handleScenarioSelect(scenario.id, scenario.prompt)}
                    >
                      {scenario.label}
                    </Button>
                  ))}
                </div>
              </div>
            </TabsContent>
          </div>
        </Tabs>
      </SheetContent>
    </Sheet>
  );
}