components/Notepad.tsx

import React, { useState, useMemo } from 'react';
import { MessageSender } from '../types';
import { FileText, Edit3, Eye, Code, Copy, Check } from 'lucide-react';
import { marked } from 'marked';
import DOMPurify from 'dompurify';

interface NotepadProps {
  content: string;
  lastUpdatedBy?: MessageSender | null;
  isLoading: boolean;
}

const Notepad: React.FC<NotepadProps> = ({ content, lastUpdatedBy, isLoading }) => {
  const [isPreviewMode, setIsPreviewMode] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  const getSenderColor = (sender?: MessageSender | null) => {
    if (sender === MessageSender.Cognito) return 'text-green-400';
    if (sender === MessageSender.Muse) return 'text-purple-400';
    return 'text-gray-400';
  };

  const processedHtml = useMemo(() => {
    if (isPreviewMode) {
      const rawHtml = marked.parse(content) as string;
      return DOMPurify.sanitize(rawHtml);
    }
    return '';
  }, [content, isPreviewMode]);

  const handleCopyNotepad = async () => {
    try {
      await navigator.clipboard.writeText(content);
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000);
    } catch (err) {
      console.error('无法复制记事本内容: ', err);
      // Optionally, display an error message to the user
    }
  };

  return (
    <div className="h-full flex flex-col bg-slate-800 border-l border-gray-700">
      <header className="p-3 border-b border-gray-700 flex items-center justify-between bg-slate-900">
        <div className="flex items-center">
          <FileText size={20} className="mr-2 text-sky-400" />
          <h2 className="text-lg font-semibold text-sky-400">记事本</h2>
        </div>
        <div className="flex items-center space-x-2">
          {isLoading && <span className="text-xs text-gray-400 italic">AI 思考中...</span>}
          <button
            onClick={handleCopyNotepad}
            className="p-1.5 text-gray-400 hover:text-sky-400 transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-sky-500 rounded-md"
            title={isCopied ? "已复制!" : "复制记事本内容"}
            aria-label={isCopied ? "已复制记事本内容到剪贴板" : "复制记事本内容"}
          >
            {isCopied ? <Check size={18} className="text-green-400" /> : <Copy size={18} />}
          </button>
          <button
            onClick={() => setIsPreviewMode(!isPreviewMode)}
            className="p-1.5 text-gray-400 hover:text-sky-400 transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-sky-500 rounded-md"
            title={isPreviewMode ? "查看原始内容" : "预览 Markdown"}
            aria-label={isPreviewMode ? "Switch to raw text view" : "Switch to Markdown preview"}
          >
            {isPreviewMode ? <Code size={18} /> : <Eye size={18} />}
          </button>
        </div>
      </header>
      <div className="flex-grow overflow-y-auto relative">
        {isPreviewMode ? (
          <div
            className="markdown-preview" // Styles defined in index.html
            dangerouslySetInnerHTML={{ __html: processedHtml }}
            aria-label="Markdown 预览"
          />
        ) : (
          <textarea
            readOnly
            value={content}
            className="w-full h-full p-3 bg-slate-800 text-gray-300 resize-none border-none focus:ring-0 font-mono text-sm leading-relaxed"
            aria-label="共享记事本内容 (原始内容)"
          />
        )}
      </div>
      <footer className="p-2 border-t border-gray-700 text-xs text-gray-500 bg-slate-900">
        {lastUpdatedBy ? (
          <div className="flex items-center">
            <Edit3 size={14} className={`mr-1.5 ${getSenderColor(lastUpdatedBy)}`} />
            最后更新者: <span className={`font-medium ml-1 ${getSenderColor(lastUpdatedBy)}`}>{lastUpdatedBy}</span>
          </div>
        ) : (
          <span>记事本内容未被 AI 修改过。</span>
        )}
      </footer>
    </div>
  );
};

export default Notepad;