import { useMemo } from 'react'
import { AlertTriangle } from 'lucide-react'
import { Input } from '@/components/ui/Input'
import { Label } from '@/components/ui/Label'
import { Select } from '@/components/ui/Select'
import { Textarea } from '@/components/ui/Textarea'

// FieldSpec schema — stored on ContractTemplate.FieldSpec as JSON string.
// Designed to be human-authorable by admin in JSON textarea but also machine-
// readable for the DynamicForm renderer below.
//
// {
//   "fieldKey": {
//     "label": "Tên Cty bên A",
//     "type": "text" | "textarea" | "number" | "date" | "currency" | "select",
//     "required": false,
//     "placeholder": "...",
//     "hint": "...",
//     "options": ["opt1", "opt2"]  // only for type=select
//   }
// }

export type FieldDef = {
  label: string
  type?: 'text' | 'textarea' | 'number' | 'date' | 'currency' | 'select'
  required?: boolean
  placeholder?: string
  hint?: string
  options?: string[]
}

export type FieldSpec = Record<string, FieldDef>

export type DynamicFormValues = Record<string, string | null>

export function parseFieldSpec(json: string | null | undefined): { spec: FieldSpec | null; error: string | null } {
  if (!json || !json.trim()) return { spec: null, error: null }
  try {
    const obj = JSON.parse(json)
    if (typeof obj !== 'object' || obj === null || Array.isArray(obj))
      return { spec: null, error: 'FieldSpec phải là object JSON' }
    return { spec: obj as FieldSpec, error: null }
  } catch (e) {
    return { spec: null, error: `JSON lỗi: ${(e as Error).message}` }
  }
}

export function DynamicForm({
  spec,
  values,
  onChange,
}: {
  spec: FieldSpec
  values: DynamicFormValues
  onChange: (key: string, value: string | null) => void
}) {
  const entries = useMemo(() => Object.entries(spec), [spec])

  if (entries.length === 0) {
    return (
      <div className="rounded-md border border-dashed border-slate-200 bg-slate-50 p-6 text-center text-sm text-slate-400">
        FieldSpec trống — thêm field vào spec JSON để hiện form.
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
      {entries.map(([key, def]) => {
        const type = def.type ?? 'text'
        const val = values[key] ?? ''
        const commonProps = {
          id: key,
          value: val,
          placeholder: def.placeholder,
          required: def.required,
        }
        const spanClass = type === 'textarea' ? 'md:col-span-2' : ''

        return (
          <div key={key} className={`space-y-1.5 ${spanClass}`}>
            <Label htmlFor={key} className="flex items-center gap-1">
              {def.label}
              {def.required && <span className="text-red-500">*</span>}
              <span className="ml-auto font-mono text-[10px] font-normal text-slate-400">{key}</span>
            </Label>
            {type === 'textarea' && (
              <Textarea
                {...commonProps}
                rows={3}
                onChange={e => onChange(key, e.target.value || null)}
              />
            )}
            {type === 'select' && (
              <Select {...commonProps} onChange={e => onChange(key, e.target.value || null)}>
                <option value="">— chọn —</option>
                {(def.options ?? []).map(opt => (
                  <option key={opt} value={opt}>
                    {opt}
                  </option>
                ))}
              </Select>
            )}
            {type === 'number' && (
              <Input
                {...commonProps}
                type="number"
                inputMode="numeric"
                onChange={e => onChange(key, e.target.value || null)}
              />
            )}
            {type === 'currency' && (
              <Input
                {...commonProps}
                type="text"
                inputMode="numeric"
                onChange={e => onChange(key, e.target.value || null)}
                className="font-mono"
              />
            )}
            {type === 'date' && (
              <Input
                {...commonProps}
                type="date"
                onChange={e => onChange(key, e.target.value || null)}
              />
            )}
            {type === 'text' && (
              <Input
                {...commonProps}
                type="text"
                onChange={e => onChange(key, e.target.value || null)}
              />
            )}
            {def.hint && <div className="text-[11px] text-slate-400">{def.hint}</div>}
          </div>
        )
      })}
    </div>
  )
}

export function DynamicFormPreviewError({ error }: { error: string }) {
  return (
    <div className="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
      <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
      <div>{error}</div>
    </div>
  )
}