import { useEffect, useState } from "react";
import { motion, AnimatePresence, type Variants } from "framer-motion";
import {
  Shield,
  Zap,
  Copy,
  Loader2,
  ArrowRight,
  Users,
  Activity,
  CheckCircle2,
  Globe,
  Terminal,
  Cpu,
  Database,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import {
  TonConnectButton,
  useTonConnectUI,
  useTonAddress,
} from "@tonconnect/ui-react";
import {
  fetchProfile,
  activateTrial,
  initiatePayment,
  confirmPayment,
  getPublicConfig,
} from "./api";

// --- ТИПИЗАЦИЯ ---

interface SubscriptionData {
  plan_name: string;
  expires_at: string;
  status?: string;
}

interface ReferralData {
  user_id: string;
  status: string;
  total_earned: number;
}

interface ProfileDataResponse {
  user?: ProfileDataResponse; // Для поддержки старого мока
  subscription?: SubscriptionData;
  referrals?: ReferralData[];
  recruits?: number;
  earned?: number;
  // Плоские свойства с бэкенда
  id?: string;
  tg_id?: string | number;
  username?: string;
  tg_username?: string;
  role?: string;
  balance?: number;
  game_tickets?: number;
  has_used_trial?: boolean;
}

interface UIPlan {
  name: string;
  price: number;
  price_usd: number;
  price_rub: number;
}

// Вспомогательная функция снаружи компонента, чтобы обойти правило react-hooks/purity
const getTonTxValidUntil = () => Math.floor(Date.now() / 1000) + 360;

// --- СЛОВАРИ И КОНСТАНТЫ ---

const DICT = {
  en: {
    auth_ready: "SYSTEM ONLINE",
    operative: "Operative ID",
    balance: "Credits",
    tickets: "Access Tokens",
    uplink_status: "Node Status",
    expires: "Valid Until",
    offline: "DISCONNECTED",
    no_active_sub: "No active grid connection.",
    run_breach: "Execute Breach Protocol",
    system_override: "Sys.Override()",
    manage_plan: "Manage Uplink",
    acquire: "Acquire",
    activate_trial: "Initialize Trial",
    trial_used: "Trial Exhausted",
    syndicate: "Syndicate Grid",
    recruits: "Nodes Hacked",
    earned: "Eddies Extracted",
    ref_desc: "Expand the network. Extract 100 E$ per initialized node.",
    copied: "Data copied to clipboard.",
    plans: {
      TRIAL: {
        tag: "Trial Run",
        desc: "Experience the Grid. 3 days of unrestricted access.",
        features: ["5GB Bandwidth", "No logs", "Standard Nodes"],
      },
      GHOST: {
        tag: "Stealth Node",
        desc: "The ideal choice for personal use. Minimal digital footprint.",
        features: ["1 device", "ChaCha20-Poly1305", "DPI Protection"],
      },
      NETRUNNER: {
        tag: "Pro Interface",
        desc: "For professionals working with multiple rigs simultaneously.",
        features: ["5 devices", "Priority Support", "FakeDNS Module"],
      },
      MAINFRAME: {
        tag: "Command Center",
        desc: "The ultimate solution for teams and maximum network independence.",
        features: [
          "Unlimited devices",
          "High-Load Ready",
          "24/7 Priority Support",
        ],
      },
    },
  },
  ru: {
    auth_ready: "СИСТЕМА АКТИВНА",
    operative: "ID Оперативника",
    balance: "Кредиты",
    tickets: "Токены Доступа",
    uplink_status: "Статус Узла",
    expires: "Действует до",
    offline: "ОТКЛЮЧЕНО",
    no_active_sub: "Нет активного подключения к Сети.",
    run_breach: "Протокол Взлома",
    system_override: "Sys.Override()",
    manage_plan: "Управление Узлом",
    acquire: "Интегрировать",
    activate_trial: "Запуск Триала",
    trial_used: "Триал Использован",
    syndicate: "Синдикат",
    recruits: "Взломано узлов",
    earned: "Извлечено (E$)",
    ref_desc: "Расширяй сеть. Извлекай 100 E$ за каждый новый узел.",
    copied: "Данные скопированы.",
    plans: {
      TRIAL: {
        tag: "Тестовый Прогон",
        desc: "Испытай Сеть. 3 дня безлимитного доступа.",
        features: ["5GB Трафика", "Без логов", "Стандартные узлы"],
      },
      GHOST: {
        tag: "Стелс-Узел",
        desc: "Идеально для себя. Минимальный цифровой след.",
        features: ["1 устройство", "ChaCha20-Poly1305", "Защита от DPI"],
      },
      NETRUNNER: {
        tag: "Про-Интерфейс",
        desc: "Для работы со смартфоном, декой и планшетом одновременно.",
        features: ["5 устройств", "Приоритетная база", "Модуль FakeDNS"],
      },
      MAINFRAME: {
        tag: "Командный Центр",
        desc: "Ультимативное решение для команд и полной независимости.",
        features: ["Безлимит устройств", "High-Load сервера", "Поддержка 24/7"],
      },
    },
  },
};

const UI_PLANS: UIPlan[] = [
  { name: "TRIAL", price: 0, price_usd: 0, price_rub: 0 },
  { name: "GHOST", price: 5, price_usd: 5, price_rub: 500 },
  { name: "NETRUNNER", price: 9, price_usd: 9, price_rub: 900 },
  { name: "MAINFRAME", price: 20, price_usd: 20, price_rub: 2000 },
];

const getLang = (): "en" | "ru" => {
  const l = localStorage.getItem("lang");
  return l === "ru" ? "ru" : "en";
};

// Анимационные варианты для элементов HUD
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 10 },
  show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100 } },
};

export default function Profile() {
  const [data, setData] = useState<ProfileDataResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [showPlans, setShowPlans] = useState(false);
  const navigate = useNavigate();

  const [lang, setLang] = useState<"en" | "ru">(getLang);
  const t = DICT[lang];
  const [botUsername, setBotUsername] = useState("ntrnr_vpn_bot");

  // TON Connect Hooks
  const [tonConnectUI] = useTonConnectUI();
  const userFriendlyAddress = useTonAddress();

  useEffect(() => {
    getPublicConfig().then((cfg) => setBotUsername(cfg.bot_username));
  }, []);

  useEffect(() => {
    fetchProfile()
      .then((res: ProfileDataResponse) => setData(res))
      .catch((err) => {
        const e = err as Error;
        console.error(e);
        setError(e.message || "Failed to connect to Netrunner Core");
      })
      .finally(() => setLoading(false));
  }, []);

  const toggleLang = () => {
    const next = lang === "en" ? "ru" : "en";
    setLang(next);
    localStorage.setItem("lang", next);
  };

  if (loading) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-[#05050A] text-secondary font-mono">
        <div className="relative flex items-center justify-center mb-6">
          <div className="absolute inset-0 border-t-2 border-secondary rounded-full animate-spin w-16 h-16 opacity-50" />
          <Loader2 className="w-8 h-8 animate-spin" />
        </div>
        <div className="typewriter">
          <p className="tracking-[0.3em] uppercase text-xs animate-pulse opacity-80">
            Establishing secure uplink...
          </p>
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-[#05050A] text-red-500 font-mono p-6 text-center">
        <div className="bg-red-500/10 p-4 rounded-full mb-6 border border-red-500/30">
          <Shield className="w-12 h-12 text-red-500" />
        </div>
        <h1 className="text-xl font-black tracking-widest mb-2 uppercase">
          [ CONNECTION REFUSED ]
        </h1>
        <p className="text-xs opacity-70 max-w-xs mt-2 text-muted-foreground">
          Handshake failed. Authenticate via secure terminal.
        </p>
      </div>
    );
  }

  const user = data.user || data;
  const subscription = data.subscription;
  const hasSub = subscription && subscription.plan_name;
  const recruits = data.referrals ? data.referrals.length : data.recruits || 0;
  const earned = data.earned || 0;

  const copyRef = () => {
    navigator.clipboard.writeText(
      `https://t.me/${botUsername}?start=${user.tg_id || user.id}`,
    );
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const getPrice = (usd: number, rub: number) => {
    if (usd === 0) return "FREE";
    return lang === "ru" ? `${rub} ₽/мес` : `$${usd}/mo`;
  };

  const handleTrial = async () => {
    try {
      await activateTrial();
      const newData = await fetchProfile();
      setData(newData);
    } catch (err) {
      const e = err as Error;
      alert(`[SYS.ERR] ${e.message}`);
    }
  };

  const executeTonPayment = async (planName: string) => {
    if (!userFriendlyAddress) {
      tonConnectUI.openModal();
      return;
    }

    try {
      const targetCurrency = lang === "ru" ? "RUB" : "USD";
      // Бэкенд возвращает destination, amount и comment
      const { checkout_data } = await initiatePayment(
        planName,
        "TON",
        targetCurrency,
      );

      const transaction = {
        validUntil: getTonTxValidUntil(),
        messages: [
          {
            address: checkout_data.destination,
            amount: checkout_data.amount.toString(),
            // Кошелек сам упакует комментарий, если его передать в payload как text:
            payload: `text:${checkout_data.comment}`,
          },
        ],
      };

      const result = await tonConnectUI.sendTransaction(transaction);
      // Отправляем результат (boc) на бэкенд для верификации
      await confirmPayment(checkout_data.comment, result.boc);

      const newData = await fetchProfile();
      setData(newData);
    } catch (err) {
      console.error(err);
      alert(`[SYS.ERR] TRANSACTION ABORTED`);
    }
  };

  return (
    <div className="min-h-screen bg-[#05050A] p-4 sm:p-6 pb-24 text-foreground font-mono relative overflow-hidden">
      <div
        className="fixed inset-0 pointer-events-none z-0 opacity-20"
        style={{
          backgroundImage: `
            linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)
          `,
          backgroundSize: "40px 40px",
          maskImage:
            "radial-gradient(ellipse at 50% 0%, black 10%, transparent 80%)",
          WebkitMaskImage:
            "radial-gradient(ellipse at 50% 0%, black 10%, transparent 80%)",
        }}
      />

      <header className="flex justify-between items-start mb-8 relative z-10 pt-2">
        <div>
          <div className="inline-flex items-center gap-2 text-secondary text-[10px] font-bold uppercase tracking-widest mb-1 opacity-80">
            <Activity className="w-3 h-3 animate-pulse" /> [{t.auth_ready}]
          </div>
          <h1 className="text-2xl font-black tracking-tight text-white/90 drop-shadow-[0_0_10px_rgba(255,255,255,0.1)] uppercase">
            Netrunner<span className="text-primary opacity-80">_OS</span>
          </h1>
        </div>
        <div className="flex items-center gap-3">
          <div className="scale-90 origin-right">
            <TonConnectButton />
          </div>
          <button
            onClick={toggleLang}
            className="bg-black/40 border border-white/10 p-2.5 rounded-lg text-muted-foreground hover:text-secondary hover:border-secondary/40 transition-colors backdrop-blur-md"
          >
            <Globe className="w-4 h-4" />
          </button>
        </div>
      </header>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="show"
        className="grid gap-5 max-w-2xl mx-auto relative z-10"
      >
        <motion.div
          variants={itemVariants}
          className="bg-white/[0.02] border border-white/10 rounded-xl p-5 backdrop-blur-md relative overflow-hidden"
        >
          <div className="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-[40px] -mr-10 -mt-10" />
          <div className="flex justify-between items-start mb-6 relative z-10">
            <div>
              <p className="text-muted-foreground text-[10px] uppercase tracking-widest mb-1 flex items-center gap-1">
                <Cpu className="w-3 h-3" /> {t.operative}
              </p>
              <p className="text-sm font-bold text-white/90 uppercase">
                @{user.username || user.tg_username || user.tg_id || "Anon"}
              </p>
            </div>
            <div className="text-right">
              <p className="text-muted-foreground text-[10px] uppercase tracking-widest mb-1 flex justify-end items-center gap-1">
                <Database className="w-3 h-3" /> {t.balance}
              </p>
              <p className="text-2xl font-black text-secondary drop-shadow-[0_0_10px_rgba(0,229,242,0.4)]">
                {user.balance || 0}{" "}
                <span className="text-xs opacity-60">E$</span>
              </p>
            </div>
          </div>

          <div className="bg-black/50 border border-white/5 rounded-lg p-3.5 flex justify-between items-center relative z-10">
            <div className="flex items-center gap-2">
              <div
                className={`w-2 h-2 rounded-full ${hasSub ? "bg-secondary animate-pulse shadow-[0_0_8px_rgba(0,229,242,0.8)]" : "bg-red-500"}`}
              />
              <span className="text-xs uppercase tracking-widest text-muted-foreground">
                {t.uplink_status}
              </span>
            </div>
            {hasSub ? (
              <div className="text-right">
                <span className="text-xs font-bold uppercase text-primary">
                  [{subscription.plan_name}]
                </span>
                <p className="text-[9px] text-muted-foreground mt-0.5 tracking-widest uppercase">
                  {t.expires}:{" "}
                  {new Date(subscription.expires_at).toLocaleDateString()}
                </p>
              </div>
            ) : (
              <span className="text-xs font-bold uppercase text-red-500/80">
                [{t.offline}]
              </span>
            )}
          </div>

          <div className="mt-3 flex justify-between items-center text-[10px] uppercase tracking-widest text-muted-foreground px-1">
            <span>
              {t.tickets}:{" "}
              <span className="text-white/70">{user.game_tickets || 0}</span>
            </span>
            {!hasSub && (
              <span className="text-red-400/60">{t.no_active_sub}</span>
            )}
          </div>
        </motion.div>

        <motion.button
          variants={itemVariants}
          onClick={() => navigate("/hack")}
          className="w-full relative bg-primary/10 hover:bg-primary/20 border border-primary/40 text-primary font-bold tracking-widest uppercase p-4 rounded-xl transition-all flex justify-center items-center gap-3 shadow-[0_0_15px_rgba(139,61,255,0.1)] hover:shadow-[0_0_25px_rgba(139,61,255,0.3)] group overflow-hidden"
        >
          <div className="absolute inset-0 bg-[linear-gradient(90deg,transparent_0%,rgba(139,61,255,0.1)_50%,transparent_100%)] translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
          <Terminal className="w-5 h-5 group-hover:text-white transition-colors" />
          <span className="group-hover:text-white transition-colors">
            [ {t.run_breach} ]
          </span>
        </motion.button>

        <motion.div
          variants={itemVariants}
          className="bg-white/[0.02] border border-white/10 rounded-xl p-5 backdrop-blur-md"
        >
          <div className="flex justify-between items-center mb-2">
            <h3 className="font-bold text-sm uppercase tracking-widest text-white/90">
              _ {t.system_override}
            </h3>
            <button
              onClick={() => setShowPlans(!showPlans)}
              className="text-[10px] flex items-center gap-1.5 bg-secondary/10 hover:bg-secondary/20 text-secondary border border-secondary/20 px-3 py-1.5 rounded-md uppercase tracking-widest transition-colors"
            >
              {t.manage_plan}{" "}
              <ArrowRight
                className={`w-3 h-3 transition-transform ${showPlans ? "rotate-90" : ""}`}
              />
            </button>
          </div>

          <AnimatePresence>
            {showPlans && (
              <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                className="overflow-hidden"
              >
                <div className="grid gap-3 mt-5 pb-1">
                  {UI_PLANS.map((plan: UIPlan) => {
                    const planData = t.plans[
                      plan.name as keyof typeof t.plans
                    ] || { tag: "", desc: "", features: [] };
                    const isTrial = plan.name === "TRIAL";
                    const isTrialUsed = isTrial && user.has_used_trial;

                    return (
                      <div
                        key={plan.name}
                        className={`bg-black/60 border rounded-xl p-4 flex flex-col transition-all duration-300 group relative overflow-hidden ${
                          isTrial
                            ? isTrialUsed
                              ? "border-white/5 opacity-50 grayscale"
                              : "border-secondary/40 shadow-[0_0_10px_rgba(0,229,242,0.1)] hover:border-secondary"
                            : "border-white/10 hover:border-primary/50"
                        }`}
                      >
                        <div className="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-transparent via-white/10 to-transparent group-hover:via-primary/50 transition-colors" />

                        <div className="flex justify-between items-start mb-3 ml-2">
                          <div>
                            <h4 className="font-bold text-primary uppercase text-sm tracking-widest mb-0.5">
                              {plan.name}
                            </h4>
                            <p className="text-[9px] uppercase tracking-widest text-secondary/80">
                              {planData.tag}
                            </p>
                          </div>
                          <p className="text-xl font-black text-white/90 tracking-tight">
                            {getPrice(
                              plan.price_usd || plan.price,
                              plan.price_rub || plan.price * 100,
                            )}
                          </p>
                        </div>

                        <p className="text-[11px] text-muted-foreground mb-4 ml-2 leading-relaxed">
                          {planData.desc}
                        </p>

                        <ul className="text-[10px] text-muted-foreground/80 space-y-2 mb-5 ml-2 uppercase tracking-wide">
                          {planData.features.map((f: string, i: number) => (
                            <li key={i} className="flex items-center gap-2">
                              <span className="text-secondary/50">{">"}</span>{" "}
                              {f}
                            </li>
                          ))}
                        </ul>

                        <button
                          onClick={() =>
                            isTrial
                              ? handleTrial()
                              : executeTonPayment(plan.name)
                          }
                          disabled={isTrialUsed}
                          className={`mt-auto w-full py-2.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all
                          ${
                            isTrialUsed
                              ? "bg-white/5 text-muted-foreground cursor-not-allowed"
                              : isTrial
                                ? "bg-secondary/10 hover:bg-secondary/20 text-secondary border border-secondary/30"
                                : "bg-white/5 hover:bg-primary/20 text-white border border-white/10 hover:border-primary/50"
                          }`}
                        >
                          {isTrial
                            ? isTrialUsed
                              ? t.trial_used
                              : t.activate_trial
                            : t.acquire}
                        </button>
                      </div>
                    );
                  })}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>

        <motion.div
          variants={itemVariants}
          className="bg-white/[0.02] border border-white/10 rounded-xl p-5 relative overflow-hidden group backdrop-blur-md"
        >
          <Zap className="absolute -right-4 -bottom-4 w-32 h-32 text-primary opacity-5 group-hover:opacity-[0.08] transition-opacity" />
          <h3 className="font-bold text-sm mb-4 relative z-10 flex items-center gap-2 uppercase tracking-widest text-white/90">
            <Users className="w-4 h-4 text-primary" /> _ {t.syndicate}
          </h3>

          <div className="grid grid-cols-2 gap-3 mb-5 relative z-10">
            <div className="bg-black/50 border border-white/5 rounded-lg p-3 text-center hover:border-primary/20 transition-colors">
              <p className="text-xl font-black text-white/90">{recruits}</p>
              <p className="text-[9px] uppercase tracking-widest text-muted-foreground mt-1">
                {t.recruits}
              </p>
            </div>
            <div className="bg-black/50 border border-white/5 rounded-lg p-3 text-center hover:border-secondary/20 transition-colors">
              <p className="text-xl font-black text-secondary">{earned}</p>
              <p className="text-[9px] uppercase tracking-widest text-muted-foreground mt-1">
                {t.earned}
              </p>
            </div>
          </div>

          <p className="text-[10px] text-muted-foreground mb-3 max-w-[90%] relative z-10 uppercase tracking-wide">
            {t.ref_desc}
          </p>

          <button
            onClick={copyRef}
            className="w-full relative z-10 bg-black/60 border border-white/10 hover:border-secondary/40 flex items-center justify-between p-3.5 rounded-lg transition-all"
          >
            <span className="text-[11px] text-muted-foreground truncate mr-4 font-mono">
              t.me/{botUsername}?start={user.tg_id || user.id}
            </span>
            {copied ? (
              <CheckCircle2 className="w-4 h-4 text-secondary shrink-0" />
            ) : (
              <Copy className="w-4 h-4 text-secondary/60 hover:text-secondary shrink-0 transition-colors" />
            )}
          </button>
        </motion.div>
      </motion.div>
    </div>
  );
}