"use client";

import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";

export default function Zone({ params }) {
  const router = useRouter();

  const [isInOtherApp, setIsInOtherApp] = useState(false);

  useEffect(() => {
    const userAgent = navigator.userAgent.toLowerCase();
    let temIsInOtherApp =
      userAgent.match(/MicroMessenger/i) == "micromessenger" ||
      userAgent.match(/WeiBo/i) == "weibo" ||
      (userAgent.indexOf("qq") !== -1 &&
        userAgent.indexOf("mqqbrowser") === -1) ||
      /alipay/gi.test(userAgent) ||
      userAgent.indexOf("dingtalk") !== -1;
    if (temIsInOtherApp) {
      setIsInOtherApp(true);
      return;
    }
    router.replace(`https://tiefen.fun/zone/${params?.user_id}`);
  }, []);

  return (
    <section className="flex flex-col flex-1">
      {isInOtherApp && (
        <div className="flex flex-1 w-full h-full">
          <iframe
            src={`https://tiefen.fun/zone/${params.user_id}`}
            className="w-full"
          />
        </div>
      )}
    </section>
  );
}
