import { useState } from 'react';
import { deleteMemory, clearMemories } from '../store/memoryStore';

export default function MemoryPanel({ memories, onMemoriesChange }) {
  const [open, setOpen] = useState(false);

  const handleDelete = (id) => {
    deleteMemory(id);
    onMemoriesChange();
  };

  const handleClear = () => {
    if (!window.confirm('清空所有记忆？')) return;
    clearMemories();
    onMemoriesChange();
  };

  return (
    <div className="memory-panel">
      <button className="memory-toggle" onClick={() => setOpen(o => !o)}>
        <span>🧠 长期记忆</span>
        <span className="memory-badge">{memories.length}</span>
        <span className="memory-arrow">{open ? '▲' : '▼'}</span>
      </button>

      {open && (
        <div className="memory-body">
          {memories.length === 0 ? (
            <p className="memory-empty">对话后会自动记住关于你的信息</p>
          ) : (
            <>
              <ul className="memory-list">
                {memories.map(m => (
                  <li key={m.id} className="memory-item">
                    <span className="memory-text">{m.text}</span>
                    <button className="memory-del" onClick={() => handleDelete(m.id)} title="删除">×</button>
                  </li>
                ))}
              </ul>
              <button className="memory-clear" onClick={handleClear}>清空全部</button>
            </>
          )}
        </div>
      )}
    </div>
  );
}