import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useAppSelector, useAppDispatch } from '../stores/hooks';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import BaseButton from '../components/BaseButton';
import { logoutUser, findMe } from '../stores/authSlice';

export default function Starter() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { currentUser, token } = useAppSelector((state) => state.auth);
  
  // Hydrate auth state if token exists but currentUser doesn't
  useEffect(() => {
    if (token && !currentUser) {
      dispatch(findMe());
    }
  }, [token, currentUser, dispatch]);

  const handleLogout = () => {
    dispatch(logoutUser());
    router.push('/login');
  };

  // If not authenticated, show a minimal landing with Login CTA
  if (!token) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
        <Head>
          <title>{getPageTitle('The Power Suite')}</title>
        </Head>
        <div className="max-w-2xl w-full text-center space-y-8">
          <h1 className="text-4xl md:text-5xl font-bold text-[#091EAA] tracking-tight">
            Zetas in Corporate America: The Power Suite
          </h1>
          <p className="text-xl text-gray-600 font-light">
            A private executive directory connecting Power Suite members across industries, regions, and leadership levels.
          </p>
          <div className="pt-8">
            <BaseButton
              href="/login"
              label="Login to Access"
              color="info"
              className="px-12 py-3 text-lg rounded-none bg-[#091EAA] hover:bg-[#0055AA] border-none shadow-lg"
            />
          </div>
        </div>
      </div>
    );
  }

  // Option C Landing Page for Authenticated Users
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
      <Head>
        <title>{getPageTitle('Home')}</title>
      </Head>
      <div className="max-w-3xl w-full text-center space-y-12">
        <div className="space-y-4">
          <h1 className="text-4xl md:text-6xl font-bold text-[#091EAA] tracking-tight">
            Zetas in Corporate America: The Power Suite
          </h1>
          <p className="text-xl md:text-2xl text-gray-600 font-light max-w-2xl mx-auto">
            A private executive directory connecting Power Suite members across industries, regions, and leadership levels.
          </p>
        </div>

        <div className="flex flex-col items-center space-y-6 pt-4">
          <Link 
            href="/member_profiles/member_profiles-list"
            className="px-16 py-4 text-xl font-bold text-white rounded-none bg-[#091EAA] hover:bg-[#0055AA] border-none shadow-xl transition-all inline-block"
          >
            Enter Executive Directory
          </Link>
          
          <div className="flex flex-wrap justify-center gap-x-8 gap-y-4 pt-4 text-gray-500 font-medium uppercase tracking-widest text-xs">
            <Link href="/profile" className="hover:text-[#091EAA] transition-colors">
              Update My Profile
            </Link>
            <Link href="/profile/reconfirm" className="hover:text-[#091EAA] transition-colors">
              Reconfirm My Profile
            </Link>
            <button 
              onClick={handleLogout}
              className="hover:text-red-600 transition-colors uppercase tracking-widest text-xs font-medium"
            >
              Log Out
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};