'use client'

import React from 'react'
import type { UserRole } from '../_types'
import { formatDate, apiFetch } from '../_api'
import { UserRoleLookup } from './UserRoleLookup'

interface Props {
  userRoles: UserRole[]
  onOpenAssign: () => void
  onRevoke: (userId: string, roleId: string) => void
  setUserRoles: (rows: UserRole[]) => void
  setLoading: (v: boolean) => void
  setError: (msg: string | null) => void
}

export function UsersTab({ userRoles, onOpenAssign, onRevoke, setUserRoles, setLoading, setError }: Props) {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold">Benutzer-Rollen</h2>
        <button
          onClick={onOpenAssign}
          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
        >
          + Rolle zuweisen
        </button>
      </div>

      {/* User ID lookup */}
      <div className="mb-4">
        <UserRoleLookup onLoad={(userId) => {
          setLoading(true)
          apiFetch<UserRole[] | { roles: UserRole[] }>(`user-roles/${userId}`)
            .then(data => setUserRoles(Array.isArray(data) ? data : data.roles || []))
            .catch(e => setError(e instanceof Error ? e.message : 'Fehler'))
            .finally(() => setLoading(false))
        }} />
      </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">User-ID</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Rolle</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Namespace</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">Ablauf</th>
              <th className="text-center px-4 py-3 font-medium text-gray-600">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {userRoles.length === 0 ? (
              <tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Rollen zugewiesen</td></tr>
            ) : userRoles.map(ur => (
              <tr key={ur.id} className="border-b border-gray-100 hover:bg-gray-50">
                <td className="px-4 py-3 font-mono text-xs">{ur.user_id}</td>
                <td className="px-4 py-3">
                  <span className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-medium">
                    {ur.role_name || ur.role_id}
                  </span>
                </td>
                <td className="px-4 py-3 font-mono text-xs text-gray-500">
                  {ur.namespace_id || 'Global'}
                </td>
                <td className="px-4 py-3 text-gray-500">
                  {ur.expires_at ? formatDate(ur.expires_at) : 'Unbegrenzt'}
                </td>
                <td className="px-4 py-3 text-center">
                  <button
                    onClick={() => onRevoke(ur.user_id, ur.role_id)}
                    className="text-red-600 hover:text-red-700 text-xs"
                  >
                    Entziehen
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}