'use client'

import { cardStyles, inputStyles, inputModifiers, cn } from '@/lib/ui-styles'
import type { TemplateForm } from '../types'

interface TemplateAdvancedConfigPanelProps {
  form: TemplateForm
  advancedConfigOpen: boolean
  onToggle: () => void
  fieldGroupsError: string | null
  displayConfigError: string | null
  onFieldGroupsChange: (value: string) => void
  onDisplayConfigChange: (value: string) => void
  onFieldGroupsErrorChange: (value: string | null) => void
  onDisplayConfigErrorChange: (value: string | null) => void
}

export default function TemplateAdvancedConfigPanel({
  form,
  advancedConfigOpen,
  onToggle,
  fieldGroupsError,
  displayConfigError,
  onFieldGroupsChange,
  onDisplayConfigChange,
  onFieldGroupsErrorChange,
  onDisplayConfigErrorChange,
}: TemplateAdvancedConfigPanelProps) {
  return (
    <div className={cn(cardStyles.base, 'p-4')}>
      <button type="button" onClick={onToggle} className="w-full flex items-center justify-between text-left">
        <div>
          <p className="text-sm font-semibold text-slate-900 dark:text-white">高级显示 / 分组配置（选填）</p>
          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">仅在需要自定义上传布局或字段分组时填写，支持 JSON</p>
        </div>
        <svg
          className={`w-5 h-5 text-slate-500 dark:text-slate-400 transition-transform ${advancedConfigOpen ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {advancedConfigOpen && (
        <div className="mt-4 space-y-4">
          <div>
            <label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">字段分组（fieldGroups）</label>
            <textarea
              rows={3}
              value={form.fieldGroups}
              onChange={(e) => {
                onFieldGroupsErrorChange(null)
                onFieldGroupsChange(e.target.value)
              }}
              className={cn(inputStyles.base, inputModifiers.compact, 'font-mono')}
              placeholder='例如：{"groups":[{"title":"核心信息","fieldKeys":["materialType","productModel"]}]}'
            />
            {fieldGroupsError ? (
              <p className="text-xs text-red-500 mt-1">{fieldGroupsError}</p>
            ) : (
              <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1">留空即可使用默认展示顺序。</p>
            )}
          </div>

          <div>
            <label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">展示配置（displayConfig）</label>
            <textarea
              rows={3}
              value={form.displayConfig}
              onChange={(e) => {
                onDisplayConfigErrorChange(null)
                onDisplayConfigChange(e.target.value)
              }}
              className={cn(inputStyles.base, inputModifiers.compact, 'font-mono')}
              placeholder='例如：{"layout":"two-column","showPreview":true}'
            />
            {displayConfigError ? (
              <p className="text-xs text-red-500 mt-1">{displayConfigError}</p>
            ) : (
              <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1">用于自定义上传界面元素，非必要可不填。</p>
            )}
          </div>
        </div>
      )}
    </div>
  )
}