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 '@token-empire/shared';
import { Sparkles, RefreshCw, WifiOff } 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">
            Token Empire
          </h1>
        </div>
        <p className="text-surface-500 text-sm">Loading...</p>
      </div>
    </div>
  );
}

function BackendErrorScreen({ error, onRetry }: { error: string; onRetry: () => void }) {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-surface-950 to-surface-900">
      <div className="max-w-md w-full mx-4 text-center">
        <div className="inline-flex items-center gap-2 mb-6">
          <Sparkles className="text-accent-light" size={32} />
          <h1 className="text-4xl font-bold bg-gradient-to-r from-accent-light to-accent bg-clip-text text-transparent">
            Token Empire
          </h1>
        </div>

        <div className="bg-surface-900 border border-surface-700 rounded-xl p-6 space-y-4">
          <WifiOff className="mx-auto text-danger" size={40} />
          <h2 className="text-lg font-semibold text-surface-100">Cannot Connect to Server</h2>
          <p className="text-sm text-surface-400">{error}</p>
          <button
            onClick={onRetry}
            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-accent hover:bg-accent-dark text-white font-medium text-sm transition-colors"
          >
            <RefreshCw size={16} /> Retry
          </button>
        </div>
      </div>
    </div>
  );
}

export function App() {
  const { loading: authLoading, backendError, needsInvite, needsPasswordReset, setRegistered, setNeedsPasswordReset, retry } = 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 || !!backendError || needsInvite || needsPasswordReset);

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

  if (backendError) {
    return <BackendErrorScreen error={backendError} onRetry={retry} />;
  }

  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 />;
}