'use client'

import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'

interface TemplateManagerHeaderProps {
  searchTerm: string
  onSearchChange: (value: string) => void
}

export default function TemplateManagerHeader({
  searchTerm,
  onSearchChange,
}: TemplateManagerHeaderProps) {
  const styles = useThemeStyles()
  const theme = useTheme()
  const textTitle = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const textDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'

  return (
    <section
      className={cn(
        'mb-4 rounded-lg border px-4 py-4',
        theme === 'dark'
          ? 'border-slate-700 bg-slate-900/85 text-white'
          : 'border-slate-200 bg-white text-slate-900'
      )}
    >
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div className="space-y-1">
          <h2 className={cn('text-lg font-semibold', textTitle)}>模板管理</h2>
          <p className={cn('text-sm', textDesc)}>
            预制模板可预览和启用，自定义模板按许可证开放。
          </p>
        </div>
        <div className="relative w-full md:w-[320px] lg:w-[360px]">
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder="搜索模板名称..."
            className={cn(styles.inputStyles.base, 'pl-11 pr-10')}
          />
          <svg className={cn('absolute left-4 top-3 w-5 h-5', theme === 'dark' ? 'text-slate-500' : 'text-slate-400')} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          {searchTerm && (
            <button
              type="button"
              onClick={() => onSearchChange('')}
              className={cn(
                styles.buttonStyles.ghost,
                styles.buttonModifiers.icon,
                'absolute right-2 top-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200',
              )}
              aria-label="清空模板搜索"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          )}
        </div>
      </div>
    </section>
  )
}