hermes-os/components/MemoryEntry.tsx

"use client";

import { useState } from "react";
import { Pencil, Trash2, Check, X } from "lucide-react";

interface Props {
  content: string;
  onPatch: (newContent: string) => void;
  onDelete: () => void;
}

export function MemoryEntry({ content, onPatch, onDelete }: Props) {
  const [editing, setEditing] = useState(false);
  const [editText, setEditText] = useState(content);
  const [confirmDelete, setConfirmDelete] = useState(false);

  const handleSave = () => {
    if (editText.trim() && editText !== content) {
      onPatch(editText.trim());
    }
    setEditing(false);
  };

  if (editing) {
    return (
      <div className="card p-3 space-y-2">
        <textarea
          value={editText}
          onChange={(e) => setEditText(e.target.value)}
          className="w-full bg-transparent text-sm resize-none outline-none min-h-[80px]"
          style={{ color: "var(--text-1)" }}
          autoFocus
        />
        <div className="flex gap-2 justify-end">
          <button onClick={() => { setEditing(false); setEditText(content); }} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
            <X size={16} />
          </button>
          <button onClick={handleSave} className="p-1.5 rounded-lg" style={{ color: "#34c759" }}>
            <Check size={16} />
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="card p-4 group">
      <p className="text-[13px] whitespace-pre-wrap leading-relaxed" style={{ color: "var(--text-1)" }}>
        {content}
      </p>
      <div className="flex gap-2 justify-end mt-2 opacity-0 group-active:opacity-100 transition-opacity">
        <button onClick={() => setEditing(true)} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
          <Pencil size={14} />
        </button>
        {confirmDelete ? (
          <button
            onClick={() => { onDelete(); setConfirmDelete(false); }}
            className="px-2 py-1 rounded-lg text-xs font-medium"
            style={{ background: "rgba(255,59,48,0.12)", color: "#ff3b30" }}
          >
            Confirm
          </button>
        ) : (
          <button onClick={() => setConfirmDelete(true)} className="p-1.5 rounded-lg" style={{ color: "var(--text-3)" }}>
            <Trash2 size={14} />
          </button>
        )}
      </div>
    </div>
  );
}