import React, { useEffect, useState } from 'react';
import {
  IonButton,
  IonContent,
  IonHeader,
  IonIcon,
  IonItem,
  IonLabel,
  IonPage,
  IonTitle,
  IonToolbar,
  IonText,
} from '@ionic/react';
import {
  waterOutline,
  fitnessOutline,
  shieldCheckmarkOutline,
} from 'ionicons/icons';
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
import { Capacitor } from '@capacitor/core';
import { Redirect as RedirectRR, useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import {
  Style,
  setStatusBarBackground,
  setStatusBarStyle,
} from '../utils/statusBar';
import { useIonViewWillEnter } from '@ionic/react';
import runnerDrinkingWaterImage from '../assets/runner-drinking-water-photorealistic.png';

const RedirectAny = RedirectRR as any;

const Account: React.FC = () => {
  const history = useHistory();
  const [sessionChecked, setSessionChecked] = useState(false);
  const [email, setEmail] = useState<string | null>(null);
  const [signingOut, setSigningOut] = useState(false);
  const [signOutError, setSignOutError] = useState('');

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

    supabase.auth.getSession().then(({ data }) => {
      if (!mounted) return;
      setEmail(data.session?.user.email ?? null);
      setSessionChecked(true);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      if (!mounted) return;
      setEmail(session?.user.email ?? null);
      setSessionChecked(true);

      if (!session) {
        history.replace('/auth');
      }
    });

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

  const handleSignOut = async () => {
    setSignOutError('');
    setSigningOut(true);

    try {
      const { error } = await supabase.auth.signOut();

      if (error) {
        setSignOutError(error.message);
        return;
      }

      if (Capacitor.isNativePlatform()) {
        try {
          await FirebaseAuthentication.signOut();
        } catch {
          // Ignore if no native Google session exists.
        }
      }

      setEmail(null);
      history.replace('/auth');
    } catch (error) {
      setSignOutError(
        error instanceof Error
          ? error.message
          : 'Unable to sign out right now.',
      );
    } finally {
      setSigningOut(false);
    }
  };

  if (sessionChecked && !email) {
    return <RedirectAny to="/auth" />;
  }

  return (
    <IonPage>
      <IonHeader className="ion-no-border">
        <IonToolbar>
          <IonTitle>Account</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <div className="dashboard-shell ion-padding account-shell">
          <section className="account-hero-card">
            <div className="account-hero-image-wrap">
              <img
                src={runnerDrinkingWaterImage}
                alt="Runner drinking water after a run"
                className="account-hero-image"
              />
              <div className="account-hero-overlay" />
            </div>

            <div className="account-hero-content">
              <span className="eyebrow">Recovery & account</span>
              <h1>{email ?? 'Loading...'}</h1>
              <p>
                Stay hydrated, stay consistent, and keep your habit history
                safely synced across sessions.
              </p>

              <div className="account-highlight-row">
                <div className="account-highlight-chip">
                  <IonIcon icon={waterOutline} />
                  <span>Recovery mindset</span>
                </div>
                <div className="account-highlight-chip subtle">
                  <IonIcon icon={fitnessOutline} />
                  <span>Built for routines</span>
                </div>
              </div>
            </div>
          </section>

          <div className="stats-card account-details-card">
            <IonItem lines="none" className="account-info-item">
              <IonLabel>
                <h2>Email</h2>
                <p>{email ?? '—'}</p>
              </IonLabel>
            </IonItem>

            <div className="account-trust-row">
              <div className="account-trust-icon">
                <IonIcon icon={shieldCheckmarkOutline} />
              </div>
              <div>
                <h3>Your data is synced</h3>
                <p>
                  Sign in to keep your streaks and progress available whenever
                  you come back.
                </p>
              </div>
            </div>

            <IonButton
              expand="block"
              className="account-primary-button"
              routerLink="/home"
            >
              Back to Habits
            </IonButton>
            {signOutError ? (
              <IonText color="danger">
                <p className="auth-feedback">{signOutError}</p>
              </IonText>
            ) : null}
            <div></div>

            <IonButton
              expand="block"
              fill="outline"
              color="danger"
              className="account-secondary-button"
              onClick={handleSignOut}
              disabled={signingOut}
            >
              {signingOut ? 'Signing Out…' : 'Sign Out'}
            </IonButton>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Account;