import { useState, useEffect } from 'react';

function LoginPage() {
  const [strategies, setStrategies] = useState([]);

  useEffect(() => {
    // Fetch available strategies
    fetch('http://localhost:7400/v1beta1/auth')
      .then(res => res.json())
      .then(data => setStrategies(data.methods));
  }, []);

  const handleGoogleLogin = async () => {
    const callbackUrl = 'https://frontier.example.com/v1beta1/auth/callback';
    const returnTo = 'https://app.example.com/dashboard';
    
    const response = await fetch(
      `http://localhost:7400/v1beta1/auth/register/google?callback_url=${callbackUrl}&return_to=${returnTo}`
    );
    
    const data = await response.json();
    
    // Redirect to Google login
    window.location.href = data.endpoint;
  };

  return (
    <div>
      <h1>Sign In</h1>
      {strategies.includes('google') && (
        <button onClick={handleGoogleLogin}>
          Sign in with Google
        </button>
      )}
    </div>
  );
}

function EmailOTPLogin() {
  const [email, setEmail] = useState('');
  const [otp, setOtp] = useState('');
  const [state, setState] = useState(null);
  const [step, setStep] = useState('email');

  const handleSendOTP = async () => {
    const response = await fetch(
      `http://localhost:7400/v1beta1/auth/register/mailotp?email=${email}`
    );
    const data = await response.json();
    setState(data.state);
    setStep('otp');
  };

  const handleVerifyOTP = async () => {
    const response = await fetch(
      `http://localhost:7400/v1beta1/auth/callback?code=${otp}&state=${state}`
    );
    
    if (response.ok) {
      // Session cookie set automatically
      window.location.href = '/dashboard';
    }
  };

  return (
    <div>
      {step === 'email' && (
        <div>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Enter your email"
          />
          <button onClick={handleSendOTP}>Send Code</button>
        </div>
      )}
      
      {step === 'otp' && (
        <div>
          <input
            type="text"
            value={otp}
            onChange={(e) => setOtp(e.target.value)}
            placeholder="Enter 6-digit code"
          />
          <button onClick={handleVerifyOTP}>Verify</button>
        </div>
      )}
    </div>
  );
}