/**
 * TenantsList Component
 *
 * Tenant list with read-only view and creation.
 * Tenants are immutable after creation — no edit or delete.
 *
 * @component
 * @layer Presentation
 */

import { useState, useMemo } from 'react';
import { Search, Plus, Building2, Globe, Key, AlertTriangle, Database, Megaphone } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { TenantEdit } from './TenantEdit';
import type { TenantCreateResult } from './TenantEdit';
import { TenantDetail } from './TenantDetail';
import { Tenant, TenantStatus } from '@/domain/entities/Tenant';
import { useTenants } from './hooks';
import { tokenStorage } from '@/infrastructure/storage/LocalTokenStorage';
import { useTranslation } from '@/i18n/TranslationProvider';
import { wpAutoSaveKey } from '@/lib/wp-integration';

// WooCommerce sync UI lives in the Knowledge page tab bar (TenantPage WOO
// tab) — see apps/dashboard/src/features/tenants/components/WooCommerceSyncTab.tsx.
// The standalone modal that used to live here was removed when the tab was
// added; one entry point is enough.

// Import status configs for UI (these should remain in types for presentation layer)
const TENANT_STATUS_CONFIG = {
  [TenantStatus.ACTIVE]: { labelKey: 'common.active', color: 'green' as const },
  [TenantStatus.SUSPENDED]: { labelKey: 'common.suspended', color: 'yellow' as const },
  [TenantStatus.ARCHIVED]: { labelKey: 'common.archived', color: 'gray' as const },
};

/**
 * Status Badge Component
 */
function StatusBadge({ status }: { status: TenantStatus }) {
  const { t } = useTranslation();
  const config = TENANT_STATUS_CONFIG[status];
  const colorClasses = {
    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',
  };

  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${colorClasses[config.color]}`}>
      {t(config.labelKey)}
    </span>
  );
}

/**
 * TenantsList Component
 */
export function TenantsList() {
  const { t } = useTranslation();
  // Use TanStack Query hooks for tenant data
  const { data, isLoading, error, refetch } = useTenants();

  // Extract tenants from query result
  const tenants = data?.tenants || [];

  // Check integrations capability limit
  const integrationsLimit = tokenStorage.getCapability('integrations');
  const isUnlimited = integrationsLimit === 'unlimited';
  const maxTenants = integrationsLimit && !isUnlimited ? parseInt(integrationsLimit, 10) : null;
  const atLimit = maxTenants !== null && tenants.length >= maxTenants;

  // UI State
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<TenantStatus | 'ALL'>('ALL');
  const [isCreating, setIsCreating] = useState(false);
  const [viewingTenant, setViewingTenant] = useState<Tenant | null>(null);

  // Filtered tenants using domain entity methods
  const filteredTenants = useMemo(() => {
    return tenants.filter((tenant) => {
      // Search filter using domain entity getters
      const matchesSearch =
        searchQuery === '' ||
        tenant.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        tenant.domain.toLowerCase().includes(searchQuery.toLowerCase());

      // Status filter using domain entity getters
      const matchesStatus = statusFilter === 'ALL' || tenant.status === statusFilter;

      return matchesSearch && matchesStatus;
    });
  }, [tenants, searchQuery, statusFilter]);

  // Handlers
  const handleCreateTenant = () => {
    setIsCreating(true);
  };

  const handleSaveComplete = (result?: TenantCreateResult) => {
    refetch();
    setIsCreating(false);

    // After creation, auto-open TenantDetail
    if (result) {
      setViewingTenant(result.tenant);

      // WP embed: auto-save production key to wp_options if domain matches
      if (result.productionKey) {
        wpAutoSaveKey(result.tenant.domain, result.productionKey);
      }
    }
  };

  const handleCancelEdit = () => {
    setIsCreating(false);
  };

  // Loading state
  if (isLoading) {
    return (
      <div>
        <div className="animate-pulse space-y-4">
          <div className="h-10 bg-gray-200 rounded w-1/4"></div>
          <div className="h-64 bg-gray-200 rounded"></div>
        </div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div>
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <p className="text-red-800">{t('tenants.errorLoading', { error: error.message })}</p>
          <button
            onClick={() => refetch()}
            className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          >
            {t('common.retry')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div>
      {/* Filters and Search */}
      <div className="mb-6 space-y-4">
        {/* Search and Create Button Row */}
        <div className="flex gap-4 flex-wrap">
          {/* Search Input */}
          <div className="flex-1 min-w-[280px] max-w-md relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
            <input
              type="text"
              placeholder={t('tenants.searchPlaceholder')}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            />
          </div>

          {/* Create Button */}
          <button
            onClick={handleCreateTenant}
            disabled={atLimit}
            data-testid="tenant-create-btn"
            className={`px-4 py-2 font-medium rounded-lg transition-all flex items-center gap-2 ${
              atLimit
                ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                : 'bg-cyan-600 hover:bg-cyan-700 text-white shadow-md hover:shadow-lg'
            }`}
            title={atLimit ? t('tenants.limitWarningShort', { max: maxTenants }) : undefined}
          >
            <Plus size={20} />
            {t('tenants.addNewTenant')}
          </button>
        </div>

        {/* Limit Warning */}
        {atLimit && (
          <div className="flex items-center gap-2 px-3 py-2 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800">
            <AlertTriangle size={16} className="shrink-0" />
            <span>{t('tenants.limitWarning', { max: maxTenants, label: maxTenants === 1 ? t('tenants.website') : t('tenants.websites') })}</span>
          </div>
        )}

        {/* Filters Row */}
        <div className="flex gap-4 flex-wrap">
          {/* Status Filter */}
          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-gray-700">{t('tenants.statusFilter')}</label>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as TenantStatus | 'ALL')}
              className="px-3 py-2 pr-8 min-w-[160px] border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
            >
              <option value="ALL">{t('tenants.allStatuses')}</option>
              <option value={TenantStatus.ACTIVE}>{t('common.active')}</option>
              <option value={TenantStatus.SUSPENDED}>{t('common.suspended')}</option>
              <option value={TenantStatus.ARCHIVED}>{t('common.archived')}</option>
            </select>
          </div>

          {/* Results Count */}
          <div className="ml-auto flex items-center text-sm text-gray-600">
            <span className="font-medium">{filteredTenants.length}</span>
            <span className="ml-1">
              {filteredTenants.length === 1 ? t('tenants.tenant') : t('tenants.tenants')}
            </span>
          </div>
        </div>
      </div>

      {/* Tenants Table or Empty State */}
      {filteredTenants.length === 0 ? (
        <div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
          <Building2 className="mx-auto h-16 w-16 text-gray-400 mb-4" />
          <h3 className="text-lg font-semibold text-gray-900 mb-2">
            {searchQuery || statusFilter !== 'ALL'
              ? t('tenants.noTenantsFound')
              : t('tenants.noTenantsYet')}
          </h3>
          <p className="text-gray-500 mb-6">
            {searchQuery || statusFilter !== 'ALL'
              ? t('tenants.adjustFilters')
              : t('tenants.getStarted')}
          </p>
          {!searchQuery && statusFilter === 'ALL' && !atLimit && (
            <button
              onClick={handleCreateTenant}
              className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white font-medium rounded-lg transition-all shadow-md hover:shadow-lg inline-flex items-center gap-2"
            >
              <Plus size={20} />
              {t('tenants.addNewTenant')}
            </button>
          )}
          {!searchQuery && statusFilter === 'ALL' && atLimit && (
            <p className="text-amber-700 text-sm">
              {t('tenants.limitWarningShort', { max: maxTenants })}
            </p>
          )}
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50 border-b border-gray-200">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t('common.name')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t('common.domain')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t('common.status')}
                  </th>
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t('common.actions')}
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {filteredTenants.map((tenant) => (
                  <tr key={tenant.id} className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <Link
                        to="/dashboard/tenants/$tenantId"
                        params={{ tenantId: tenant.id }}
                        className="text-sm font-medium text-gray-900 hover:text-cyan-700 hover:underline"
                      >
                        {tenant.name}
                      </Link>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <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"
                      >
                        <Globe size={14} />
                        {tenant.domain}
                      </a>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <StatusBadge status={tenant.status} />
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex items-center justify-end gap-1">
                        <Link
                          to="/dashboard/tenants/$tenantId"
                          params={{ tenantId: tenant.id }}
                          className="text-cyan-600 hover:text-cyan-900 transition-colors p-1.5 rounded hover:bg-cyan-50"
                          title={t('knowledge.title')}
                        >
                          <Database size={16} />
                        </Link>
                        <button
                          onClick={() => setViewingTenant(tenant)}
                          className="text-cyan-600 hover:text-cyan-900 transition-colors p-1.5 rounded hover:bg-cyan-50"
                          title={t('tenants.manageKeys')}
                        >
                          <Key size={16} />
                        </button>
                        <Link
                          to="/dashboard/plugin-settings"
                          search={{ tenantId: tenant.id }}
                          className="text-cyan-600 hover:text-cyan-900 transition-colors p-1.5 rounded hover:bg-cyan-50"
                          title={t('tenants.pluginSettings.linkTitle')}
                        >
                          <Megaphone size={16} />
                        </Link>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Create Modal */}
      {isCreating && (
        <TenantEdit
          tenant={null}
          onSave={handleSaveComplete}
          onCancel={handleCancelEdit}
        />
      )}

      {/* Tenant Detail Modal */}
      {viewingTenant && (
        <TenantDetail
          tenant={viewingTenant}
          onClose={() => {
            setViewingTenant(null);
          }}
          onUpdate={refetch}
        />
      )}
    </div>
  );
}