import React, { useState, useEffect, useRef, useCallback } from "react";
import { useAuth } from "../contexts/AuthContext";
import PasswordStrengthMeter from "./PasswordStrengthMeter";
import PasswordInput from "./PasswordInput";
import ForgotPasswordModal from "./ForgotPasswordModal";
import VerificationCodeModal from "./VerificationCodeModal";

interface AuthModalProps {
  show: boolean;
  onHide: () => void;
  initialMode?: "login" | "signup";
}

const AuthModal: React.FC<AuthModalProps> = ({
  show,
  onHide,
  initialMode = "login",
}) => {
  const [mode, setMode] = useState<"login" | "signup">(initialMode);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [showForgotPassword, setShowForgotPassword] = useState(false);
  const [showVerificationModal, setShowVerificationModal] = useState(false);

  const { login, register } = useAuth();
  const modalRef = useRef<HTMLDivElement>(null);

  // Update mode when modal is opened with different initialMode
  useEffect(() => {
    if (show && initialMode) {
      setMode(initialMode);
    }
  }, [show, initialMode]);

  // Focus trapping for accessibility
  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if (e.key !== "Tab" || !modalRef.current) return;

    const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const focusableArray = Array.from(focusableElements).filter(
      (el) => !el.hasAttribute("disabled") && el.offsetParent !== null
    );

    if (focusableArray.length === 0) return;

    const firstElement = focusableArray[0];
    const lastElement = focusableArray[focusableArray.length - 1];

    if (e.shiftKey) {
      // Shift + Tab: if on first element, go to last
      if (document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      }
    } else {
      // Tab: if on last element, go to first
      if (document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
  }, []);

  // Set up focus trap and initial focus when modal is shown
  useEffect(() => {
    if (show && !showForgotPassword && !showVerificationModal) {
      document.addEventListener("keydown", handleKeyDown);

      // Focus the first input element when modal opens
      if (modalRef.current) {
        const firstInput = modalRef.current.querySelector<HTMLElement>('input');
        firstInput?.focus();
      }

      return () => {
        document.removeEventListener("keydown", handleKeyDown);
      };
    }
  }, [show, showForgotPassword, showVerificationModal, handleKeyDown]);

  const resetModal = () => {
    setError("");
    setEmail("");
    setPassword("");
    setFirstName("");
    setLastName("");
    setShowVerificationModal(false);
  };

  const handleGoogleLogin = () => {
    const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
    const redirectUri = `${window.location.origin}/auth/google/callback`;
    const scope = 'openid email profile';
    const responseType = 'code';

    const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
      `client_id=${encodeURIComponent(clientId || '')}` +
      `&redirect_uri=${encodeURIComponent(redirectUri)}` +
      `&response_type=${responseType}` +
      `&scope=${encodeURIComponent(scope)}` +
      `&access_type=offline` +
      `&prompt=consent`;

    window.location.href = googleAuthUrl;
  };

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

    try {
      if (mode === "login") {
        await login(email, password);
        onHide();
      } else {
        const response = await register({
          email,
          password,
          firstName,
          lastName,
          username: email.split("@")[0], // Generate username from email
        });
        // Show verification modal after successful registration
        setShowVerificationModal(true);
        // Don't call onHide() - keep modal context for verification
      }
    } catch (err: any) {
      setError(err.response?.data?.error || "An error occurred");
    } finally {
      setLoading(false);
    }
  };


  if (!show && !showForgotPassword && !showVerificationModal) return null;

  return (
    <>
      {/* Verification Code Modal - shown after signup */}
      {showVerificationModal && (
        <VerificationCodeModal
          show={showVerificationModal}
          onHide={() => {
            setShowVerificationModal(false);
            resetModal();
            onHide();
          }}
          email={email}
          onVerified={() => {
            setShowVerificationModal(false);
            resetModal();
            onHide();
          }}
        />
      )}

      {!showForgotPassword && !showVerificationModal && (
        <div
          className="modal show d-block"
          tabIndex={-1}
          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
        >
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content" ref={modalRef}>
            <div className="modal-header border-0 pb-0">
              <button
                type="button"
                className="btn-close"
                onClick={() => {
                  resetModal();
                  onHide();
                }}
              ></button>
            </div>
            <div className="modal-body px-4 pb-4">
              <h4 className="text-center mb-2">
                Welcome to Village Share
              </h4>

              {error && (
                <div className="alert alert-danger" role="alert">
                  {error}
                </div>
              )}

              {/* Email Form */}
              <form onSubmit={handleEmailSubmit}>
                {mode === "signup" && (
                  <>
                    <div className="row mb-3">
                      <div className="col">
                        <label className="form-label">First Name</label>
                        <input
                          type="text"
                          className="form-control"
                          value={firstName}
                          onChange={(e) => setFirstName(e.target.value)}
                          required
                        />
                      </div>
                      <div className="col">
                        <label className="form-label">Last Name</label>
                        <input
                          type="text"
                          className="form-control"
                          value={lastName}
                          onChange={(e) => setLastName(e.target.value)}
                          required
                        />
                      </div>
                    </div>
                  </>
                )}

                <div className="mb-3">
                  <label className="form-label">Email</label>
                  <input
                    type="email"
                    className="form-control"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>

                <PasswordInput
                  id="password"
                  label="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
                {mode === "signup" && (
                  <div style={{ marginTop: '-0.75rem', marginBottom: '1rem' }}>
                    <PasswordStrengthMeter password={password} />
                  </div>
                )}

                {mode === "login" && (
                  <div className="text-end mb-3" style={{ marginTop: '-0.5rem' }}>
                    <a
                      href="#"
                      className="text-primary text-decoration-none small"
                      onClick={(e) => {
                        e.preventDefault();
                        setShowForgotPassword(true);
                      }}
                    >
                      Forgot password?
                    </a>
                  </div>
                )}

                <button
                  type="submit"
                  className="btn btn-primary w-100 py-3 mb-1"
                  disabled={loading}
                >
                  {loading
                    ? "Loading..."
                    : mode === "login"
                    ? "Log in"
                    : "Sign up"}
                </button>
              </form>

              <div className="d-flex align-items-center my-3">
                <hr className="flex-grow-1" />
                <span className="px-3 text-muted">or</span>
                <hr className="flex-grow-1" />
              </div>

              {/* Social Login Options */}
              <button
                className="btn btn-outline-dark w-100 mb-2 py-3 d-flex align-items-center justify-content-center"
                onClick={handleGoogleLogin}
                disabled={loading}
                type="button"
              >
                <i className="bi bi-google me-2"></i>
                Continue with Google
              </button>

              <div className="text-center mt-3">
                <small className="text-muted">
                  {mode === "login"
                    ? "Don't have an account? "
                    : "Already have an account? "}
                  <a
                    href="#"
                    className="text-primary text-decoration-none"
                    onClick={(e) => {
                      e.preventDefault();
                      setMode(mode === "login" ? "signup" : "login");
                    }}
                  >
                    {mode === "login" ? "Sign up" : "Log in"}
                  </a>
                </small>
              </div>

              <p className="text-center text-muted small mt-4 mb-0">
                By continuing, you agree to Village Share's{" "}
                <a href="/terms" className="text-decoration-none">
                  Terms of Service
                </a>{" "}
                and{" "}
                <a href="/privacy" className="text-decoration-none">
                  Privacy Policy
                </a>
                .
              </p>
            </div>
          </div>
        </div>
        </div>
      )}

      {/* Forgot Password Modal */}
      <ForgotPasswordModal
        show={showForgotPassword}
        onHide={() => setShowForgotPassword(false)}
        onBackToLogin={() => setShowForgotPassword(false)}
      />
    </>
  );
};

export default AuthModal;