'use client'

/**
 * Linke Spalte: Liste der globalen Empfehlungs-Regeln.
 *
 * Filterbar nach document_type. Klassifikations-Chip + Live-Indikator.
 */

import { useMemo, useState } from 'react'
import type { Rule, RuleVersion } from '../_types'
import { CLASSIFICATION_LABELS, STATUS_LABELS } from '../_types'

interface Props {
  rules: Rule[]
  versionsByRule: Record<string, RuleVersion | undefined>
  selectedRuleId: string | null
  onSelectRule: (ruleId: string) => void
}

export default function RuleList({
  rules, versionsByRule, selectedRuleId, onSelectRule,
}: Props) {
  const [filter, setFilter] = useState('')
  const filtered = useMemo(() => {
    if (!filter.trim()) return rules
    const q = filter.toLowerCase()
    return rules.filter(
      (r) =>
        r.title.toLowerCase().includes(q) ||
        r.rule_key.toLowerCase().includes(q) ||
        r.document_type.toLowerCase().includes(q),
    )
  }, [rules, filter])

  return (
    <div className="h-full flex flex-col overflow-hidden border-r border-gray-200 bg-gray-50">
      <div className="p-3 border-b border-gray-200 bg-white">
        <input
          type="text"
          placeholder="Suchen (Titel, Key, Doc-Type)…"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="w-full text-sm px-2 py-1.5 border border-gray-300 rounded"
        />
        <div className="text-xs text-gray-500 mt-1">
          {filtered.length} von {rules.length} Regeln
        </div>
      </div>

      <ul className="flex-1 overflow-y-auto">
        {filtered.map((rule) => {
          const live = versionsByRule[rule.id]
          const isSelected = rule.id === selectedRuleId
          return (
            <li key={rule.id}>
              <button
                className={`w-full text-left px-3 py-2 border-b border-gray-100 hover:bg-white ${
                  isSelected ? 'bg-white border-l-4 border-l-amber-500' : ''
                }`}
                onClick={() => onSelectRule(rule.id)}
              >
                <div className="flex items-center gap-2 mb-0.5">
                  {live && (
                    <ClassificationChip classification={live.classification} />
                  )}
                  {!live && (
                    <span className="px-1.5 py-0.5 text-xs rounded bg-gray-200 text-gray-600">
                      ohne Live-Version
                    </span>
                  )}
                </div>
                <div className="text-sm font-medium text-gray-800 truncate">
                  {rule.title}
                </div>
                <div className="text-xs text-gray-500 truncate">
                  <code>{rule.document_type}</code> · {rule.rule_key}
                </div>
                {live && (
                  <div className="text-[10px] text-gray-500 mt-0.5">
                    v{live.version_number} · {STATUS_LABELS[live.status]}
                    {live.is_live && (
                      <span className="ml-1 inline-block w-1.5 h-1.5 bg-emerald-500 rounded-full" />
                    )}
                  </div>
                )}
              </button>
            </li>
          )
        })}
        {filtered.length === 0 && (
          <li className="px-3 py-4 text-sm text-gray-500 italic">
            Keine Regeln gefunden.
          </li>
        )}
      </ul>
    </div>
  )
}

function ClassificationChip({ classification }: { classification: 'required' | 'recommended' | 'optional' }) {
  const colorMap = {
    required: 'bg-rose-100 text-rose-800 border-rose-300',
    recommended: 'bg-amber-100 text-amber-800 border-amber-300',
    optional: 'bg-slate-100 text-slate-700 border-slate-300',
  } as const
  return (
    <span className={`px-1.5 py-0.5 text-[10px] font-medium rounded border ${colorMap[classification]}`}>
      {CLASSIFICATION_LABELS[classification]}
    </span>
  )
}
