import React, { useMemo, useState } from 'react';
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonContent,
  IonIcon,
  IonInput,
  IonItem,
  IonLabel,
  IonPage,
  IonSegment,
  IonSegmentButton,
  IonText,
  useIonViewWillEnter,
} from '@ionic/react';
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
import { Capacitor } from '@capacitor/core';
import { Redirect, useHistory } from 'react-router-dom';
import {
  Style,
  setStatusBarBackground,
  setStatusBarStyle,
} from '../utils/statusBar';
import { supabase } from '../supabase';

const Auth: React.FC = () => {
  const history = useHistory();
  const [mode, setMode] = useState<'login' | 'signup'>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [googleLoading, setGoogleLoading] = useState(false);
  const [appleLoading, setAppleLoading] = useState(false);
  const [error, setError] = useState('');
  const [info, setInfo] = useState('');
  const [verificationMessage, setVerificationMessage] = useState('');
  const [sessionChecked, setSessionChecked] = useState(false);
  const [hasSession, setHasSession] = useState(false);

  const showError = (msg: string) => {
    setError(msg);
    setTimeout(() => {
      setError((current) => (current === msg ? '' : current));
    }, 4000);
  };

  useIonViewWillEnter(() => {
    setStatusBarStyle(Style.Dark);
    setStatusBarBackground('#f6f7fb');
  });

  React.useEffect(() => {
    let mounted = true;

    supabase.auth.getSession().then(({ data }) => {
      if (!mounted) return;
      setHasSession(Boolean(data.session));
      setSessionChecked(true);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      if (!mounted) return;
      setHasSession(Boolean(session));
      setSessionChecked(true);
    });

    return () => {
      mounted = false;
      subscription.unsubscribe();
    };
  }, []);

  const formValid = useMemo(() => {
    return email.trim().length > 3 && password.length >= 6;
  }, [email, password]);

  const handleSubmit = async () => {
    setError('');
    setInfo('');
    setVerificationMessage('');
    setLoading(true);

    try {
      if (mode === 'login') {
        const { error: signInError } = await supabase.auth.signInWithPassword({
          email: email.trim(),
          password,
        });

        if (signInError) {
          showError(signInError.message);
          return;
        }

        history.replace('/home');
        return;
      }

      const { data, error: signUpError } = await supabase.auth.signUp({
        email: email.trim(),
        password,
      });

      if (signUpError) {
        showError(signUpError.message);
        return;
      }

      if (data.session) {
        history.replace('/home');
        return;
      }

      setVerificationMessage(
        'Account created! Check your email for a verification link.'
      );
      setInfo('Once verified, come back and sign in.');
    } finally {
      setLoading(false);
    }
  };

  const handleGoogleLogin = async () => {
    setError('');
    setInfo('');
    setVerificationMessage('');
    setGoogleLoading(true);

    if (!Capacitor.isNativePlatform()) {
      showError(
        'Google Sign-In is only available in the native app. Use email to sign in here.'
      );
      setGoogleLoading(false);
      return;
    }

    try {
      const result = await FirebaseAuthentication.signInWithGoogle();
      const idToken = result.credential?.idToken;

      if (!idToken) {
        showError('Google sign-in did not return an ID token.');
        return;
      }

      const { error: googleAuthError } = await supabase.auth.signInWithIdToken({
        provider: 'google',
        token: idToken,
      });

      if (googleAuthError) {
        showError(googleAuthError.message);
        return;
      }

      history.replace('/home');
    } catch (err) {
      const message =
        err instanceof Error ? err.message : 'Google sign-in failed.';
      showError(message);
    } finally {
      setGoogleLoading(false);
    }
  };

  const handleAppleLogin = async () => {
    setError('');
    setInfo('');
    setVerificationMessage('');
    setAppleLoading(true);

    if (!Capacitor.isNativePlatform()) {
      showError(
        'Apple Sign-In is only available in the native app. Use email to sign in here.'
      );
      setAppleLoading(false);
      return;
    }

    try {
      const result = await FirebaseAuthentication.signInWithApple({
        skipNativeAuth: true,
      });
      const idToken = result.credential?.idToken;
      const rawNonce = result.credential?.nonce;

      if (!idToken) {
        showError('Apple sign-in did not return an ID token.');
        return;
      }

      const { error: appleAuthError } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: idToken,
        nonce: rawNonce || undefined,
      });

      if (appleAuthError) {
        showError(appleAuthError.message);
        return;
      }

      history.replace('/home');
    } catch (err) {
      const message =
        err instanceof Error ? err.message : 'Apple sign-in failed.';
      showError(message);
    } finally {
      setAppleLoading(false);
    }
  };

  if (sessionChecked && hasSession) {
    return <Redirect to="/home" />;
  }

  return (
    <IonPage>
      <IonContent fullscreen style={{ '--background': '#f6f7fb' }}>
        <div className="auth-shell">
          <div className="auth-hero">
            <span className="eyebrow">Protect your streaks</span>
            <h1>Build habits that actually stick.</h1>
            <p>
              Track daily wins, recover faster from misses, and see which habits
              are getting real momentum.
            </p>
          </div>

          <IonCard className="auth-card">
            <IonCardContent>
              <IonSegment
                value={mode}
                onIonChange={(e) =>
                  setMode(e.detail.value as 'login' | 'signup')
                }
              >
                <IonSegmentButton value="login">
                  <IonLabel>Login</IonLabel>
                </IonSegmentButton>
                <IonSegmentButton value="signup">
                  <IonLabel>Sign Up</IonLabel>
                </IonSegmentButton>
              </IonSegment>

              {verificationMessage ? (
                <div className="auth-message-block">
                  <h2>Check your inbox</h2>
                  <p>{verificationMessage}</p>
                  <IonText color="medium">
                    <p>{info}</p>
                  </IonText>
                  <IonButton fill="clear" onClick={() => setMode('login')}>
                    Back to Login
                  </IonButton>
                </div>
              ) : (
                <div className="auth-form">
                  <IonItem lines="none" className="auth-input-item">
                    <IonInput
                      type="email"
                      label="Email"
                      labelPlacement="stacked"
                      value={email}
                      placeholder="you@example.com"
                      onIonInput={(e) => setEmail(e.detail.value ?? '')}
                    />
                  </IonItem>

                  <IonItem lines="none" className="auth-input-item">
                    <IonInput
                      type="password"
                      label="Password"
                      labelPlacement="stacked"
                      value={password}
                      placeholder="At least 6 characters"
                      onIonInput={(e) => setPassword(e.detail.value ?? '')}
                    />
                  </IonItem>

                  {error ? (
                    <IonText color="danger">
                      <p className="auth-feedback">{error}</p>
                    </IonText>
                  ) : null}

                  {info ? (
                    <IonText color="medium">
                      <p className="auth-feedback">{info}</p>
                    </IonText>
                  ) : null}

                  <IonButton
                    expand="block"
                    disabled={
                      !formValid || loading || googleLoading || appleLoading
                    }
                    onClick={handleSubmit}
                  >
                    {loading
                      ? 'Please wait…'
                      : mode === 'login'
                        ? 'Log In'
                        : 'Create Account'}
                  </IonButton>

                  {mode === 'login' ? (
                    <>
                      <div className="auth-divider">
                        <span>or</span>
                      </div>

                      <IonButton
                        expand="block"
                        fill="outline"
                        className="google-auth-button"
                        disabled={loading || googleLoading || appleLoading}
                        onClick={handleGoogleLogin}
                      >
                        <span
                          slot="start"
                          className="google-svg-wrap"
                          style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            marginRight: '8px',
                          }}
                        >
                          <svg
                            width="18"
                            height="18"
                            viewBox="0 0 24 24"
                            style={{ display: 'block' }}
                          >
                            <path
                              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                              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.93l3.66-2.84z"
                              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>
                        </span>
                        {googleLoading ? 'Connecting…' : 'Continue with Google'}
                      </IonButton>

                      <IonButton
                        expand="block"
                        fill="outline"
                        className="apple-auth-button"
                        disabled={loading || googleLoading || appleLoading}
                        onClick={handleAppleLogin}
                      >
                        <span
                          slot="start"
                          style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            marginRight: '8px',
                          }}
                        >
                          <svg
                            width="18"
                            height="18"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                            style={{ display: 'block' }}
                          >
                            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
                          </svg>
                        </span>
                        {appleLoading ? 'Connecting…' : 'Continue with Apple'}
                      </IonButton>
                    </>
                  ) : null}
                </div>
              )}
            </IonCardContent>
          </IonCard>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Auth;