"use client";
import { useState } from "react";
import { MessageSquare, X, Send } from "lucide-react";

const faqs: Record<string,string> = {
  "who is ravneet":"Ravneet Brar — Founder, Developer, Entrepreneur from Punjab, India. Founder of Zyphron Cloud and FreeDash.",
  "zyphron":"Zyphron Cloud is reliable, affordable hosting for gamers, developers and businesses — https://zyphron.cloud",
  "freedash":"FreeDash is free game & bot hosting via credits — https://freedash.zyphron.cloud/",
  "skills":"React, Next.js, TypeScript, Node.js, PHP, Laravel, Linux, Docker, Pterodactyl, etc — see /skills",
  "contact":"Email hello@ravneetbrar.in or /contact",
};

export default function AIAssistant() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const [msgs, setMsgs] = useState<{role:"user"|"assistant", text:string}[]>([{ role:"assistant", text:"Hi — Ask Ravneet anything about work, skills, Zyphron, FreeDash or blog. I only use site/CMS content, no hallucinations." }]);
  const ask = () => {
    if (!q.trim()) return;
    const lower = q.toLowerCase();
    let ans = "I don't have that in my approved content — try asking about Ravneet, projects, skills, Zyphron or FreeDash.";
    for (const k in faqs) if (lower.includes(k)) ans = faqs[k];
    setMsgs(m=>[...m, { role:"user", text:q }, { role:"assistant", text: ans }]);
    setQ("");
  };
  return (
    <>
      <button onClick={()=>setOpen(!open)} aria-label="Ask Ravneet" className="fixed bottom-4 right-4 z-40 w-12 h-12 rounded-full bg-white text-black grid place-items-center shadow-xl hover:bg-white/90">
        <MessageSquare size={16} />
      </button>
      {open && (
        <div className="fixed bottom-20 right-4 z-40 w-[360px] max-w-[92vw] rounded-2xl bg-[#0f1117] border border-white/15 overflow-hidden shadow-2xl flex flex-col">
          <div className="flex justify-between items-center px-4 py-3 border-b border-white/10 bg-white/[0.04]">
            <span className="text-sm font-semibold text-white">ASK RAVNEET</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="flex-1 p-4 space-y-2 max-h-[320px] overflow-auto text-sm">
            {msgs.map((m,i)=>(
              <div key={i} className={`rounded-xl px-3 py-2 ${m.role==="user" ? "bg-white text-black ml-8" : "bg-white/10 border border-white/10 text-white mr-8"}`}>{m.text}</div>
            ))}
          </div>
          <div className="p-3 border-t border-white/10 flex gap-2">
            <input value={q} onChange={e=>setQ(e.target.value)} onKeyDown={e=>e.key==="Enter" && ask()} placeholder="Ask about Ravneet, projects..." className="flex-1 rounded-full bg-black/40 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/30 outline-none" />
            <button onClick={ask} className="w-9 h-9 rounded-full bg-white text-black grid place-items-center"><Send size={14} /></button>
          </div>
          <p className="text-[10px] text-white/20 text-center pb-2">Only approved website/CMS content — no invented stats.</p>
        </div>
      )}
    </>
  );
}