import React, { useState } from 'react';
import { MessageCircle, X, Send, PhoneCall, ExternalLink } from 'lucide-react';

export const WhatsAppFloating: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [message, setMessage] = useState('');

  const phone = '923313333400';
  const formattedPhone = '+92 331 3333400';

  const handleOpenWhatsApp = (customMsg?: string) => {
    const textToSubmit = customMsg || message || 'Hello TimeNLife, I would like to inquire about products.';
    const encoded = encodeURIComponent(textToSubmit);
    window.open(`https://wa.me/${phone}?text=${encoded}`, '_blank');
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    handleOpenWhatsApp();
  };

  return (
    <div className="fixed bottom-5 right-5 z-50 flex flex-col items-end font-sans">
      {/* Floating Chat Box Window */}
      {isOpen && (
        <div className="mb-3 w-80 sm:w-88 bg-white rounded-2xl shadow-2xl border border-stone-200 overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300">
          {/* Header */}
          <div className="bg-[#075E54] text-white p-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-emerald-100/20 border border-white/20 flex items-center justify-center text-white">
                <MessageCircle className="w-6 h-6 fill-current" />
              </div>
              <div>
                <h4 className="font-bold text-sm leading-tight text-amber-50">Time N Life WhatsApp</h4>
                <p className="text-[11px] text-emerald-200 flex items-center gap-1 mt-0.5">
                  <span className="w-2 h-2 rounded-full bg-emerald-400 inline-block animate-pulse" />
                  {formattedPhone}
                </p>
              </div>
            </div>
            <button
              onClick={() => setIsOpen(false)}
              className="p-1.5 rounded-full hover:bg-white/10 transition-colors text-white/80 hover:text-white cursor-pointer"
              title="Close chat"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          {/* Chat Body */}
          <div className="p-4 bg-[#E5DDD5]/50 space-y-3">
            <div className="bg-white p-3.5 rounded-2xl rounded-tl-none text-xs sm:text-sm text-stone-800 shadow-xs border border-stone-200/80 leading-relaxed">
              <p className="font-semibold text-stone-900 mb-1">Assalam-o-Alaikum! 👋</p>
              <p>Welcome to Time N Life Official Support. How can we help you today?</p>
              <p className="text-[10px] text-stone-400 mt-2 text-right">Instant WhatsApp Reply</p>
            </div>

            <div className="space-y-2 pt-1">
              <p className="text-[11px] text-stone-500 font-medium uppercase tracking-wider px-1">Quick Options:</p>
              <button
                onClick={() => handleOpenWhatsApp('Hi! I want to track my order.')}
                className="w-full text-left px-3 py-2 bg-white hover:bg-emerald-50 text-stone-700 hover:text-emerald-800 text-xs rounded-xl border border-stone-200 hover:border-emerald-300 transition-colors flex items-center justify-between cursor-pointer"
              >
                <span>📦 Order Status Inquiry</span>
                <ExternalLink className="w-3.5 h-3.5 opacity-60" />
              </button>
              <button
                onClick={() => handleOpenWhatsApp('Hi! I have a question about product availability.')}
                className="w-full text-left px-3 py-2 bg-white hover:bg-emerald-50 text-stone-700 hover:text-emerald-800 text-xs rounded-xl border border-stone-200 hover:border-emerald-300 transition-colors flex items-center justify-between cursor-pointer"
              >
                <span>👗 Product Availability / Suits</span>
                <ExternalLink className="w-3.5 h-3.5 opacity-60" />
              </button>
            </div>
          </div>

          {/* Form & Direct WhatsApp Button */}
          <div className="p-3 bg-white border-t border-stone-100 space-y-2">
            <form onSubmit={handleSubmit} className="flex items-center gap-2">
              <input
                type="text"
                placeholder="Type message for WhatsApp..."
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                className="flex-1 text-xs sm:text-sm px-3.5 py-2 bg-stone-100 rounded-full focus:outline-none focus:ring-2 focus:ring-emerald-500 border border-stone-200"
              />
              <button
                type="submit"
                className="p-2 bg-[#25D366] hover:bg-[#1ebf58] text-white rounded-full transition-colors cursor-pointer shadow-xs"
                title="Send on WhatsApp"
              >
                <Send className="w-4 h-4" />
              </button>
            </form>

            <a
              href={`https://wa.me/${phone}?text=Hello%20TimeNLife%2C%20I%20want%20to%20connect.`}
              target="_blank"
              rel="noreferrer"
              className="w-full py-2.5 bg-[#25D366] hover:bg-[#1ebf58] text-white font-bold text-xs rounded-xl shadow transition-all flex items-center justify-center gap-2 cursor-pointer"
            >
              <PhoneCall className="w-4 h-4" />
              Chat Directly (+92 331 3333400)
            </a>
          </div>
        </div>
      )}

      {/* Floating Toggle Button */}
      <div className="flex items-center gap-2">
        {!isOpen && (
          <a
            href={`https://wa.me/${phone}`}
            target="_blank"
            rel="noreferrer"
            className="hidden sm:inline-flex items-center gap-1.5 bg-white text-stone-800 text-xs font-semibold px-3 py-1.5 rounded-full shadow-lg border border-stone-200 hover:text-emerald-600 transition-colors cursor-pointer"
          >
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
            +92 331 3333400
          </a>
        )}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-14 h-14 bg-[#25D366] hover:bg-[#20bd5a] text-white rounded-full shadow-2xl hover:scale-105 active:scale-95 flex items-center justify-center transition-all duration-300 cursor-pointer border-2 border-white"
          aria-label="WhatsApp Chat +923313333400"
        >
          {isOpen ? (
            <X className="w-6 h-6 stroke-[2.5]" />
          ) : (
            <MessageCircle className="w-7 h-7 fill-current stroke-none" />
          )}
        </button>
      </div>
    </div>
  );
};