"use client";

import Link from "next/link";
import { useState, useEffect, useRef } from "react";

/** Total time for the progress bar to reach 100% (ms). */
const DURATION_MS = 3500;
/** Hard cap — always complete after this (ms) even if something glitches. */
const MAX_WAIT_MS = 9000;
/** Wall-clock polling (Tor Browser throttles requestAnimationFrame aggressively). */
const TICK_MS = 50;

export default function DDoSProtection({ onComplete }: { onComplete: () => void }) {
  const [progress, setProgress] = useState(0);
  const [status, setStatus] = useState("Checking your browser…");
  const [rayId, setRayId] = useState("");
  const doneRef = useRef(false);
  const onCompleteRef = useRef(onComplete);
  onCompleteRef.current = onComplete;

  const finish = () => {
    if (doneRef.current) return;
    doneRef.current = true;
    setProgress(100);
    setStatus("Access granted.");
    window.setTimeout(() => onCompleteRef.current(), 400);
  };

  useEffect(() => {
    setRayId(Math.random().toString(36).substring(2, 10).toUpperCase());
  }, []);

  useEffect(() => {
    const start = Date.now();
    doneRef.current = false;

    const progressInterval = window.setInterval(() => {
      const elapsed = Date.now() - start;
      const pct = Math.min(100, (elapsed / DURATION_MS) * 100);
      setProgress(pct);
      if (pct >= 100 || elapsed >= MAX_WAIT_MS) {
        window.clearInterval(progressInterval);
        finish();
      }
    }, TICK_MS);

    const statusUpdates = [
      "Checking your browser…",
      "Verifying client challenge…",
      "Analyzing request signature…",
      "Negotiating TLS + Tor circuit…",
      "Establishing encrypted tunnel…",
      "Access granted.",
    ];
    let statusIndex = 0;
    const statusInterval = window.setInterval(() => {
      if (statusIndex < statusUpdates.length - 1) {
        statusIndex++;
        setStatus(statusUpdates[statusIndex]!);
      } else {
        clearInterval(statusInterval);
      }
    }, 650);

    const maxTimer = window.setTimeout(() => {
      if (!doneRef.current) finish();
    }, MAX_WAIT_MS);

    return () => {
      window.clearInterval(progressInterval);
      clearInterval(statusInterval);
      clearTimeout(maxTimer);
    };
  }, []);

  return (
    <div
      className="fixed inset-0 z-[10000] flex flex-col items-center justify-center bg-black p-8 font-mono text-[#00ff41]"
      style={{ backgroundColor: "#000000", color: "#00ff41" }}
    >
      <div
        className="w-full max-w-md border-2 border-[#00ff41]/20 bg-[#050505] p-12 shadow-[0_0_50px_rgba(0,255,65,0.1)]"
        style={{ backgroundColor: "#050505", borderColor: "rgba(0,255,65,0.2)" }}
      >
        <div className="mb-8 animate-pulse text-4xl">🛡️</div>
        <h1 className="mb-2 text-2xl font-bold uppercase tracking-tighter">DDoS Protection</h1>
        <p className="mb-8 text-xs leading-relaxed opacity-60">
          Origin shield active — wait while we validate your session. Automated requests are throttled at the edge.
        </p>

        <div className="mb-4 h-2 w-full overflow-hidden bg-[#00ff41]/10">
          <div
            className="h-full bg-[#00ff41] transition-[width] duration-100 ease-linear"
            style={{ width: `${Math.min(100, progress)}%` }}
          />
        </div>

        <div className="flex justify-between text-[10px] uppercase tracking-widest">
          <span>{status}</span>
          <span>{Math.floor(Math.min(100, progress))}%</span>
        </div>

        <button
          type="button"
          onClick={finish}
          className="mt-8 w-full border border-[#00ff41]/40 bg-[#00ff41]/10 py-3 text-xs font-bold uppercase tracking-wider text-[#00ff41] transition hover:bg-[#00ff41]/20"
        >
          Continue to site
        </button>
        <p className="mt-2 text-center text-[9px] text-[#00ff41]/40">
          Stuck on Tor or slow device? Tap above — no challenge required.
        </p>

        <div className="mt-8 text-[8px] leading-relaxed opacity-20">
          Ray ID: {rayId || "—"}
          <br />
          Performance & Security by ShadowGuard™
        </div>
      </div>
      <p className="pointer-events-none fixed bottom-6 left-0 right-0 px-4 text-center text-sm font-mono uppercase tracking-[0.2em] text-neon-cyan/80 sm:text-base">
        Tor-ready ingress · verify circuit ·{" "}
        <Link href="/launch" className="pointer-events-auto text-neon-purple underline hover:text-neon-cyan">
          /launch
        </Link>
      </p>
    </div>
  );
}