import React, { useRef, useEffect, useState } from 'react';
import ChromeTabBar from './ChromeTabBar';
import ChromeAddressBar from './ChromeAddressBar';
import ChromeBookmarkBar from './ChromeBookmarkBar';
import SummaryPanel from './SummaryPanel';
import ScriptPanel from './ScriptPanel';
import IframeManager, { IframeManagerRef } from './IframeManager';
import MessageHandler from './MessageHandler';
import { useBrowserState } from '@/hooks/useBrowserState';
import { useChromeTabs } from '@/hooks/useChromeTabs';

const Browser = () => {
  const iframeRef = useRef<IframeManagerRef>(null);
  const [showBookmarkBar] = useState(true);
  const [showScriptPanel, setShowScriptPanel] = useState(false);
  
  const {
    bookmarks,
    summary,
    isSummaryVisible,
    canGoBack,
    canGoForward,
    loadUrl,
    goBack,
    goForward,
    addBookmark,
    setSummaryAndShow,
    hideSummary
  } = useBrowserState();

  const {
    tabs,
    activeTab,
    addNewTab,
    selectTab,
    closeTab,
    updateTabTitle,
    updateTabUrl
  } = useChromeTabs();

  const loadUrlIntoIframe = async (url: string, pushToHistory = true) => {
    if (iframeRef.current && activeTab) {
      await iframeRef.current.loadUrl(url);
      updateTabUrl(activeTab.id, url);
      if (pushToHistory) {
        await loadUrl(url, true);
      }
    }
  };

  const handleBack = async () => {
    const prevUrl = goBack();
    if (prevUrl) {
      await loadUrlIntoIframe(prevUrl, false);
    }
  };

  const handleForward = async () => {
    const nextUrl = goForward();
    if (nextUrl) {
      await loadUrlIntoIframe(nextUrl, false);
    }
  };

  const handleRefresh = () => {
    if (iframeRef.current) {
      iframeRef.current.refresh();
    }
  };

  const handleHome = () => {
    const homeUrl = 'https://www.example.com/';
    loadUrlIntoIframe(homeUrl);
  };

  const handleSummarize = () => {
    if (iframeRef.current) {
      iframeRef.current.requestSummary();
    }
  };

  const handleShowScriptPanel = () => {
    setShowScriptPanel(true);
  };

  const handleCloseScriptPanel = () => {
    setShowScriptPanel(false);
  };

  const handleInjectScript = (script: string) => {
    if (iframeRef.current) {
      iframeRef.current.injectScript(script);
    }
  };

  const handleNavigateToBookmark = (url: string) => {
    loadUrlIntoIframe(url);
  };

  const handleTitleChange = (title: string) => {
    if (activeTab) {
      updateTabTitle(activeTab.id, title);
    }
  };

  useEffect(() => {
    if (activeTab) {
      loadUrlIntoIframe(activeTab.url);
    }
  }, [activeTab?.id]);

  useEffect(() => {
    // Load default page for initial tab
    const defaultUrl = 'https://www.example.com/';
    loadUrlIntoIframe(defaultUrl);
  }, []);

  return (
    <div className="h-screen w-screen overflow-hidden bg-gray-100 flex flex-col">
      <MessageHandler
        onNavigate={loadUrlIntoIframe}
        onSummary={setSummaryAndShow}
        onTitleChange={handleTitleChange}
      />
      
      <ChromeTabBar
        tabs={tabs}
        onTabSelect={selectTab}
        onTabClose={closeTab}
        onNewTab={addNewTab}
      />
      
      <ChromeAddressBar
        currentUrl={activeTab?.url}
        onNavigate={loadUrlIntoIframe}
        onBack={handleBack}
        onForward={handleForward}
        onRefresh={handleRefresh}
        onHome={handleHome}
        onBookmark={addBookmark}
        onSummarize={handleSummarize}
        onShowScriptPanel={handleShowScriptPanel}
        canGoBack={canGoBack}
        canGoForward={canGoForward}
      />
      
      <ChromeBookmarkBar
        bookmarks={bookmarks}
        onNavigateToBookmark={handleNavigateToBookmark}
        isVisible={showBookmarkBar}
      />
      
      <div className="relative flex-1">
        <SummaryPanel
          summary={summary}
          isVisible={isSummaryVisible}
          onClose={hideSummary}
        />
        
        {showScriptPanel && (
          <ScriptPanel 
            onInjectScript={handleInjectScript}
            onClose={handleCloseScriptPanel}
          />
        )}
        
        <IframeManager
          ref={iframeRef}
          onTitleChange={handleTitleChange}
        />
      </div>
    </div>
  );
};

export default Browser;