/*
Project: ChatGPT Web Interface
Developer: Molla Samser
Email: help@rskworld.in
Phone: +91 93305 39277
Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
Website: https://rskworld.in/
Year: 2026
*/

import React, { useState, useEffect, useCallback } from 'react';
import ChatInterface from './components/ChatInterface';
import SidebarEnhanced from './components/SidebarEnhanced';
import SettingsPanel from './components/SettingsPanel';
import { applyTheme, themes } from './utils/theme';
import './styles/App.css';

function App() {
  const [conversations, setConversations] = useState([]);
  const [currentConversationId, setCurrentConversationId] = useState(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [theme, setTheme] = useState(() => localStorage.getItem('chatgpt-theme') || 'light');
  const [settings, setSettings] = useState(() => {
    const saved = localStorage.getItem('chatgpt-settings');
    return saved ? JSON.parse(saved) : {
      model: 'gpt-3.5-turbo',
      temperature: 0.7,
      maxTokens: 1000,
      useStreaming: false
    };
  });

  useEffect(() => {
    applyTheme(theme);
  }, [theme]);

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

  useEffect(() => {
    const savedConversations = localStorage.getItem('chatgpt-conversations');
    if (savedConversations) {
      const parsed = JSON.parse(savedConversations);
      setConversations(parsed);
      if (parsed.length > 0 && !currentConversationId) {
        setCurrentConversationId(parsed[0].id);
      }
    } else {
      const newConversation = {
        id: Date.now(),
        title: 'New Conversation',
        messages: [],
        createdAt: new Date().toISOString()
      };
      setConversations([newConversation]);
      setCurrentConversationId(newConversation.id);
    }
  }, []);

  useEffect(() => {
    if (conversations.length > 0) {
      localStorage.setItem('chatgpt-conversations', JSON.stringify(conversations));
    }
  }, [conversations]);

  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyPress = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        setSidebarOpen(prev => !prev);
      }
      if ((e.ctrlKey || e.metaKey) && e.key === ',') {
        e.preventDefault();
        setSettingsOpen(prev => !prev);
      }
      if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
        e.preventDefault();
        handleNewConversation();
      }
    };
    window.addEventListener('keydown', handleKeyPress);
    return () => window.removeEventListener('keydown', handleKeyPress);
  }, [handleNewConversation]);

  const getCurrentConversation = () => {
    return conversations.find(conv => conv.id === currentConversationId);
  };

  const handleNewConversation = useCallback(() => {
    const newConversation = {
      id: Date.now(),
      title: 'New Conversation',
      messages: [],
      createdAt: new Date().toISOString()
    };
    setConversations(prev => [newConversation, ...prev]);
    setCurrentConversationId(newConversation.id);
  }, []);

  const handleSelectConversation = (id) => {
    setCurrentConversationId(id);
  };

  const handleDeleteConversation = (id) => {
    const updated = conversations.filter(conv => conv.id !== id);
    setConversations(updated);
    if (currentConversationId === id && updated.length > 0) {
      setCurrentConversationId(updated[0].id);
    } else if (updated.length === 0) {
      handleNewConversation();
    }
  };

  const handleRenameConversation = (id, newTitle) => {
    setConversations(conversations.map(conv =>
      conv.id === id ? { ...conv, title: newTitle } : conv
    ));
  };

  const handleExportConversation = (conversation) => {
    const dataStr = JSON.stringify(conversation, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `${conversation.title.replace(/[^a-z0-9]/gi, '_')}.json`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  const handleAddMessage = (message, isUser) => {
    const messageWithId = { ...message, id: message.id || Date.now(), timestamp: new Date().toISOString() };
    const updatedConversations = conversations.map(conv => {
      if (conv.id === currentConversationId) {
        const updatedMessages = [...conv.messages, messageWithId];
        const title = conv.messages.length === 0 && isUser
          ? message.content.substring(0, 30) + (message.content.length > 30 ? '...' : '')
          : conv.title;
        return { ...conv, messages: updatedMessages, title };
      }
      return conv;
    });
    setConversations(updatedConversations);
  };

  const handleUpdateMessage = (messageId, updatedContent) => {
    const updatedConversations = conversations.map(conv => {
      if (conv.id === currentConversationId) {
        const updatedMessages = conv.messages.map(msg =>
          (msg.id === messageId || conv.messages.indexOf(msg) === messageId) ? { ...msg, ...updatedContent } : msg
        );
        return { ...conv, messages: updatedMessages };
      }
      return conv;
    });
    setConversations(updatedConversations);
  };

  const handleDeleteMessage = (index) => {
    const updatedConversations = conversations.map(conv => {
      if (conv.id === currentConversationId) {
        const updatedMessages = conv.messages.filter((_, i) => i !== index);
        return { ...conv, messages: updatedMessages };
      }
      return conv;
    });
    setConversations(updatedConversations);
  };

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
    localStorage.setItem('chatgpt-theme', newTheme);
  };

  return (
    <div className="app">
      <SidebarEnhanced
        conversations={conversations}
        currentConversationId={currentConversationId}
        onSelectConversation={handleSelectConversation}
        onNewConversation={handleNewConversation}
        onDeleteConversation={handleDeleteConversation}
        onRenameConversation={handleRenameConversation}
        onExportConversation={handleExportConversation}
        isOpen={sidebarOpen}
        onToggle={toggleSidebar}
        onSettingsClick={() => setSettingsOpen(true)}
      />
      <main className={`main-content ${sidebarOpen ? 'sidebar-open' : ''}`}>
        {currentConversationId ? (
          <ChatInterface
            conversation={getCurrentConversation()}
            onAddMessage={handleAddMessage}
            onUpdateMessage={handleUpdateMessage}
            onDeleteMessage={handleDeleteMessage}
            onToggleSidebar={toggleSidebar}
            settings={settings}
            useStreaming={settings.useStreaming}
          />
        ) : (
          <div className="welcome-screen">
            <h1>Welcome to ChatGPT Web Interface</h1>
            <p>Start a new conversation to begin chatting with AI.</p>
            <button onClick={handleNewConversation} className="btn-primary">
              New Conversation
            </button>
            <div className="keyboard-shortcuts">
              <h3>Keyboard Shortcuts</h3>
              <ul>
                <li><kbd>Ctrl/Cmd</kbd> + <kbd>K</kbd> - Toggle Sidebar</li>
                <li><kbd>Ctrl/Cmd</kbd> + <kbd>N</kbd> - New Conversation</li>
                <li><kbd>Ctrl/Cmd</kbd> + <kbd>,</kbd> - Settings</li>
              </ul>
            </div>
          </div>
        )}
      </main>
      <SettingsPanel
        isOpen={settingsOpen}
        onClose={() => setSettingsOpen(false)}
        settings={settings}
        onSettingsChange={setSettings}
        theme={theme}
        onThemeChange={handleThemeChange}
      />
    </div>
  );
}

export default App;