'use client';

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth-context';

const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || '';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();
  const router = useRouter();

  // MFA state
  const [mfaChallenge, setMfaChallenge] = useState<string | null>(null);
  const [mfaMethods, setMfaMethods] = useState<string[]>([]);
  const [mfaCode, setMfaCode] = useState('');
  const [useRecovery, setUseRecovery] = useState(false);

  const completeAuth = useCallback(
    (data: {
      accessToken: string;
      user: { id: string; email: string; role: string; displayName: string };
    }) => {
      localStorage.setItem('tracker_token', data.accessToken);
      // Force full reload so auth-context re-reads token from localStorage
      window.location.href = '/dashboard';
    },
    []
  );

  const handleLoginResponse = useCallback(
    (data: Record<string, unknown>) => {
      if (data.mfaRequired) {
        setMfaChallenge(data.mfaChallenge as string);
        setMfaMethods((data.methods as string[]) || []);
        setError('');
        return;
      }
      completeAuth(
        data as {
          accessToken: string;
          user: { id: string; email: string; role: string; displayName: string };
        }
      );
    },
    [completeAuth]
  );

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      await login(email, password);
      router.push('/dashboard');
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Login failed');
    } finally {
      setLoading(false);
    }
  };

  const handleGoogleSignIn = useCallback(async () => {
    setError('');
    setLoading(true);
    try {
      const google = (window as unknown as Record<string, unknown>).google as
        | {
            accounts: {
              id: {
                initialize: (config: Record<string, unknown>) => void;
                prompt: () => void;
              };
            };
          }
        | undefined;

      if (google) {
        google.accounts.id.initialize({
          client_id: GOOGLE_CLIENT_ID,
          callback: async (response: { credential: string }) => {
            const res = await fetch('/api/auth/oauth/google', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ idToken: response.credential }),
            });
            const data = await res.json();
            setLoading(false);
            if (!res.ok) {
              setError(data.error || 'Google sign-in failed');
              return;
            }
            handleLoginResponse(data);
          },
        });
        google.accounts.id.prompt();
      } else {
        // Fallback: popup
        const w = 500,
          h = 600;
        const left = window.screenX + (window.outerWidth - w) / 2;
        const top = window.screenY + (window.outerHeight - h) / 2;
        const popup = window.open(
          `https://accounts.google.com/o/oauth2/v2/auth?` +
            `client_id=${GOOGLE_CLIENT_ID}&` +
            `redirect_uri=${encodeURIComponent(window.location.origin + '/api/auth/callback/google')}&` +
            `response_type=id_token&scope=openid email profile&nonce=${crypto.randomUUID()}`,
          'google-signin',
          `width=${w},height=${h},left=${left},top=${top}`
        );
        const handler = (event: MessageEvent) => {
          if (event.origin === window.location.origin && event.data?.idToken) {
            window.removeEventListener('message', handler);
            popup?.close();
            fetch('/api/auth/oauth/google', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ idToken: event.data.idToken }),
            })
              .then(r => r.json())
              .then(data => {
                setLoading(false);
                if (data.error) {
                  setError(data.error);
                  return;
                }
                handleLoginResponse(data);
              });
          }
        };
        window.addEventListener('message', handler);
      }
    } catch {
      setError('Google sign-in failed');
      setLoading(false);
    }
  }, [handleLoginResponse]);

  const handleMfaVerify = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const res = await fetch('/api/auth/mfa/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          challengeToken: mfaChallenge,
          code: mfaCode,
          method: useRecovery ? 'recovery' : 'totp',
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || 'Verification failed');
        return;
      }
      completeAuth(data);
    } catch {
      setError('Service unavailable');
    } finally {
      setLoading(false);
    }
  };

  // MFA challenge view
  if (mfaChallenge) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="w-full max-w-sm space-y-6 rounded-xl border border-border bg-card p-8 shadow-lg">
          <div className="text-center">
            <h1 className="text-2xl font-bold tracking-tight">Two-Factor Auth</h1>
            <p className="mt-1 text-sm text-muted-foreground">
              {useRecovery ? 'Enter a recovery code' : 'Enter your authentication code'}
            </p>
            {mfaMethods.length > 0 && (
              <p className="text-xs text-muted-foreground mt-1">Methods: {mfaMethods.join(', ')}</p>
            )}
          </div>
          <form onSubmit={handleMfaVerify} className="space-y-4">
            {error && (
              <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
                {error}
              </div>
            )}
            <input
              type="text"
              inputMode="numeric"
              autoComplete="one-time-code"
              placeholder={useRecovery ? 'Recovery code' : '000000'}
              value={mfaCode}
              onChange={e => setMfaCode(e.target.value)}
              required
              maxLength={useRecovery ? 20 : 6}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-center text-lg font-mono tracking-widest outline-none ring-ring focus:ring-2"
              autoFocus
            />
            <button
              type="submit"
              disabled={loading || mfaCode.length < 6}
              className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
            >
              {loading ? 'Verifying...' : 'Verify'}
            </button>
            <div className="flex justify-between text-xs">
              <button
                type="button"
                onClick={() => {
                  setMfaChallenge(null);
                  setMfaMethods([]);
                  setMfaCode('');
                }}
                className="text-muted-foreground underline"
              >
                Back to login
              </button>
              <button
                type="button"
                onClick={() => {
                  setUseRecovery(!useRecovery);
                  setMfaCode('');
                  setError('');
                }}
                className="text-primary underline"
              >
                {useRecovery ? 'Use authenticator' : 'Use recovery code'}
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <div className="w-full max-w-sm space-y-6 rounded-xl border border-border bg-card p-8 shadow-lg">
        <div className="text-center">
          <h1 className="text-2xl font-bold tracking-tight">Tracker</h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Feature requests, bugs &amp; task management
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {error}
            </div>
          )}

          <div className="space-y-1.5">
            <label htmlFor="email" className="text-sm font-medium">
              Email
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={e => setEmail(e.target.value)}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
              placeholder="you@example.com"
            />
          </div>

          <div className="space-y-1.5">
            <label htmlFor="password" className="text-sm font-medium">
              Password
            </label>
            <input
              id="password"
              type="password"
              required
              value={password}
              onChange={e => setPassword(e.target.value)}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
          >
            {loading ? 'Signing in...' : 'Sign in'}
          </button>
        </form>

        {GOOGLE_CLIENT_ID && (
          <>
            <div className="flex items-center gap-3 text-xs text-muted-foreground">
              <hr className="flex-1 border-border" />
              or
              <hr className="flex-1 border-border" />
            </div>
            <button
              type="button"
              onClick={handleGoogleSignIn}
              disabled={loading}
              className="w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-muted disabled:opacity-50 flex items-center justify-center gap-2"
            >
              <svg className="h-4 w-4" viewBox="0 0 24 24">
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
              </svg>
              Sign in with Google
            </button>
          </>
        )}

        <p className="text-center text-xs text-muted-foreground">
          Uses platform-service credentials
        </p>
      </div>
    </div>
  );
}
