"use client";

import { useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
import { MessageCircle, Send, X } from "lucide-react";
import { BRAND } from "@/lib/brand";

export type ChatBotInfo = {
  prizeName: string;
  prizeSubtitle: string;
  extraPrizes: string[];
  packs: { count: number; price: number }[];
  drawDateText: string | null;
  drawPlace: string;
  authorization: string;
  paymentText: string;
  contactUrl: string;
  contactEmail: string;
  contactPhone: string;
};

type Link = { label: string; href: string; external?: boolean };
type Message = { from: "bot" | "user"; text: string; links?: Link[] };
type Intent = { keys: string[]; answer: (info: ChatBotInfo) => Omit<Message, "from"> };

const clp = (n: number) => `$${n.toLocaleString("es-CL")}`;

function normalize(text: string): string {
  return text.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
}

/** Respuestas por palabras clave (el orden define la prioridad). */
const INTENTS: Intent[] = [
  {
    keys: ["fundacion", "dedica", "quienes son", "que hacen", "mision", "causa", "residencia", "ninos", "ninas"],
    answer: () => ({
      text: `${BRAND.org} busca mejorar la calidad de vida de la infancia en situación de vulnerabilidad: niños y niñas que viven en residencias sin familia, hospitalizados en larga estadía o dados de alta de residencias. Trabajamos en cuatro líneas de acción: apoyo material con sentido, acompañamiento socioemocional y simbólico, actividades formativas y restaurativas, y trabajo en red y colaboración. Este sorteo financia directamente esas líneas. 💜`,
      links: [{ label: "Conocer la causa", href: "/#causa" }],
    }),
  },
  {
    keys: ["fondo", "dinero", "recaud", "destino", "donde va", "plata"],
    answer: () => ({
      text: "Lo recaudado se destina a las cuatro líneas de acción de la fundación: apoyo material, acompañamiento socioemocional, actividades formativas y trabajo en red. Al cierre se publica una rendición del uso de los fondos.",
      links: [{ label: "Ver transparencia", href: "/#transparencia" }],
    }),
  },
  {
    keys: ["verific", "numero", "codigo", "llego", "correo", "mis boletos", "comprobante"],
    answer: () => ({
      text: "Tus números llegan al correo con que compraste. También puedes verlos cuando quieras en el verificador público, ingresando ese correo. Si no te llegó, revisa spam o escríbenos.",
      links: [{ label: "Verificar mis boletos", href: "/buscador" }],
    }),
  },
  {
    keys: ["comprar", "compro", "participar", "participo", "como funciona", "carrito", "inscrib"],
    answer: () => ({
      text: "Es muy fácil: 1) elige tu pack, 2) completa tu correo, nombre y teléfono y paga seguro, 3) recibes tus números por correo y quedan visibles en el verificador público.",
      links: [{ label: "Comprar boletos", href: "/#boletos" }],
    }),
  },
  {
    keys: ["premio", "auto", "deepal", "ganar", "gana", "gift", "giftcard", "tarjeta de regalo"],
    answer: (i) => ({
      text: `El premio mayor es un ${i.prizeName}${i.prizeSubtitle ? ` (${i.prizeSubtitle})` : ""}.${
        i.extraPrizes.length ? ` Además puedes ganar: ${i.extraPrizes.join(", ")}.` : ""
      } ¡El próximo ganador podrías ser tú! 🚗`,
      links: [{ label: "Ver premios", href: "/#premio" }],
    }),
  },
  {
    keys: ["precio", "cuesta", "valor", "pack", "cuanto", "boletos", "boleto"],
    answer: (i) => ({
      text: i.packs.length
        ? `Tenemos estos packs: ${i.packs
            .map((p) => `${p.count} ${p.count === 1 ? "boleto" : "boletos"} a ${clp(p.price)}`)
            .join(" · ")}. Entre más boletos, más opciones de ganar.`
        : "Pronto habilitaremos la venta de boletos.",
      links: [{ label: "Elegir mi pack", href: "/#boletos" }],
    }),
  },
  {
    keys: ["pago", "pagar", "webpay", "mercado", "transferencia", "debito", "credito", "tarjeta"],
    answer: (i) => ({
      text: `Puedes pagar vía ${i.paymentText}. Para transferencia: Fundación Creciendo con Amor, RUT 65.260.914-7, BancoEstado Cuenta Vista N° 36073049371. Luego envíanos el comprobante por WhatsApp.`,
      links: i.contactUrl ? [{ label: "WhatsApp", href: i.contactUrl, external: true }] : [],
    }),
  },
  {
    keys: ["fecha", "cuando", "dia", "lugar", "donde es", "donde sera", "hora", "en vivo"],
    answer: (i) => ({
      text: `${i.drawDateText ? `El sorteo es el ${i.drawDateText}` : "La fecha del sorteo se anunciará pronto"}${
        i.drawPlace ? ` en ${i.drawPlace}` : ""
      }. Se transmite en vivo por Instagram y con notario.`,
    }),
  },
  {
    keys: ["legal", "autoriz", "bases", "notario", "seguro", "confiable", "estafa", "real", "transparen"],
    answer: (i) => ({
      text: `El sorteo es 100% legal: ${i.authorization || "cuenta con autorización vigente"}. Las bases son públicas y el sorteo se realiza en vivo ante notario.`,
      links: [{ label: "Leer las bases", href: "/bases" }],
    }),
  },
  {
    keys: ["contacto", "whatsapp", "hablar", "humano", "persona", "telefono", "ayuda", "email", "mail"],
    answer: (i) => ({
      text: `Puedes hablar con el equipo${i.contactPhone ? ` al ${i.contactPhone}` : ""}${
        i.contactEmail ? ` o al correo ${i.contactEmail}` : ""
      }.`,
      links: i.contactUrl ? [{ label: "Escribir por WhatsApp", href: i.contactUrl, external: true }] : [],
    }),
  },
];

const QUICK_REPLIES = [
  "¿A qué se dedica la fundación?",
  "¿Qué puedo ganar?",
  "¿Cuánto cuestan los boletos?",
  "¿Cuándo es el sorteo?",
  "¿Cómo verifico mis números?",
  "¿Es legal?",
];

function reply(question: string, info: ChatBotInfo): Message {
  const q = normalize(question);
  const intent = INTENTS.find((it) => it.keys.some((k) => q.includes(k)));
  if (intent) return { from: "bot", ...intent.answer(info) };
  return {
    from: "bot",
    text: "No estoy seguro de entender tu pregunta 🙈. Prueba con una de las opciones de abajo o escríbele directamente a nuestro equipo.",
    links: info.contactUrl ? [{ label: "Hablar con una persona", href: info.contactUrl, external: true }] : [],
  };
}

export default function ChatBot({ info }: { info: ChatBotInfo }) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState<Message[]>([
    {
      from: "bot",
      text: `¡Hola! 👋 Soy el asistente de ${BRAND.org}. Te cuento sobre la fundación, los premios y cómo participar.`,
    },
  ]);
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
  }, [messages, open]);

  if (pathname?.startsWith("/admin") || pathname?.startsWith("/web/")) return null;

  const ask = (text: string) => {
    const question = text.trim();
    if (!question) return;
    setMessages((m) => [...m, { from: "user", text: question }, reply(question, info)]);
    setInput("");
  };

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        aria-label={open ? "Cerrar asistente" : "Abrir asistente"}
        aria-expanded={open}
        className="fixed bottom-6 left-6 z-50 flex items-center gap-2 rounded-full bg-gradient-to-r from-brand-pink to-brand-purple py-3 pl-3 pr-4 font-bold text-white shadow-lg shadow-brand-pink/30 transition hover:scale-105"
      >
        {open ? <X className="h-6 w-6" /> : <MessageCircle className="h-6 w-6" />}
        <span className="hidden text-sm sm:inline">{open ? "Cerrar" : "¿Dudas? Pregúntame"}</span>
      </button>

      {open && (
        <div
          role="dialog"
          aria-label="Asistente de la fundación"
          className="fixed bottom-24 left-4 right-4 z-50 flex max-h-[70vh] flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl sm:left-6 sm:right-auto sm:w-96"
        >
          <div className="flex items-center gap-3 bg-brand-gradient px-5 py-4 text-white">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={BRAND.logo} alt="" className="h-10 w-auto rounded-xl bg-white px-1.5 py-0.5" />
            <div>
              <p className="font-serif font-bold leading-tight">Asistente Creciendo con Amor</p>
              <p className="text-xs text-white/80">Responde al instante</p>
            </div>
          </div>

          <div ref={listRef} className="flex-1 space-y-3 overflow-y-auto bg-brand-soft p-4">
            {messages.map((m, i) => (
              <div key={i} className={`flex ${m.from === "user" ? "justify-end" : "justify-start"}`}>
                <div
                  className={`max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed ${
                    m.from === "user"
                      ? "rounded-br-sm bg-brand-purple text-white"
                      : "rounded-bl-sm bg-white text-brand-ink shadow-sm"
                  }`}
                >
                  {m.text}
                  {m.links && m.links.length > 0 && (
                    <div className="mt-2 flex flex-wrap gap-2">
                      {m.links.map((l) => (
                        <a
                          key={l.href + l.label}
                          href={l.href}
                          target={l.external ? "_blank" : undefined}
                          rel={l.external ? "noopener noreferrer" : undefined}
                          onClick={() => !l.external && setOpen(false)}
                          className="rounded-full bg-brand-purple/10 px-3 py-1 text-xs font-bold text-brand-purple hover:bg-brand-purple hover:text-white"
                        >
                          {l.label} →
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>

          <div className="flex gap-2 overflow-x-auto border-t border-slate-100 bg-white px-3 py-2">
            {QUICK_REPLIES.map((q) => (
              <button
                key={q}
                type="button"
                onClick={() => ask(q)}
                className="shrink-0 rounded-full border border-brand-purple/30 px-3 py-1.5 text-xs font-semibold text-brand-purple hover:bg-brand-purple hover:text-white"
              >
                {q}
              </button>
            ))}
          </div>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              ask(input);
            }}
            className="flex gap-2 border-t border-slate-100 bg-white p-3"
          >
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              maxLength={200}
              placeholder="Escribe tu pregunta…"
              aria-label="Tu pregunta"
              className="flex-1 rounded-full border border-slate-300 px-4 py-2 text-sm text-brand-ink focus:border-brand-purple focus:outline-none"
            />
            <button
              type="submit"
              aria-label="Enviar"
              className="rounded-full bg-brand-gradient p-2.5 text-white hover:opacity-90"
            >
              <Send className="h-4 w-4" />
            </button>
          </form>
        </div>
      )}
    </>
  );
}