"use client";

import { useState } from "react";
import { Bot, Send } from "lucide-react";
import { Button } from "@/components/ui/Button";

const answers: Record<string, string> = {
  "Can I spend $200 this weekend?": "Yes, but keep it under $154 if you want to stay on pace for your emergency-fund goal.",
  "Why did my score move?": "Utilization dropped from 34% to 27%, which likely helped your FICO 8 estimate. Keep cards below 30% before statement close.",
  "Which card for groceries?": "Use Sapphire Preferred for groceries this week. It beats your flat 2% card based on current bonus categories."
};

export function AskAartha() {
  const [open, setOpen] = useState(false);
  const [message, setMessage] = useState("Can I spend $200 this weekend?");

  return (
    <div className="fixed bottom-5 right-5 z-50">
      {open ? (
        <div className="mb-3 w-[min(380px,calc(100vw-40px))] rounded-lg border border-forest/10 bg-paper p-4 shadow-soft dark:border-white/10 dark:bg-[#10231d]">
          <div className="flex items-center gap-2 font-bold text-ink dark:text-paper"><Bot size={18} /> Ask Aartha</div>
          <div className="mt-4 rounded-lg bg-forest/8 p-3 text-sm leading-6 text-ink/70 dark:bg-white/10 dark:text-paper/70">{answers[message]}</div>
          <div className="mt-3 flex flex-wrap gap-2">
            {Object.keys(answers).map((prompt) => (
              <button key={prompt} onClick={() => setMessage(prompt)} className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-forest ring-1 ring-forest/10 dark:bg-white/10 dark:text-mint dark:ring-white/10">{prompt}</button>
            ))}
          </div>
          <p className="mt-3 text-xs text-ink/45 dark:text-paper/45">Educational guidance only, not regulated financial advice.</p>
        </div>
      ) : null}
      <Button onClick={() => setOpen((value) => !value)}><Send size={17} /> Ask Aartha</Button>
    </div>
  );
}