'use client';
import { LayoutMain } from "@/modules/layout";
import { RemoteApp } from "@kevisual/remote-app";
import { useEffect } from "react";
import { QueryRouterServer } from "@kevisual/router/browser";
export default function Home() {
  useEffect(() => {
    init();
  }, []);
  const init = async () => {
    // const url = new URL('https://kevisual.cn/ws/proxy');
    const isKevisualEnv = window.location.hostname.endsWith('kevisual.cn');
    const kevisualWs = 'https://kevisual.cn/ws/proxy';
    const url = new URL(isKevisualEnv ? kevisualWs : 'https://kevisual.xiongxiao.me/ws/proxy');
    const token = localStorage.getItem('token') || '';
    const id = 'remote';
    const app = new QueryRouterServer();
    app.route({
      path: 'web-test',
      key: 'web-test',
      description: 'Web Router Studio',
    }).define(async (ctx) => {
      console.log('Received request at /web-test', ctx.query, ctx.state, ctx);
      ctx.body = 'Hello from remote route!';
    }).addTo(app);
    app.createRouteList()
    const remoteApp = new RemoteApp({
      url: url.toString(),
      token,
      id,
      app: app as any,
    });
    const connect = await remoteApp.isConnect();
    if (connect) {
      console.log('Connected to proxy server');
      remoteApp.listenProxy();
      remoteApp.emitter.on('message', (event) => {
        const _msg = event.toString();
        console.log('Received message from remote app:', _msg);
      });
    } else {
      console.log('Not connected to proxy server');
    }
  }
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <LayoutMain>

      </LayoutMain>
    </div>
  );
}