'use client'

import React from 'react'
import type { Role } from '../_types'

interface Props {
  roles: Role[]
  onOpenCreate: () => void
}

export function RolesTab({ roles, onOpenCreate }: Props) {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold">{roles.length} Rollen</h2>
        <button
          onClick={onOpenCreate}
          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
        >
          + Rolle erstellen
        </button>
      </div>
      <div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200 bg-gray-50">
              <th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Beschreibung</th>
              <th className="text-center px-4 py-3 font-medium text-gray-600">Typ</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Berechtigungen</th>
            </tr>
          </thead>
          <tbody>
            {roles.length === 0 ? (
              <tr><td colSpan={4} className="text-center py-8 text-gray-400">Keine Rollen</td></tr>
            ) : roles.map(role => (
              <tr key={role.id} className="border-b border-gray-100 hover:bg-gray-50">
                <td className="px-4 py-3 font-medium">{role.name}</td>
                <td className="px-4 py-3 text-gray-500 max-w-xs truncate">{role.description}</td>
                <td className="px-4 py-3 text-center">
                  <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                    role.is_system ? 'bg-purple-50 text-purple-700' : 'bg-gray-100 text-gray-600'
                  }`}>
                    {role.is_system ? 'System' : 'Custom'}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <div className="flex flex-wrap gap-1">
                    {(role.permissions || []).slice(0, 4).map(p => (
                      <span key={p} className="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{p}</span>
                    ))}
                    {(role.permissions || []).length > 4 && (
                      <span className="text-xs text-gray-400">+{role.permissions.length - 4}</span>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}