'use client';

import React, { useEffect, useState } from 'react';
import { Phone, Mail, MessageCircle } from 'lucide-react';
import apis from '@/utils/apis';

let cachedConfigPromise: Promise<any> | null = null;
let cachedConfigData: any = null;

const fetchConfigCached = async () => {
  if (cachedConfigData) return cachedConfigData;
  if (!cachedConfigPromise) {
    cachedConfigPromise = apis.Configuration.getConfiguration()
      .then((res: any) => {
        cachedConfigData = res?.data?.[0] || res?.data || res;
        return cachedConfigData;
      })
      .catch((err: any) => {
        cachedConfigPromise = null;
        throw err;
      });
  }
  return cachedConfigPromise;
};

const AdminSupportSection = () => {
  const [config, setConfig] = useState<any>(cachedConfigData);
  const [loading, setLoading] = useState<boolean>(!cachedConfigData);

  useEffect(() => {
    let isMounted = true;
    if (!cachedConfigData) {
      setLoading(true);
    }
    fetchConfigCached()
      .then((data) => {
        if (isMounted) setConfig(data);
      })
      .catch((error) => {
        console.error('Error fetching configuration for admin support:', error);
      })
      .finally(() => {
        if (isMounted) setLoading(false);
      });
    return () => {
      isMounted = false;
    };
  }, []);

  const phone = config?.support?.call || config?.support?.phone || '+91 1234567890';
  const email = config?.support?.email || 'help@readydeliveries.com';
  const whatsappPhone = config?.support?.whatsapp || config?.support?.call || phone;

  const handleEmail = () => {
    window.location.href = `mailto:${email}`;
  };

  const handleWhatsApp = () => {
    const cleanPhone = whatsappPhone.replace(/[^\d]/g, '');
    window.open(`https://wa.me/${cleanPhone}`, '_blank');
  };

  return (
    <div className="w-full bg-white rounded-2xl p-6 border border-[#F0F0F2] shadow-sm flex flex-col justify-between min-h-[300px]">
      <div className="space-y-6">
        {/* Header */}
        <div>
          <h3 className="text-base font-bold text-gray-900">Admin Support</h3>
          <p className="text-xs text-gray-400 mt-1 leading-relaxed">
            Need help? Our support team is here to assist you.
          </p>
        </div>

        {/* Phone & Email Info Pills */}
        {loading ? (
          <div className="flex items-center justify-center py-6">
            <div className="w-6 h-6 border-2 border-[var(--primary-brand)] border-t-transparent rounded-full animate-spin" />
          </div>
        ) : (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 pt-2">
              <div className="bg-[#F8F9FA] rounded-2xl px-4 py-3.5 flex items-center gap-3 border border-gray-100/90 text-xs font-semibold text-gray-800 min-w-0">
                <Phone size={16} className="text-gray-600 shrink-0" />
                <span className="truncate">{phone}</span>
              </div>

              <div className="bg-[#F8F9FA] rounded-2xl px-4 py-3.5 flex items-center gap-3 border border-gray-100/90 text-xs font-semibold text-gray-800 min-w-0">
                <Mail size={16} className="text-gray-600 shrink-0" />
                <span className="truncate">{email}</span>
              </div>
            </div>

            {/* Action Buttons: WhatsApp & Email Us */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 pt-2">
              <button
                type="button"
                onClick={handleWhatsApp}
                className="w-full bg-[#25D366] hover:bg-[#20bd5a] text-white font-bold text-xs sm:text-sm py-3.5 px-4 rounded-xl flex items-center justify-center gap-2 shadow-xs transition-colors cursor-pointer"
              >
                <MessageCircle size={16} className="stroke-[2.5]" />
                <span>WhatsApp</span>
              </button>

              <button
                type="button"
                onClick={handleEmail}
                className="w-full bg-[var(--primary-brand)] hover:opacity-90 text-white font-bold text-xs sm:text-sm py-3.5 px-4 rounded-xl flex items-center justify-center gap-2 shadow-xs transition-colors cursor-pointer"
              >
                <Mail size={16} className="stroke-[2.5]" />
                <span>Email Us</span>
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default AdminSupportSection;