// (c) 2026 TWWIM UG. All rights reserved. (www.twwim.com)

import { useEffect, useMemo, useState } from 'react';
import { ArrowLeft, Globe, Database, FileText, HelpCircle, Layout, FlaskConical } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { useTenant, useTenants } from './hooks';
import { KnowledgeTab } from '@/features/knowledge/components/KnowledgeTab';
import { PlaygroundTab } from '@/features/knowledge/components/PlaygroundTab';
import { useKnowledgeStats } from '@/features/knowledge/hooks';
import { useTranslation } from '@/i18n/TranslationProvider';
import { tokenStorage } from '@/infrastructure/storage/LocalTokenStorage';
import { isWordpressEmbed, isWooCommerceActive, getWpDomain } from '@/lib/wp-integration';
// Eager imports — both small enough that bundle-size wins from lazy are
// negligible, and bundling them into the main chunk avoids React-instance
// mismatch errors (#321) that surface when other WP plugins (WPBakery /
// RevSlider) load their own React on the same wp-admin page and a Suspense-
// resolved chunk picks up the wrong copy. Standalone CP build never renders
// WOO_TAB (showWooTab is false) so the unused imports are tree-shaken.
import { WooCommerceIcon } from './components/WooCommerceIcon';
import WooCommerceSyncTab from './components/WooCommerceSyncTab';

type TabId = 'DOCUMENT' | 'FAQ' | 'PLAYGROUND' | 'WOO';

interface Tab {
  id: TabId;
  label: string;
  icon: React.ReactNode;
}

const BASE_TABS: Tab[] = [
  { id: 'DOCUMENT',   label: 'Documents',  icon: <FileText size={16} /> },
  { id: 'FAQ',        label: 'FAQ',        icon: <HelpCircle size={16} /> },
  { id: 'PLAYGROUND', label: 'Playground', icon: <FlaskConical size={16} /> },
];

/** Pre-computed at module load — true only in WP plugin build with WC active. */
const WP_EMBED = isWordpressEmbed() && isWooCommerceActive();

export type TenantPageVariant = 'detail' | 'knowledge';

interface TenantPageProps {
  tenantId?: string;
  variant?: TenantPageVariant;
  onTenantChange?: (tenantId: string) => void;
}

export function TenantPage({ tenantId, variant = 'detail', onTenantChange }: TenantPageProps) {
  const { t } = useTranslation();

  const isKnowledge = variant === 'knowledge';

  const tenantsQuery = useTenants();
  const tenants = useMemo(() => tenantsQuery.data?.tenants ?? [], [tenantsQuery.data?.tenants]);

  const resolvedTenantId = useMemo(() => {
    if (!isKnowledge) return tenantId;
    if (tenantId && tenants.some((tn) => tn.id === tenantId)) return tenantId;
    return tenants[0]?.id;
  }, [isKnowledge, tenantId, tenants]);

  useEffect(() => {
    if (!isKnowledge || !onTenantChange) return;
    if (resolvedTenantId && resolvedTenantId !== tenantId) {
      onTenantChange(resolvedTenantId);
    }
  }, [isKnowledge, onTenantChange, resolvedTenantId, tenantId]);

  const { data: tenant, isLoading, error } = useTenant(resolvedTenantId ?? '');
  const { data: stats } = useKnowledgeStats(resolvedTenantId ?? '');
  const [activeTab, setActiveTab] = useState<TabId>('DOCUMENT');

  // WooCommerce tab is only meaningful for the tenant matching the current
  // WP site domain. Switching tenants (Knowledge variant has a dropdown)
  // can hide the tab — fall back to the Documents tab if it disappears
  // while selected.
  const showWooTab = WP_EMBED && tenant?.domain === getWpDomain();
  const tabs = useMemo<Tab[]>(() => {
    if (!showWooTab) return BASE_TABS;
    return [
      ...BASE_TABS,
      { id: 'WOO', label: 'WooCommerce', icon: <WooCommerceIcon size={16} /> },
    ];
  }, [showWooTab]);

  useEffect(() => {
    if (activeTab === 'WOO' && !showWooTab) setActiveTab('DOCUMENT');
  }, [activeTab, showWooTab]);

  const listLoading = isKnowledge && tenantsQuery.isLoading;
  const noTenants = isKnowledge && !tenantsQuery.isLoading && tenants.length === 0;

  if (listLoading || (resolvedTenantId && isLoading)) {
    return (
      <div className="animate-pulse space-y-6 p-8">
        <div className="h-8 bg-gray-200 rounded w-1/3" />
        <div className="h-12 bg-gray-200 rounded" />
        <div className="h-96 bg-gray-200 rounded" />
      </div>
    );
  }

  if (noTenants) {
    return (
      <div className="p-8">
        <div className="bg-white border border-gray-200 rounded-lg p-8 text-center">
          <Globe className="mx-auto h-12 w-12 text-gray-400 mb-3" />
          <h3 className="text-lg font-semibold text-gray-900 mb-2">{t('knowledge.noTenantsTitle')}</h3>
          <p className="text-gray-500 mb-4">{t('knowledge.noTenantsHint')}</p>
          <Link
            to="/dashboard/tenants"
            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-cyan-600 rounded-lg hover:bg-cyan-700"
          >
            {t('knowledge.goToTenants')}
          </Link>
        </div>
      </div>
    );
  }

  if (error || !tenant) {
    return (
      <div className="p-8">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
          <p className="text-red-800 mb-4">{error?.message || t('knowledge.tenantNotFound')}</p>
          {!isKnowledge && (
            <Link
              to="/dashboard/tenants"
              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
            >
              <ArrowLeft size={16} />
              {t('knowledge.backToTenants')}
            </Link>
          )}
        </div>
      </div>
    );
  }

  const productCount = stats?.byType?.PRODUCT ?? 0;
  const pageCount = stats?.byType?.PAGE ?? 0;
  const documentCount = stats?.byType?.DOCUMENT ?? 0;

  const documentsCapRaw = tokenStorage.getCapability('knowledge_files_max');
  const documentsCap = documentsCapRaw ? parseInt(documentsCapRaw, 10) : 0;
  const documentsRemaining = Math.max(0, documentsCap - documentCount);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        {!isKnowledge && (
          <Link
            to="/dashboard/tenants"
            className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <ArrowLeft size={20} />
          </Link>
        )}

        {isKnowledge ? (
          <div className="flex items-center gap-3 min-w-0 flex-1">
            <select
              value={tenant.id}
              onChange={(e) => onTenantChange?.(e.target.value)}
              className="px-3 py-2 pr-8 min-w-[240px] max-w-sm border border-gray-300 rounded-lg bg-white text-sm font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              aria-label={t('knowledge.tenantSelector')}
            >
              {tenants.map((tn) => (
                <option key={tn.id} value={tn.id}>
                  {tn.name}
                </option>
              ))}
            </select>
            <div className="flex items-center gap-2 text-sm text-gray-500 min-w-0">
              <Globe size={14} className="shrink-0" />
              <span className="truncate">{tenant.domain}</span>
              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                tenant.isActive() ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'
              }`}>
                {tenant.status}
              </span>
            </div>
          </div>
        ) : (
          <div className="min-w-0">
            <h1 className="text-xl font-bold text-gray-900 truncate">{tenant.name}</h1>
            <div className="flex items-center gap-2 text-sm text-gray-500">
              <Globe size={14} />
              <span>{tenant.domain}</span>
              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                tenant.isActive() ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'
              }`}>
                {tenant.status}
              </span>
            </div>
          </div>
        )}
      </div>

      {/* Synced-content summary cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <StatCard
          icon={<Database size={20} />}
          label={t('knowledge.productsCard')}
          hint={t('knowledge.productsCardHint')}
          count={productCount}
        />
        <StatCard
          icon={<Layout size={20} />}
          label={t('knowledge.pagesCard')}
          hint={t('knowledge.pagesCardHint')}
          count={pageCount}
        />
        <QuotaCard
          icon={<FileText size={20} />}
          label={t('knowledge.documentsQuotaCard')}
          used={documentCount}
          cap={documentsCap}
          usedLabel={t('knowledge.quotaUsed')}
          leftLabel={t('knowledge.quotaLeft')}
          remaining={documentsRemaining}
        />
      </div>

      {/* Tab bar */}
      <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <div className="border-b border-gray-200">
          <nav className="flex -mb-px">
            {tabs.map((tab) => {
              const isActive = tab.id === activeTab;
              // WOO tab has no per-type count (tenant-level sync state).
              // WOO + PLAYGROUND are tenant-level views — no per-type entry count.
              const count = tab.id === 'WOO' || tab.id === 'PLAYGROUND'
                ? undefined
                : stats?.byType?.[tab.id];

              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`
                    flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors
                    ${isActive
                      ? 'border-cyan-600 text-cyan-700'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                    }
                  `}
                >
                  {tab.icon}
                  {tab.label}
                  {count !== undefined && count > 0 && (
                    <span className={`ml-1 px-1.5 py-0.5 rounded-full text-xs font-medium ${
                      isActive ? 'bg-cyan-100 text-cyan-700' : 'bg-gray-100 text-gray-600'
                    }`}>
                      {count}
                    </span>
                  )}
                </button>
              );
            })}
          </nav>
        </div>

        {/* Tab content */}
        {activeTab === 'WOO' ? (
          <WooCommerceSyncTab tenantId={tenant.id} tenantDomain={tenant.domain} />
        ) : activeTab === 'PLAYGROUND' ? (
          <PlaygroundTab tenantId={tenant.id} />
        ) : (
          <KnowledgeTab tenantId={tenant.id} typeFilter={activeTab} />
        )}
      </div>
    </div>
  );
}

function StatCard({
  icon,
  label,
  hint,
  count,
}: {
  icon: React.ReactNode;
  label: string;
  hint: string;
  count: number;
}) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-start gap-3 shadow-sm">
      <div className="p-2 rounded-lg bg-cyan-50 text-cyan-700 shrink-0">{icon}</div>
      <div className="min-w-0 flex-1">
        <div className="flex items-baseline gap-2">
          <span className="text-2xl font-bold text-gray-900">{count.toLocaleString()}</span>
          <span className="text-sm font-medium text-gray-700 truncate">{label}</span>
        </div>
        <p className="text-xs text-gray-500 mt-1">{hint}</p>
      </div>
    </div>
  );
}

function QuotaCard({
  icon,
  label,
  used,
  cap,
  usedLabel,
  leftLabel,
  remaining,
}: {
  icon: React.ReactNode;
  label: string;
  used: number;
  cap: number;
  usedLabel: string;
  leftLabel: string;
  remaining: number;
}) {
  const pct = cap > 0 ? Math.min(100, Math.round((used / cap) * 100)) : 0;
  const barColor = pct >= 100 ? 'bg-red-500' : pct >= 80 ? 'bg-amber-500' : 'bg-cyan-500';
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-start gap-3 shadow-sm">
      <div className="p-2 rounded-lg bg-cyan-50 text-cyan-700 shrink-0">{icon}</div>
      <div className="min-w-0 flex-1">
        <div className="flex items-baseline justify-between gap-2">
          <span className="text-sm font-medium text-gray-700 truncate">{label}</span>
          <span className="text-xs text-gray-500 shrink-0">{used.toLocaleString()} / {cap.toLocaleString()}</span>
        </div>
        <div className="h-2 mt-2 bg-gray-100 rounded-full overflow-hidden">
          <div className={`h-full ${barColor} transition-all`} style={{ width: `${pct}%` }} />
        </div>
        <div className="mt-2 flex items-center justify-between text-xs text-gray-500">
          <span>{usedLabel}: <span className="font-medium text-gray-900">{used.toLocaleString()}</span></span>
          <span>{leftLabel}: <span className="font-medium text-gray-900">{remaining.toLocaleString()}</span></span>
        </div>
      </div>
    </div>
  );
}