import { useState, useEffect } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useVpnStore } from "@/store/useVpnStore";
import { useSettingsStore } from "@/store/useSettingsStore";
import { TunnelConfig, startVpn, stopVpn, launchApp } from "vpn-plugin";
import { Button } from "@/components/ui/button";
import { ShieldAlert, Loader2, Send } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { isDesktop } from "@/lib/platform";

export function TelegramWeb() {
  const { t } = useTranslation();
  const { status, setStatus } = useVpnStore();
  const { killSwitch, excludedDomains } = useSettingsStore();

  const [sessionRequested, setSessionRequested] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

  const handleStopSession = async () => {
    setSessionRequested(false);
    try {
      await stopVpn();
    } catch (e) {
      console.error("Stop VPN error:", e);
    }
  };

  // Следим за возвратом в наше приложение
  useEffect(() => {
    const handleVisibilityChange = () => {
      // Если мы запросили сессию и юзер вернулся в приложение (документ стал видимым)
      if (document.visibilityState === "visible" && sessionRequested) {
        console.log(
          "Anti-Abuse: User returned to app, killing Telegram tunnel.",
        );
        handleStopSession();
      }
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () =>
      document.removeEventListener("visibilitychange", handleVisibilityChange);
  }, [sessionRequested]);

  const handleStartSession = async () => {
    setErrorMsg("");
    setSessionRequested(true);

    // Пакеты официальных клиентов Telegram
    const tgPackages = [
      "org.telegram.messenger",
      "org.telegram.messenger.web",
      "org.telegram.plus",
      "org.thunderdog.challegram",
    ];

    if (status !== "connected") {
      setStatus("connecting");
      try {
        const config: TunnelConfig = {
          address: "10.0.0.1",
          prefix: 24,
          dns: "10.0.0.2",
          mtu: 1380,
          killswitchEnabled: true, // Всегда киллсвитч
          excludedApps: [], // Игнорируем исключения
          excludedDomains,
          allowedApps: tgPackages, // УКАЗЫВАЕМ, ЧТО ТОЛЬКО ЭТИ ПРИЛОЖЕНИЯ ИДУТ В VPN
        };
        // Decoy-хост зашит вместе с адресом — этот тоннель не завязан на
        // выбор узла в UI (сэндбокс-режим только для Telegram).
        await startVpn(config, "147.45.43.70", 443, "ubuntu.com");
      } catch (error) {
        setStatus("idle");
        setSessionRequested(false);
        setErrorMsg(t("tg_error_connect_failed"));
        return;
      }
    }

    // Пытаемся запустить Telegram через Intent
    let launched = false;
    for (const pkg of tgPackages) {
      try {
        await launchApp(pkg);
        launched = true;
        break; // Если успешно, прерываем цикл
      } catch (e) {
        console.warn(`App ${pkg} not found`);
      }
    }

    if (!launched) {
      setErrorMsg(t("tg_error_not_installed"));
      handleStopSession();
    }
  };

  // Блокируем на ПК
  if (isDesktop) {
    return (
      <div className="w-full h-[calc(100vh-4rem)] flex flex-col p-6 items-center justify-center text-center max-w-sm mx-auto">
        <div className="size-24 bg-primary/10 rounded-full flex items-center justify-center mb-6">
          <ShieldAlert className="size-12 text-primary opacity-80" />
        </div>
        <h2 className="text-2xl font-black uppercase tracking-tighter">
          {t("tg_desktop_only_title")}
        </h2>
        <p className="text-sm text-muted-foreground mt-4 leading-relaxed">
          {t("tg_desktop_only_desc")}
        </p>
      </div>
    );
  }

  const isSessionActive = sessionRequested && status === "connected";

  return (
    <div className="w-full h-[calc(100vh-4rem)] flex flex-col p-6 items-center justify-center text-center">
      <AnimatePresence mode="wait">
        {!isSessionActive ? (
          <motion.div key="intro" className="max-w-sm space-y-6">
            <div className="mx-auto size-24 bg-primary/10 rounded-full flex items-center justify-center relative border border-primary/20">
              <Send className="size-10 text-primary drop-shadow-[0_0_15px_rgba(130,0,219,0.5)] relative right-1" />
              <div className="absolute -bottom-2 bg-primary text-black text-[10px] font-black px-2 py-1 rounded-md uppercase">
                {t("tg_allowlist_badge")}
              </div>
            </div>

            <div className="space-y-2">
              <h2 className="text-2xl font-black uppercase italic tracking-tighter">
                {t("tg_title")}
              </h2>
              <p className="text-sm text-muted-foreground leading-relaxed">
                {t("tg_desc")}
              </p>
              <p className="text-sm text-muted-foreground leading-relaxed">
                <Trans i18nKey="tg_scope_detail" components={{ bold: <b /> }} />
              </p>
            </div>

            {errorMsg && (
              <p className="text-xs font-bold text-destructive uppercase tracking-widest">
                {errorMsg}
              </p>
            )}

            <Button
              onClick={handleStartSession}
              disabled={status === "connecting"}
              className="w-full h-14 rounded-2xl font-black tracking-widest"
            >
              {status === "connecting" ? (
                <span className="flex items-center gap-2 justify-center">
                  <Loader2 className="animate-spin size-4" />
                  {t("tg_connecting")}
                </span>
              ) : (
                t("tg_start_btn")
              )}
            </Button>
          </motion.div>
        ) : (
          <motion.div key="active" className="space-y-8 max-w-sm">
            <div className="space-y-4">
              <div className="text-5xl font-mono font-black text-primary tracking-tighter animate-pulse">
                {t("tg_active_status")}
              </div>
              <div className="flex flex-col items-center gap-2">
                <p className="text-primary uppercase text-[10px] font-black tracking-[0.3em]">
                  {t("tg_session_bound_label")}
                </p>
                <span className="px-3 py-2 bg-white/5 border border-white/10 rounded-xl text-xs text-muted-foreground leading-relaxed">
                  {t("tg_active_desc")}
                </span>
              </div>
            </div>

            <Button
              variant="outline"
              onClick={handleStopSession}
              className="gap-2 text-destructive border-destructive hover:bg-destructive hover:text-white w-full h-12 rounded-xl transition-all"
            >
              {t("tg_reset_btn")}
            </Button>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}