import React from 'react';
import { AppProvider } from './context/AppContext';
import { Header } from './components/Header';
import { VisitorStatsBar } from './components/VisitorStatsBar';
import { ClaimHero } from './components/ClaimHero';
import { CategoryNav, CategoryModal } from './components/CategoryNav';
import { RankingList } from './components/RankingList';
import { TotalGeneratedBanner } from './components/TotalGeneratedBanner';
import { DeveloperPopup } from './components/DeveloperPopup';
import { FloatingScrollPopup } from './components/FloatingScrollPopup';
import { ContentModal } from './components/ContentModal';
import { Footer } from './components/Footer';
import { OutbidModal } from './components/OutbidModal';
import { AdminPanel } from './components/Admin/AdminPanel';
import { SandboxPaymentModal } from './components/SandboxPaymentModal';
import { useApp } from './context/AppContext';

const MainLayout: React.FC = () => {
  const { sandboxPaymentState, closeSandboxModal, handleSandboxCompletion } = useApp();

  return (
    <div
      className="min-h-screen flex flex-col font-sans text-slate-100 selection:bg-emerald-500 selection:text-white transition-colors duration-200"
      style={{
        backgroundColor: 'var(--bg-color, #0A0D0F)',
        color: 'var(--text-color, #F0F4F8)'
      }}
    >
      {/* Header */}
      <Header />

      {/* Dynamic Visitor Info Sub-Bar */}
      <VisitorStatsBar />

      {/* Main Container */}
      <main className="flex-1 w-full">
        {/* Dynamic Claim #1 Hero */}
        <ClaimHero />

        {/* Dynamic Category Navigation with "More" Modal */}
        <CategoryNav />

        {/* Live Ranking Leaderboard List */}
        <RankingList />

        {/* Total Money Generated Banner */}
        <TotalGeneratedBanner />
      </main>

      {/* Footer */}
      <Footer />

      {/* Interactive Modals */}
      <OutbidModal />
      <CategoryModal />
      <DeveloperPopup />
      <FloatingScrollPopup />
      <ContentModal />
      <AdminPanel />

      {/* Sandbox Payment Simulator Modal */}
      {sandboxPaymentState && sandboxPaymentState.isOpen && (
        <SandboxPaymentModal
          transactionId={sandboxPaymentState.transactionId}
          gateway={sandboxPaymentState.gateway}
          amount={sandboxPaymentState.amount}
          listingName={sandboxPaymentState.listingName}
          onComplete={handleSandboxCompletion}
          onCancel={closeSandboxModal}
        />
      )}
    </div>
  );
};

export default function App() {
  return (
    <AppProvider>
      <MainLayout />
    </AppProvider>
  );
}
