import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, LogIn, Info, X } from 'lucide-react';

export const FloatingMenu: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [showInfo, setShowInfo] = useState(false);
  const navigate = useNavigate();

  return (
    <>
      {/* Modal Info Aplikasi */}
      {showInfo && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center px-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
          <div className="bg-white text-dark max-w-lg w-full rounded-2xl shadow-2xl p-8 relative animate-in zoom-in-95 duration-200 border-t-4 border-orange-500">
            <button 
              onClick={() => setShowInfo(false)}
              className="absolute top-4 right-4 text-slate-400 hover:text-red-500 transition-colors bg-slate-100 p-1 rounded-full"
            >
              <X size={20} />
            </button>
            
            <div className="mb-6 text-center">
              <h3 className="font-oswald text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-yellow-500">
                SISWA JUWARA SPANSIX
              </h3>
              <div className="h-1.5 w-24 bg-gradient-to-r from-orange-500 to-yellow-400 mt-2 mx-auto rounded-full"></div>
            </div>
            
            <div className="space-y-4 font-sans text-slate-700 leading-relaxed text-justify">
              <p>
                Program <span className="font-bold text-orange-600">“SISWA JUWARA SPANSIX”</span> merupakan kepanjangan dari 
                <span className="italic font-medium text-slate-900"> “Sistem WA Autorespon, Jurnal Digital dan Absensi Siswa untuk membentuk siswa berkarakter”</span>.
              </p>
              <p>
                Program ini dibuat untuk membantu pelaksanaan rekapitulasi dan tindak lanjut presensi siswa
                <span className="font-bold text-dark"> SMP Negeri 6 Pasuruan</span>.
              </p>
            </div>
            
            <div className="mt-8 pt-6 border-t border-slate-100 flex justify-center">
              <button
                onClick={() => setShowInfo(false)}
                className="bg-dark text-white px-8 py-3 rounded-full hover:bg-slate-800 transition-all font-oswald shadow-lg hover:shadow-xl transform hover:-translate-y-1"
              >
                TUTUP INFORMASI
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Floating Button Group */}
      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4">
        {/* Menu Items */}
        {isOpen && (
          <div className="flex flex-col gap-3 items-end animate-in slide-in-from-bottom-10 fade-in duration-200">
             <button
              onClick={() => {
                navigate('/login');
                setIsOpen(false);
              }}
              className="flex items-center gap-3 bg-white pl-4 pr-2 py-2 rounded-full shadow-xl hover:bg-gray-50 transition-all group border border-gray-100"
            >
              <span className="font-bold font-oswald text-sm text-slate-700">LOGIN APP</span>
              <div className="bg-blue-100 w-8 h-8 flex items-center justify-center rounded-full text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors shadow-sm">
                <LogIn size={16} />
              </div>
            </button>
            
            <button
              onClick={() => {
                setShowInfo(true);
                setIsOpen(false);
              }}
              className="flex items-center gap-3 bg-white pl-4 pr-2 py-2 rounded-full shadow-xl hover:bg-gray-50 transition-all group border border-gray-100"
            >
               <span className="font-bold font-oswald text-sm text-slate-700">INFO APLIKASI</span>
               <div className="bg-orange-100 w-8 h-8 flex items-center justify-center rounded-full text-orange-600 group-hover:bg-orange-600 group-hover:text-white transition-colors shadow-sm">
                <Info size={16} />
              </div>
            </button>
          </div>
        )}

        {/* Main Toggle Button */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className={`w-16 h-16 rounded-full shadow-2xl flex items-center justify-center text-white transition-all duration-300 transform hover:scale-105 ${
            isOpen 
              ? 'bg-red-500 rotate-45 hover:bg-red-600' 
              : 'bg-gradient-to-br from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 border-4 border-dark/20'
          }`}
        >
          <Plus size={32} strokeWidth={3} />
        </button>
      </div>
    </>
  );
};