import React, { useEffect, useState } from "react";

interface Props {
  children: React.ReactNode;
}

const VpnGuard: React.FC<Props> = ({ children }) => {
  const [checking, setChecking] = useState(true);
  const [vpnConnected, setVpnConnected] = useState(true);

//   const checkVPN = async () => {
//     try {
//       const res = await window.electron.checkVpnConnection();
//       setVpnConnected(res?.success);
//     } catch {
//       setVpnConnected(false);
//     } finally {
//       setChecking(false);
//     }
//   };

  useEffect(() => {
    // checkVPN();
  }, []);

  if (checking) {
    return (
      <div className="min-h-screen flex justify-center items-center">
        <span className="loading loading-spinner loading-lg"></span>
        <span className="ml-3">Checking VPN...</span>
      </div>
    );
  }

  if (!vpnConnected) {
    return (
      <div className="min-h-screen flex justify-center items-center text-center">
        <div className="card shadow-xl bg-base-100 p-6">
          <h2 className="text-xl font-bold text-red-600">VPN Required</h2>
          <p className="mt-2">Please connect to your company VPN to continue.</p>

          <button className="btn btn-primary mt-4"
                  onClick={() => window.location.reload()}>
            Retry
          </button>
        </div>
      </div>
    );
  }

  return <>{children}</>;
};

export default VpnGuard;