'use client'

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

interface Props {
  tenants: Tenant[]
  onOpenCreate: () => void
  onSelectTenant: (id: string) => void
  setActiveTab: (tab: TabId) => void
}

export function TenantsTab({ tenants, onOpenCreate, onSelectTenant, setActiveTab }: Props) {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold">{tenants.length} Mandanten</h2>
        <button
          onClick={onOpenCreate}
          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
        >
          + Mandant anlegen
        </button>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {tenants.map(t => (
          <div key={t.id} className="bg-white rounded-xl border border-gray-200 p-5">
            <div className="flex items-start justify-between mb-3">
              <div>
                <h3 className="font-semibold text-gray-900">{t.name}</h3>
                <span className="text-xs font-mono text-gray-400">{t.slug}</span>
              </div>
              <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                t.status === 'active' ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'
              }`}>
                {t.status}
              </span>
            </div>
            <div className="space-y-1 text-sm text-gray-600">
              <div className="flex justify-between">
                <span>User-Limit</span>
                <span className="font-mono">{t.user_limit || 'unbegrenzt'}</span>
              </div>
              <div className="flex justify-between">
                <span>LLM-Quota</span>
                <span className="font-mono">{t.llm_quota || 'unbegrenzt'}</span>
              </div>
              <div className="flex justify-between">
                <span>Erstellt</span>
                <span>{formatDate(t.created_at)}</span>
              </div>
            </div>
            <button
              onClick={() => { onSelectTenant(t.id); setActiveTab('namespaces') }}
              className="mt-3 w-full text-center text-sm text-purple-600 hover:text-purple-700 py-1"
            >
              Namespaces anzeigen
            </button>
          </div>
        ))}
      </div>
      {tenants.length === 0 && (
        <div className="text-center py-12 text-gray-400">Keine Mandanten vorhanden</div>
      )}
    </div>
  )
}