"use client";

import type { ReactNode } from "react";

import { Textarea } from "@/components/ui/textarea";

export const TOOL_DIALOG_CONTENT_CLASS =
  "max-h-[calc(100vh-3rem)] grid-rows-[auto_minmax(0,1fr)_auto] overflow-y-auto sm:h-[48.875rem] sm:max-w-6xl lg:overflow-hidden";

export function ToolFormField({
  label,
  required,
  children,
}: {
  label: string;
  required?: boolean;
  children: ReactNode;
}) {
  return (
    <label className="block space-y-2">
      <span className="text-sm font-medium text-foreground">
        {label}
        {required && <span className="ml-1 text-destructive">*</span>}
      </span>
      {children}
    </label>
  );
}

export function ToolFormSection({
  title,
  scrollable = false,
  tall = false,
  children,
}: {
  title: string;
  scrollable?: boolean;
  tall?: boolean;
  children: ReactNode;
}) {
  return (
    <section
      className={[
        "rounded-xl border border-hairline bg-surface-strong/20",
        tall ? "lg:flex lg:h-[38rem] lg:flex-col" : "",
      ].join(" ")}
    >
      <div className="border-b border-hairline px-4 py-3 text-sm font-medium">
        {title}
      </div>
      <div
        className={[
          "space-y-4 p-4",
          scrollable ? "max-h-72 overflow-y-auto" : "",
          tall ? "lg:max-h-none lg:flex-1" : "",
        ].join(" ")}
      >
        {children}
      </div>
    </section>
  );
}

export function ToolJsonField({
  label,
  value,
  onChange,
  rows = 4,
  disabled = false,
  placeholder,
  hint,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  rows?: number;
  disabled?: boolean;
  placeholder?: string;
  hint?: string;
}) {
  return (
    <ToolFormField label={label}>
      <Textarea
        value={value}
        onChange={(event) => onChange(event.target.value)}
        rows={rows}
        disabled={disabled}
        placeholder={placeholder}
        className="font-mono text-xs"
        spellCheck={false}
      />
      {hint && <span className="block text-xs text-muted-foreground">{hint}</span>}
    </ToolFormField>
  );
}