"use client";
import { useEffect, useState } from "react";
import { Copy, Check, X, ChevronDown } from "lucide-react";

export function ReadingProgress() {
  const [w, setW] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const scrolled = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
      setW(scrolled);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="fixed top-0 left-0 right-0 h-[2px] bg-white/10 z-40"><div style={{ width: `${w}%` }} className="h-full bg-gradient-to-r from-blue-500 to-cyan-400 transition-[width] duration-100" /></div>;
}

export function CodeBlock({ code, lang = "TypeScript" }: { code: string; lang?: string }) {
  const [copied, setCopied] = useState(false);
  const copy = async () => { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(()=>setCopied(false), 1500); };
  return (
    <div className="mt-6 rounded-xl border border-white/10 overflow-hidden bg-[#0a0d12]">
      <div className="flex justify-between items-center px-4 py-2 bg-white/[0.04] border-b border-white/10">
        <span className="text-xs tracking-widest text-white/40">{lang.toUpperCase()}</span>
        <button onClick={copy} className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-white text-black font-semibold">{copied ? <><Check size={12} /> COPIED ✓</> : <><Copy size={12} /> COPY</>}</button>
      </div>
      <pre className="p-4 font-mono text-[12px] leading-relaxed overflow-x-auto text-white/70"><code>{code}</code></pre>
    </div>
  );
}

export function TOC({ items }: { items: string[] }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="my-6">
      <div className="hidden lg:block fixed right-6 top-24 w-[200px] border border-white/10 rounded-2xl bg-white/[0.04] p-4">
        <p className="text-xs tracking-widest text-white/30 uppercase">Contents</p>
        <ul className="mt-2 space-y-1 text-xs">
          {items.map(s=> <li key={s}><a href={`#${s.toLowerCase().replace(/\s+/g,"-")}`} className="text-white/50 hover:text-white">{s}</a></li>)}
        </ul>
      </div>
      <div className="lg:hidden">
        <button onClick={()=>setOpen(!open)} className="w-full flex justify-between items-center rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">{open ? "Hide contents" : "Contents"} <ChevronDown size={14} className={`${open?"rotate-180":""}`} /></button>
        {open && <ul className="mt-2 rounded-xl border border-white/10 bg-white/[0.04] p-3 space-y-1 text-sm">{items.map(s=> <li key={s}><a href={`#${s.toLowerCase().replace(/\s+/g,"-")}`} onClick={()=>setOpen(false)} className="text-white/60 hover:text-white">{s}</a></li>)}</ul>}
      </div>
    </div>
  );
}

export function Lightbox({ src, caption }: { src: string; caption?: string }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { if (open) { const onEsc = (e: KeyboardEvent)=> e.key==="Escape" && setOpen(false); window.addEventListener("keydown", onEsc); document.body.style.overflow="hidden"; return ()=>{ window.removeEventListener("keydown", onEsc); document.body.style.overflow=""; }; }}, [open]);
  return (
    <>
      <div onClick={()=>setOpen(true)} className="mt-6 rounded-2xl border border-white/10 bg-white/[0.04] h-48 grid place-items-center cursor-zoom-in hover:bg-white/[0.06]">
        <span className="text-white/20 text-xs tracking-widest uppercase">{src}</span>
      </div>
      {caption && <p className="text-xs text-white/30 text-center mt-1">{caption}</p>}
      {open && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur grid place-items-center p-6" onClick={()=>setOpen(false)}>
          <div className="relative w-full max-w-3xl rounded-2xl bg-[#0e1118] border border-white/10 p-8 grid place-items-center min-h-[300px]">
            <button onClick={()=>setOpen(false)} className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white text-black grid place-items-center"><X size={14} /></button>
            <span className="text-white/30 text-sm">Fullscreen • {src}</span>
          </div>
        </div>
      )}
    </>
  );
}

export function Callout({ kind, children }: { kind: "TIP"|"WARNING"|"NOTE"|"SUCCESS"; children: React.ReactNode }) {
  const map = {
    TIP: "border-blue-500/30 bg-blue-500/10 text-blue-200",
    WARNING: "border-amber-500/30 bg-amber-500/10 text-amber-200",
    NOTE: "border-white/15 bg-white/[0.04] text-white/70",
    SUCCESS: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
  } as const;
  return <div className={`mt-6 rounded-xl border px-4 py-3 text-sm ${map[kind]}`}><span className="font-bold tracking-widest text-xs">{kind}</span><div className="mt-1">{children}</div></div>;
}