'use client';

import React, { useState, createContext, useContext } from 'react';
import { useHbfcStore } from '@/lib/use-hbfc-store';
import { Navbar } from '@/components/Navbar';
import { Footer } from '@/components/Footer';
import { WalkathonModal } from '@/components/WalkathonModal';
import { AnnouncementBanner } from '@/components/AnnouncementBanner';

interface ShellContextType {
  openWalkathonModal: () => void;
  store: ReturnType<typeof useHbfcStore>;
}

const ShellContext = createContext<ShellContextType | null>(null);

export function useShell() {
  const context = useContext(ShellContext);
  if (!context) {
    throw new Error('useShell must be used within an AppShell');
  }
  return context;
}

interface AppShellProps {
  activePage: 'home' | 'about' | 'events' | 'membership' | 'gallery' | 'contact' | 'privacy' | 'terms';
  children: React.ReactNode;
}

export function AppShell({ activePage = 'home', children }: AppShellProps) {
  const store = useHbfcStore();

  const [isWalkathonModalOpen, setIsWalkathonModalOpen] = useState(false);

  return (
    <ShellContext.Provider
      value={{
        openWalkathonModal: () => setIsWalkathonModalOpen(true),
        store,
      }}
    >
      <div className="min-h-screen bg-white text-neutral-900 flex flex-col selection:bg-emerald-600 selection:text-white">
        {/* Top Announcement Bar if announcements exist and visible */}
        {store.data.announcements.length > 0 &&
          (store.data.visibleSections?.announcements ?? true) && (
            <AnnouncementBanner
              announcements={store.data.announcements}
              onActionClick={() => {
                window.location.href = '/events';
              }}
            />
          )}

        {/* Global White-Themed Navbar */}
        <Navbar
          data={store.data}
          activeSection={activePage}
          onNavigate={() => {}}
          onOpenWalkathonModal={() => setIsWalkathonModalOpen(true)}
        />

        {/* Main Page Content */}
        <main className="flex-1 w-full pt-20">
          {children}
        </main>

        {/* Global White-Themed Footer */}
        <Footer
          data={store.data}
          onNavigate={() => {}}
          onOpenWalkathonModal={() => setIsWalkathonModalOpen(true)}
        />

        {/* Walkathon Registration Modal */}
        <WalkathonModal
          isOpen={isWalkathonModalOpen}
          onClose={() => setIsWalkathonModalOpen(false)}
          onRegister={store.registerWalkathon}
        />
      </div>
    </ShellContext.Provider>
  );
}