resolutionflow/frontend/src/components/scripts/ScriptParameterForm.tsx

import { Terminal } from 'lucide-react'
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
import { ScriptParameterField } from './ScriptParameterField'
import type { ScriptParametersSchema, ScriptParameter } from '@/types'

interface Props {
  canGenerate: boolean
}

export function ScriptParameterForm({ canGenerate }: Props) {
  const selectedTemplate = useScriptGeneratorStore(s => s.selectedTemplate)
  const paramValues = useScriptGeneratorStore(s => s.paramValues)
  const formErrors = useScriptGeneratorStore(s => s.formErrors)

  if (!selectedTemplate) return null

  const schema = selectedTemplate.parameters_schema as ScriptParametersSchema
  const parameters = (schema?.parameters ?? []).slice().sort((a, b) => a.order - b.order)

  // Group parameters: null-group first, then named groups in order of first appearance
  const ungrouped = parameters.filter(p => p.group === null)
  const groupOrder: string[] = []
  const grouped: Record<string, ScriptParameter[]> = {}
  for (const p of parameters) {
    if (p.group !== null) {
      if (!grouped[p.group]) {
        grouped[p.group] = []
        groupOrder.push(p.group)
      }
      grouped[p.group].push(p)
    }
  }

  const renderParam = (param: ScriptParameter) => (
    <ScriptParameterField
      key={param.key}
      param={param}
      value={paramValues[param.key] ?? ''}
      error={formErrors[param.key] || undefined}
      disabled={!canGenerate}
    />
  )

  if (parameters.length === 0) {
    return (
      <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-3">
        <Terminal size={14} className="text-muted-foreground shrink-0" />
        <p className="text-xs text-muted-foreground">
          This template has no parameters — click <span className="text-foreground font-medium">Generate</span> to produce the script.
        </p>
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-4">
      {ungrouped.map(renderParam)}
      {groupOrder.map(group => (
        <div key={group}>
          <p className="font-sans text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
            {group}
          </p>
          <div className="flex flex-col gap-4">
            {grouped[group].map(renderParam)}
          </div>
        </div>
      ))}
    </div>
  )
}