App.tsx

import React, { useState, useCallback } from 'react';
import { Sidebar } from './components/Sidebar';
import { Header } from './components/Header';
import { Welcome } from './components/Welcome';
import { ContentDisplay } from './components/ContentDisplay';
import { Quiz } from './components/Quiz';
import { ScenarioSimulator } from './components/ScenarioSimulator';
import { InvestmentStreak } from './components/InvestmentStreak';
import { InvestmentGoals } from './components/InvestmentGoals';
import { FinancialTips } from './components/FinancialTips';
import { LifeInsuranceCalculator } from './components/LifeInsuranceCalculator';
import { HealthInsuranceCalculator } from './components/HealthInsuranceCalculator';
import { SIPCalculator } from './components/SIPCalculator';
import { MutualFundCalculator } from './components/MutualFundCalculator';
import { Chatbot } from './components/Chatbot';
import { CreditScoreCalculator } from './components/CreditScoreCalculator';
import { Topic, View } from './types';
import type { TopicKey } from './types';
import { TOPICS } from './constants';

const App: React.FC = () => {
  const [activeView, setActiveView] = useState<View>({ type: 'welcome' });
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const handleSelectView = useCallback((view: View) => {
    setActiveView(view);
    if (window.innerWidth < 768) { // Tailwind's md breakpoint
      setIsSidebarOpen(false);
    }
  }, []);

  const toggleSidebar = useCallback(() => {
    setIsSidebarOpen(prev => !prev);
  }, []);

  const renderContent = () => {
    switch (activeView.type) {
      case 'welcome':
        return <Welcome onTopicSelect={(topicKey) => handleSelectView({ type: 'topic', key: topicKey })} />;
      case 'topic':
        const topic = TOPICS.find(t => t.key === activeView.key);
        return topic ? <ContentDisplay key={topic.key} topic={topic} /> : <div>Topic not found</div>;
      case 'quiz':
        const quizTopic = TOPICS.find(t => t.key === activeView.key);
        return quizTopic ? <Quiz key={quizTopic.key} topic={quizTopic} /> : <div>Topic not found</div>;
      case 'simulator':
        return <ScenarioSimulator />;
      case 'streak':
        return <InvestmentStreak />;
      case 'goals':
        return <InvestmentGoals />;
      case 'tips':
        return <FinancialTips />;
      case 'life_insurance_calculator':
        return <LifeInsuranceCalculator />;
      case 'health_insurance_calculator':
        return <HealthInsuranceCalculator />;
      case 'sip_calculator':
        return <SIPCalculator />;
      case 'mutual_fund_calculator':
        return <MutualFundCalculator />;
      case 'credit_score_calculator':
        return <CreditScoreCalculator />;
      case 'chatbot':
        return <Chatbot />;
      default:
        return <Welcome onTopicSelect={(topicKey) => handleSelectView({ type: 'topic', key: topicKey })} />;
    }
  };

  return (
    <div className="flex h-screen">
      <Sidebar onSelectView={handleSelectView} activeView={activeView} isOpen={isSidebarOpen} setIsOpen={setIsSidebarOpen} />
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header onToggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
        <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 sm:p-6 md:p-8">
          {renderContent()}
        </main>
      </div>
    </div>
  );
};

export default App;