'use client'

import type { LLMPolicy } from '../types'

interface PoliciesTableProps {
  policies: LLMPolicy[]
  onEdit: (p: LLMPolicy) => void
}

export function PoliciesTable({ policies, onEdit }: PoliciesTableProps) {
  if (policies.length === 0) {
    return (
      <div className="text-center py-12 text-slate-500">
        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
        </svg>
        <p>Keine LLM-Policies vorhanden</p>
      </div>
    )
  }

  return (
    <table className="w-full">
      <thead className="bg-slate-50 border-b">
        <tr>
          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Erlaubte Kategorien</th>
          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Blockierte Kategorien</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">PII Redaction</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Max Tokens</th>
          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
        </tr>
      </thead>
      <tbody className="divide-y">
        {policies.map(policy => (
          <tr key={policy.id} className="hover:bg-slate-50">
            <td className="px-4 py-3 font-medium text-slate-900">{policy.name}</td>
            <td className="px-4 py-3">
              <div className="flex flex-wrap gap-1">
                {(policy.allowed_data_categories || []).map((c, i) => (
                  <span key={i} className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded">
                    {c}
                  </span>
                ))}
              </div>
            </td>
            <td className="px-4 py-3">
              <div className="flex flex-wrap gap-1">
                {(policy.blocked_data_categories || []).map((c, i) => (
                  <span key={i} className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded">
                    {c}
                  </span>
                ))}
              </div>
            </td>
            <td className="px-4 py-3 text-center">
              <span className={`px-2 py-1 text-xs rounded-full ${
                policy.require_pii_redaction ? 'bg-yellow-100 text-yellow-700' : 'bg-slate-100 text-slate-500'
              }`}>
                {policy.require_pii_redaction ? policy.pii_redaction_level : 'aus'}
              </span>
            </td>
            <td className="px-4 py-3 text-center text-slate-600">
              {policy.max_tokens_per_request?.toLocaleString()}
            </td>
            <td className="px-4 py-3 text-right">
              <button
                onClick={() => onEdit(policy)}
                className="text-sm text-primary-600 hover:text-primary-700"
              >
                Bearbeiten
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}