/*
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';
import { MarkdownRenderer } from '../utils/markdownRenderer';

function Message({ message, index, onEdit, onDelete, onRegenerate }) {
  const [isHovered, setIsHovered] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [editContent, setEditContent] = useState(message.content);
  const [copied, setCopied] = useState(false);

  const messageClass = message.isUser ? 'message-user' : 'message-ai';
  const messageErrorClass = message.isError ? 'message-error' : '';

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(message.content);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSaveEdit = () => {
    if (editContent.trim() && onEdit) {
      onEdit(index, editContent.trim());
    }
    setIsEditing(false);
  };

  const handleCancelEdit = () => {
    setEditContent(message.content);
    setIsEditing(false);
  };

  const handleDelete = () => {
    if (window.confirm('Are you sure you want to delete this message?')) {
      if (onDelete) onDelete(index);
    }
  };

  return (
    <div
      className={`message ${messageClass} ${messageErrorClass}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="message-avatar">
        {message.isUser ? (
          <i className="fas fa-user"></i>
        ) : (
          <i className="fas fa-robot"></i>
        )}
      </div>
      <div className="message-content">
        {isEditing && message.isUser ? (
          <div className="message-edit">
            <textarea
              value={editContent}
              onChange={(e) => setEditContent(e.target.value)}
              className="message-edit-input"
              rows="4"
              autoFocus
            />
            <div className="message-edit-actions">
              <button onClick={handleSaveEdit} className="btn-save">
                <i className="fas fa-check"></i> Save
              </button>
              <button onClick={handleCancelEdit} className="btn-cancel">
                <i className="fas fa-times"></i> Cancel
              </button>
            </div>
          </div>
        ) : (
          <>
            <div className="message-text">
              {message.isUser || message.isError ? (
                <div className="message-plain-text">{message.content}</div>
              ) : (
                <MarkdownRenderer content={message.content} />
              )}
            </div>
            {message.timestamp && (
              <div className="message-footer">
                <div className="message-timestamp">
                  {new Date(message.timestamp).toLocaleTimeString()}
                </div>
                {isHovered && (
                  <div className="message-actions">
                    <button
                      onClick={handleCopy}
                      className="message-action-btn"
                      title="Copy message"
                    >
                      <i className={`fas ${copied ? 'fa-check' : 'fa-copy'}`}></i>
                    </button>
                    {message.isUser && onEdit && (
                      <button
                        onClick={handleEdit}
                        className="message-action-btn"
                        title="Edit message"
                      >
                        <i className="fas fa-edit"></i>
                      </button>
                    )}
                    {onDelete && (
                      <button
                        onClick={handleDelete}
                        className="message-action-btn"
                        title="Delete message"
                      >
                        <i className="fas fa-trash"></i>
                      </button>
                    )}
                    {!message.isUser && onRegenerate && (
                      <button
                        onClick={() => onRegenerate(index)}
                        className="message-action-btn"
                        title="Regenerate response"
                      >
                        <i className="fas fa-redo"></i>
                      </button>
                    )}
                  </div>
                )}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

export default Message;