import { REGULATIONS, SAMPLE_QUERIES } from './types'

interface SearchSectionProps {
  searchQuery: string
  selectedRegulation: string
  topK: number
  searching: boolean
  onSearchQueryChange: (v: string) => void
  onRegulationChange: (v: string) => void
  onTopKChange: (v: number) => void
  onSearch: () => void
  onSampleQuery: (query: string, reg: string) => void
}

export function SearchSection({
  searchQuery,
  selectedRegulation,
  topK,
  searching,
  onSearchQueryChange,
  onRegulationChange,
  onTopKChange,
  onSearch,
  onSampleQuery,
}: SearchSectionProps) {
  return (
    <>
      {/* Quick Sample Queries */}
      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
          Schnell-Stichproben
        </h3>
        <div className="flex flex-wrap gap-2">
          {SAMPLE_QUERIES.map((sq, idx) => (
            <button
              key={idx}
              onClick={() => onSampleQuery(sq.query, sq.reg)}
              className="px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-full transition-colors"
            >
              {sq.label}
            </button>
          ))}
        </div>
      </div>

      {/* Search Section */}
      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Chunk-Suche
        </h2>

        <div className="space-y-4">
          {/* Search Input */}
          <div className="flex gap-4">
            <div className="flex-1">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Suchbegriff / Paragraph / Artikeltext
              </label>
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => onSearchQueryChange(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && onSearch()}
                placeholder="z.B. 'Recht auf Löschung' oder 'Art. 17 Abs. 1'"
                className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
              />
            </div>
            <div className="w-48">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Regulierung
              </label>
              <select
                value={selectedRegulation}
                onChange={(e) => onRegulationChange(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
              >
                <option value="">Alle</option>
                {REGULATIONS.map((reg) => (
                  <option key={reg.code} value={reg.code}>
                    {reg.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="w-24">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Anzahl
              </label>
              <select
                value={topK}
                onChange={(e) => onTopKChange(parseInt(e.target.value))}
                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
              >
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
              </select>
            </div>
          </div>

          <button
            onClick={onSearch}
            disabled={searching || !searchQuery.trim()}
            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {searching ? 'Suche laeuft...' : 'Suchen'}
          </button>
        </div>
      </div>
    </>
  )
}