import React, { useState, useEffect } from 'react';
import ChatInterface from './components/ChatInterface';
import { LanguageProvider } from './contexts/LanguageContext';
import LanguageSelector from './components/LanguageSelector';
import FeedbackPage from './components/FeedbackPage';
import UserFeedbackAnalysisPage from './components/UserFeedbackAnalysisPage';
import { Review } from './types';

function App() {
  const [page, setPage] = useState<'chat' | 'feedback' | 'userexperience'>('chat');
  
  // Initialize reviews from localStorage
  const [reviews, setReviews] = useState<Review[]>(() => {
    try {
      const storedReviews = window.localStorage.getItem('emotimate-reviews');
      return storedReviews ? JSON.parse(storedReviews) : [];
    } catch (error) {
      console.error("Error reading reviews from localStorage", error);
      return [];
    }
  });

  // Save reviews to localStorage whenever they change
  useEffect(() => {
    try {
      window.localStorage.setItem('emotimate-reviews', JSON.stringify(reviews));
    } catch (error) {
      console.error("Error saving reviews to localStorage", error);
    }
  }, [reviews]);

  const handleAddReview = (review: Omit<Review, 'id' | 'date'>) => {
    const newReview: Review = {
      ...review,
      id: `User-${Math.random().toString(36).substr(2, 4).toUpperCase()}`,
      date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
    };
    setReviews(prev => [...prev, newReview]);
  };
  
  const handleDeleteReview = (reviewId: string) => {
    setReviews(prev => prev.filter(review => review.id !== reviewId));
  };

  const buttonClasses = "text-sm sm:text-base text-slate-600 hover:text-blue-600 font-medium transition-colors px-3 py-2 rounded-lg hover:bg-slate-200";

  return (
    <LanguageProvider>
      <div className="flex flex-col h-screen bg-slate-100 font-sans">
        <header className="w-full bg-white shadow-md px-4 py-3 sm:p-4 z-10">
          <div className="max-w-4xl mx-auto flex justify-between items-center">
            <h1 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-blue-500 to-violet-500 text-transparent bg-clip-text">EmotiMate</h1>
            <div className="flex items-center gap-2 sm:gap-4">
              {page === 'chat' && (
                <>
                  <LanguageSelector />
                  <button onClick={() => setPage('feedback')} className={buttonClasses} aria-label="Go to feedback page">
                    Feedback
                  </button>
                  <button onClick={() => setPage('userexperience')} className={buttonClasses} aria-label="Go to user experience page">
                    User Experience
                  </button>
                </>
              )}
              {page === 'feedback' && (
                <>
                  <button onClick={() => setPage('userexperience')} className={buttonClasses} aria-label="Go to user experience page">
                    User Experience
                  </button>
                  <button onClick={() => setPage('chat')} className={buttonClasses} aria-label="Go back to home page">
                    Home
                  </button>
                </>
              )}
              {page === 'userexperience' && (
                <>
                  <button onClick={() => setPage('feedback')} className={buttonClasses} aria-label="Go to feedback page">
                    Feedback
                  </button>
                   <button onClick={() => setPage('chat')} className={buttonClasses} aria-label="Go back to home page">
                    Home
                  </button>
                </>
              )}
            </div>
          </div>
        </header>
        <main className="flex-grow overflow-auto custom-scrollbar">
          {page === 'chat' && <ChatInterface />}
          {page === 'feedback' && <FeedbackPage onGoHome={() => setPage('chat')} onAddReview={handleAddReview} />}
          {page === 'userexperience' && <UserFeedbackAnalysisPage reviews={reviews} onDeleteReview={handleDeleteReview} />}
        </main>
      </div>
    </LanguageProvider>
  );
}

export default App;