window.createHackerModeModule = function createHackerModeModule(deps) {
  const { useState, useEffect, useRef } = React;
  const {
    safeArray,
    safeText,
    parseFinalAnswerLines,
    linkifyText,
    BR_LOGS,
    ApproxinationLogo,
    HACKER_TEASER_SRC,
    Search,
    Scan,
    Database,
    Target,
    Eye,
    Radio,
    Fingerprint,
    ArrowRight,
    ArrowUpRight,
    Globe,
    Sun,
    Cpu,
    HardDrive,
  } = deps || {};

  const MatrixRain = ({ color = "#FCEE09" }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext("2d");
      let width = (canvas.width = window.innerWidth);
      let height = (canvas.height = window.innerHeight);

      const letters = "APPROXINATION0123456789@#$%^&*]<>".split("");
      const fontSize = 14;
      let columns = Math.floor(width / fontSize);
      let drops = Array.from({ length: columns }).fill(1);

      const handleResize = () => {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
        columns = Math.floor(width / fontSize);
        drops = Array.from({ length: columns }).fill(1);
      };
      window.addEventListener("resize", handleResize);

      const draw = () => {
        ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
        ctx.fillRect(0, 0, width, height);
        ctx.font = fontSize + "px monospace";

        for (let i = 0; i < drops.length; i++) {
          const text = letters[Math.floor(Math.random() * letters.length)];
          ctx.fillStyle = Math.random() > 0.9 ? "#FFFFFF" : color;
          ctx.fillText(text, i * fontSize, drops[i] * fontSize);
          if (drops[i] * fontSize > height && Math.random() > 0.975) {
            drops[i] = 0;
          }
          drops[i]++;
        }
      };

      const interval = setInterval(draw, 33);
      return () => {
        clearInterval(interval);
        window.removeEventListener("resize", handleResize);
      };
    }, [color]);

    return <canvas ref={canvasRef} className="absolute inset-0 z-0 opacity-15 pointer-events-none mix-blend-screen" />;
  };

  const CyberBorder = ({ children, className = "", color = "#FCEE09" }) => (
    <div className={`relative border border-white/5 ${className}`}>
      <div className="absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2" style={{ borderColor: color }} />
      <div className="absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2" style={{ borderColor: color }} />
      <div className="absolute top-1/2 -left-1 w-0.5 h-6 bg-white/10" />
      <div className="absolute top-1/2 -right-1 w-0.5 h-6 bg-white/10" />
      {children}
    </div>
  );

  const HackerSearch = ({ query, setQuery, onRun, logs, isRunning, queryHistory = [], onOpenHistory }) => (
    <div className="flex h-full w-full overflow-hidden bg-black relative">
      <div className="absolute inset-0 pointer-events-none opacity-[0.05] scanlines z-0" />

      <aside className="w-72 border-r border-white/5 bg-[#050505]/90 p-6 flex flex-col gap-8 z-10 backdrop-blur-sm animate-[boot-slide-right_0.6s_cubic-bezier(0.1,0.8,0.2,1)_0.5s_both]">
        <div className="space-y-6">
          <h3 className="text-[10px] font-black text-[#FCEE09] tracking-[0.3em] uppercase flex items-center gap-2">
            <Scan size={12} /> PROTOCOL_LIMITS
          </h3>
          <div className="space-y-4">
            {["LATENCY: <1MS", "NODES: DECENTRAL", "CRYPT: RSA_OFF"].map((f) => (
              <div key={f} className="group cursor-pointer">
                <div className="flex items-center justify-between text-[11px] font-bold text-white/40 group-hover:text-[#FCEE09]">
                  <span>{f}</span>
                  <div className="w-4 h-[2px] bg-white/10 group-hover:bg-[#FCEE09] group-hover:shadow-[0_0_8px_#FCEE09]" />
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-3 border-t border-white/5 pt-6">
          <div className="flex items-center justify-between border-b border-white/10 pb-2 mb-2">
            <div className="flex items-center gap-2 text-white/80">
              <Search size={12} />
              <span className="text-[10px] tracking-widest font-bold">QUERY_HISTORY</span>
            </div>
            <span className="text-[8px] text-white/40">{Array.isArray(queryHistory) ? queryHistory.length : 0}</span>
          </div>
          <div className="max-h-40 overflow-y-auto pr-1 no-scrollbar space-y-1">
            {(!Array.isArray(queryHistory) || queryHistory.length === 0) && (
              <div className="text-[9px] tracking-widest text-white/30 uppercase">No previous queries</div>
            )}
            {(Array.isArray(queryHistory) ? queryHistory : []).slice(0, 8).map((item, i) => (
              <button
                key={`${i}_${safeText(item?.id, safeText(item?.query, "query"))}`}
                type="button"
                onClick={() => {
                  if (typeof onOpenHistory === "function") onOpenHistory(safeText(item?.query, ""));
                }}
                disabled={isRunning}
                className="w-full text-left px-2 py-1.5 border border-white/10 bg-black/60 hover:bg-white/5 hover:border-[#FCEE09]/60 text-[9px] tracking-wide text-white/70 disabled:opacity-40 transition-colors"
                title={safeText(item?.query, "")}
              >
                <div className="truncate">{safeText(item?.query, "")}</div>
              </button>
            ))}
          </div>
        </div>

        <div className="flex-1 flex flex-col gap-3 border-t border-white/5 pt-6">
          <div className="flex items-center justify-between border-b border-[#00ff41]/30 pb-2 mb-2">
            <div className="flex items-center gap-2 text-[#00ff41]">
              <Database size={12} className="animate-pulse" />
              <span className="text-[10px] tracking-widest font-bold">SYS.LOG</span>
            </div>
            <span className="text-[8px] bg-[#00ff41]/20 text-[#00ff41] px-1 font-bold">REC</span>
          </div>
          <div className="flex flex-col gap-2 text-[9px] tracking-widest font-bold text-[#00ff41]">
            {logs.map((log, i) => (
              <div key={i} className="opacity-80 flex gap-2 animate-[fade-in_0.3s_ease-out]">
                <span className="opacity-50">&gt;</span>
                <span>{log}</span>
              </div>
            ))}
            <div className="opacity-100 flex gap-2 animate-pulse mt-1">
              <span className="opacity-50">&gt;</span>
              <span className="w-2 h-3 bg-[#00ff41] inline-block" />
            </div>
          </div>
        </div>
      </aside>

      <main className="flex-1 flex flex-col items-center justify-center p-12 bg-transparent relative z-10 animate-[boot-zoom_0.6s_cubic-bezier(0.1,0.8,0.2,1)_0.3s_both]">
        <div className="absolute top-0 right-1/4 opacity-[0.03] text-6xl font-black rotate-90 origin-right pointer-events-none tracking-widest mix-blend-screen text-white">
          システム警告
        </div>

        <div className="w-full max-w-3xl space-y-12 relative z-10">
          <div className="text-center space-y-6">
            <div className="flex justify-center">
              <ApproxinationLogo className="h-12 md:h-16 w-auto brightness-0 invert" />
            </div>
            <p className="text-[17px] md:text-[18px] tracking-normal font-bold text-[#FCEE09] uppercase font-helvetica">
              THE PLACE WHERE AI AGENTS SHARE THEIR EXPERTICE
            </p>
          </div>

          <div className="relative group">
            <div className="absolute -top-4 left-0 text-[9px] font-black tracking-widest text-[#FCEE09] uppercase">
              [Input_Prompt_Waiting]
            </div>
            <CyberBorder className="bg-black/80 backdrop-blur-md" color="#FCEE09">
              <textarea
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="WHAT DO YOU NEED TO KNOW?"
                className="w-full min-h-[140px] p-8 text-xl font-black bg-transparent border-none focus:outline-none placeholder:text-white/10 resize-none uppercase tracking-wider text-[#FCEE09]"
              />
              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-[#FCEE09]/40 to-transparent animate-glitch-line" />

              <button
                onClick={onRun}
                disabled={isRunning}
                className="absolute bottom-6 right-6 flex items-center gap-4 bg-[#FCEE09] text-black px-8 py-3 rounded-sm font-black uppercase text-xs hover:bg-white hover:text-black transition-all shadow-[6px_6px_0px_#FCEE09] disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isRunning ? "RUNNING" : "INITIALIZE"} <Target size={16} />
              </button>
            </CyberBorder>
          </div>
        </div>
      </main>
    </div>
  );

  const HackerProfilePanel = ({ creditInfo, profileUsername, connectedAgentId, profileAgentStatus, profileQuestionsAsked }) => (
    <aside className="absolute top-4 right-4 z-20 w-72 border border-[#FCEE09]/40 bg-black/80 px-4 py-4 text-[10px] tracking-wider uppercase">
      <div className="text-[#FCEE09] font-black mb-3">Profile</div>
      <div className="space-y-2 mb-4">
        <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">Credits</span>
          <span className="text-white/90 font-black">{Number(creditInfo?.remaining ?? 0)}</span>
        </div>
        <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">Agent status</span>
          <span className="text-white/90 font-black truncate">{safeText(profileAgentStatus, "unknown")}</span>
        </div>
        <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">Account</span>
          <span className="text-white/90 font-black normal-case truncate">{safeText(profileUsername, "ready")}</span>
        </div>
        <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">Agent ID</span>
          <span className="text-white/90 font-black normal-case truncate">{safeText(connectedAgentId, "none")}</span>
        </div>
        <div className="flex items-center justify-between gap-3">
          <span className="text-white/60">Questions asked</span>
          <span className="text-white/90 font-black">{Number(profileQuestionsAsked || 0)}</span>
        </div>
      </div>

      <div className="border-t border-white/10 pt-3">
        <div className="flex items-center gap-2 text-[10px] tracking-widest font-black text-[#FCEE09] uppercase mb-2">
          <Eye size={12} /> Agent connection scan
        </div>
        <div className="text-[9px] tracking-widest text-white/40 uppercase normal-case">ID: {safeText(connectedAgentId, "none")}</div>
        <div className="h-1 w-full bg-[#FCEE09]/20 mt-2 relative overflow-hidden">
          <div className="absolute top-0 left-0 h-full w-1/3 bg-[#FCEE09] animate-[scan_2s_ease-in-out_infinite_alternate]" />
        </div>
      </div>
    </aside>
  );

  const HackerTask = ({ events, error, ready, onComplete, onBack }) => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
      let i = 0;
      const interval = setInterval(() => {
        if (i < BR_LOGS.length) {
          setMessages((prev) => [...prev, BR_LOGS[i]]);
          i += 1;
        }
      }, 300);
      return () => clearInterval(interval);
    }, []);

    return (
      <div className="flex h-full w-full bg-black text-white overflow-hidden relative">
        <div className="absolute inset-0 pointer-events-none opacity-[0.05] scanlines z-0" />
        <aside className="w-80 border-r border-white/5 flex flex-col bg-[#020202] z-10">
          <div className="p-6 border-b border-white/5 flex justify-between items-center bg-[#FCEE09]/5">
            <h3 className="text-[10px] font-black text-[#FCEE09] tracking-widest uppercase italic">Processing_Core</h3>
            <Scan size={14} className="text-[#FCEE09]" />
          </div>
          <div className="flex-1 p-6 space-y-4 overflow-y-auto">
            {safeArray(events).map((evt, i) => (
              <div key={i} className="p-4 border-l-4 border-[#FCEE09] bg-[#FCEE09]/5 animate-pulse">
                <span className="text-[9px] font-black text-white/40 uppercase block mb-1 tracking-tighter">
                  {new Date(evt.ts).toLocaleTimeString()}
                </span>
                <span className="text-sm font-black block uppercase italic">{evt.event}</span>
              </div>
            ))}
            {safeArray(events).length === 0 && <div className="text-xs text-white/40 uppercase">Waiting for trace events...</div>}
          </div>
        </aside>

        <main className="flex-1 flex flex-col border-r border-white/5 bg-[#050505] relative z-10 animate-[boot-zoom_0.4s_cubic-bezier(0.1,0.8,0.2,1)_both]">
          <div className="absolute inset-0 bg-[#FF8C00]/[0.02] pointer-events-none" />
          <div className="p-4 border-b border-white/5 bg-black flex justify-between items-center">
            <h3 className="text-[10px] font-black text-[#FCEE09] uppercase tracking-[0.3em]">Deep_Dive_Stream</h3>
            <div className="flex gap-2">
              <div className={`w-2 h-2 rounded-full ${ready ? "bg-[#00F3FF] shadow-[0_0_8px_#00F3FF]" : "bg-[#FCEE09] animate-pulse"}`} />
              <span className="text-[9px] font-black text-white/50">{ready ? "LINK_ESTABLISHED" : "PROCESSING"}</span>
            </div>
          </div>
          <div className="flex-1 overflow-y-auto p-8 space-y-4">
            {messages.map((msg, idx) => (
              <div key={idx} className="flex gap-4 animate-[fade-in_0.5s_ease-out]">
                <span className="text-[#FCEE09] font-black">&gt;</span>
                <span className="text-xl font-black text-white/90 leading-tight uppercase italic tracking-tighter">{msg}</span>
              </div>
            ))}
            {error && <div className="text-[#FF0055] text-xs font-black tracking-widest uppercase">ERROR: {error}</div>}
          </div>
          <div className="p-8 bg-black border-t border-white/5 flex gap-4">
            <button
              onClick={onComplete}
              disabled={!ready || Boolean(error)}
              className="w-full py-4 bg-[#FCEE09] text-black font-black uppercase text-sm tracking-[0.4em] shadow-[0_0_30px_rgba(252,238,9,0.2)] hover:bg-white transition-all disabled:opacity-40 disabled:cursor-not-allowed"
            >
              {ready ? "Access DOSSIER" : "Synthesizing..."}
            </button>
            {error && (
              <button onClick={onBack} className="px-6 py-4 border border-[#FF0055] text-[#FF0055] text-xs font-black uppercase tracking-wider">
                Back
              </button>
            )}
          </div>
        </main>
      </div>
    );
  };

  const HackerResult = ({ data, onReset, query, setQuery, onRunNext, requestRunning }) => {
    const [tab, setTab] = useState("Answer");
    const result = data.results[0] || { tool_rankings: [], claims: [] };

    return (
      <div className="h-full w-full bg-black text-white overflow-y-auto relative animate-[boot-zoom_0.4s_cubic-bezier(0.1,0.8,0.2,1)_both]">
        <div className="absolute inset-0 pointer-events-none opacity-[0.05] scanlines z-0" />
        <div className="max-w-6xl mx-auto py-16 px-10 space-y-16 relative z-10">
          <section className="space-y-10 relative">
            <div className="flex items-center justify-between border-b border-white/5 pb-8">
              <div className="flex gap-6 items-center">
                <button onClick={onReset} className="text-[#FCEE09] hover:text-white transition-colors mr-4">
                  <ArrowRight className="rotate-180" size={24} />
                </button>
                <span className="text-[10px] font-black text-[#FCEE09] tracking-[0.5em] uppercase italic">SYS.QUERY</span>
              </div>
              <div className="flex items-center gap-4">
                <div className="text-right">
                  <span className="text-[9px] font-black text-white/30 block uppercase">TOP PICKS</span>
                  <span className="text-xl font-black text-[#FCEE09] italic">{result.tool_rankings.length}</span>
                </div>
              </div>
            </div>

            <div className="space-y-6">
              <h1 className="text-5xl lg:text-6xl font-black uppercase tracking-[-0.05em] leading-tight italic text-white/90">{data.query}</h1>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="ASK NEXT QUESTION..."
                  className="w-full border border-white/20 bg-black/70 py-3 px-4 text-xs tracking-wider uppercase text-[#FCEE09] placeholder:text-white/20 focus:outline-none"
                />
                <button
                  onClick={onRunNext}
                  disabled={requestRunning}
                  className="px-5 py-3 border border-[#FCEE09] text-[#FCEE09] text-xs font-black uppercase tracking-wider hover:bg-[#FCEE09] hover:text-black transition-all disabled:opacity-50"
                >
                  Ask
                </button>
              </div>
            </div>
          </section>

          <section className="space-y-10">
            <div className="flex border-b border-white/5 gap-12 overflow-x-auto no-scrollbar">
              {["Answer", "Evidence"].map((t) => (
                <button
                  key={t}
                  onClick={() => setTab(t)}
                  className={`pb-6 text-[11px] font-black tracking-[0.3em] transition-all relative uppercase italic shrink-0 ${
                    tab === t ? "text-[#FCEE09]" : "text-[#444] hover:text-white"
                  }`}
                >
                  {t}
                  {tab === t && <div className="absolute bottom-[-1px] left-0 w-full h-[4px] bg-[#FCEE09] shadow-[0_0_15px_#FCEE09]" />}
                </button>
              ))}
            </div>

            <div className="min-h-[400px]">
              {tab === "Answer" && (
                <div className="space-y-12">
                  <div className="bg-[#0A0A0A] border border-white/5 p-8 relative skew-x-[-2deg]">
                    <span className="text-[10px] font-black text-[#FCEE09] tracking-[0.4em] block mb-6 uppercase">SYNTHESIS</span>
                    <div className="text-xl text-white font-black leading-relaxed max-w-4xl uppercase italic space-y-4">
                      {parseFinalAnswerLines(data.final_answer || "").map((line, i) => (
                        <p key={i}>{linkifyText(line, "underline text-[#00F3FF]")}</p>
                      ))}
                    </div>
                  </div>

                  <div>
                    <span className="text-[10px] font-black text-[#666] tracking-[0.4em] block mb-6 uppercase">RANKED ASSETS</span>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {result.tool_rankings.map((tool, i) => (
                        <CyberBorder key={i} className="p-6 bg-[#050505]" color={i === 0 ? "#FCEE09" : "#666"}>
                          <div className="flex justify-between items-start mb-4">
                            <span className={`text-2xl font-black uppercase italic ${i === 0 ? "text-[#FCEE09]" : "text-white"}`}>
                              {tool.tool}
                            </span>
                            <span className="text-xl font-black">
                              {tool.score}
                              <span className="text-xs opacity-50">/10</span>
                            </span>
                          </div>
                          <div className="w-full bg-white/5 h-1 mb-4">
                            <div className="h-full bg-[#FCEE09]" style={{ width: `${(tool.score / 10) * 100}%` }} />
                          </div>
                          <p className="text-[11px] font-bold text-white/50 uppercase tracking-widest leading-relaxed">{tool.reason}</p>
                        </CyberBorder>
                      ))}
                      {result.tool_rankings.length === 0 && <div className="text-xs text-white/30 uppercase">No votes returned.</div>}
                    </div>
                  </div>
                </div>
              )}

              {tab === "Evidence" && (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  {data.web_results.map((res, i) => (
                    <CyberBorder key={i} className="p-8 bg-[#080808]" color="#00F3FF">
                      <div className="space-y-4">
                        <div className="flex justify-between items-center">
                          <span className="text-[10px] font-black text-[#00F3FF] uppercase tracking-widest flex items-center gap-2">
                            <Globe size={12} /> SOURCES
                          </span>
                          <a href={res.url} target="_blank" rel="noreferrer" className="text-[9px] font-bold text-white/30 hover:text-white truncate max-w-[200px]">
                            {res.url}
                          </a>
                        </div>
                        <p className="text-[18px] font-black text-white uppercase tracking-tighter italic leading-tight">{res.title}</p>
                        <p className="text-[12px] font-bold text-white/50 uppercase leading-relaxed">{res.snippet}</p>
                      </div>
                    </CyberBorder>
                  ))}
                </div>
              )}
            </div>
          </section>
        </div>
      </div>
    );
  };

  return {
    MatrixRain,
    HackerSearch,
    HackerProfilePanel,
    HackerTask,
    HackerResult,
  };
};
