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

interface BetaPasswordProtectionProps {
  children: React.ReactNode;
}

const BetaPasswordProtection: React.FC<BetaPasswordProtectionProps> = ({
  children,
}) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Check if user already has valid beta access
    const betaToken = localStorage.getItem("betaAccess");
    if (betaToken) {
      // Verify the stored token is still valid
      verifyBetaAccess(betaToken);
    } else {
      setLoading(false);
    }
  }, []);

  const verifyBetaAccess = async (token: string) => {
    try {
      const response = await fetch(
        `${process.env.REACT_APP_API_URL}/beta/verify`,
        {
          headers: {
            "X-Beta-Password": token,
          },
        }
      );

      if (response.ok) {
        setIsAuthenticated(true);
      } else {
        localStorage.removeItem("betaAccess");
      }
    } catch (error) {
      localStorage.removeItem("betaAccess");
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    if (!password) {
      setError("Please enter a password");
      return;
    }

    try {
      const response = await fetch(
        `${process.env.REACT_APP_API_URL}/beta/verify`,
        {
          headers: {
            "X-Beta-Password": password,
          },
        }
      );

      if (response.ok) {
        localStorage.setItem("betaAccess", password);
        setIsAuthenticated(true);
      } else {
        setError("Invalid beta password");
      }
    } catch (error) {
      setError("Failed to verify beta password");
    }
  };

  if (loading) {
    return (
      <div className="min-vh-100 d-flex align-items-center justify-content-center">
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <div className="min-vh-100 d-flex align-items-center justify-content-center bg-light">
        <div
          className="card shadow"
          style={{ maxWidth: "400px", width: "100%" }}
        >
          <div className="card-body p-5">
            <h2 className="text-center mb-4">Beta Access Required</h2>
            <p className="text-muted text-center mb-4">
              This site is currently in beta testing. Please enter the beta
              password to continue.
            </p>
            <form onSubmit={handleSubmit}>
              <div className="mb-3">
                <label htmlFor="betaPassword" className="form-label">
                  Beta Password
                </label>
                <input
                  type="password"
                  className="form-control"
                  id="betaPassword"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter beta password"
                  autoFocus
                />
              </div>
              {error && (
                <div className="alert alert-danger" role="alert">
                  {error}
                </div>
              )}
              <button type="submit" className="btn btn-primary w-100">
                Access Beta
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }

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

export default BetaPasswordProtection;