import { useEffect, useState } from 'react';
import { Label } from '@/components/ui/label';
import { LlmsUiverseSwitch } from '@/components/llms-uiverse-switch';
import { getStatus } from './mcp/api';
import type { McpStatus } from './mcp/types';
import { __, sprintf } from '@/lib/i18n';
import { fetchPrivacySettings, persistNewsFeedConsent, updatePrivacySettings } from '@/lib/privacy-settings';
import { setTelemetryConsent } from '@/lib/mixpanel';

/**
 * "AI Integrations" card (abilities-api-plan §5.3, FC-5).
 *
 * Reuses the MCP & AI admin REST status payload (GET llm-analytics/v1/mcp/status,
 * built by MCP_Admin_REST) instead of duplicating any server-side logic. The
 * admin shell localizes `wpApiSettings`, so the shared mcp/api client works here.
 */
function PrivacySettingsCard({ initialTelemetryOptIn = false }: { initialTelemetryOptIn?: boolean }) {
  const [telemetryEnabled, setTelemetryEnabled] = useState(initialTelemetryOptIn);
  const [emailEnabled, setEmailEnabled] = useState(false);
  const [newsFeedEnabled, setNewsFeedEnabled] = useState(false);
  const [attributionEnabled, setAttributionEnabled] = useState(true);
  const [attributionAvailable, setAttributionAvailable] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [savingKey, setSavingKey] = useState<'telemetry' | 'email' | 'news' | 'attribution' | null>(null);
  const adminEmail =
    (window as Window & { llmagnetSystemInfoData?: { analyticsData?: { adminEmail?: string } } })
      .llmagnetSystemInfoData?.analyticsData?.adminEmail || '';

  useEffect(() => {
    let cancelled = false;
    fetchPrivacySettings()
      .then((settings) => {
        if (cancelled) return;
        setTelemetryEnabled(settings.telemetry_enabled);
        setEmailEnabled(Boolean(settings.email_enabled));
        setNewsFeedEnabled(Boolean(settings.news_feed_enabled));
        setAttributionEnabled(settings.attribution_enabled);
        setAttributionAvailable(Boolean(settings.attribution_available));
        // REST is authoritative — sync Mixpanel client if bootstrap was stale or
        // the browser still has a persisted opt-out from a prior session.
        setTelemetryConsent(settings.telemetry_enabled);
      })
      .catch((e: Error) => {
        if (!cancelled) setError(e.message);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const handleTelemetryChange = async (enabled: boolean) => {
    setSavingKey('telemetry');
    setError(null);
    const previous = telemetryEnabled;
    setTelemetryEnabled(enabled);
    try {
      const result = await updatePrivacySettings({ telemetry_enabled: enabled });
      setTelemetryEnabled(result.telemetry_enabled);
      setTelemetryConsent(result.telemetry_enabled);
    } catch (e) {
      setTelemetryEnabled(previous);
      setError(e instanceof Error ? e.message : __('Could not save setting.', 'llmagnet-llm-txt-generator'));
    } finally {
      setSavingKey(null);
    }
  };

  const handleEmailChange = async (enabled: boolean) => {
    setSavingKey('email');
    setError(null);
    const previous = emailEnabled;
    setEmailEnabled(enabled);
    try {
      const result = await updatePrivacySettings({ email_enabled: enabled });
      setEmailEnabled(Boolean(result.email_enabled));
    } catch (e) {
      setEmailEnabled(previous);
      setError(e instanceof Error ? e.message : __('Could not save setting.', 'llmagnet-llm-txt-generator'));
    } finally {
      setSavingKey(null);
    }
  };

  const handleNewsFeedChange = async (enabled: boolean) => {
    setSavingKey('news');
    setError(null);
    const previous = newsFeedEnabled;
    setNewsFeedEnabled(enabled);
    try {
      const result = await updatePrivacySettings({ news_feed_enabled: enabled });
      const next = Boolean(result.news_feed_enabled);
      setNewsFeedEnabled(next);
      persistNewsFeedConsent(next);
    } catch (e) {
      setNewsFeedEnabled(previous);
      setError(e instanceof Error ? e.message : __('Could not save setting.', 'llmagnet-llm-txt-generator'));
    } finally {
      setSavingKey(null);
    }
  };

  const handleAttributionChange = async (enabled: boolean) => {
    setSavingKey('attribution');
    setError(null);
    const previous = attributionEnabled;
    setAttributionEnabled(enabled);
    try {
      const result = await updatePrivacySettings({ attribution_enabled: enabled });
      setAttributionEnabled(result.attribution_enabled);
    } catch (e) {
      setAttributionEnabled(previous);
      setError(e instanceof Error ? e.message : __('Could not save setting.', 'llmagnet-llm-txt-generator'));
    } finally {
      setSavingKey(null);
    }
  };

  return (
    <div className="bg-white border border-gray-200 shadow-sm p-6 mt-6">
      <h2 className="text-xl font-semibold text-gray-900">{__('Privacy & Data', 'llmagnet-llm-txt-generator')}</h2>
      <p className="mt-2 text-sm leading-relaxed text-gray-500">
        {__(
          'Control what LLMagnet stores and sends. Usage analytics only runs in the WordPress admin and never collects data from your site visitors.',
          'llmagnet-llm-txt-generator',
        )}{' '}
        <a
          href="https://llmagnet.com/privacy-policy/"
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-600 hover:underline"
        >
          {__('Privacy Policy', 'llmagnet-llm-txt-generator')}
        </a>
      </p>

      {error && (
        <p className="mt-3 text-sm text-red-600">{sprintf(__('Could not update privacy settings: %s', 'llmagnet-llm-txt-generator'), error)}</p>
      )}

      {loading ? (
        <p className="mt-3 text-sm text-gray-500">{__('Loading privacy settings…', 'llmagnet-llm-txt-generator')}</p>
      ) : (
        <div className="space-y-4 mt-4">
          <div className="flex items-start justify-between gap-4 py-3 border-b border-gray-100">
            <div className="min-w-0 flex-1">
              <Label className="text-sm font-medium text-gray-900">
                {__('Usage analytics (Mixpanel)', 'llmagnet-llm-txt-generator')}
              </Label>
              <p className="mt-1 text-sm text-gray-500">
                {__(
                  'Send plugin dashboard events (page views, settings changes, star ratings) to Mixpanel to help improve LLMagnet. We do not send your email or site URL. Off by default until you opt in.',
                  'llmagnet-llm-txt-generator',
                )}
              </p>
              <p className={`mt-2 text-xs font-medium ${telemetryEnabled ? 'text-green-600' : 'text-amber-600'}`}>
                {telemetryEnabled
                  ? __('Enabled — Mixpanel events are being sent from this browser.', 'llmagnet-llm-txt-generator')
                  : __('Disabled — ratings and actions are saved locally, but Mixpanel events are not sent.', 'llmagnet-llm-txt-generator')}
              </p>
            </div>
            <LlmsUiverseSwitch
              checked={telemetryEnabled}
              onChange={(checked) => void handleTelemetryChange(checked)}
              disabled={savingKey === 'telemetry'}
              aria-label={__('Usage analytics (Mixpanel)', 'llmagnet-llm-txt-generator')}
            />
          </div>

          <div className="flex items-start justify-between gap-4 py-3 border-b border-gray-100">
            <div className="min-w-0 flex-1">
              <Label className="text-sm font-medium text-gray-900">
                {adminEmail
                  ? sprintf(__('Emails to %s', 'llmagnet-llm-txt-generator'), adminEmail)
                  : __('Product emails', 'llmagnet-llm-txt-generator')}
              </Label>
              <p className="mt-1 text-sm text-gray-500">
                {__(
                  'Send setup and first-bot-visit emails to the WordPress admin address via LLMagnet’s email service. Turning this off unsubscribes that address. Off by default until you opt in.',
                  'llmagnet-llm-txt-generator',
                )}
              </p>
            </div>
            <LlmsUiverseSwitch
              checked={emailEnabled}
              onChange={(checked) => void handleEmailChange(checked)}
              disabled={savingKey === 'email'}
              aria-label={__('Product emails', 'llmagnet-llm-txt-generator')}
            />
          </div>

          <div className="flex items-start justify-between gap-4 py-3 border-b border-gray-100">
            <div className="min-w-0 flex-1">
              <Label className="text-sm font-medium text-gray-900">
                {__('News and notifications', 'llmagnet-llm-txt-generator')}
              </Label>
              <p className="mt-1 text-sm text-gray-500">
                {__(
                  'Load product news and notifications from the LLMagnet feed. Off by default until you approve the request from the notification bell.',
                  'llmagnet-llm-txt-generator',
                )}
              </p>
            </div>
            <LlmsUiverseSwitch
              checked={newsFeedEnabled}
              onChange={(checked) => void handleNewsFeedChange(checked)}
              disabled={savingKey === 'news'}
              aria-label={__('News and notifications', 'llmagnet-llm-txt-generator')}
            />
          </div>

          {attributionAvailable && (
          <div className="flex items-start justify-between gap-4 py-3">
            <div className="min-w-0 flex-1">
              <Label className="text-sm font-medium text-gray-900">
                {__('LLM attribution tracking', 'llmagnet-llm-txt-generator')}
              </Label>
              <p className="mt-1 text-sm text-gray-500">
                {__(
                  'Set a first-party cookie when visitors arrive from AI platforms (ChatGPT, Perplexity, etc.) so you can see which AI sources drive traffic.',
                  'llmagnet-llm-txt-generator',
                )}
              </p>
            </div>
            <LlmsUiverseSwitch
              checked={attributionEnabled}
              onChange={(checked) => void handleAttributionChange(checked)}
              disabled={savingKey === 'attribution'}
              aria-label={__('LLM attribution tracking', 'llmagnet-llm-txt-generator')}
            />
          </div>
          )}
        </div>
      )}
    </div>
  );
}

function AiIntegrationsCard() {
  const [status, setStatus] = useState<McpStatus | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    getStatus()
      .then((s) => {
        if (!cancelled) setStatus(s);
      })
      .catch((e: Error) => {
        if (!cancelled) setError(e.message);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  // Abilities mirror the registry 1:1 since Phase F (every available tool is
  // registered as an ability), so derive the count from tool_counts — the
  // status payload's own abilities.count still reflects read-only tools only.
  const abilitiesCount = status?.abilities.available ? status.tool_counts.total : 0;

  return (
    <div className="bg-white border border-gray-200 shadow-sm p-6 mt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-gray-900">{__('AI Integrations', 'llmagnet-llm-txt-generator')}</h2>
        <a
          href="/wp-admin/admin.php?page=llmagnet-ai-seo-mcp"
          className="text-sm text-blue-600 hover:underline"
        >
          {__('Manage on the MCP & AI page', 'llmagnet-llm-txt-generator')}
        </a>
      </div>

      {error && (
        <p className="mt-3 text-sm text-red-600">{sprintf(__('Could not load MCP status: %s', 'llmagnet-llm-txt-generator'), error)}</p>
      )}

      {!error && !status && (
        <p className="mt-3 text-sm text-gray-500">{__('Loading MCP status…', 'llmagnet-llm-txt-generator')}</p>
      )}

      {status && (
        <div className="space-y-3 mt-2">
          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('MCP Server', 'llmagnet-llm-txt-generator')}</Label>
            <span
              className={`text-sm font-semibold ${status.settings.enabled ? 'text-green-600' : 'text-gray-400'}`}
            >
              {status.settings.enabled
                ? status.settings.access_mode === 'private'
                  ? __('Enabled (private)', 'llmagnet-llm-txt-generator')
                  : status.settings.access_mode === 'public_content'
                    ? __('Enabled (public content mode)', 'llmagnet-llm-txt-generator')
                    : __('Enabled (public read mode)', 'llmagnet-llm-txt-generator')
                : __('Disabled', 'llmagnet-llm-txt-generator')}
            </span>
          </div>

          <div className="flex justify-between items-center py-2 border-b border-gray-100 gap-4">
            <Label className="text-sm font-medium text-gray-700 shrink-0">{__('Endpoint', 'llmagnet-llm-txt-generator')}</Label>
            <code className="text-xs text-gray-600 bg-gray-100 px-2 py-1 rounded break-all text-end">
              {status.endpoint}
            </code>
          </div>

          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('Active API Tokens', 'llmagnet-llm-txt-generator')}</Label>
            <span className="text-sm text-gray-600">
              {status.tokens_count}
              {status.has_legacy_token ? ` ${__('(+1 legacy token)', 'llmagnet-llm-txt-generator')}` : ''}
            </span>
          </div>

          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('MCP Tools', 'llmagnet-llm-txt-generator')}</Label>
            <span className="text-sm text-gray-600">
              {sprintf(
                __('%1$d (%2$d read / %3$d write)', 'llmagnet-llm-txt-generator'),
                status.tool_counts.total,
                status.tool_counts.read,
                status.tool_counts.write
              )}
            </span>
          </div>

          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('WordPress Abilities API', 'llmagnet-llm-txt-generator')}</Label>
            <span
              className={`text-sm font-semibold ${status.abilities.available ? 'text-green-600' : 'text-gray-400'}`}
            >
              {status.abilities.available
                ? sprintf(__('Available — %d abilities registered', 'llmagnet-llm-txt-generator'), abilitiesCount)
                : sprintf(__('Not available (requires WP 6.9+, running %s)', 'llmagnet-llm-txt-generator'), status.abilities.wp_version)}
            </span>
          </div>

          <div className="flex justify-between items-center py-2">
            <Label className="text-sm font-medium text-gray-700">{__('MCP Adapter Plugin', 'llmagnet-llm-txt-generator')}</Label>
            <span
              className={`text-sm font-semibold ${status.adapter.detected ? 'text-green-600' : 'text-gray-400'}`}
            >
              {status.adapter.detected ? __('Detected', 'llmagnet-llm-txt-generator') : __('Not detected', 'llmagnet-llm-txt-generator')}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

interface SystemInformationProps {
  wordpressVersion: string;
  pluginVersion: string;
  rootPath: string;
  llmsTxtExists: boolean;
  llmsTxtSize?: string;
  postsCount: number;
  markdownCount: number;
  imageCount: number;
  lastGenerated: string | null;
  telemetryOptIn?: boolean;
}

export function SystemInformation({
  wordpressVersion,
  pluginVersion,
  rootPath,
  llmsTxtExists,
  llmsTxtSize,
  postsCount,
  markdownCount,
  imageCount,
  lastGenerated,
  telemetryOptIn = false,
}: SystemInformationProps) {
  return (
    <div className="wrap" style={{ maxWidth: '1200px', margin: 'auto', paddingTop: '1.5rem', paddingLeft: '1.5rem', paddingRight: '1.5rem' }}>

      
      <div className="bg-white border border-gray-200 shadow-sm p-6">
      <h2 className="text-xl font-semibold text-gray-900">{__('Settings', 'llmagnet-llm-txt-generator')}</h2>
        <div className="space-y-3">
          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('WordPress Version', 'llmagnet-llm-txt-generator')}</Label>
            <span className="text-sm text-gray-600">{wordpressVersion}</span>
          </div>
          
          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('Plugin Version', 'llmagnet-llm-txt-generator')}</Label>
            <span className="text-sm text-gray-600">{pluginVersion}</span>
          </div>
          
          <div className="flex justify-between items-center py-2 border-b border-gray-100">
            <Label className="text-sm font-medium text-gray-700">{__('Root Path', 'llmagnet-llm-txt-generator')}</Label>
            <code className="text-xs text-gray-600 bg-gray-100 px-2 py-1 rounded">
              {rootPath}
            </code>
          </div>

          {/* Previous Status Overview Information */}
          <div className="mt-6 pt-4 ">
            <div className="space-y-2">
              <div className="flex justify-between items-center py-1">
                <Label className="text-sm font-medium text-gray-700">{__('LLMS.txt Status', 'llmagnet-llm-txt-generator')}</Label>
                <span className={`text-sm font-semibold ${llmsTxtExists ? 'text-green-600' : 'text-red-600'}`}>
                  {llmsTxtExists ? __('Active', 'llmagnet-llm-txt-generator') : __('Not Generated', 'llmagnet-llm-txt-generator')}
                </span>
              </div>
              
              {llmsTxtSize && (
                <div className="flex justify-between items-center py-1">
                  <Label className="text-sm font-medium text-gray-700">{__('LLMS.txt Size', 'llmagnet-llm-txt-generator')}</Label>
                  <span className="text-sm text-gray-600">{llmsTxtSize}</span>
                </div>
              )}
              
              <div className="flex justify-between items-center py-1">
                <Label className="text-sm font-medium text-gray-700">{__('Posts Available to Export', 'llmagnet-llm-txt-generator')}</Label>
                <span className="text-sm text-blue-600 font-semibold">{postsCount}</span>
              </div>
              
              <div className="flex justify-between items-center py-1">
                <Label className="text-sm font-medium text-gray-700">{__('Generated Markdown Files', 'llmagnet-llm-txt-generator')}</Label>
                <span className="text-sm text-purple-600 font-semibold">{markdownCount}</span>
              </div>
              
              <div className="flex justify-between items-center py-1">
                <Label className="text-sm font-medium text-gray-700">{__('Indexed Images', 'llmagnet-llm-txt-generator')}</Label>
                <span className={`text-sm font-semibold ${imageCount > 0 ? 'text-green-600' : 'text-gray-400'}`}>
                  {imageCount}
                </span>
              </div>
            </div>
          </div>

          {lastGenerated && (
            <div className="mt-4 pt-4 border-t border-gray-200">
              <div className="text-sm text-gray-600">
                <strong>{__('Last Generated:', 'llmagnet-llm-txt-generator')}</strong> {lastGenerated}
              </div>
            </div>
          )}
        </div>
      </div>

      <PrivacySettingsCard initialTelemetryOptIn={telemetryOptIn} />

      <AiIntegrationsCard />
    </div>
  );
}