"use client";

import { useState } from "react";

import { memoryApi } from "@/lib/api";
import type { MemoryType } from "@/types/domain";
import type { Memory } from "@/types/api";
import { MEMORY_TYPE_LABEL, MEMORY_SOURCE_LABEL } from "@/lib/constants/labels";

const TYPE_OPTIONS: MemoryType[] = [
  "identity",
  "user",
  "episodic",
  "semantic",
  "procedural",
  "relational",
  "emotional",
  "world",
  "reflection",
  "evolution",
];

/**
 * 息壤枢记忆治理列表（可增删改）。
 * 治理者可补录记忆（admin 校正/手动沉淀）、inline 编辑、软删除。
 * 复用 §10 memoryApi.createMemory/updateMemory/deleteMemory。
 */
export function MemoryAdminList({ initial }: { initial: Memory[] }) {
  const [memories, setMemories] = useState(initial);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [draft, setDraft] = useState({ title: "", content: "" });
  const [busyId, setBusyId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [showAdd, setShowAdd] = useState(false);
  const [newMem, setNewMem] = useState<{
    type: MemoryType;
    title: string;
    content: string;
  }>({
    type: "user",
    title: "",
    content: "",
  });

  function startEdit(m: Memory) {
    setEditingId(m.id);
    setDraft({ title: m.title ?? "", content: m.content });
    setError(null);
  }

  async function save(id: string) {
    setBusyId(id);
    setError(null);
    try {
      const updated = await memoryApi.updateMemory(id, draft);
      setMemories((prev) =>
        prev.map((m) => (m.id === id ? { ...m, ...updated } : m)),
      );
      setEditingId(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : "保存失败，请重试。");
    } finally {
      setBusyId(null);
    }
  }

  async function remove(id: string) {
    setBusyId(id);
    setError(null);
    try {
      await memoryApi.deleteMemory(id);
      setMemories((prev) => prev.filter((m) => m.id !== id));
    } catch (e) {
      setError(e instanceof Error ? e.message : "删除失败，请重试。");
    } finally {
      setBusyId(null);
    }
  }

  async function add() {
    if (!newMem.content.trim()) {
      setError("请填写记忆内容。");
      return;
    }
    setBusyId("__new");
    setError(null);
    try {
      const created = await memoryApi.createMemory({
        type: newMem.type,
        title: newMem.title.trim() || undefined,
        content: newMem.content.trim(),
      });
      setMemories((prev) => [created, ...prev]);
      setNewMem({ type: "user", title: "", content: "" });
      setShowAdd(false);
    } catch (e) {
      setError(e instanceof Error ? e.message : "新增失败，请重试。");
    } finally {
      setBusyId(null);
    }
  }

  return (
    <>
      {showAdd ? (
        <div className="glass mb-2 space-y-2 rounded-xl px-4 py-3">
          <div className="flex flex-wrap items-center gap-2">
            <select
              value={newMem.type}
              onChange={(e) =>
                setNewMem((s) => ({ ...s, type: e.target.value as MemoryType }))
              }
              aria-label="记忆类型"
              className="w-20 shrink-0 rounded-lg border border-border-glass bg-glass px-2 py-1 text-xs text-fg backdrop-blur"
            >
              {TYPE_OPTIONS.map((t) => (
                <option key={t} value={t}>
                  {MEMORY_TYPE_LABEL[t]}
                </option>
              ))}
            </select>
            <input
              value={newMem.title}
              onChange={(e) =>
                setNewMem((s) => ({ ...s, title: e.target.value }))
              }
              placeholder="标题（可选）"
              className="min-w-0 flex-1 rounded-lg border border-border-glass bg-glass px-2 py-1 text-sm text-fg"
            />
          </div>
          <textarea
            value={newMem.content}
            onChange={(e) =>
              setNewMem((s) => ({ ...s, content: e.target.value }))
            }
            rows={2}
            placeholder="记忆内容…"
            className="w-full rounded-lg border border-border-glass bg-glass px-2 py-1 text-sm text-fg"
          />
          <div className="flex gap-2">
            <button
              type="button"
              onClick={add}
              disabled={busyId === "__new"}
              className="rounded-lg bg-patina/20 px-3 py-1 text-xs font-medium text-patina disabled:opacity-50"
            >
              新增
            </button>
            <button
              type="button"
              onClick={() => setShowAdd(false)}
              className="rounded-lg border border-border-glass bg-glass px-3 py-1 text-xs text-muted"
            >
              取消
            </button>
          </div>
        </div>
      ) : (
        <button
          type="button"
          onClick={() => setShowAdd(true)}
          className="mb-2 rounded-lg border border-patina/40 bg-patina/10 px-3 py-1.5 text-xs font-medium text-patina transition-colors hover:bg-patina/20"
        >
          + 新增记忆
        </button>
      )}

      <ul className="space-y-2">
        {memories.map((m) => (
          <li key={m.id} className="glass rounded-xl px-4 py-2.5">
            {editingId === m.id ? (
              <div className="space-y-2">
                <input
                  value={draft.title}
                  onChange={(e) =>
                    setDraft((d) => ({ ...d, title: e.target.value }))
                  }
                  placeholder="标题"
                  className="w-full rounded-lg border border-border-glass bg-glass px-2 py-1 text-sm text-fg"
                />
                <textarea
                  value={draft.content}
                  onChange={(e) =>
                    setDraft((d) => ({ ...d, content: e.target.value }))
                  }
                  rows={3}
                  className="w-full rounded-lg border border-border-glass bg-glass px-2 py-1 text-sm text-fg"
                />
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={() => save(m.id)}
                    disabled={busyId === m.id}
                    className="rounded-lg bg-patina/20 px-3 py-1 text-xs font-medium text-patina disabled:opacity-50"
                  >
                    保存
                  </button>
                  <button
                    type="button"
                    onClick={() => setEditingId(null)}
                    className="rounded-lg border border-border-glass bg-glass px-3 py-1 text-xs text-muted"
                  >
                    取消
                  </button>
                </div>
              </div>
            ) : (
              <>
                <div className="flex items-baseline gap-2">
                  <span className="rounded bg-patina/15 px-1.5 py-0.5 text-[10px] text-patina">
                    {MEMORY_TYPE_LABEL[m.type]}
                  </span>
                  <span className="truncate font-serif text-sm font-medium text-fg">
                    {m.title ?? m.content.slice(0, 16)}
                  </span>
                </div>
                <p className="mt-1 line-clamp-2 text-xs text-muted">
                  {m.content}
                </p>
                <div className="mt-1.5 flex items-center gap-3 text-[10px] text-muted">
                  <span>{MEMORY_SOURCE_LABEL[m.source]}</span>
                  {m.confidence != null && (
                    <span>置信 {m.confidence.toFixed(2)}</span>
                  )}
                  <div className="ml-auto flex gap-3">
                    <button
                      type="button"
                      onClick={() => startEdit(m)}
                      className="text-patina hover:underline"
                    >
                      编辑
                    </button>
                    <button
                      type="button"
                      onClick={() => remove(m.id)}
                      disabled={busyId === m.id}
                      className="text-cinnabar hover:underline disabled:opacity-50"
                    >
                      删除
                    </button>
                  </div>
                </div>
              </>
            )}
          </li>
        ))}
      </ul>
      {error && <p className="mt-2 text-xs text-cinnabar">{error}</p>}
    </>
  );
}