const { useState } = React;

function RangeModal() {
  const [isRangeModalOpen, setIsRangeModalOpen] = useState(false);
  const [rangeData, setRangeData] = useState([]);
  const [rangeLoading, setRangeLoading] = useState(false);

  const fetchRangeInfo = async () => {
    setRangeLoading(true);
    try {
      const response = await fetch('/api/data-range-info');
      const result = await response.json();
      if (response.ok && result.success) {
        setRangeData(result.data || []);
      }
    } catch (err) {
      console.error('Gagal memuat rentang waktu:', err);
    } finally {
      setRangeLoading(false);
    }
  };

  const toggleRangeModal = () => {
    if (!isRangeModalOpen) fetchRangeInfo();
    setIsRangeModalOpen(!isRangeModalOpen);
  };

  return (
    <div className="relative">
      <button onClick={toggleRangeModal} className="bg-slate-800/90 hover:bg-slate-700/90 text-blue-400 border border-blue-500/30 px-3 py-1.5 md:px-4 md:py-2 rounded-xl text-xs font-bold flex items-center space-x-2 transition shadow-md">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-emerald-400 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
        <span className="hidden sm:inline">Info Rentang Waktu Mutasi</span>
        <span className="sm:hidden">Info Data</span>
        <svg className={`h-3.5 w-3.5 transition-transform duration-200 ${isRangeModalOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>

      {isRangeModalOpen && (
        <div className="absolute right-0 mt-3 w-80 md:w-[420px] bg-[#182238] border border-slate-700/90 rounded-2xl shadow-2xl z-50 p-4 overflow-hidden animate-fadeIn">
          <div className="flex items-center justify-between pb-3 border-b border-slate-700/80 mb-3">
            <div className="flex items-center space-x-2">
              <span className="w-2 h-2 rounded-full bg-emerald-400"></span>
              <h4 className="text-xs md:text-sm font-bold text-white uppercase tracking-wider">Rentang Waktu Mutasi & Settlement</h4>
            </div>
            <button onClick={() => setIsRangeModalOpen(false)} className="text-slate-400 hover:text-rose-400 font-bold text-sm">&times;</button>
          </div>

          {rangeLoading ? (
            <div className="p-6 text-center text-slate-400 text-xs flex flex-col items-center justify-center">
              <svg className="animate-spin h-5 w-5 text-blue-400 mb-2" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
              <span>Mengecek rentang waktu terkini...</span>
            </div>
          ) : rangeData.length === 0 ? (
            <div className="p-4 text-center text-slate-500 text-xs font-semibold">Tidak ada data rentang waktu.</div>
          ) : (
            <div className="space-y-2.5 max-h-[60vh] overflow-y-auto pr-1 custom-scrollbar">
              {rangeData.map((item, idx) => (
                <div key={idx} className="bg-slate-900/90 p-3 rounded-xl border border-slate-800 flex flex-col space-y-1 hover:bg-slate-800 transition">
                  <span className="text-[11px] font-extrabold text-blue-400 tracking-wide">{item.norek}</span>
                  <span className="text-[11px] text-slate-300 font-mono break-all leading-tight">{item.range}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

window.RangeModal = RangeModal;