/**
 * TenantDetail Component
 *
 * Read-only detailed view of a single tenant and its integration keys.
 * Keys are immutable — display and copy only, no regeneration.
 *
 * @component
 * @layer Presentation
 */

import { useState, useEffect } from 'react';
import { Copy, CheckCircle, Shield, FlaskConical, Megaphone } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { Modal } from '@/components/shared';
import { Tenant, TenantStatus } from '@/domain/entities/Tenant';
import { IntegrationKey, KeyEnvironment } from '@/domain/entities/IntegrationKey';
import { useIntegrationKeys } from '@/features/integration-keys/hooks';
import { useTranslation } from '@/i18n/TranslationProvider';
import { isWordpressEmbed, wpGetSettings, wpSaveDockPosition } from '@/lib/wp-integration';

interface TenantDetailProps {
  tenant: Tenant;
  onClose: () => void;
  onUpdate?: () => void;
}

/** WP plugin exposes 3 positions (same set as Shopify app). */
const WP_DOCK_OPTIONS = [
  { value: 'top-right',    labelKey: 'topRight' as const },
  { value: 'middle-right', labelKey: 'middleRight' as const },
  { value: 'bottom-right', labelKey: 'bottomRight' as const },
];

/**
 * Single Key Block Component (read-only)
 */
function KeyBlock({
  label,
  description,
  icon,
  integrationKey,
  colorClass,
}: {
  label: string;
  description: string;
  icon: React.ReactNode;
  integrationKey: IntegrationKey | null;
  colorClass: { bg: string; border: string; text: string; badge: string };
}) {
  const { t } = useTranslation();
  const [copied, setCopied] = useState(false);

  const displayValue = integrationKey?.key || t('tenants.detail.notGenerated');
  const canCopy = !!integrationKey;

  const handleCopy = async () => {
    if (!canCopy) return;
    await navigator.clipboard.writeText(integrationKey!.key);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className={`rounded-lg border-2 ${colorClass.border} ${colorClass.bg} p-4`}>
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          {icon}
          <span className={`text-sm font-semibold ${colorClass.text}`}>{label}</span>
        </div>
        {integrationKey?.isActive() && (
          <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${colorClass.badge}`}>
            <CheckCircle size={12} />
            {t('common.active')}
          </span>
        )}
      </div>

      <div className="flex items-center gap-2 mb-2">
        <code className="flex-1 text-sm font-mono bg-white px-3 py-2 rounded border border-gray-200 break-all select-all">
          {displayValue}
        </code>
        {canCopy && (
          <button
            onClick={handleCopy}
            className="p-2 text-gray-600 hover:text-gray-900 hover:bg-white rounded transition-colors"
            title={t('tenants.detail.copyKey')}
          >
            {copied ? <CheckCircle size={16} className="text-green-600" /> : <Copy size={16} />}
          </button>
        )}
      </div>

      <p className="text-xs text-gray-500">{description}</p>

      {integrationKey?.environment === KeyEnvironment.TESTING && (
        <div className="mt-2 text-xs text-gray-400">
          {t('tenants.detail.usage', { used: integrationKey.usageCount })}
        </div>
      )}
    </div>
  );
}

/**
 * WP Position Picker — embedded dashboard only.
 * Replaces both the integration-key cards and the snippet constructor when
 * running inside the WP plugin admin. The WordPress plugin handles key
 * distribution and snippet injection automatically; the only thing the
 * merchant still needs to choose is where the widget sits on the page.
 * Layout + options mirror the Shopify app Appearance page.
 */
function WpPositionPicker() {
  const { t } = useTranslation();
  const [position, setPosition] = useState<string>('bottom-right');
  const [saving, setSaving] = useState(false);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    let cancelled = false;
    wpGetSettings().then((settings) => {
      if (cancelled) return;
      const current = settings?.twwim_dock_position;
      if (current && WP_DOCK_OPTIONS.some((o) => o.value === current)) {
        setPosition(current);
      }
      setLoaded(true);
    });
    return () => { cancelled = true; };
  }, []);

  const handlePick = async (next: string) => {
    if (saving || next === position) return;
    const previous = position;
    setPosition(next);
    setSaving(true);
    const ok = await wpSaveDockPosition(next);
    setSaving(false);
    if (!ok) setPosition(previous);
  };

  return (
    <div>
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-gray-900">{t('tenants.detail.widgetPosition')}</h3>
        <p className="text-sm text-gray-500">{t('tenants.detail.positionDesc')}</p>
      </div>

      <div className="grid grid-cols-3 gap-2 max-w-md">
        {WP_DOCK_OPTIONS.map((opt) => {
          const active = position === opt.value;
          return (
            <button
              key={opt.value}
              onClick={() => handlePick(opt.value)}
              disabled={saving || !loaded}
              className={`px-4 py-2.5 text-sm rounded-lg border transition-colors ${
                active
                  ? 'border-2 border-cyan-500 bg-cyan-50 text-cyan-900 font-semibold'
                  : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
              } ${(saving || !loaded) ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}
            >
              {t(`tenants.detail.${opt.labelKey}`)}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/**
 * TenantDetail Component
 */
export function TenantDetail({ tenant, onClose }: TenantDetailProps) {
  const { t } = useTranslation();
  const { keys: integrationKeys } = useIntegrationKeys({ tenantId: tenant.id });
  const wpEmbed = isWordpressEmbed();

  // Find keys by environment
  const productionKey = integrationKeys.find(
    (k) => k.environment === KeyEnvironment.PRODUCTION && k.isActive()
  ) || null;
  const testingKey = integrationKeys.find(
    (k) => k.environment === KeyEnvironment.TESTING && k.isActive()
  ) || null;

  return (
    <Modal
      title={tenant.name}
      subtitle={tenant.domain}
      onClose={onClose}
      maxWidth="max-w-4xl"
      footer={
        <button
          onClick={onClose}
          className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          {t('common.close')}
        </button>
      }
    >
      <div className="space-y-8">
        {/* Tenant Info */}
        <div className="grid grid-cols-2 gap-6">
          <div>
            <label className="text-sm font-medium text-gray-700">{t('tenants.detail.status')}</label>
            <div className="mt-1">
              <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
                tenant.status === TenantStatus.ACTIVE
                  ? 'bg-green-100 text-green-800'
                  : tenant.status === TenantStatus.SUSPENDED
                  ? 'bg-yellow-100 text-yellow-800'
                  : 'bg-gray-100 text-gray-700'
              }`}>
                {tenant.status}
              </span>
            </div>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-700">{t('tenants.detail.domain')}</label>
            <div className="mt-1 text-sm text-gray-900">{tenant.domain}</div>
          </div>
        </div>

        {wpEmbed ? (
          <WpPositionPicker />
        ) : (
          <>
            {/* Integration Keys Section */}
            <div>
              <h3 className="text-lg font-semibold text-gray-900 mb-1">{t('tenants.detail.integrationKeys')}</h3>
              <p className="text-sm text-gray-500 mb-4">
                {t('tenants.detail.keysDescription')}
              </p>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <KeyBlock
                  label={t('tenants.detail.productionKey')}
                  description={t('tenants.detail.productionDescription')}
                  icon={<Shield size={16} className="text-blue-600" />}
                  integrationKey={productionKey}
                  colorClass={{
                    bg: 'bg-blue-50/50',
                    border: 'border-blue-200',
                    text: 'text-blue-800',
                    badge: 'bg-blue-100 text-blue-800',
                  }}
                />
                <KeyBlock
                  label={t('tenants.detail.testingKey')}
                  description={t('tenants.detail.testingDescription')}
                  icon={<FlaskConical size={16} className="text-purple-600" />}
                  integrationKey={testingKey}
                  colorClass={{
                    bg: 'bg-purple-50/50',
                    border: 'border-purple-200',
                    text: 'text-purple-800',
                    badge: 'bg-purple-100 text-purple-800',
                  }}
                />
              </div>
            </div>

            {/* Plugin settings — per-tenant widget configuration link.
                The snippet builder (positioning + generated <script> tag)
                now lives inside the Snippet tab there to keep one source
                of truth for runtime configuration. */}
            <div>
              <h3 className="text-lg font-semibold text-gray-900 mb-1">
                {t('tenants.pluginSettings.linkTitle')}
              </h3>
              <p className="text-sm text-gray-500 mb-3">
                {t('tenants.pluginSettings.linkDescription')}
              </p>
              <Link
                to="/dashboard/plugin-settings"
                search={{ tenantId: tenant.id }}
                onClick={onClose}
                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-cyan-700 bg-cyan-50 hover:bg-cyan-100 rounded-lg transition-colors"
              >
                <Megaphone size={16} />
                {t('tenants.pluginSettings.openConfig')}
              </Link>
            </div>
          </>
        )}

        {/* Usage Statistics */}
        <div>
          <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('tenants.detail.usageStatistics')}</h3>
          <div className="grid grid-cols-3 gap-4">
            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <div className="text-sm text-gray-500">{t('tenants.detail.totalRequests')}</div>
              <div className="text-2xl font-semibold text-gray-900 mt-1">-</div>
              <div className="text-xs text-gray-400 mt-1">{t('common.comingSoon')}</div>
            </div>
            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <div className="text-sm text-gray-500">{t('tenants.detail.audioDuration')}</div>
              <div className="text-2xl font-semibold text-gray-900 mt-1">-</div>
              <div className="text-xs text-gray-400 mt-1">{t('common.comingSoon')}</div>
            </div>
            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <div className="text-sm text-gray-500">{t('tenants.detail.totalTokens')}</div>
              <div className="text-2xl font-semibold text-gray-900 mt-1">-</div>
              <div className="text-xs text-gray-400 mt-1">{t('common.comingSoon')}</div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
}