'use client'

import type { Requirement, Regulation, Category } from '../types'
import { AUDIT_STATUS, IMPLEMENTATION_STATUS, PRIORITY_LABELS } from '../types'

export default function RequirementList({
  regulations,
  selectedRegulation,
  setSelectedRegulation,
  filteredRequirements,
  selectedRequirement,
  setSelectedRequirement,
  searchQuery,
  setSearchQuery,
  filterAuditStatus,
  setFilterAuditStatus,
  filterImplStatus,
  setFilterImplStatus,
}: {
  regulations: Regulation[]
  selectedRegulation: string | null
  setSelectedRegulation: (code: string) => void
  filteredRequirements: Requirement[]
  selectedRequirement: Requirement | null
  setSelectedRequirement: (req: Requirement) => void
  searchQuery: string
  setSearchQuery: (q: string) => void
  filterAuditStatus: string
  setFilterAuditStatus: (s: string) => void
  filterImplStatus: string
  setFilterImplStatus: (s: string) => void
}) {
  const currentRegulation = regulations.find(r => r.code === selectedRegulation)

  return (
    <div className="col-span-4 space-y-4">
      {/* Regulation Selector */}
      <div className="bg-white rounded-lg border border-slate-200 p-4">
        <label className="block text-sm font-medium text-slate-700 mb-2">
          Verordnung / Standard
        </label>
        <select
          value={selectedRegulation || ''}
          onChange={(e) => setSelectedRegulation(e.target.value)}
          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
        >
          {regulations.map(reg => (
            <option key={reg.code} value={reg.code}>
              {reg.code} - {reg.name} ({reg.requirement_count})
            </option>
          ))}
        </select>

        {currentRegulation?.source_url && (
          <a
            href={currentRegulation.source_url}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-2 text-sm text-primary-600 hover:text-primary-800 flex items-center gap-1"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
            Originaldokument oeffnen
          </a>
        )}

        {currentRegulation?.local_pdf_path && (
          <a
            href={`/docs/${currentRegulation.local_pdf_path}`}
            target="_blank"
            className="mt-1 text-sm text-slate-600 hover:text-slate-800 flex items-center gap-1"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            Lokale PDF
          </a>
        )}
      </div>

      {/* Filters */}
      <div className="bg-white rounded-lg border border-slate-200 p-4 space-y-3">
        <div>
          <label className="block text-xs font-medium text-slate-500 mb-1">Suche</label>
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Artikel, Titel..."
            className="w-full px-3 py-1.5 text-sm border border-slate-300 rounded-lg"
          />
        </div>
        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className="block text-xs font-medium text-slate-500 mb-1">Audit-Status</label>
            <select
              value={filterAuditStatus}
              onChange={(e) => setFilterAuditStatus(e.target.value)}
              className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded-lg"
            >
              <option value="all">Alle</option>
              {Object.entries(AUDIT_STATUS).map(([key, { label }]) => (
                <option key={key} value={key}>{label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-xs font-medium text-slate-500 mb-1">Impl.-Status</label>
            <select
              value={filterImplStatus}
              onChange={(e) => setFilterImplStatus(e.target.value)}
              className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded-lg"
            >
              <option value="all">Alle</option>
              {Object.entries(IMPLEMENTATION_STATUS).map(([key, { label }]) => (
                <option key={key} value={key}>{label}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Requirements List */}
      <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
        <div className="p-3 border-b border-slate-200 bg-slate-50">
          <span className="text-sm font-medium text-slate-700">
            Anforderungen ({filteredRequirements.length})
          </span>
        </div>
        <div className="max-h-[500px] overflow-y-auto">
          {filteredRequirements.map(req => (
            <button
              key={req.id}
              onClick={() => setSelectedRequirement(req)}
              className={`w-full text-left p-3 border-b border-slate-100 hover:bg-slate-50 transition-colors ${
                selectedRequirement?.id === req.id ? 'bg-primary-50 border-l-4 border-l-primary-500' : ''
              }`}
            >
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-sm text-slate-600">
                      {req.article}{req.paragraph ? ` ${req.paragraph}` : ''}
                    </span>
                    <span className={`text-xs ${PRIORITY_LABELS[req.priority]?.color || 'text-slate-500'}`}>
                      {PRIORITY_LABELS[req.priority]?.label || ''}
                    </span>
                  </div>
                  <p className="text-sm text-slate-900 truncate mt-0.5">{req.title}</p>
                </div>
                <div className="flex flex-col items-end gap-1">
                  <span className={`w-2 h-2 rounded-full ${AUDIT_STATUS[req.audit_status as keyof typeof AUDIT_STATUS]?.color || 'bg-slate-300'}`} />
                  <span className={`w-2 h-2 rounded-full ${IMPLEMENTATION_STATUS[req.implementation_status as keyof typeof IMPLEMENTATION_STATUS]?.color || 'bg-slate-300'}`} />
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}
