/* eslint-disable */
const { useState, useEffect, useRef, useCallback } = React;
const { Navbar, Hero, Integrations, AgentSection, ChannelsSection, ProcessSection, InActionSection, PricingSection, FAQSection, ContactSection, Footer } = window.WhinkParts;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gridVisible": true,
  "cursorRing": false,
  "spotFollow": true
}/*EDITMODE-END*/;

function CursorLayer({ ring, spot }) {
  const ringRef = useRef(null);
  const spotRef = useRef(null);
  useEffect(() => {
    if (!ring && !spot) return;
    const r = ringRef.current;
    const s = spotRef.current;
    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let rx = mx, ry = my;
    let sx = mx, sy = my;
    let raf = 0;

    const onMove = (e) => {
      mx = e.clientX; my = e.clientY;
    };
    const onOver = (e) => {
      if (!r) return;
      const t = e.target;
      const isInteractive = t.closest('a, button, input, textarea, select, [role="button"], label');
      r.classList.toggle('is-hover', !!isInteractive);
    };
    const tick = () => {
      rx += (mx - rx) * 0.32;
      ry += (my - ry) * 0.32;
      sx += (mx - sx) * 0.10;
      sy += (my - sy) * 0.10;
      if (r) r.style.transform = `translate3d(${rx}px, ${ry}px, 0)`;
      if (s) s.style.transform = `translate3d(${sx}px, ${sy}px, 0)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseover', onOver);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
      cancelAnimationFrame(raf);
    };
  }, [ring, spot]);

  useEffect(() => {
    document.body.classList.toggle('has-cursor-ring', !!ring);
  }, [ring]);

  return (
    <>
      {ring && <div ref={ringRef} className="cursor-ring" />}
      {spot && <div ref={spotRef} className="cursor-spot" />}
    </>
  );
}

function App() {
  const [t, setT] = useState(TWEAK_DEFAULTS);
  const setTweak = useCallback((k, v) => {
    let edits;
    if (typeof k === 'object' && k !== null) edits = k;
    else edits = { [k]: v };
    setT(prev => ({ ...prev, ...edits }));
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*'); } catch (e) {}
  }, []);

  // Tweaks panel
  const [tweaksOpen, setTweaksOpen] = useState(false);
  useEffect(() => {
    const onMsg = (e) => {
      if (!e?.data?.type) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);
  const dismissTweaks = () => {
    setTweaksOpen(false);
    try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch (e) {}
  };

  return (
    <>
      <div className={`grid-bg ${t.gridVisible ? '' : 'hidden'}`} />
      <CursorLayer ring={t.cursorRing} spot={t.spotFollow} />
      <Navbar />
      <main>
        <Hero />
        <Integrations />
        <AgentSection />
        <ChannelsSection />
        <ProcessSection />
        <InActionSection />
        <PricingSection />
        <FAQSection />
        <ContactSection />
      </main>
      <Footer />
      {tweaksOpen && <TweaksUI t={t} setTweak={setTweak} onClose={dismissTweaks} />}
    </>
  );
}

function TweaksUI({ t, setTweak, onClose }) {
  const ref = useRef(null);
  const dragRef = useRef({ dragging: false, x: 0, y: 0, ox: 0, oy: 0 });
  const [pos, setPos] = useState({ right: 24, bottom: 24 });
  const startDrag = (e) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    dragRef.current = { dragging: true, x: e.clientX, y: e.clientY, ox: rect.left, oy: rect.top };
    const onMove = (ev) => {
      const d = dragRef.current;
      if (!d.dragging) return;
      const nx = d.ox + (ev.clientX - d.x);
      const ny = d.oy + (ev.clientY - d.y);
      setPos({ left: Math.max(8, nx), top: Math.max(8, ny), right: 'auto', bottom: 'auto' });
    };
    const onUp = () => {
      dragRef.current.dragging = false;
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  };
  return (
    <div ref={ref} className="tweaks-panel" style={pos}>
      <div className="tweaks-head" onMouseDown={startDrag}>
        <strong>Tweaks</strong>
        <button onClick={onClose} aria-label="Close" className="tweaks-close">×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <label>Grid de fondo</label>
          <button className={`tg ${t.gridVisible ? 'on' : ''}`} onClick={() => setTweak('gridVisible', !t.gridVisible)}>
            <span /></button>
        </div>
        <div className="tweak-row">
          <label>Cursor anillo</label>
          <button className={`tg ${t.cursorRing ? 'on' : ''}`} onClick={() => setTweak('cursorRing', !t.cursorRing)}>
            <span /></button>
        </div>
        <div className="tweak-row">
          <label>Spotlight verde</label>
          <button className={`tg ${t.spotFollow ? 'on' : ''}`} onClick={() => setTweak('spotFollow', !t.spotFollow)}>
            <span /></button>
        </div>
      </div>
      <style>{`
        .tweaks-panel {
          position: fixed; z-index: 9000;
          width: 280px;
          background: rgba(14,14,14,0.92);
          backdrop-filter: blur(20px);
          border: 1px solid var(--border-strong);
          border-radius: 14px;
          color: var(--fg);
          box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
          overflow: hidden;
          font-size: 13px;
        }
        [data-theme="light"] .tweaks-panel { background: rgba(255,255,255,0.95); }
        .tweaks-head {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 14px;
          border-bottom: 1px solid var(--border);
          cursor: grab;
          user-select: none;
        }
        .tweaks-close {
          background: transparent; border: none; color: var(--fg-dim);
          font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
        }
        .tweaks-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
        .tweak-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
        .tweak-row label { color: var(--fg-dim); }
        .seg {
          display: inline-flex; gap: 0;
          background: rgba(255,255,255,0.04); border-radius: 8px; padding: 3px;
          border: 1px solid var(--border);
        }
        [data-theme="light"] .seg { background: rgba(0,0,0,0.04); }
        .seg button {
          background: transparent; border: none; color: var(--fg-dim);
          padding: 6px 10px; border-radius: 6px;
          font-size: 12px; cursor: pointer;
        }
        .seg button.on { background: var(--green); color: #002b10; font-weight: 600; }
        .tg {
          width: 38px; height: 22px; border-radius: 999px;
          background: rgba(255,255,255,0.08);
          border: 1px solid var(--border); padding: 2px;
          position: relative; cursor: pointer;
        }
        [data-theme="light"] .tg { background: rgba(0,0,0,0.08); }
        .tg span {
          display: block; width: 16px; height: 16px;
          border-radius: 50%;
          background: var(--fg-dim);
          transform: translateX(0);
          transition: transform var(--t), background var(--t);
        }
        .tg.on { background: rgba(37,211,102,0.2); border-color: rgba(37,211,102,0.5); }
        .tg.on span { background: var(--green); transform: translateX(16px); }
      `}</style>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);