'use client'

import { Shield, Lock, ListChecks, Trash2, BarChart3, Zap, Plus, RefreshCw, Search, Filter, ArrowUpDown } from 'lucide-react'
import { Framework } from './helpers'
import { ControlsMeta } from './types'
import { VERIFICATION_METHODS, CATEGORY_OPTIONS, EVIDENCE_TYPE_OPTIONS } from './helpers'

interface ControlsHeaderProps {
  frameworks: Framework[]
  meta: ControlsMeta | null
  reviewCount: number
  loading: boolean
  bulkProcessing: boolean
  showStats: boolean
  processedStats: Array<Record<string, unknown>>
  searchQuery: string
  severityFilter: string
  domainFilter: string
  stateFilter: string
  hideDuplicates: boolean
  verificationFilter: string
  categoryFilter: string
  evidenceTypeFilter: string
  audienceFilter: string
  sourceFilter: string
  typeFilter: string
  sortBy: string
  onSearchChange: (v: string) => void
  onSeverityChange: (v: string) => void
  onDomainChange: (v: string) => void
  onStateChange: (v: string) => void
  onHideDuplicatesChange: (v: boolean) => void
  onVerificationChange: (v: string) => void
  onCategoryChange: (v: string) => void
  onEvidenceTypeChange: (v: string) => void
  onAudienceChange: (v: string) => void
  onSourceChange: (v: string) => void
  onTypeChange: (v: string) => void
  onSortChange: (v: string) => void
  onRefresh: () => void
  onEnterReviewMode: () => void
  onBulkReject: (state: string) => void
  onToggleStats: () => void
  onOpenGenerator: () => void
  onCreateNew: () => void
}

export function ControlsHeader({
  frameworks, meta, reviewCount, loading, bulkProcessing, showStats, processedStats,
  searchQuery, severityFilter, domainFilter, stateFilter, hideDuplicates,
  verificationFilter, categoryFilter, evidenceTypeFilter, audienceFilter, sourceFilter, typeFilter, sortBy,
  onSearchChange, onSeverityChange, onDomainChange, onStateChange, onHideDuplicatesChange,
  onVerificationChange, onCategoryChange, onEvidenceTypeChange, onAudienceChange, onSourceChange, onTypeChange, onSortChange,
  onRefresh, onEnterReviewMode, onBulkReject, onToggleStats, onOpenGenerator, onCreateNew,
}: ControlsHeaderProps) {
  return (
    <div className="border-b border-gray-200 bg-white px-6 py-4">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <Shield className="w-6 h-6 text-purple-600" />
          <div>
            <h1 className="text-lg font-semibold text-gray-900">Canonical Control Library</h1>
            <p className="text-xs text-gray-500">{meta?.total ?? 0} Security Controls</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {reviewCount > 0 && (
            <>
              <button onClick={onEnterReviewMode} className="flex items-center gap-1.5 px-3 py-2 text-sm text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
                <ListChecks className="w-4 h-4" />
                Review ({reviewCount})
              </button>
              <button onClick={() => onBulkReject('needs_review')} disabled={bulkProcessing}
                className="flex items-center gap-1.5 px-3 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50">
                <Trash2 className="w-4 h-4" />
                {bulkProcessing ? 'Wird verarbeitet...' : `Alle ${reviewCount} ablehnen`}
              </button>
            </>
          )}
          <button onClick={onToggleStats} className="flex items-center gap-1.5 px-3 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
            <BarChart3 className="w-4 h-4" />Stats
          </button>
          <button onClick={onOpenGenerator} className="flex items-center gap-1.5 px-3 py-2 text-sm text-white bg-amber-600 rounded-lg hover:bg-amber-700">
            <Zap className="w-4 h-4" />Generator
          </button>
          <button onClick={onCreateNew} className="flex items-center gap-1.5 px-3 py-2 text-sm text-white bg-purple-600 rounded-lg hover:bg-purple-700">
            <Plus className="w-4 h-4" />Neues Control
          </button>
        </div>
      </div>

      {frameworks.length > 0 && (
        <div className="mb-4 p-3 bg-purple-50 rounded-lg">
          <div className="flex items-center gap-2 text-xs text-purple-700">
            <Lock className="w-3 h-3" />
            <span className="font-medium">{frameworks[0]?.name} v{frameworks[0]?.version}</span>
            <span className="text-purple-500">—</span>
            <span>{frameworks[0]?.description}</span>
          </div>
        </div>
      )}

      <div className="space-y-3">
        <div className="flex items-center gap-3">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <input type="text" placeholder="Controls durchsuchen (ID, Titel, Objective)..." value={searchQuery}
              onChange={e => onSearchChange(e.target.value)}
              className="w-full pl-9 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" />
          </div>
          <button onClick={onRefresh} className="p-2 text-gray-400 hover:text-purple-600" title="Aktualisieren">
            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
          </button>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <Filter className="w-4 h-4 text-gray-400" />
          <select value={severityFilter} onChange={e => onSeverityChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Schweregrad</option>
            <option value="critical">Kritisch{meta?.severity_counts?.critical ? ` (${meta.severity_counts.critical})` : ''}</option>
            <option value="high">Hoch{meta?.severity_counts?.high ? ` (${meta.severity_counts.high})` : ''}</option>
            <option value="medium">Mittel{meta?.severity_counts?.medium ? ` (${meta.severity_counts.medium})` : ''}</option>
            <option value="low">Niedrig{meta?.severity_counts?.low ? ` (${meta.severity_counts.low})` : ''}</option>
          </select>
          <select value={domainFilter} onChange={e => onDomainChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Domain</option>
            {(meta?.domains || []).map(d => <option key={d.domain} value={d.domain}>{d.domain} ({d.count})</option>)}
          </select>
          <select value={stateFilter} onChange={e => onStateChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Status</option>
            <option value="draft">Draft{meta?.release_state_counts?.draft ? ` (${meta.release_state_counts.draft})` : ''}</option>
            <option value="approved">Approved{meta?.release_state_counts?.approved ? ` (${meta.release_state_counts.approved})` : ''}</option>
            <option value="needs_review">Review noetig{meta?.release_state_counts?.needs_review ? ` (${meta.release_state_counts.needs_review})` : ''}</option>
            <option value="too_close">Zu aehnlich{meta?.release_state_counts?.too_close ? ` (${meta.release_state_counts.too_close})` : ''}</option>
            <option value="duplicate">Duplikat{meta?.release_state_counts?.duplicate ? ` (${meta.release_state_counts.duplicate})` : ''}</option>
            <option value="deprecated">Deprecated{meta?.release_state_counts?.deprecated ? ` (${meta.release_state_counts.deprecated})` : ''}</option>
          </select>
          <label className="flex items-center gap-1.5 text-sm text-gray-600 cursor-pointer whitespace-nowrap">
            <input type="checkbox" checked={hideDuplicates} onChange={e => onHideDuplicatesChange(e.target.checked)}
              className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
            Duplikate ausblenden
          </label>
          <select value={verificationFilter} onChange={e => onVerificationChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Nachweis</option>
            {Object.entries(VERIFICATION_METHODS).map(([k, v]) => (
              <option key={k} value={k}>{v.label}{meta?.verification_method_counts?.[k] ? ` (${meta.verification_method_counts[k]})` : ''}</option>
            ))}
            {meta?.verification_method_counts?.['__none__'] ? <option value="__none__">Ohne Nachweis ({meta.verification_method_counts['__none__']})</option> : null}
          </select>
          <select value={categoryFilter} onChange={e => onCategoryChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Kategorie</option>
            {CATEGORY_OPTIONS.map(c => (
              <option key={c.value} value={c.value}>{c.label}{meta?.category_counts?.[c.value] ? ` (${meta.category_counts[c.value]})` : ''}</option>
            ))}
            {meta?.category_counts?.['__none__'] ? <option value="__none__">Ohne Kategorie ({meta.category_counts['__none__']})</option> : null}
          </select>
          <select value={evidenceTypeFilter} onChange={e => onEvidenceTypeChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Nachweisart</option>
            {EVIDENCE_TYPE_OPTIONS.map(c => (
              <option key={c.value} value={c.value}>{c.label}{meta?.evidence_type_counts?.[c.value] ? ` (${meta.evidence_type_counts[c.value]})` : ''}</option>
            ))}
            {meta?.evidence_type_counts?.['__none__'] ? <option value="__none__">Ohne Nachweisart ({meta.evidence_type_counts['__none__']})</option> : null}
          </select>
          <select value={audienceFilter} onChange={e => onAudienceChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Zielgruppe</option>
            <option value="unternehmen">Unternehmen</option>
            <option value="behoerden">Behoerden</option>
            <option value="entwickler">Entwickler</option>
            <option value="datenschutzbeauftragte">DSB</option>
            <option value="geschaeftsfuehrung">Geschaeftsfuehrung</option>
            <option value="it-abteilung">IT-Abteilung</option>
            <option value="rechtsabteilung">Rechtsabteilung</option>
            <option value="compliance-officer">Compliance Officer</option>
            <option value="personalwesen">Personalwesen</option>
            <option value="einkauf">Einkauf</option>
            <option value="produktion">Produktion</option>
            <option value="vertrieb">Vertrieb</option>
            <option value="gesundheitswesen">Gesundheitswesen</option>
            <option value="finanzwesen">Finanzwesen</option>
            <option value="oeffentlicher_dienst">Oeffentl. Dienst</option>
          </select>
          <select value={sourceFilter} onChange={e => onSourceChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500 max-w-[220px]">
            <option value="">Dokumentenursprung</option>
            {meta && <option value="__none__">Ohne Quelle ({meta.no_source_count})</option>}
            {(meta?.sources || []).map(s => <option key={s.source} value={s.source}>{s.source} ({s.count})</option>)}
          </select>
          <select value={typeFilter} onChange={e => onTypeChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="">Alle Typen</option>
            <option value="rich">Rich Controls{meta?.type_counts ? ` (${meta.type_counts.rich})` : ''}</option>
            <option value="atomic">Atomare Controls{meta?.type_counts ? ` (${meta.type_counts.atomic})` : ''}</option>
            <option value="eigenentwicklung">Eigenentwicklung{meta?.type_counts ? ` (${meta.type_counts.eigenentwicklung})` : ''}</option>
          </select>
          <span className="text-gray-300 mx-1">|</span>
          <ArrowUpDown className="w-4 h-4 text-gray-400" />
          <select value={sortBy} onChange={e => onSortChange(e.target.value)}
            className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-500">
            <option value="id">Sortierung: ID</option>
            <option value="source">Nach Quelle</option>
            <option value="newest">Neueste zuerst</option>
            <option value="oldest">Aelteste zuerst</option>
          </select>
        </div>
      </div>

      {showStats && processedStats.length > 0 && (
        <div className="mt-3 p-3 bg-gray-50 rounded-lg">
          <h4 className="text-xs font-semibold text-gray-700 mb-2">Verarbeitungsfortschritt</h4>
          <div className="grid grid-cols-3 gap-3">
            {processedStats.map((s, i) => (
              <div key={i} className="text-xs">
                <span className="font-medium text-gray-700">{String(s.collection)}</span>
                <div className="flex gap-2 mt-1 text-gray-500">
                  <span>{String(s.processed_chunks)} verarbeitet</span>
                  <span>{String(s.direct_adopted)} direkt</span>
                  <span>{String(s.llm_reformed)} reformuliert</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}