'use client'

import { TemplateContext } from '../contextBridge'
import { SECTION_FIELDS } from '../_constants'

export default function ContextSectionForm({
  section,
  context,
  onChange,
}: {
  section: keyof TemplateContext
  context: TemplateContext
  onChange: (section: keyof TemplateContext, key: string, value: unknown) => void
}) {
  const fields = SECTION_FIELDS[section]
  const sectionData = context[section] as unknown as Record<string, unknown>

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
      {fields.map((field) => {
        const rawValue = sectionData[field.key]
        const inputCls = 'w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-400'

        if (field.type === 'boolean') {
          return (
            <div key={field.key} className="flex items-center gap-2 py-2">
              <input
                type="checkbox"
                id={`${section}-${field.key}`}
                checked={!!rawValue}
                onChange={(e) => onChange(section, field.key, e.target.checked)}
                className="w-4 h-4 accent-purple-600"
              />
              <label htmlFor={`${section}-${field.key}`} className="text-sm text-gray-700">
                {field.label}
              </label>
            </div>
          )
        }

        if (field.type === 'select' && field.opts) {
          return (
            <div key={field.key} className={field.span ? 'md:col-span-2' : ''}>
              <label className="block text-xs text-gray-500 mb-1">{field.label}</label>
              <select
                value={String(rawValue ?? '')}
                onChange={(e) => onChange(section, field.key, e.target.value)}
                className={inputCls}
              >
                {field.opts.map((o) => <option key={o} value={o}>{o}</option>)}
              </select>
            </div>
          )
        }

        if (field.type === 'textarea') {
          return (
            <div key={field.key} className={field.span ? 'md:col-span-2' : ''}>
              <label className="block text-xs text-gray-500 mb-1">{field.label}</label>
              <textarea
                value={String(rawValue ?? '')}
                onChange={(e) => onChange(section, field.key, field.nullable && e.target.value === '' ? null : e.target.value)}
                rows={3}
                className={`${inputCls} resize-none`}
              />
            </div>
          )
        }

        if (field.type === 'number') {
          return (
            <div key={field.key} className={field.span ? 'md:col-span-2' : ''}>
              <label className="block text-xs text-gray-500 mb-1">{field.label}</label>
              <input
                type="number"
                value={rawValue === null || rawValue === undefined ? '' : String(rawValue)}
                onChange={(e) => {
                  const v = e.target.value
                  onChange(section, field.key, field.nullable && v === '' ? null : v === '' ? '' : Number(v))
                }}
                className={inputCls}
              />
            </div>
          )
        }

        // default: text / email
        return (
          <div key={field.key} className={field.span ? 'md:col-span-2' : ''}>
            <label className="block text-xs text-gray-500 mb-1">{field.label}</label>
            <input
              type={field.type === 'email' ? 'email' : 'text'}
              value={rawValue === null || rawValue === undefined ? '' : String(rawValue)}
              onChange={(e) => onChange(section, field.key, field.nullable && e.target.value === '' ? null : e.target.value)}
              className={inputCls}
            />
          </div>
        )
      })}
    </div>
  )
}
