"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { X } from "lucide-react";

const commands: Record<string, string | (()=>void)> = {};

export default function GlobalTerminal() {
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState("");
  const [history, setHistory] = useState<string[]>(["ravneet@portfolio:~$ help — try: help, about, work, skills, experience, projects, uses, zyphron, freedash, blog, contact, clear"]);
  const router = useRouter();

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.key === "`") { e.preventDefault(); setOpen(o=>!o); }
      if (e.key === "Escape" && open) setOpen(false);
      // easter eggs
      // konami handled elsewhere
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const run = (cmd: string) => {
    const c = cmd.trim().toLowerCase();
    let out = "";
    const nav = (path:string) => { out = `Opening ${path}...`; router.push(path); };
    if (c==="help") out = "help, about, work, skills, experience, projects, uses, zyphron, freedash, blog, contact, clear, hire, lab, ecosystem";
    else if (c==="about") nav("/about");
    else if (c==="work"||c==="projects") nav("/work");
    else if (c==="skills") nav("/skills");
    else if (c==="experience") nav("/experience");
    else if (c==="uses") nav("/uses");
    else if (c==="zyphron") nav("/zyphron");
    else if (c==="freedash") nav("/work/freedash");
    else if (c==="blog") nav("/blog");
    else if (c==="contact") nav("/contact");
    else if (c==="hire") nav("/hire");
    else if (c==="lab") nav("/lab");
    else if (c==="ecosystem") nav("/ecosystem");
    else if (c==="clear") { setHistory([]); return; }
    else if (c==="hello") out = "Hey — I'm Ravneet. What are we building?";
    else if (!c) return;
    else out = `command not found: ${c}`;
    setHistory(h=>[...h, `ravneet@portfolio:~$ ${cmd}`, out]);
  };

  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[70] flex items-end justify-center p-4 pb-10">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={()=>setOpen(false)} />
      <div className="relative w-full max-w-[720px] rounded-2xl bg-[#0a0d12] border border-white/15 overflow-hidden shadow-2xl">
        <div className="flex justify-between items-center px-4 py-2 bg-white/[0.04] border-b border-white/10">
          <span className="font-mono text-xs text-white/40">ravneet@portfolio:~$</span>
          <button onClick={()=>setOpen(false)} className="w-7 h-7 rounded-full bg-white/10 grid place-items-center text-white"><X size={12} /></button>
        </div>
        <div className="p-4 font-mono text-xs leading-relaxed max-h-[40vh] overflow-auto">
          {history.map((h,i)=> <div key={i} className={h.startsWith("ravneet@") ? "text-white" : "text-white/60"}>{h}</div>)}
          <div className="flex items-center gap-2 mt-2">
            <span className="text-emerald-400">$</span>
            <input autoFocus value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>{ if(e.key==="Enter"){ run(input); setInput(""); }}} placeholder="type a command…" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/30" />
          </div>
        </div>
      </div>
    </div>
  );
}