"use client";
import { BASE_URL } from "@/Constant";
import { useState, useRef, useEffect } from "react";

export default function CertificationTable({ table }: any) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const modalRef = useRef<HTMLDivElement>(null);

  const handleDownload = (fileName: string) => {
    const fileUrl = `${BASE_URL}${fileName}`;
    window.open(fileUrl, "_blank");
  };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        modalRef.current &&
        !modalRef.current.contains(event.target as Node)
      ) {
        setIsModalOpen(false);
      }
    };

    if (isModalOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isModalOpen]);

  return (
    <>
      <div className="flex m-20 rounded-lg bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
        <button
          onClick={() => setIsModalOpen(true)}
          className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change"
        >
          <span className="will-change-transform">
            Apply for Certification Body
          </span>
        </button>
      </div>
      {isModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div
            ref={modalRef}
            className="relative bg-white rounded-lg shadow-lg p-6 w-96"
          >
            {/* Close icon */}
            <button
              onClick={() => setIsModalOpen(false)}
              className="absolute top-2 right-5 text-gray-500 hover:text-gray-800 text-xl"
            >
              &times;
            </button>

            <h2 className="text-xl font-bold mb-4 text-center">
              Apply for Certification Body
            </h2>

            {/* Form Fields */}
            <form>
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700">
                  Name of AB*
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
                  required
                />
              </div>

              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700">
                  Countries*
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
                  required
                />
              </div>

              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700">
                  Accreditation Program*
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
                  required
                />
              </div>

              <div className="mb-6">
                <label className="block text-sm font-medium text-gray-700">
                  Captcha
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
                  required
                />
              </div>

              {/* Submit Button Centered */}
              <div className="flex justify-center">
                <button
                  type="submit"
                  className="hover:bg-btnhover hover:scale-105 px-6 py-2 border border-transparent text-sm font-medium rounded-full text-black bg-btn transition-all duration-300"
                >
                  Submit
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </>

    // <div className="container m-auto mt-20">
    //   <div className="flex items-start justify-between md:flex-row flex-col m-auto max-w-7xl md:w-[87%] mx-auto px-4 w-full">
    //     <h2>Download the documents</h2>

    //     <div className="flex gap-2">
    //       <div className="flex rounded-lg bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
    //         <button
    //           onClick={() => setIsModalOpen(true)}
    //           className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change"
    //         >
    //           <span className="will-change-transform">
    //             Apply for Certification Body
    //           </span>
    //         </button>
    //       </div>
    //     </div>

    //     {isModalOpen && (
    //       <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    //         <div ref={modalRef} className="relative bg-white rounded-lg shadow-lg p-6 w-96">
    //           {/* Close icon */}
    //           <button
    //             onClick={() => setIsModalOpen(false)}
    //             className="absolute top-2 right-5 text-gray-500 hover:text-gray-800 text-xl"
    //           >
    //             &times;
    //           </button>

    //           <h2 className="text-xl font-bold mb-4 text-center">
    //             Apply for Certification Body
    //           </h2>

    //           {/* Form Fields */}
    //           <form>
    //             <div className="mb-4">
    //               <label className="block text-sm font-medium text-gray-700">
    //                 Name of AB*
    //               </label>
    //               <input
    //                 type="text"
    //                 className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
    //                 required
    //               />
    //             </div>

    //             <div className="mb-4">
    //               <label className="block text-sm font-medium text-gray-700">
    //                 Countries*
    //               </label>
    //               <input
    //                 type="text"
    //                 className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
    //                 required
    //               />
    //             </div>

    //             <div className="mb-4">
    //               <label className="block text-sm font-medium text-gray-700">
    //                 Accreditation Program*
    //               </label>
    //               <input
    //                 type="text"
    //                 className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
    //                 required
    //               />
    //             </div>

    //             <div className="mb-6">
    //               <label className="block text-sm font-medium text-gray-700">
    //                 Captcha
    //               </label>
    //               <input
    //                 type="text"
    //                 className="w-full px-3 py-2 border rounded-lg focus:ring focus:ring-blue-300"
    //                 required
    //               />
    //             </div>

    //             {/* Submit Button Centered */}
    //             <div className="flex justify-center">
    //               <button
    //                 type="submit"
    //                 className="hover:bg-btnhover hover:scale-105 px-6 py-2 border border-transparent text-sm font-medium rounded-full text-black bg-btn transition-all duration-300"
    //               >
    //                 Submit
    //               </button>
    //             </div>
    //           </form>
    //         </div>
    //       </div>
    //     )}
    //   </div>

    //   <div className="md:w-[87%] m-auto px-4 py-5">
    //     <div className="max-w-6xl mx-auto bg-white/25 rounded-xl shadow-lg overflow-hidden">
    //       <div className="overflow-x-auto">
    //         <table className="w-full">
    //           <thead>
    //             <tr className="bg-gray-25 border-b">
    //               <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
    //                 Format (Application Form)
    //               </th>
    //               <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
    //                 Download
    //               </th>
    //             </tr>
    //           </thead>
    //           <tbody className="divide-y divide-gray-200">
    //             {table &&
    //               table.map((event: any, index: number) => (
    //                 <tr
    //                   key={index}
    //                   className="hover:bg-gray-50 transition-colors duration-150 ease-in-out"
    //                 >
    //                   <td className="px-6 py-4 text-sm text-gray-600">
    //                     {event.postTitle}
    //                   </td>
    //                   <td className="px-6 py-4">
    //                     <button
    //                       onClick={() => handleDownload(event.file)}
    //                       className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
    //                     >
    //                       Download docx
    //                     </button>
    //                   </td>
    //                 </tr>
    //               ))}
    //           </tbody>
    //         </table>
    //       </div>
    //     </div>
    //   </div>
    // </div>
  );
}