flnxi-Wu/app/admin/_components/template-manager/BuiltInTemplateGrid.tsx

'use client'

import { useThemeStyles, cn } from '@/lib/ui-styles'
import type { BuiltinTemplateConfig } from './types'

interface BuiltInTemplateGridProps {
  presets: BuiltinTemplateConfig[]
  onPreview: (presetKey: string) => void
  onQuickCreate: (presetKey: string) => void
  onToggleEnabled?: (presetKey: string) => void
  onEnableAll?: () => void
  enabledTemplates?: Set<string>
  allPresets?: BuiltinTemplateConfig[]
}

export default function BuiltInTemplateGrid({
  presets,
  onPreview,
  onQuickCreate,
  onToggleEnabled,
  onEnableAll,
  enabledTemplates = new Set(),
  allPresets = [],
}: BuiltInTemplateGridProps) {
  const styles = useThemeStyles()
  const hasDisabledTemplates = allPresets.length > 0 && enabledTemplates.size < allPresets.length

  return (
    <div className="px-6 pt-5 pb-4 border-b border-slate-200/70 dark:border-slate-700/70">
      <div className="flex items-center justify-between gap-4 mb-3">
        <div>
          <h3 className="text-sm font-semibold text-slate-900 dark:text-white">预制模板（推荐）</h3>
          <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">常用场景一键启用，也可作为自定义模板的起点</p>
          <p className="text-[11px] text-slate-400 dark:text-slate-500">
            点击卡片仅预览示例，内容不可直接编辑，需复制为自定义模板后才可修改。
          </p>
        </div>
        {hasDisabledTemplates && onEnableAll && (
          <button
            onClick={() => onEnableAll()}
            className={cn(
              styles.buttonStyles.secondary,
              styles.buttonModifiers.compactXs,
              'text-xs',
              'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200' // 显式添加背景色和文字色
            )}
          >
            启用所有模板 ({allPresets.length - enabledTemplates.size} 个已禁用)
          </button>
        )}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {presets.map((preset) => {
          const fieldCount = preset.getFields().length
          return (
            <div
              key={preset.key}
              className={cn(styles.cardStyles.hover, 'group relative overflow-hidden cursor-pointer')}
              onClick={() => onPreview(preset.key)}
            >
              <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-500/70 via-purple-500/60 to-blue-500/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              <div className="flex items-start justify-between gap-3">
                <div className="space-y-1">
                  <p className="text-sm font-semibold text-slate-900 dark:text-white tracking-tight">{preset.name}</p>
                  <p className="text-xs text-slate-500 dark:text-slate-400 leading-snug">{preset.description}</p>
                </div>
                <span className="px-2.5 py-0.5 rounded-full text-[11px] font-medium text-blue-600 dark:text-blue-300 bg-blue-50/70 dark:bg-blue-900/30 border border-blue-100/70 dark:border-blue-800/60">
                  推荐
                </span>
              </div>
              <div className="mt-4 flex items-center justify-between gap-3">
                <div className="flex items-center gap-1.5 text-[11px] text-slate-400 dark:text-slate-500">
                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 7h16M4 12h10m-10 5h7" />
                  </svg>
                  <span>{fieldCount} 个字段</span>
                </div>
                <div className="flex items-center gap-2">
                  {onToggleEnabled && (
                    <button
                      type="button"
                      onClick={(e) => {
                        e.stopPropagation()
                        onToggleEnabled(preset.key)
                      }}
                      className={cn(
                        enabledTemplates.has(preset.key)
                          ? styles.buttonStyles.secondary
                          : styles.buttonStyles.secondary,
                        styles.buttonModifiers.compactXs,
                        styles.buttonModifiers.pill,
                        'text-xs'
                      )}
                      title={enabledTemplates.has(preset.key) ? '禁用此模板' : '启用此模板'}
                    >
                      {enabledTemplates.has(preset.key) ? '禁用' : '启用'}
                    </button>
                  )}
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation()
                      onQuickCreate(preset.key)
                    }}
                    className={cn(
                      styles.buttonStyles.success,
                      styles.buttonModifiers.compactXs,
                      styles.buttonModifiers.pill,
                      'inline-flex items-center gap-1.5 shadow-none',
                      'bg-emerald-600 hover:bg-emerald-700 text-white' // 显式添加背景色和文字色
                    )}
                  >
                    <svg className="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M10 3.5a.75.75 0 01.75.75v5h5a.75.75 0 010 1.5h-5v5a.75.75 0 01-1.5 0v-5h-5a.75.75 0 010-1.5h5v-5A.75.75 0 0110 3.5z" />
                    </svg>
                    快速创建副本
                  </button>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}