"use client";

import { useEffect, useState } from "react";
import { MessageCircle, X } from "lucide-react";
import { useAuthContext } from "@/components/FirebaseProvider";
import { subscribeMembershipSettings, type MembershipSettings } from "@/lib/firestore/membership";
import { isMember } from "@/lib/roles";

function toWaLink(rawNumber: string) {
  const digits = rawNumber.replace(/[^0-9]/g, "");
  return `https://wa.me/${digits}`;
}

// Sitewide floating action button — point 3 of the revision doc. Everyone
// (including visitors who aren't logged in at all) sees the CS numbers;
// only an employee whose membershipStatus is "member" sees the direct
// psychologist number instead. Rendered once from the root layout so it's
// present on literally every page, not just the employee dashboard.
export function MembershipWhatsAppWidget() {
  const { profile } = useAuthContext();
  const [settings, setSettings] = useState<MembershipSettings | null>(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const unsub = subscribeMembershipSettings(setSettings);
    return unsub;
  }, []);

  if (!settings) return null;

  const memberMode = profile?.role === "employee" && isMember(profile);
  const csNumbers = settings.csWhatsappNumbers?.filter(Boolean) || [];
  const hasPsychNumber = memberMode && !!settings.psychologistWhatsapp;

  // Nothing configured yet — don't show a dead-end button.
  if (!hasPsychNumber && csNumbers.length === 0) return null;

  return (
    <div className="fixed bottom-5 right-5 z-50">
      {open && (
        <div className="mb-3 w-64 rounded-2xl border border-border bg-surface p-4 shadow-lg">
          <div className="mb-2 flex items-center justify-between">
            <p className="text-sm font-semibold text-ink">
              {memberMode ? "Hubungi Psikolog" : "Hubungi Kami"}
            </p>
            <button onClick={() => setOpen(false)} className="text-ink-soft hover:text-ink">
              <X size={16} />
            </button>
          </div>
          <div className="space-y-2">
            {hasPsychNumber ? (
              <a
                href={toWaLink(settings.psychologistWhatsapp!)}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 rounded-lg bg-success/10 px-3 py-2 text-sm font-medium text-success hover:bg-success/20"
              >
                <MessageCircle size={15} /> WhatsApp Psikolog
              </a>
            ) : (
              csNumbers.map((num, i) => (
                <a
                  key={num}
                  href={toWaLink(num)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 rounded-lg bg-surface-sunk px-3 py-2 text-sm font-medium text-ink hover:bg-border"
                >
                  <MessageCircle size={15} /> CS {i + 1} — {num}
                </a>
              ))
            )}
          </div>
        </div>
      )}
      <button
        onClick={() => setOpen((v) => !v)}
        aria-label="Hubungi via WhatsApp"
        className="flex h-14 w-14 items-center justify-center rounded-full bg-success text-white shadow-lg transition-transform hover:scale-105"
      >
        <MessageCircle size={24} />
      </button>
    </div>
  );
}