import React, { useState, useEffect } from 'react';
import Sidebar from './components/Sidebar';
import AddressBar from './components/AddressBar';
import TabBar from './components/TabBar';
import WebView from './components/WebView';
import AIAssistant from './components/AIAssistant';
import SettingsModal from './components/SettingsModal';
import BookmarksPage from './pages/BookmarksPage';
import HistoryPage from './pages/HistoryPage';
import DownloadsPage from './pages/DownloadsPage';

const App = () => {
  const [tabs, setTabs] = useState([
    { id: 1, title: 'New Tab', url: 'https://www.google.com', active: true }
  ]);
  const [activeTabId, setActiveTabId] = useState(1);
  const [showAIAssistant, setShowAIAssistant] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [currentPage, setCurrentPage] = useState('browser'); // browser, bookmarks, history, downloads
  const [bookmarks, setBookmarks] = useState([]);
  const [history, setHistory] = useState([]);
  const [downloads, setDownloads] = useState([]);

  // Load data from localStorage
  useEffect(() => {
    const savedBookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
    const savedHistory = JSON.parse(localStorage.getItem('history') || '[]');
    const savedDownloads = JSON.parse(localStorage.getItem('downloads') || '[]');
    
    setBookmarks(savedBookmarks);
    setHistory(savedHistory);
    setDownloads(savedDownloads);
  }, []);

  // Save data to localStorage
  useEffect(() => {
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }, [bookmarks]);

  useEffect(() => {
    localStorage.setItem('history', JSON.stringify(history));
  }, [history]);

  useEffect(() => {
    localStorage.setItem('downloads', JSON.stringify(downloads));
  }, [downloads]);

  const addTab = () => {
    const newTab = {
      id: Date.now(),
      title: 'New Tab',
      url: 'https://www.google.com',
      active: true
    };
    setTabs([...tabs.map(tab => ({ ...tab, active: false })), newTab]);
    setActiveTabId(newTab.id);
    setCurrentPage('browser');
  };

  const closeTab = (id) => {
    if (tabs.length <= 1) return;
    const newTabs = tabs.filter(tab => tab.id !== id);
    if (tabs.find(tab => tab.id === id)?.active) {
      newTabs[0].active = true;
      setActiveTabId(newTabs[0].id);
    }
    setTabs(newTabs);
  };

  const switchTab = (id) => {
    setTabs(tabs.map(tab => ({
      ...tab,
      active: tab.id === id
    })));
    setActiveTabId(id);
  };

  const updateTab = (id, updates) => {
    setTabs(tabs.map(tab => 
      tab.id === id ? { ...tab, ...updates } : tab
    ));
  };

  const addBookmark = (bookmark) => {
    setBookmarks([...bookmarks, bookmark]);
  };

  const removeBookmark = (url) => {
    setBookmarks(bookmarks.filter(b => b.url !== url));
  };

  const addToHistory = (entry) => {
    setHistory([entry, ...history.slice(0, 99)]); // Keep last 100 entries
  };

  const addDownload = (download) => {
    setDownloads([download, ...downloads]);
  };

  const activeTab = tabs.find(tab => tab.id === activeTabId) || tabs[0];

  return (
    <div className="flex h-screen bg-gray-900 text-white overflow-hidden">
      <Sidebar 
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        showAIAssistant={showAIAssistant}
        setShowAIAssistant={setShowAIAssistant}
        setShowSettings={setShowSettings}
        addTab={addTab}
      />
      
      <div className="flex flex-col flex-1">
        <AddressBar 
          activeTab={activeTab}
          updateTab={updateTab}
          addTab={addTab}
          setCurrentPage={setCurrentPage}
        />
        
        <TabBar 
          tabs={tabs}
          activeTabId={activeTabId}
          switchTab={switchTab}
          closeTab={closeTab}
          addTab={addTab}
        />
        
        {currentPage === 'browser' ? (
          <WebView 
            activeTab={activeTab}
            updateTab={updateTab}
            addToHistory={addToHistory}
            addDownload={addDownload}
          />
        ) : currentPage === 'bookmarks' ? (
          <BookmarksPage 
            bookmarks={bookmarks}
            removeBookmark={removeBookmark}
            setCurrentPage={setCurrentPage}
          />
        ) : currentPage === 'history' ? (
          <HistoryPage 
            history={history}
            setCurrentPage={setCurrentPage}
          />
        ) : (
          <DownloadsPage 
            downloads={downloads}
            setCurrentPage={setCurrentPage}
          />
        )}
      </div>
      
      {showAIAssistant && (
        <AIAssistant 
          activeTab={activeTab}
          onClose={() => setShowAIAssistant(false)}
        />
      )}
      
      {showSettings && (
        <SettingsModal 
          onClose={() => setShowSettings(false)}
        />
      )}
    </div>
  );
};

export default App;