import { useEffect } from 'react';

declare global {
  interface Window {
    blivChatbotConfig: Record<string, unknown>;
  }
}



export default function ScriptDirect() {
  const baseUrl = "https://ai-studio.bliv.bangunindo.io";

  useEffect(() => {
    const config = {
      token: "4eFb0BunqZYEZlg7",
      baseUrl: baseUrl,
      isDev: true,
      login: false,
      history: false,
      draggable: true,
      dragAxis: "both",
      dynamicScript: true,
      systemVariables: {},
      userVariables: {},
    };
    window.blivChatbotConfig = config;



    const script = document.createElement("script");
    script.id = "bliv-embed-script";
    script.src = `${baseUrl}/embed.min.js`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      const existingScript = document.getElementById("bliv-embed-script");
      if (existingScript) existingScript.remove();

      const selectors = [
        "#bliv-chatbot-widget",
        "#bliv-chatbot-bubble",
        "#bliv-chatbot-container",
        "#bliv-chatbot-iframe",
        ".bliv-chatbot-widget",
        ".bliv-chatbot-bubble",
        ".bliv-chatbot-container",
        'iframe[src*="ai-studio.bliv.bangunindo.io"]',
      ];

      selectors.forEach((sel) => {
        document.querySelectorAll(sel).forEach((el) => el.remove());
      });

      // @ts-expect-error: delete not allowed on window properties
      delete window.blivChatbotConfig;




    };
  }, []);

  return (
    <div style={{ width: '100%', padding: 24 }}>
      <div style={{ marginBottom: 24, fontWeight: 600, color: '#374151' }}>Direct Script Embed</div>
      <div style={{ background: 'white', padding: 48, borderRadius: 24, textAlign: 'center', maxWidth: 480, margin: '60px auto', boxShadow: '0 4px 20px -5px rgba(0, 0, 0, 0.1)', border: '1px solid #f1f5f9' }}>
        <div style={{ width: 64, height: 64, background: '#e0f2f1', color: '#14b8a6', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '0 auto 24px' }}>⚡</div>
        <h1 style={{ fontSize: '1.5rem', marginBottom: 12, color: '#0f172a', fontWeight: 700 }}>Widget Aktif</h1>
        <p style={{ color: '#475569', marginBottom: 24, lineHeight: 1.6 }}>
          Script chatbot Bliv AI telah dimuat secara langsung pada halaman ini.
        </p>
        <small style={{ color: '#94a3b8', fontWeight: 500 }}>
          Periksa sudut kanan bawah layar Anda untuk memulai chat.
        </small>
      </div>
    </div>
  );
}