'use client';

import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

const SOCIAL_CONFIG = [
  {
    name: 'WhatsApp',
    iconPath: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.94 3.659 1.437 5.63 1.438h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
    color: 'bg-[#25D366]',
    getUrl: (currentUrl) => `https://wa.me/918050739493?text=${encodeURIComponent("Hello! I'm interested in your services. Seen on: " + currentUrl)}`
  },
 {
  name: 'Telegram',
  iconPath: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2s-.21-.05-.3-.03c-.13.03-2.13 1.35-6.03 3.98-.57.39-1.08.58-1.54.57-.5-.01-1.46-.28-2.17-.51-.87-.28-1.56-.44-1.5-.92.03-.25.38-.51 1.05-.78 4.12-1.79 6.87-2.97 8.24-3.55 3.93-1.64 4.74-1.92 5.27-1.93.12 0 .38.03.55.17.14.12.18.28.2.45.02.12.02.26.01.4z",
  color: 'bg-[#0088cc]',
  // Telegram uses 'text' parameter for pre-filled messages
  getUrl: (currentUrl) => {
    const baseMsg = "Hello! I'd like to inquire about your services.";
    const fullMsg = `${baseMsg} \n\nReferenced Page: ${currentUrl}`;
    return `https://t.me/sm_digielabs?text=${encodeURIComponent(fullMsg)}`;
  }
},
  {
    name: 'LinkedIn',
    iconPath: "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z",
    color: 'bg-[#0077b5]',
    // Directing to profile is best for engagement
    getUrl: () => `https://www.linkedin.com/in/digielabs/` 
    
  }
];

export default function FloatingSocialIcons() {
  const pathname = usePathname();
  const [url, setUrl] = useState('');
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // window.location.href gives the full current URL
    setUrl(window.location.href);
    const timer = setTimeout(() => setIsVisible(true), 1500);
    return () => clearTimeout(timer);
  }, [pathname]);

  if (!isVisible) return null;

  return (
    <div className="fixed bottom-8 right-8 z-[999] flex flex-col gap-4 items-center">
      {SOCIAL_CONFIG.map((social, index) => (
        <div 
          key={social.name}
          className="group relative flex items-center justify-end"
          style={{ 
            animation: `slideInUp 0.5s ease-out ${index * 0.15}s both` 
          }}
        >
          {/* Tooltip */}
          <div className="absolute right-full mr-4 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none">
            <div className="bg-slate-900 text-white text-xs py-2 px-3 rounded-lg border border-slate-800 shadow-xl whitespace-nowrap">
              Connect on {social.name}
              <div className="absolute top-1/2 -right-1 -translate-y-1/2 border-4 border-transparent border-l-slate-900"></div>
            </div>
          </div>

          {/* WhatsApp Pulse */}
          {social.name === 'WhatsApp' && (
            <div className="absolute inset-0 rounded-full bg-[#25D366]/40 animate-ping"></div>
          )}

          {/* Social Button */}
          <a
            href={social.getUrl(url)}
            target="_blank"
            rel="noopener noreferrer"
            className={`relative flex items-center justify-center w-14 h-14 ${social.color} text-white rounded-full shadow-lg transition-all duration-300 hover:scale-110 hover:-translate-y-1 active:scale-95`}
            aria-label={`Chat on ${social.name}`}
          >
            <svg
              viewBox="0 0 24 24"
              className="w-7 h-7 fill-current"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d={social.iconPath} />
            </svg>
          </a>
        </div>
      ))}

      <style jsx global>{`
        @keyframes slideInUp {
          from { opacity: 0; transform: translateY(30px) scale(0.8); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </div>
  );
}