export default function TechnischTab() {
  return (
    <div className="space-y-6">
      {/* API Endpoints */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">API Endpoints</h3>
        <div className="space-y-3">
          {[
            { method: 'GET', path: '/api/v1/compliance/regulations', desc: 'Liste aller Verordnungen' },
            { method: 'GET', path: '/api/v1/compliance/controls', desc: 'Control Catalogue' },
            { method: 'PUT', path: '/api/v1/compliance/controls/{id}/review', desc: 'Control Review' },
            { method: 'GET', path: '/api/v1/compliance/evidence', desc: 'Evidence Liste' },
            { method: 'POST', path: '/api/v1/compliance/evidence/upload', desc: 'Evidence Upload' },
            { method: 'GET', path: '/api/v1/compliance/risks', desc: 'Risk Register' },
            { method: 'GET', path: '/api/v1/compliance/risks/matrix', desc: 'Risk Matrix' },
            { method: 'GET', path: '/api/v1/compliance/dashboard', desc: 'Dashboard Stats' },
            { method: 'POST', path: '/api/v1/compliance/export', desc: 'Audit Export erstellen' },
            { method: 'POST', path: '/api/v1/compliance/seed', desc: 'Datenbank seeden' },
          ].map((ep, idx) => (
            <div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg font-mono text-sm">
              <span className={`px-2 py-1 rounded text-xs font-bold ${
                ep.method === 'GET' ? 'bg-green-100 text-green-700' :
                ep.method === 'POST' ? 'bg-blue-100 text-blue-700' :
                'bg-yellow-100 text-yellow-700'
              }`}>
                {ep.method}
              </span>
              <span className="text-slate-700 flex-1">{ep.path}</span>
              <span className="text-slate-500 text-xs">{ep.desc}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Database Schema */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Datenmodell</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            { table: 'compliance_regulations', fields: 'id, code, name, regulation_type, source_url, effective_date' },
            { table: 'compliance_requirements', fields: 'id, regulation_id, article, title, description, is_applicable' },
            { table: 'compliance_controls', fields: 'id, control_id, domain, title, status, is_automated, owner' },
            { table: 'compliance_control_mappings', fields: 'id, requirement_id, control_id, coverage_level' },
            { table: 'compliance_evidence', fields: 'id, control_id, evidence_type, title, artifact_path, status' },
            { table: 'compliance_risks', fields: 'id, risk_id, title, likelihood, impact, inherent_risk, status' },
            { table: 'compliance_audit_exports', fields: 'id, export_type, status, file_path, file_hash' },
          ].map((t, idx) => (
            <div key={idx} className="border rounded-lg p-4">
              <h4 className="font-mono font-semibold text-primary-600 mb-2">{t.table}</h4>
              <p className="text-xs text-slate-500 font-mono">{t.fields}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Enums */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Enums</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">ControlDomainEnum</h4>
            <div className="flex flex-wrap gap-1">
              {['gov', 'priv', 'iam', 'crypto', 'sdlc', 'ops', 'ai', 'cra', 'aud'].map((d) => (
                <span key={d} className="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded">{d}</span>
              ))}
            </div>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">ControlStatusEnum</h4>
            <div className="flex flex-wrap gap-1">
              {['pass', 'partial', 'fail', 'planned', 'n/a'].map((s) => (
                <span key={s} className="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded">{s}</span>
              ))}
            </div>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">RiskLevelEnum</h4>
            <div className="flex flex-wrap gap-1">
              {['low', 'medium', 'high', 'critical'].map((l) => (
                <span key={l} className="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded">{l}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}