'use client'

export default function RulesTab() {
  return (
    <div className="space-y-6">
      <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
        <div className="flex items-start gap-3">
          <span className="text-2xl">⚠️</span>
          <div>
            <h4 className="font-semibold text-amber-800">Tagging-Regeln Editor</h4>
            <p className="text-sm text-amber-700">
              Die Tagging-Regeln werden aktuell über YAML-Dateien verwaltet.
              Ein visueller Editor ist in Entwicklung.
            </p>
          </div>
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        {[
          { name: 'Doc-Type Regeln', file: 'doc_type_rules.yaml', desc: 'Klassifiziert Dokumente (Lehrplan, Arbeitsblatt, etc.)' },
          { name: 'Fach-Regeln', file: 'subject_rules.yaml', desc: 'Erkennt Unterrichtsfächer' },
          { name: 'Schulstufen-Regeln', file: 'level_rules.yaml', desc: 'Erkennt Primar, SekI, SekII, etc.' },
          { name: 'Trust-Score Regeln', file: 'trust_rules.yaml', desc: 'Domain-basierte Vertrauensbewertung' },
        ].map(rule => (
          <div key={rule.file} className="bg-white border border-slate-200 rounded-lg p-6">
            <h4 className="font-semibold text-slate-900 mb-2">{rule.name}</h4>
            <p className="text-sm text-slate-500 mb-4">{rule.desc}</p>
            <code className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-600">
              /rules/{rule.file}
            </code>
          </div>
        ))}
      </div>
    </div>
  )
}