'use client'

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

interface RolesTableProps {
  roles: Role[]
  onEdit: (r: Role) => void
}

export function RolesTable({ roles, onEdit }: RolesTableProps) {
  if (roles.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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
        <p>Keine Rollen 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">Beschreibung</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Typ</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Hierarchie</th>
          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Permissions</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">
        {roles.map(role => (
          <tr key={role.id} className="hover:bg-slate-50">
            <td className="px-4 py-3 font-medium text-slate-900">{role.name}</td>
            <td className="px-4 py-3 text-slate-600 truncate max-w-xs">{role.description || '-'}</td>
            <td className="px-4 py-3 text-center">
              <span className={`px-2 py-1 text-xs rounded-full ${
                role.is_system_role ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-600'
              }`}>
                {role.is_system_role ? 'System' : 'Custom'}
              </span>
            </td>
            <td className="px-4 py-3 text-center text-slate-600">{role.hierarchy_level}</td>
            <td className="px-4 py-3">
              <div className="flex flex-wrap gap-1 max-w-md">
                {(role.permissions || []).slice(0, 3).map((p, i) => (
                  <span key={i} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded">
                    {p}
                  </span>
                ))}
                {(role.permissions || []).length > 3 && (
                  <span className="px-2 py-0.5 text-xs bg-slate-200 text-slate-600 rounded">
                    +{role.permissions.length - 3}
                  </span>
                )}
              </div>
            </td>
            <td className="px-4 py-3 text-right">
              <button
                onClick={() => onEdit(role)}
                className="text-sm text-primary-600 hover:text-primary-700"
                disabled={role.is_system_role}
              >
                {role.is_system_role ? 'Ansehen' : 'Bearbeiten'}
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}