'use client'

import type { Tenant } from '../types'
import { STATUS_COLORS } from '../types'

interface TenantsTableProps {
  tenants: Tenant[]
  onEdit: (t: Tenant) => void
}

export function TenantsTable({ tenants, onEdit }: TenantsTableProps) {
  if (tenants.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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
        </svg>
        <p>Keine Mandanten 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">Slug</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Max Users</th>
          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">LLM Quota</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">
        {tenants.map(tenant => (
          <tr key={tenant.id} className="hover:bg-slate-50">
            <td className="px-4 py-3 font-medium text-slate-900">{tenant.name}</td>
            <td className="px-4 py-3 font-mono text-slate-600">{tenant.slug}</td>
            <td className="px-4 py-3 text-center">
              <span className={`px-2 py-1 text-xs rounded-full ${STATUS_COLORS[tenant.status] || 'bg-slate-100'}`}>
                {tenant.status}
              </span>
            </td>
            <td className="px-4 py-3 text-center text-slate-600">{tenant.max_users}</td>
            <td className="px-4 py-3 text-center text-slate-600">{tenant.llm_quota_monthly?.toLocaleString()}</td>
            <td className="px-4 py-3 text-right">
              <button
                onClick={() => onEdit(tenant)}
                className="text-sm text-primary-600 hover:text-primary-700"
              >
                Bearbeiten
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}