"use client";

import { useRef, useState } from "react";
import { usePathname } from "next/navigation";
import { useClickOutside } from "@/hooks/useClickOutside";

const WHATSAPP_CONTACTS = [
  { label: "MinKu Nthy", number: '+6285813578627' },
  { label: "MinKu April", number: '+6281237592710' },
];

function contactUrl(number: string) {
  return number ? `https://wa.me/${number}` : "https://wa.me/";
}

const HIDDEN_PAGE_PATTERNS = [
  /^\/novel\/[^/]+\/read\/[^/]+/,
  /^\/user\/novel(\/|$)/, 
];

function normalizePathname(path: string) {
  return path.replace(/^\/(id|en)(\/|$)/, "/");
}

function WhatsAppIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 32 32" className={className} fill="#ffffff" aria-hidden="true">
      <path d="M16.004 3C9.377 3 4 8.373 4 15c0 2.386.706 4.607 1.92 6.47L4 29l7.72-1.885A11.94 11.94 0 0 0 16.004 27C22.63 27 28 21.627 28 15S22.63 3 16.004 3Zm0 21.818c-1.94 0-3.75-.55-5.29-1.5l-.38-.226-4.582 1.119 1.148-4.463-.248-.398A9.77 9.77 0 0 1 5.19 15c0-5.964 4.851-10.818 10.814-10.818S26.818 9.036 26.818 15 21.968 24.818 16.004 24.818Zm5.941-8.144c-.325-.163-1.925-.95-2.223-1.06-.298-.108-.515-.163-.732.163-.217.326-.84 1.06-1.03 1.278-.19.217-.38.244-.705.081-.325-.163-1.372-.505-2.614-1.61-.966-.86-1.618-1.923-1.808-2.248-.19-.326-.02-.502.143-.664.146-.146.325-.38.488-.57.163-.19.217-.326.325-.543.109-.217.055-.407-.027-.57-.081-.163-.732-1.762-1.003-2.413-.264-.634-.532-.548-.732-.558-.19-.008-.407-.01-.624-.01-.217 0-.57.081-.868.407-.298.326-1.138 1.113-1.138 2.715 0 1.602 1.165 3.15 1.328 3.368.163.217 2.294 3.504 5.559 4.913.777.335 1.383.535 1.856.685.78.248 1.49.213 2.052.13.626-.094 1.925-.787 2.196-1.547.271-.76.271-1.412.19-1.548-.08-.135-.297-.217-.622-.38Z" />
    </svg>
  );
}

export default function WhatsAppFloatButton() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const wrapperRef = useRef<HTMLDivElement>(null);

  useClickOutside(wrapperRef, () => setOpen(false));

  const normalizedPath = normalizePathname(pathname);
  if (HIDDEN_PAGE_PATTERNS.some((pattern) => pattern.test(normalizedPath))) {
    return null;
  }

  return (
    <div ref={wrapperRef} className="fixed bottom-20 right-6 z-40 flex flex-col items-end gap-3">
      {open && (
        <div className="flex flex-col gap-2 bg-white rounded-2xl shadow-xl border border-kb-line p-2 min-w-48">
          {WHATSAPP_CONTACTS.map((contact) => (
            <a
              key={contact.label}
              href={contactUrl(contact.number)}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => setOpen(false)}
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-kb-ink hover:bg-kb-paper-alt transition-colors"
            >
              <span className="w-8 h-8 rounded-full bg-[#25D366] flex items-center justify-center shrink-0">
                <WhatsAppIcon className="w-4.5 h-4.5" />
              </span>
              {contact.label}
            </a>
          ))}
        </div>
      )}

      <button
        onClick={() => setOpen((v) => !v)}
        aria-label="Chat WhatsApp"
        aria-expanded={open}
        className="w-14 h-14 rounded-full bg-[#25D366] shadow-lg flex items-center justify-center hover:brightness-105 hover:scale-105 transition-transform cursor-pointer"
      >
        <WhatsAppIcon className="w-7.5 h-7.5" />
      </button>
    </div>
  );
}