import { useState, useEffect } from 'react';
import { useGameStore } from '@/store';
import { MainLayout } from '@/components/layout/MainLayout';
import { NewGameScreen } from '@/components/game/NewGameScreen';
import { OfflineCatchUp } from '@/components/game/OfflineCatchUp';
import { InviteGateScreen } from '@/components/game/InviteGateScreen';
import { useGameLoop } from '@/hooks/useGameLoop';
import { useAuthGate } from '@/hooks/useAuthGate';
import { TICK_INTERVAL_MS } from '@ai-tycoon/shared';
import { Sparkles } from 'lucide-react';

function LoadingScreen() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-surface-950 to-surface-900">
      <div className="text-center">
        <div className="inline-flex items-center gap-2 mb-4">
          <Sparkles className="text-accent-light animate-pulse" size={32} />
          <h1 className="text-4xl font-bold bg-gradient-to-r from-accent-light to-accent bg-clip-text text-transparent">
            AI Tycoon
          </h1>
        </div>
        <p className="text-surface-500 text-sm">Loading...</p>
      </div>
    </div>
  );
}

export function App() {
  const { loading: authLoading, needsInvite, needsPasswordReset, setRegistered, setNeedsPasswordReset } = useAuthGate();
  const companyName = useGameStore((s) => s.meta.companyName);
  const lastTickTimestamp = useGameStore((s) => s.meta.lastTickTimestamp);
  const [catchUpTicks, setCatchUpTicks] = useState<number | null>(null);
  const [catchUpDone, setCatchUpDone] = useState(false);

  useEffect(() => {
    if (!companyName || catchUpDone) return;
    const elapsed = Date.now() - lastTickTimestamp;
    const missed = Math.floor(elapsed / TICK_INTERVAL_MS);
    if (missed > 10) {
      setCatchUpTicks(missed);
    } else {
      setCatchUpDone(true);
    }
  }, [companyName, lastTickTimestamp, catchUpDone]);

  useGameLoop(!catchUpDone || authLoading || needsInvite || needsPasswordReset);

  if (authLoading) {
    return <LoadingScreen />;
  }

  if (needsInvite || needsPasswordReset) {
    return (
      <InviteGateScreen
        onRegistered={() => {
          setRegistered(true);
          setNeedsPasswordReset(false);
        }}
      />
    );
  }

  if (!companyName) {
    return <NewGameScreen />;
  }

  if (catchUpTicks !== null && !catchUpDone) {
    return (
      <OfflineCatchUp
        missedTicks={catchUpTicks}
        onComplete={() => setCatchUpDone(true)}
      />
    );
  }

  return <MainLayout />;
}