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

"use client";

import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import type { PlaygroundSettings } from "./types";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

interface PlaygroundSettingsPanelProps {
  settings: PlaygroundSettings;
  onChange: (settings: PlaygroundSettings) => void;
  idPrefix?: string;
}

export function PlaygroundSettingsPanel({
  settings,
  onChange,
  idPrefix = "playground",
}: PlaygroundSettingsPanelProps) {
  return (
    <div className="space-y-5">
      <div className="space-y-2">
        <Label htmlFor={`${idPrefix}-model`}>مدل</Label>
        <Select
          value={settings.model}
          onValueChange={(model) => onChange({ ...settings, model })}
        >
          <SelectTrigger id={`${idPrefix}-model`} className="w-full">
            <SelectValue placeholder="انتخاب مدل" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="fip-assistant">دستیار فیپ (آزمایشی)</SelectItem>
            <SelectItem value="fip-fast">فیپ سریع</SelectItem>
            <SelectItem value="fip-pro">فیپ پیشرفته</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor={`${idPrefix}-mode`}>حالت پاسخ</Label>
        <Select
          value={settings.responseMode}
          onValueChange={(responseMode) => onChange({ ...settings, responseMode })}
        >
          <SelectTrigger id={`${idPrefix}-mode`} className="w-full">
            <SelectValue placeholder="انتخاب حالت" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="balanced">متعادل</SelectItem>
            <SelectItem value="concise">مختصر</SelectItem>
            <SelectItem value="detailed">مفصل</SelectItem>
            <SelectItem value="structured">ساختاریافته</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-3">
        <div className="flex items-center justify-between gap-2">
          <Label htmlFor={`${idPrefix}-temperature`}>خلاقیت پاسخ</Label>
          <span className={cn(type.caption, "tabular-nums")}>
            {settings.temperature.toFixed(1)}
          </span>
        </div>
        <Slider
          id={`${idPrefix}-temperature`}
          min={0}
          max={1}
          step={0.1}
          value={[settings.temperature]}
          onValueChange={([temperature]) =>
            onChange({ ...settings, temperature: temperature ?? 0.7 })
          }
          className="w-full"
        />
      </div>

      <div className="flex items-center justify-between gap-3 rounded-xl border bg-muted/20 p-3">
        <div className="space-y-0.5">
          <Label htmlFor={`${idPrefix}-memory`} className={type.label}>
            حافظه گفتگو
          </Label>
          <p className={type.caption}>
            نگه‌داری زمینه مکالمه در تعاملات بعدی
          </p>
        </div>
        <Switch
          id={`${idPrefix}-memory`}
          checked={settings.memoryEnabled}
          onCheckedChange={(memoryEnabled) =>
            onChange({ ...settings, memoryEnabled })
          }
        />
      </div>

      <p className={cn("rounded-lg border border-dashed bg-muted/10 p-3", type.caption)}>
        این تنظیمات فعلاً برای آزمایش رابط کاربری فعال هستند و پس از اتصال به سرویس
        واقعی، مستقیماً روی پاسخ‌ها اعمال می‌شوند.
      </p>
    </div>
  );
}