import React, { useEffect, useState } from 'react';
import {
  IonButton,
  IonContent,
  IonHeader,
  IonIcon,
  IonItem,
  IonLabel,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import {
  waterOutline,
  fitnessOutline,
  shieldCheckmarkOutline,
} from 'ionicons/icons';
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);

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

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      setEmail(data.session?.user.email ?? null);
      setSessionChecked(true);
    });
  }, []);

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    history.replace('/auth');
  };

  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>
            <IonButton
              expand="block"
              fill="outline"
              color="danger"
              className="account-secondary-button"
              onClick={handleSignOut}
            >
              Sign Out
            </IonButton>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Account;