import { Rule } from './types'

export function RulesTab({ rules, policyVersion, loading }: {
  rules: Rule[]
  policyVersion: string
  loading: boolean
}) {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-slate-800 text-lg">Regel-Katalog</h3>
          <p className="text-sm text-slate-500">Policy Version: {policyVersion}</p>
        </div>
        <div className="text-sm text-slate-500">{rules.length} Regeln insgesamt</div>
      </div>

      {loading ? (
        <div className="text-center py-8 text-slate-500">Lade Regeln...</div>
      ) : (
        <div className="space-y-4">
          {Array.from(new Set(rules.map(r => r.category))).map(category => (
            <div key={category} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 bg-slate-50 border-b border-slate-200">
                <h4 className="font-medium text-slate-800">{category}</h4>
                <p className="text-xs text-slate-500">
                  {rules.filter(r => r.category === category).length} Regeln
                </p>
              </div>
              <div className="divide-y divide-slate-100">
                {rules.filter(r => r.category === category).map(rule => (
                  <div key={rule.code} className="p-4">
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-mono text-sm text-slate-500">{rule.code}</span>
                          <span className={`text-xs px-2 py-0.5 rounded ${
                            rule.severity === 'BLOCK' ? 'bg-red-100 text-red-700' :
                            rule.severity === 'WARN' ? 'bg-yellow-100 text-yellow-700' :
                            'bg-blue-100 text-blue-700'
                          }`}>
                            {rule.severity}
                          </span>
                        </div>
                        <div className="font-medium text-slate-800 mt-1">{rule.title}</div>
                        <div className="text-sm text-slate-600 mt-1">{rule.description}</div>
                        {rule.gdpr_ref && (
                          <div className="text-xs text-slate-500 mt-2">{rule.gdpr_ref}</div>
                        )}
                      </div>
                      {rule.risk_add && (
                        <div className="text-sm font-medium text-red-600">+{rule.risk_add}</div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
