/*
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 } from 'react';

function SidebarEnhanced({
  conversations,
  currentConversationId,
  onSelectConversation,
  onNewConversation,
  onDeleteConversation,
  onRenameConversation,
  onExportConversation,
  isOpen,
  onToggle,
  onSettingsClick
}) {
  const [searchQuery, setSearchQuery] = useState('');
  const [editingId, setEditingId] = useState(null);
  const [editTitle, setEditTitle] = useState('');

  const handleDelete = (e, id) => {
    e.stopPropagation();
    if (window.confirm('Are you sure you want to delete this conversation?')) {
      onDeleteConversation(id);
    }
  };

  const handleRename = (e, conv) => {
    e.stopPropagation();
    setEditingId(conv.id);
    setEditTitle(conv.title);
  };

  const handleSaveRename = (e, id) => {
    e.stopPropagation();
    if (editTitle.trim()) {
      onRenameConversation(id, editTitle.trim());
    }
    setEditingId(null);
    setEditTitle('');
  };

  const handleCancelRename = (e) => {
    e.stopPropagation();
    setEditingId(null);
    setEditTitle('');
  };

  const handleExport = (e, conv) => {
    e.stopPropagation();
    onExportConversation(conv);
  };

  const filteredConversations = conversations.filter(conv =>
    conv.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <>
      {isOpen && <div className="sidebar-overlay" onClick={onToggle}></div>}
      <aside className={`sidebar ${isOpen ? 'open' : ''}`}>
        <div className="sidebar-header">
          <button className="new-chat-button" onClick={onNewConversation}>
            <i className="fas fa-plus"></i>
            New Chat
          </button>
          <button className="sidebar-close" onClick={onToggle}>
            <i className="fas fa-times"></i>
          </button>
        </div>

        {conversations.length > 0 && (
          <div className="sidebar-search">
            <input
              type="text"
              placeholder="Search conversations..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="search-input"
            />
            <i className="fas fa-search search-icon"></i>
          </div>
        )}

        <div className="conversation-list">
          {filteredConversations.length === 0 ? (
            <div className="empty-conversations">
              <p>{searchQuery ? 'No conversations found' : 'No conversations yet. Start a new chat!'}</p>
            </div>
          ) : (
            filteredConversations.map(conv => (
              <div
                key={conv.id}
                className={`conversation-item ${currentConversationId === conv.id ? 'active' : ''}`}
                onClick={() => onSelectConversation(conv.id)}
              >
                {editingId === conv.id ? (
                  <div className="conversation-edit" onClick={(e) => e.stopPropagation()}>
                    <input
                      type="text"
                      value={editTitle}
                      onChange={(e) => setEditTitle(e.target.value)}
                      onKeyPress={(e) => {
                        if (e.key === 'Enter') handleSaveRename(e, conv.id);
                        if (e.key === 'Escape') handleCancelRename(e);
                      }}
                      className="conversation-edit-input"
                      autoFocus
                    />
                    <button
                      className="conversation-action-btn"
                      onClick={(e) => handleSaveRename(e, conv.id)}
                      title="Save"
                    >
                      <i className="fas fa-check"></i>
                    </button>
                    <button
                      className="conversation-action-btn"
                      onClick={handleCancelRename}
                      title="Cancel"
                    >
                      <i className="fas fa-times"></i>
                    </button>
                  </div>
                ) : (
                  <>
                    <div className="conversation-title">
                      <i className="fas fa-comment"></i>
                      <span>{conv.title}</span>
                    </div>
                    <div className="conversation-actions">
                      <button
                        className="conversation-action-btn"
                        onClick={(e) => handleRename(e, conv)}
                        title="Rename"
                      >
                        <i className="fas fa-edit"></i>
                      </button>
                      <button
                        className="conversation-action-btn"
                        onClick={(e) => handleExport(e, conv)}
                        title="Export"
                      >
                        <i className="fas fa-download"></i>
                      </button>
                      <button
                        className="conversation-action-btn delete"
                        onClick={(e) => handleDelete(e, conv.id)}
                        title="Delete"
                      >
                        <i className="fas fa-trash"></i>
                      </button>
                    </div>
                  </>
                )}
              </div>
            ))
          )}
        </div>
        <div className="sidebar-footer">
          <button className="settings-button" onClick={onSettingsClick}>
            <i className="fas fa-cog"></i>
            Settings
          </button>
          <div className="footer-info">
            <p>ChatGPT Web Interface</p>
            <p className="footer-link">
              <a href="https://rskworld.in/" target="_blank" rel="noopener noreferrer">
                rskworld.in
              </a>
            </p>
          </div>
        </div>
      </aside>
    </>
  );
}

export default SidebarEnhanced;