/**
 * TenantCard Component
 *
 * Card view for individual tenant display in grid layout.
 * Alternative to table view for better visual hierarchy and mobile responsiveness.
 *
 * Features:
 * - Compact card layout
 * - Status badge
 * - Integration keys count
 * - Edit/Delete actions
 * - Hover effects
 * - Clickable card
 *
 * @component
 * @layer Presentation
 */

import { Edit, Trash2, Building2, Globe, Key } from 'lucide-react';
import type { Tenant } from '@domain/entities';
import { TenantStatus } from '@domain/entities';
import { TENANT_STATUS_CONFIG } from '@domain/constants';

interface TenantCardProps {
  /** Tenant data */
  tenant: Tenant;
  /** Company name for display */
  companyName: string;
  /** Edit handler */
  onEdit: (tenant: Tenant) => void;
  /** Delete handler */
  onDelete: (tenant: Tenant) => void;
}

/**
 * Status Badge Component
 */
function StatusBadge({ status }: { status: TenantStatus }) {
  const config = TENANT_STATUS_CONFIG[status];
  const colorClasses: Record<string, string> = {
    green: 'bg-green-100 text-green-800 border-green-200',
    yellow: 'bg-yellow-100 text-yellow-800 border-yellow-200',
    gray: 'bg-gray-100 text-gray-700 border-gray-200',
  };

  // Extract color name from config.color (e.g., "text-green-600" -> "green")
  const colorName = config.color.split('-')[1] || 'gray';

  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${colorClasses[colorName] || colorClasses.gray}`}>
      {config.label}
    </span>
  );
}

/**
 * TenantCard Component
 */
export function TenantCard({ tenant, companyName, onEdit, onDelete }: TenantCardProps) {
  return (
    <div className="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group">
      {/* Header */}
      <div className="p-5 bg-gradient-to-br from-gray-50 to-white border-b border-gray-100">
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            {/* Name with Icon Badge */}
            <div className="flex items-center gap-2 mb-2">
              <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-gradient-to-br from-primary-600 to-cyan-600 flex items-center justify-center">
                <Building2 className="w-4 h-4 text-white" />
              </div>
              <h3 className="text-base font-semibold text-gray-900 truncate">
                {tenant.name}
              </h3>
            </div>

            {/* Domain */}
            <a
              href={`https://${tenant.domain}`}
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm text-primary-600 hover:text-primary-800 hover:underline flex items-center gap-1 mb-3"
              onClick={(e) => e.stopPropagation()}
            >
              <Globe size={13} />
              <span className="truncate">{tenant.domain}</span>
            </a>

            {/* Status Badge */}
            <StatusBadge status={tenant.status} />
          </div>
        </div>
      </div>

      {/* Body */}
      <div className="p-5 space-y-3">
        {/* Company */}
        <div className="flex items-center justify-between text-sm">
          <span className="text-gray-500">Company:</span>
          <span className="font-medium text-gray-900 truncate ml-2">{companyName}</span>
        </div>

        {/* Integration Keys */}
        <div className="flex items-center justify-between text-sm">
          <span className="text-gray-500">Integration Keys:</span>
          <div className="flex items-center gap-1 font-medium text-gray-700">
            <Key size={14} className="text-gray-400" />
            {tenant.integrationKeysCount}
          </div>
        </div>
      </div>

      {/* Footer - Actions */}
      <div className="px-5 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-end gap-2">
        <button
          onClick={(e) => {
            e.stopPropagation();
            onEdit(tenant);
          }}
          className="px-3 py-1.5 text-sm font-medium text-primary-700 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors flex items-center gap-1.5"
        >
          <Edit size={14} />
          Edit
        </button>
        <button
          onClick={(e) => {
            e.stopPropagation();
            onDelete(tenant);
          }}
          className="px-3 py-1.5 text-sm font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition-colors flex items-center gap-1.5"
        >
          <Trash2 size={14} />
          Delete
        </button>
      </div>
    </div>
  );
}