import React, { useCallback, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { createPortal } from 'react-dom';
import { PageDrawer } from './components/page-drawer';
import './index.css';
import './styles/elementor-isolation.css';

/**
 * Elementor editor integration entry (adoption plan Feature 4, lane F-B).
 *
 * Renders an LLMagnet score button in the Elementor editor — primary: DOM
 * injection into the v3 top bar (React portal); fallback: floating action
 * button — and opens the existing Page/Product drawer over the editor.
 *
 * Loaded only inside the Elementor editor by includes/class-elementor.php.
 */

type ElementorData = LlmagnetElementorData;

/**
 * Top-bar container candidates, most-specific first. Elementor's v3 top bar
 * ("editor v2" UI) is MUI-based React with NO stable public API for
 * third-party buttons, so these WILL need patching across Elementor
 * versions — keep every selector in this one block (spec Feature 4,
 * risk note 5). When none match within the timeout the floating fallback
 * button is shown instead, which also covers the legacy (non-top-bar)
 * editor.
 */
const TOP_BAR_CONTAINER_SELECTORS: string[] = [
  // v3.20+ top bar: utility icon cluster on the end side of the header.
  '#elementor-editor-wrapper-v2 header .MuiGrid-container > .MuiGrid-root:last-of-type .MuiStack-root',
  '#elementor-editor-wrapper-v2 header .MuiStack-root:last-of-type',
  // Any header inside the v2 wrapper as a last resort.
  '#elementor-editor-wrapper-v2 header',
];

/** How long to wait for the top bar before falling back (ms). */
const TOP_BAR_TIMEOUT = 8000;

function findTopBarContainer(): Element | null {
  for (const selector of TOP_BAR_CONTAINER_SELECTORS) {
    try {
      const el = document.querySelector(selector);
      if (el) return el;
    } catch {
      // Invalid selector on this Elementor version — try the next one.
    }
  }
  return null;
}

/** Whether the Elementor document has unsaved changes (defensive). */
function isElementorDirty(): boolean {
  try {
    const saver = window.elementor?.saver;
    if (saver && typeof saver.isEditorChanged === 'function') {
      return !!saver.isEditorChanged();
    }
  } catch {
    // Elementor internals changed — assume clean.
  }
  return false;
}

function scoreColor(score: number | null): string {
  if (score === null) return '#9ca3af';
  if (score >= 90) return '#22c55e';
  if (score >= 50) return '#f97316';
  return '#ef4444';
}

function LlmagnetIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path
        d="M18.3306 10.4099H20C20 9.3862 19.7965 8.39258 19.3953 7.45584C19.008 6.55182 18.4539 5.74073 17.7486 5.0445C17.0432 4.34827 16.2214 3.80111 15.3057 3.41898C14.3572 3.02273 13.3504 2.822 12.3134 2.822C11.2764 2.822 10.2699 3.02273 9.32103 3.41898C8.40574 3.80148 7.58393 4.34828 6.8782 5.0445C6.17285 5.74073 5.61877 6.5522 5.23187 7.45584C4.83245 8.38826 4.62933 9.3771 4.62747 10.3958C4.15427 9.55255 3.88463 8.58442 3.88463 7.55444C3.88463 4.28852 6.59069 1.64077 9.92837 1.64077V0C8.88675 0 7.87583 0.199983 6.92276 0.59438C6.00297 0.975016 5.17773 1.51959 4.46934 2.21285C3.76097 2.9061 3.20425 3.71385 2.81546 4.61378C2.41229 5.54606 2.20807 6.53556 2.20807 7.55483C2.20807 8.57409 2.41229 9.56324 2.81546 10.4958C3.20463 11.3955 3.76097 12.2031 4.46934 12.8968C5.17772 13.5901 6.00335 14.1346 6.92276 14.5149C7.86266 14.9038 8.85896 15.1028 9.88534 15.1082C9.20397 15.3726 8.46271 15.5194 7.68628 15.5194C4.36337 15.5194 1.66941 12.8598 1.66941 9.57933H0C0 10.6031 0.203477 11.5967 0.604755 12.5334C0.992035 13.4374 1.54611 14.2485 2.25146 14.9447C2.95681 15.641 3.77864 16.1881 4.69429 16.5703C5.64282 16.9665 6.64961 17.1673 7.68664 17.1673C8.72367 17.1673 9.7301 16.9665 10.679 16.5703C11.5943 16.1878 12.4161 15.641 13.1218 14.9447C13.8272 14.2485 14.3813 13.4371 14.7681 12.5334C15.169 11.5978 15.3723 10.6054 15.3728 9.58293C15.8535 10.4312 16.1281 11.4068 16.1281 12.4455C16.1281 15.7114 13.4221 18.3592 10.0844 18.3592V20C11.126 20 12.1369 19.8 13.09 19.4056C14.0098 19.0249 14.8351 18.4804 15.5434 17.7871C16.2518 17.0939 16.8085 16.2861 17.1973 15.3862C17.6005 14.4539 17.8047 13.4644 17.8047 12.4452C17.8047 11.4259 17.6005 10.4368 17.1973 9.50409C16.8081 8.60454 16.2518 7.7968 15.5434 7.10317C14.8351 6.40992 14.0094 5.86535 13.09 5.48508C12.1385 5.09133 11.1293 4.89149 10.0895 4.89083C10.7778 4.6202 11.5278 4.46982 12.3138 4.46982C15.6367 4.46982 18.3306 7.12948 18.3306 10.4099ZM15.3707 9.57933H13.7027C13.7027 12.0771 12.1404 14.2135 9.92836 15.0915V13.4677C7.64921 13.4677 5.66534 12.2328 4.63575 10.4099H6.29727C6.29727 7.90736 7.86568 5.76763 10.0844 4.89284V6.53222C12.359 6.53222 14.3394 7.76238 15.3707 9.57933Z"
        fill="currentColor"
      />
    </svg>
  );
}

function ScoreButton({
  score,
  label,
  onClick,
  floating,
}: {
  score: number | null;
  label: string;
  onClick: () => void;
  floating: boolean;
}) {
  const base: React.CSSProperties = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    cursor: 'pointer',
    border: 'none',
    borderRadius: 8,
    background: 'none',
    color: '#ffffff',
    lineHeight: 0,
    padding: 0,
    flexShrink: 0,
  };

  const style: React.CSSProperties = floating
    ? {
        ...base,
        position: 'fixed',
        insetBlockEnd: 24,
        insetInlineEnd: 24,
        zIndex: 999998,
        width: 40,
        height: 40,
        boxShadow: '0 4px 14px rgba(0,0,0,0.18)',
      }
    : {
        ...base,
        width: 32,
        height: 32,
        marginInline: 4,
        verticalAlign: 'middle',
      };

  return (
    <button type="button" className="llmagnet-elementor-button" style={style} title={label} aria-label={label} onClick={onClick}>
      <span style={{ position: 'relative', display: 'inline-flex' }}>
        <LlmagnetIcon />
        <span
          aria-hidden="true"
          style={{
            position: 'absolute',
            top: -3,
            insetInlineEnd: -3,
            width: 8,
            height: 8,
            borderRadius: '50%',
            backgroundColor: scoreColor(score),
            border: '1.5px solid #fff',
            boxSizing: 'border-box',
          }}
        />
      </span>
    </button>
  );
}

function ElementorApp({ data }: { data: ElementorData }) {
  const [score, setScore] = useState<number | null>(null);
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [topBarContainer, setTopBarContainer] = useState<Element | null>(null);
  const [useFallback, setUseFallback] = useState(false);
  const [showUnsavedNotice, setShowUnsavedNotice] = useState(false);

  const fetchScore = useCallback(async () => {
    try {
      const res = await fetch(
        `${data.restRoot}${data.restNamespace}/scores?post_ids=${data.postId}&context=elementor`,
        {
          headers: { 'X-WP-Nonce': data.restNonce },
          credentials: 'same-origin',
        }
      );
      if (!res.ok) return;
      const json = await res.json();
      const row = json?.scores?.[String(data.postId)];
      setScore(row && typeof row.score === 'number' ? row.score : null);
    } catch {
      // Score stays null — the button still works without it.
    }
  }, [data.restRoot, data.restNamespace, data.postId, data.restNonce]);

  useEffect(() => {
    fetchScore();
  }, [fetchScore]);

  // Tier 1: watch for the top bar; tier 2: floating fallback on timeout.
  useEffect(() => {
    const existing = findTopBarContainer();
    if (existing) {
      setTopBarContainer(existing);
      return;
    }

    let done = false;
    let observer: MutationObserver | null = null;
    const timer = window.setTimeout(() => {
      if (!done) {
        done = true;
        observer?.disconnect();
        setUseFallback(true);
      }
    }, TOP_BAR_TIMEOUT);

    try {
      observer = new MutationObserver(() => {
        const found = findTopBarContainer();
        if (found && !done) {
          done = true;
          window.clearTimeout(timer);
          observer?.disconnect();
          setTopBarContainer(found);
        }
      });
      observer.observe(document.body, { childList: true, subtree: true });
    } catch {
      window.clearTimeout(timer);
      setUseFallback(true);
    }

    return () => {
      done = true;
      window.clearTimeout(timer);
      observer?.disconnect();
    };
  }, []);

  // If the top bar node gets unmounted by Elementor (e.g. responsive mode
  // re-render), degrade to the floating button instead of disappearing.
  useEffect(() => {
    if (!topBarContainer) return;
    const interval = window.setInterval(() => {
      if (!document.body.contains(topBarContainer)) {
        setTopBarContainer(null);
        setUseFallback(true);
      }
    }, 3000);
    return () => window.clearInterval(interval);
  }, [topBarContainer]);

  const openDrawer = () => {
    setShowUnsavedNotice(isElementorDirty());
    setIsDrawerOpen(true);
  };

  const closeDrawer = () => {
    setIsDrawerOpen(false);
    setShowUnsavedNotice(false);
  };

  const handleUpdated = () => {
    // Re-fetch after a drawer save so the badge reflects the new score.
    // The persisted meta is refreshed asynchronously by the backfill, so
    // also queue one delayed refresh.
    fetchScore();
    window.setTimeout(fetchScore, 90 * 1000);
  };

  const label =
    score === null ? data.i18n.noScore : data.i18n.scoreLabel.replace('%d', String(score));

  const button = (
    <ScoreButton
      score={score}
      label={`${data.i18n.buttonLabel} — ${label}`}
      onClick={openDrawer}
      floating={useFallback || !topBarContainer}
    />
  );

  const drawer = (
      <PageDrawer
        postId={data.postId}
        isOpen={isDrawerOpen}
        onClose={closeDrawer}
        apiRoot={data.restRoot}
        apiNamespace={data.restNamespace}
        rangeDays={30}
        onPageUpdated={handleUpdated}
      />
    );

  return (
    <>
      {/* Lift the whole drawer subtree above Elementor's chrome (panel is
          ~z-index 99999). The wrapper is inert when the drawer is closed. */}
      <style>{`
        #llmagnet-elementor-overlay { position: fixed; inset: 0; z-index: 999999; pointer-events: none; }
        #llmagnet-elementor-overlay > * { pointer-events: auto; }
        .llmagnet-elementor-unsaved { position: fixed; inset-block-start: 12px; inset-inline-start: 50%; transform: translateX(${data.isRtl ? '50%' : '-50%'}); z-index: 1000000; max-width: 560px; background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 14px; font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); pointer-events: auto; }
        .llmagnet-elementor-unsaved button { background: none; border: none; cursor: pointer; color: inherit; font-weight: 600; text-decoration: underline; padding: 0; }
      `}</style>

      {topBarContainer && !useFallback ? createPortal(button, topBarContainer) : button}

      <div id="llmagnet-elementor-overlay" className="llmagnet-surface" dir={data.isRtl ? 'rtl' : 'ltr'}>
        {isDrawerOpen && showUnsavedNotice && (
          <div className="llmagnet-elementor-unsaved" role="alert">
            <span>{data.i18n.unsavedNotice}</span>
            <button type="button" onClick={() => setShowUnsavedNotice(false)}>
              {data.i18n.dismiss}
            </button>
          </div>
        )}
        {drawer}
      </div>
    </>
  );
}

function mount() {
  const data = window.llmagnetElementorData;
  if (!data || !data.postId) {
    return;
  }

  // The drawers read window.wpApiSettings.nonce; Elementor localizes its
  // own copy — reuse it if present, never overwrite (spec Feature 4).
  const w = window as any;
  if (!w.wpApiSettings || !w.wpApiSettings.nonce) {
    w.wpApiSettings = { root: data.restRoot, nonce: data.restNonce };
  }

  let rootEl = document.getElementById('llmagnet-elementor-root');
  if (!rootEl) {
    rootEl = document.createElement('div');
    rootEl.id = 'llmagnet-elementor-root';
    rootEl.className = 'llmagnet-surface';
    document.body.appendChild(rootEl);
  }

  try {
    createRoot(rootEl).render(<ElementorApp data={data} />);
  } catch (err) {
    // Never break the Elementor editor because of our integration.
    console.error('[LLMagnet] Elementor integration failed to mount', err);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mount);
} else {
  mount();
}