// Login Page - shows when user is not authenticated

import { useEffect } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { LogIn, Shield, Loader2, AlertCircle } from 'lucide-react';

export function LoginPage() {
  const { login, loading, error, authEnabled } = useAuth();

  // Check for error params in URL (from OIDC callback)
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const errorParam = params.get('error');
    if (errorParam) {
      console.error('[Login] Auth error:', errorParam);
    }
  }, []);

  // Get error from URL if present
  const urlParams = new URLSearchParams(window.location.search);
  const urlError = urlParams.get('error');

  const getErrorMessage = (err) => {
    switch (err) {
      case 'invalid_state':
        return 'Session expired. Please try again.';
      case 'invalid_nonce':
        return 'Security validation failed. Please try again.';
      case 'no_access':
        return 'You do not have access to this application. Contact your administrator.';
      case 'auth_failed':
        return 'Authentication failed. Please try again.';
      default:
        return err || 'An error occurred during login.';
    }
  };

  const displayError = urlError || error;

  if (loading) {
    return (
      <div className="min-h-screen bg-dark-950 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-8 h-8 text-orange-500 animate-spin mx-auto mb-4" />
          <p className="text-dark-400">Checking authentication...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-dark-950 flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        {/* Logo/Header */}
        <div className="text-center mb-8">
          <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center mx-auto mb-4">
            <span className="text-white font-bold text-2xl">C</span>
          </div>
          <h1 className="text-2xl font-bold text-white mb-2">Claude Web UI</h1>
          <p className="text-dark-400">Sign in to access Claude Code sessions</p>
        </div>

        {/* Error Message */}
        {displayError && (
          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg flex items-start gap-3">
            <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-red-400 font-medium">Login Error</p>
              <p className="text-red-400/80 text-sm mt-1">{getErrorMessage(displayError)}</p>
            </div>
          </div>
        )}

        {/* Login Card */}
        <div className="bg-dark-900 border border-dark-800 rounded-xl p-6">
          <div className="space-y-4">
            {/* SSO Info */}
            <div className="flex items-center gap-3 p-4 bg-dark-800/50 rounded-lg">
              <Shield className="w-8 h-8 text-orange-400" />
              <div>
                <p className="text-dark-200 font-medium">Single Sign-On</p>
                <p className="text-dark-500 text-sm">Sign in with your organization account</p>
              </div>
            </div>

            {/* Login Button */}
            <button
              onClick={() => login('/')}
              className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-orange-600 hover:bg-orange-500 rounded-lg font-medium transition-colors text-white"
            >
              <LogIn className="w-5 h-5" />
              Sign in with SSO
            </button>
          </div>

          {/* Footer */}
          <div className="mt-6 pt-4 border-t border-dark-800">
            <p className="text-dark-500 text-xs text-center">
              Access restricted to authorized users with agent-admin or agent-users group membership.
            </p>
          </div>
        </div>

        {/* Version */}
        <p className="text-dark-600 text-xs text-center mt-6">
          Claude Code Web UI v1.0
        </p>
      </div>
    </div>
  );
}

export default LoginPage;
