'use client'

import React from 'react'
import type { Tenant, Namespace } from '../_types'
import { formatDate } from '../_api'

interface Props {
  tenants: Tenant[]
  namespaces: Namespace[]
  selectedTenantId: string | null
  onSelectTenant: (id: string) => void
  onOpenCreate: () => void
  onLoadNamespaces: (tenantId: string) => void
}

export function NamespacesTab({ tenants, namespaces, selectedTenantId, onSelectTenant, onOpenCreate, onLoadNamespaces }: Props) {
  return (
    <div>
      <div className="flex items-center gap-4 mb-4">
        <select
          value={selectedTenantId || ''}
          onChange={e => { onSelectTenant(e.target.value); if (e.target.value) onLoadNamespaces(e.target.value) }}
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
        >
          <option value="">Mandant waehlen...</option>
          {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
        </select>
        {selectedTenantId && (
          <button
            onClick={onOpenCreate}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
          >
            + Namespace
          </button>
        )}
      </div>
      {!selectedTenantId ? (
        <div className="text-center py-12 text-gray-400">Bitte einen Mandanten waehlen</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">Slug</th>
                <th className="text-left px-4 py-3 font-medium text-gray-600">Isolation</th>
                <th className="text-left px-4 py-3 font-medium text-gray-600">Klassifikation</th>
                <th className="text-left px-4 py-3 font-medium text-gray-600">Erstellt</th>
              </tr>
            </thead>
            <tbody>
              {namespaces.length === 0 ? (
                <tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Namespaces</td></tr>
              ) : namespaces.map(ns => (
                <tr key={ns.id} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="px-4 py-3 font-medium">{ns.name}</td>
                  <td className="px-4 py-3 font-mono text-xs text-gray-500">{ns.slug}</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{ns.isolation_level}</span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded text-xs">{ns.classification}</span>
                  </td>
                  <td className="px-4 py-3 text-gray-500">{formatDate(ns.created_at)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}