import { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { useAuthStore } from './modules/auth/application/authStore';
import AuthPage from './modules/auth/presentation/AuthPage';
import ChatPage from './modules/chats/presentation/ChatPage';
import AdminPage from './modules/admin/presentation/pages/AdminPage';
import NotificationProvider from './core/presentation/components/ui/NotificationProvider';

export default function App() {
  const { token, user, checkAuth, isLoading } = useAuthStore();

  useEffect(() => {
    checkAuth();
  }, [checkAuth]);

  if (isLoading) {
    return (
      <div className="h-full flex items-center justify-center bg-surface-container-lowest">
        <div className="flex flex-col items-center gap-6">
          <AppLoader />
          <p className="text-on-surface-variant/40 text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">Knot Loading</p>
        </div>
      </div>
    );
  }

  // Simple routing for admin
  if (window.location.pathname.startsWith('/admin')) {
    return <AdminPage />;
  }

  return (
    <>
      <AnimatePresence mode="wait">
        {token && user ? (
          <ChatPage key="chat" />
        ) : (
          <AuthPage key="auth" />
        )}
      </AnimatePresence>
      <NotificationProvider />
    </>
  );
}

function AppLoader() {
  return (
    <div className="relative w-16 h-16">
      <div className="absolute inset-0 rounded-3xl border-2 border-transparent border-t-primary animate-spin shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)]" />
      <div
        className="absolute inset-2 rounded-3xl border-2 border-transparent border-t-primary/60 animate-spin"
        style={{ animationDuration: '0.8s', animationDirection: 'reverse' }}
      />
      <div
        className="absolute inset-4 rounded-3xl border-2 border-transparent border-t-primary/30 animate-spin"
        style={{ animationDuration: '0.6s' }}
      />
    </div>
  );
}