'use client'

import { useState } from 'react'
import { ProtectiveMeasure } from './types'

export function MeasuresLibraryModal({
  measures,
  onSelect,
  onClose,
  filterType,
}: {
  measures: ProtectiveMeasure[]
  onSelect: (measure: ProtectiveMeasure) => void
  onClose: () => void
  filterType?: string
}) {
  const [search, setSearch] = useState('')
  const [selectedSubType, setSelectedSubType] = useState('')

  const filtered = measures.filter((m) => {
    if (filterType && m.reduction_type !== filterType) return false
    if (selectedSubType && m.sub_type !== selectedSubType) return false
    if (search) {
      const q = search.toLowerCase()
      return m.name.toLowerCase().includes(q) || m.description.toLowerCase().includes(q)
    }
    return true
  })

  const subTypes = [...new Set(measures.filter((m) => !filterType || m.reduction_type === filterType).map((m) => m.sub_type))].filter(Boolean)

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-3xl max-h-[80vh] flex flex-col">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Massnahmen-Bibliothek</h3>
            <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded transition-colors">
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div className="flex gap-3">
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Massnahme suchen..."
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
            {subTypes.length > 1 && (
              <select
                value={selectedSubType}
                onChange={(e) => setSelectedSubType(e.target.value)}
                className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
              >
                <option value="">Alle Sub-Typen</option>
                {subTypes.map((st) => (
                  <option key={st} value={st}>{st}</option>
                ))}
              </select>
            )}
          </div>
          <div className="mt-2 text-xs text-gray-500">{filtered.length} Massnahmen</div>
        </div>
        <div className="flex-1 overflow-y-auto p-6 space-y-3">
          {filtered.map((m) => (
            <div
              key={m.id}
              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-purple-300 hover:bg-purple-50/30 transition-colors cursor-pointer"
              onClick={() => onSelect(m)}
            >
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs font-mono text-gray-400">{m.id}</span>
                    {m.sub_type && (
                      <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">{m.sub_type}</span>
                    )}
                  </div>
                  <h4 className="text-sm font-medium text-gray-900 dark:text-white">{m.name}</h4>
                  <p className="text-xs text-gray-500 mt-1">{m.description}</p>
                  {m.examples && m.examples.length > 0 && (
                    <div className="mt-2 flex flex-wrap gap-1">
                      {m.examples.map((ex, i) => (
                        <span key={i} className="text-xs px-1.5 py-0.5 rounded bg-purple-50 text-purple-600">
                          {ex}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
                <button className="ml-3 px-3 py-1.5 text-xs bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors flex-shrink-0">
                  Uebernehmen
                </button>
              </div>
            </div>
          ))}
          {filtered.length === 0 && (
            <div className="text-center py-8 text-gray-500">Keine Massnahmen gefunden</div>
          )}
        </div>
      </div>
    </div>
  )
}
