import React from 'react';
import { AnimatePresence } from 'framer-motion';
import { useJobStore } from '@/store/appStore';
import { HomePage, WorkflowPage, JobListPage, SettingsModal } from '@/components/pages';
import Toast from '@/components/common/Toast';
import { jobsAPI } from '@/utils/api';

const App: React.FC = () => {
  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
  const { 
    currentPage, 
    navigateToHome, 
    navigateToWorkflow, 
    navigateToJobList,
    setTailoringMode,
    setLLMProvider,
    setEnableProfessionalSummary,
    setIncludeCoverLetters,
    notification, 
    setNotification 
  } = useJobStore();

  React.useEffect(() => {
    const syncConfig = async () => {
      try {
        const config = await jobsAPI.getConfig();
        setTailoringMode(config.tailoring_mode);
        setLLMProvider(config.llm_provider);
        setEnableProfessionalSummary(!!config.enable_professional_summary);
        setIncludeCoverLetters(!!config.include_cover_letters);
      } catch {
        // Keep existing defaults if backend config is unavailable.
      }
    };

    void syncConfig();
  }, [setEnableProfessionalSummary, setIncludeCoverLetters, setLLMProvider, setTailoringMode]);

  return (
    <div className="min-h-screen bg-gradient-saas">
      <AnimatePresence mode="wait">
        {currentPage === 'home' && (
          <HomePage
            key="home"
            onGetStarted={navigateToWorkflow}
            onSettingsClick={() => setIsSettingsOpen(true)}
          />
        )}

        {currentPage === 'workflow' && (
          <WorkflowPage
            key="workflow"
            onJobsFound={navigateToJobList}
            onHomeClick={navigateToHome}
            onSettingsClick={() => setIsSettingsOpen(true)}
          />
        )}

        {currentPage === 'joblist' && (
          <JobListPage
            key="joblist"
            onBack={navigateToWorkflow}
            onHomeClick={navigateToHome}
            onSettingsClick={() => setIsSettingsOpen(true)}
          />
        )}
      </AnimatePresence>

      {/* Settings Modal */}
      <SettingsModal
        isOpen={isSettingsOpen}
        onClose={() => setIsSettingsOpen(false)}
      />

      {/* Notification Toast */}
      {notification && (
        <div className="fixed bottom-4 left-4 z-50">
          <Toast
            type={notification.type}
            message={notification.message}
            onClose={() => setNotification(null)}
          />
        </div>
      )}
    </div>
  );
};

export default App;