import { z as generateId } from "./dist-DZj99xX4.js";
import "./dist-DAY54QOk.js";
import { t as DocumentToolbar } from "./connect-DwcZHh7Q.js";
import { g as actions } from "./module-Bm0QwxoL.js";
import { i as useSelectedResearchClaimDocument } from "./research-claim-lXIuzUA4.js";
import { t as TOOLBAR_CLASS } from "./theme-context-DsfdY07T.js";
import { t as MarkdownPreview } from "./markdown-preview-BEFKi0xe.js";
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region editors/research-claim-editor/editor.tsx
const KIND_COLORS = {
	research: "bg-purple-500/20 text-purple-300 border-purple-500/30",
	example: "bg-cyan-500/20 text-cyan-300 border-cyan-500/30",
	foundation: "bg-blue-500/20 text-blue-300 border-blue-500/30",
	methodology: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
	principle: "bg-amber-500/20 text-amber-300 border-amber-500/30"
};
function Editor() {
	const [document, dispatch] = useSelectedResearchClaimDocument();
	const state = document.state.global;
	if (!!!state.title) return /* @__PURE__ */ jsx(CreateForm, { dispatch });
	return /* @__PURE__ */ jsx("div", {
		className: "min-h-screen",
		style: {
			backgroundColor: "var(--bai-bg)",
			color: "var(--bai-text)"
		},
		children: /* @__PURE__ */ jsxs("div", {
			className: "mx-auto max-w-3xl",
			children: [/* @__PURE__ */ jsx(DocumentToolbar, { toolbarClassName: TOOLBAR_CLASS }), /* @__PURE__ */ jsxs("div", {
				className: "p-6 space-y-6",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "rounded-xl p-6 space-y-4",
						style: {
							backgroundColor: "var(--bai-surface)",
							border: "1px solid var(--bai-border)"
						},
						children: [
							/* @__PURE__ */ jsxs("div", {
								className: "flex items-center gap-3 flex-wrap",
								children: [state.kind && /* @__PURE__ */ jsx("span", {
									className: `rounded-full border px-3 py-1 text-xs font-semibold ${KIND_COLORS[state.kind] ?? "bg-gray-500/20 text-gray-300 border-gray-500/30"}`,
									children: state.kind
								}), state.methodology.map((m) => /* @__PURE__ */ jsx("span", {
									className: "rounded px-2 py-0.5 text-[10px]",
									style: {
										backgroundColor: "var(--bai-hover)",
										color: "var(--bai-text-tertiary)"
									},
									children: m
								}, m))]
							}),
							/* @__PURE__ */ jsx("h1", {
								className: "text-xl font-bold",
								style: { color: "var(--bai-text)" },
								children: state.title
							}),
							state.description && /* @__PURE__ */ jsx("p", {
								className: "text-sm",
								style: { color: "var(--bai-text-tertiary)" },
								children: state.description
							})
						]
					}),
					state.content && /* @__PURE__ */ jsxs("div", {
						className: "rounded-xl p-6",
						style: {
							backgroundColor: "var(--bai-surface)",
							border: "1px solid var(--bai-border)"
						},
						children: [/* @__PURE__ */ jsxs("div", {
							className: "mb-3 flex items-center justify-between",
							children: [/* @__PURE__ */ jsx("h3", {
								className: "text-xs font-semibold uppercase tracking-wider",
								style: { color: "var(--bai-text-muted)" },
								children: "Content"
							}), /* @__PURE__ */ jsx(EditContentButton, {
								content: state.content,
								dispatch
							})]
						}), /* @__PURE__ */ jsx("div", {
							className: "max-h-[600px] overflow-y-auto rounded-lg px-5 py-4 scrollbar-thin",
							style: {
								backgroundColor: "var(--bai-deep)",
								border: "1px solid var(--bai-border)"
							},
							children: /* @__PURE__ */ jsx(MarkdownPreview, { content: state.content })
						})]
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "grid grid-cols-2 gap-4",
						children: [/* @__PURE__ */ jsxs("div", {
							className: "rounded-xl p-4",
							style: {
								backgroundColor: "var(--bai-surface)",
								border: "1px solid var(--bai-border)"
							},
							children: [/* @__PURE__ */ jsxs("h3", {
								className: "mb-2 text-xs font-semibold uppercase tracking-wider",
								style: { color: "var(--bai-text-muted)" },
								children: [
									"Topics (",
									state.topics.length,
									")"
								]
							}), /* @__PURE__ */ jsxs("div", {
								className: "flex flex-wrap gap-1",
								children: [state.topics.map((t) => /* @__PURE__ */ jsx("span", {
									className: "rounded px-2 py-0.5 text-xs",
									style: {
										backgroundColor: "var(--bai-accent-soft)",
										color: "var(--bai-accent)"
									},
									children: t
								}, t)), state.topics.length === 0 && /* @__PURE__ */ jsx("span", {
									className: "text-xs",
									style: { color: "var(--bai-text-faint)" },
									children: "No topics"
								})]
							})]
						}), /* @__PURE__ */ jsxs("div", {
							className: "rounded-xl p-4",
							style: {
								backgroundColor: "var(--bai-surface)",
								border: "1px solid var(--bai-border)"
							},
							children: [/* @__PURE__ */ jsxs("h3", {
								className: "mb-2 text-xs font-semibold uppercase tracking-wider",
								style: { color: "var(--bai-text-muted)" },
								children: [
									"Sources (",
									state.sources.length,
									")"
								]
							}), /* @__PURE__ */ jsxs("div", {
								className: "flex flex-wrap gap-1",
								children: [state.sources.map((s) => /* @__PURE__ */ jsx("span", {
									className: "rounded bg-cyan-500/10 px-2 py-0.5 text-xs text-cyan-400",
									children: s
								}, s)), state.sources.length === 0 && /* @__PURE__ */ jsx("span", {
									className: "text-xs",
									style: { color: "var(--bai-text-faint)" },
									children: "No sources"
								})]
							})]
						})]
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "rounded-xl p-6",
						style: {
							backgroundColor: "var(--bai-surface)",
							border: "1px solid var(--bai-border)"
						},
						children: [
							/* @__PURE__ */ jsxs("h3", {
								className: "mb-3 text-xs font-semibold uppercase tracking-wider",
								style: { color: "var(--bai-text-muted)" },
								children: [
									"Connections (",
									state.connections.length,
									")"
								]
							}),
							state.connections.length > 0 ? /* @__PURE__ */ jsx("div", {
								className: "space-y-2",
								children: state.connections.map((conn) => /* @__PURE__ */ jsxs("div", {
									className: "flex items-start gap-3 rounded-lg px-4 py-3",
									style: {
										backgroundColor: "var(--bai-bg)",
										boxShadow: "0 0 0 1px var(--bai-ring)"
									},
									children: [/* @__PURE__ */ jsxs("div", {
										className: "min-w-0 flex-1",
										children: [/* @__PURE__ */ jsx("p", {
											className: "text-xs",
											style: { color: "var(--bai-text-tertiary)" },
											children: conn.contextPhrase
										}), /* @__PURE__ */ jsx("p", {
											className: "mt-1 font-mono text-[10px] truncate",
											style: { color: "var(--bai-text-faint)" },
											children: conn.targetRef
										})]
									}), /* @__PURE__ */ jsx("button", {
										type: "button",
										onClick: () => dispatch(actions.removeResearchConnection({ id: conn.id })),
										className: "shrink-0 rounded px-2 py-1 text-[10px] text-red-400 hover:bg-red-500/10",
										children: "Remove"
									})]
								}, conn.id))
							}) : /* @__PURE__ */ jsx("p", {
								className: "text-xs",
								style: { color: "var(--bai-text-faint)" },
								children: "No connections yet"
							}),
							/* @__PURE__ */ jsx(AddConnectionForm, { dispatch })
						]
					})
				]
			})]
		})
	});
}
function EditContentButton({ content, dispatch }) {
	const [editing, setEditing] = useState(false);
	const [text, setText] = useState(content);
	if (!editing) return /* @__PURE__ */ jsx("button", {
		type: "button",
		onClick: () => {
			setText(content);
			setEditing(true);
		},
		className: "rounded px-3 py-1 text-xs hover:opacity-80",
		style: {
			backgroundColor: "var(--bai-hover)",
			color: "var(--bai-text-tertiary)"
		},
		children: "Edit"
	});
	return /* @__PURE__ */ jsxs("div", {
		className: "w-full space-y-2",
		children: [/* @__PURE__ */ jsx("textarea", {
			value: text,
			onChange: (e) => setText(e.target.value),
			rows: 8,
			className: "w-full rounded-lg px-4 py-3 text-sm outline-none focus:border-[#cba6f7]/50",
			style: {
				backgroundColor: "var(--bai-deep)",
				color: "var(--bai-text-secondary)",
				border: "1px solid var(--bai-border)"
			}
		}), /* @__PURE__ */ jsxs("div", {
			className: "flex gap-2 justify-end",
			children: [/* @__PURE__ */ jsx("button", {
				type: "button",
				onClick: () => setEditing(false),
				className: "rounded px-3 py-1 text-xs hover:opacity-80",
				style: {
					backgroundColor: "var(--bai-hover)",
					color: "var(--bai-text-tertiary)"
				},
				children: "Cancel"
			}), /* @__PURE__ */ jsx("button", {
				type: "button",
				onClick: () => {
					dispatch(actions.updateClaimContent({ content: text }));
					setEditing(false);
				},
				className: "rounded px-3 py-1 text-xs font-medium hover:opacity-80",
				style: {
					backgroundColor: "var(--bai-accent)",
					color: "var(--bai-accent-text)"
				},
				children: "Save"
			})]
		})]
	});
}
function AddConnectionForm({ dispatch }) {
	const [open, setOpen] = useState(false);
	const [targetRef, setTargetRef] = useState("");
	const [contextPhrase, setContextPhrase] = useState("");
	if (!open) return /* @__PURE__ */ jsx("button", {
		type: "button",
		onClick: () => setOpen(true),
		className: "mt-3 rounded px-3 py-1.5 text-xs hover:opacity-80",
		style: {
			backgroundColor: "var(--bai-hover)",
			color: "var(--bai-text-tertiary)"
		},
		children: "+ Add Connection"
	});
	return /* @__PURE__ */ jsxs("div", {
		className: "mt-3 rounded-lg p-4 space-y-3",
		style: {
			backgroundColor: "var(--bai-bg)",
			border: "1px solid var(--bai-border)"
		},
		children: [
			/* @__PURE__ */ jsx("input", {
				type: "text",
				value: targetRef,
				onChange: (e) => setTargetRef(e.target.value),
				placeholder: "Target document ID or reference",
				className: "w-full rounded-lg px-3 py-2 text-sm outline-none focus:border-[#cba6f7]/50",
				style: {
					backgroundColor: "var(--bai-deep)",
					color: "var(--bai-text-secondary)",
					border: "1px solid var(--bai-border)"
				}
			}),
			/* @__PURE__ */ jsx("input", {
				type: "text",
				value: contextPhrase,
				onChange: (e) => setContextPhrase(e.target.value),
				placeholder: "Context phrase describing the connection",
				className: "w-full rounded-lg px-3 py-2 text-sm outline-none focus:border-[#cba6f7]/50",
				style: {
					backgroundColor: "var(--bai-deep)",
					color: "var(--bai-text-secondary)",
					border: "1px solid var(--bai-border)"
				}
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex gap-2",
				children: [/* @__PURE__ */ jsx("button", {
					type: "button",
					onClick: () => setOpen(false),
					className: "rounded px-3 py-1 text-xs hover:opacity-80",
					style: {
						backgroundColor: "var(--bai-hover)",
						color: "var(--bai-text-tertiary)"
					},
					children: "Cancel"
				}), /* @__PURE__ */ jsx("button", {
					type: "button",
					disabled: !targetRef.trim() || !contextPhrase.trim(),
					onClick: () => {
						dispatch(actions.addResearchConnection({
							id: generateId(),
							targetRef: targetRef.trim(),
							contextPhrase: contextPhrase.trim()
						}));
						setTargetRef("");
						setContextPhrase("");
						setOpen(false);
					},
					className: "rounded px-3 py-1 text-xs font-medium hover:opacity-80 disabled:opacity-40",
					style: {
						backgroundColor: "var(--bai-accent)",
						color: "var(--bai-accent-text)"
					},
					children: "Add"
				})]
			})
		]
	});
}
function CreateForm({ dispatch }) {
	const [title, setTitle] = useState("");
	const [desc, setDesc] = useState("");
	const [content, setContent] = useState("");
	const [kind, setKind] = useState("research");
	return /* @__PURE__ */ jsx("div", {
		className: "min-h-screen",
		style: {
			backgroundColor: "var(--bai-bg)",
			color: "var(--bai-text)"
		},
		children: /* @__PURE__ */ jsxs("div", {
			className: "mx-auto max-w-2xl",
			children: [/* @__PURE__ */ jsx(DocumentToolbar, { toolbarClassName: TOOLBAR_CLASS }), /* @__PURE__ */ jsx("div", {
				className: "p-6",
				children: /* @__PURE__ */ jsxs("div", {
					className: "rounded-xl p-8 space-y-4",
					style: {
						backgroundColor: "var(--bai-surface)",
						border: "1px solid var(--bai-border)"
					},
					children: [
						/* @__PURE__ */ jsx("h2", {
							className: "text-lg font-bold",
							style: { color: "var(--bai-text)" },
							children: "Create Research Claim"
						}),
						/* @__PURE__ */ jsx("input", {
							type: "text",
							value: title,
							onChange: (e) => setTitle(e.target.value),
							placeholder: "Claim title (a clear, declarative statement)",
							className: "w-full rounded-lg px-3 py-2 text-sm outline-none focus:border-[#cba6f7]/50",
							style: {
								backgroundColor: "var(--bai-bg)",
								color: "var(--bai-text-secondary)",
								border: "1px solid var(--bai-border)"
							}
						}),
						/* @__PURE__ */ jsx("input", {
							type: "text",
							value: desc,
							onChange: (e) => setDesc(e.target.value),
							placeholder: "Brief description of the claim",
							className: "w-full rounded-lg px-3 py-2 text-sm outline-none focus:border-[#cba6f7]/50",
							style: {
								backgroundColor: "var(--bai-bg)",
								color: "var(--bai-text-secondary)",
								border: "1px solid var(--bai-border)"
							}
						}),
						/* @__PURE__ */ jsxs("select", {
							value: kind,
							onChange: (e) => setKind(e.target.value),
							className: "rounded-lg px-3 py-2 text-sm",
							style: {
								backgroundColor: "var(--bai-bg)",
								color: "var(--bai-text-secondary)",
								border: "1px solid var(--bai-border)"
							},
							children: [
								/* @__PURE__ */ jsx("option", {
									value: "research",
									children: "Research"
								}),
								/* @__PURE__ */ jsx("option", {
									value: "foundation",
									children: "Foundation"
								}),
								/* @__PURE__ */ jsx("option", {
									value: "methodology",
									children: "Methodology"
								}),
								/* @__PURE__ */ jsx("option", {
									value: "principle",
									children: "Principle"
								}),
								/* @__PURE__ */ jsx("option", {
									value: "example",
									children: "Example"
								})
							]
						}),
						/* @__PURE__ */ jsx("textarea", {
							value: content,
							onChange: (e) => setContent(e.target.value),
							placeholder: "Full claim content (markdown supported)",
							rows: 6,
							className: "w-full rounded-lg px-4 py-3 text-sm outline-none focus:border-[#cba6f7]/50",
							style: {
								backgroundColor: "var(--bai-deep)",
								color: "var(--bai-text-secondary)",
								border: "1px solid var(--bai-border)"
							}
						}),
						/* @__PURE__ */ jsx("button", {
							type: "button",
							disabled: !title.trim() || !desc.trim(),
							onClick: () => dispatch(actions.createClaim({
								title: title.trim(),
								description: desc.trim(),
								content: content.trim(),
								kind,
								methodology: [],
								sources: [],
								topics: []
							})),
							className: "rounded-lg px-4 py-2 text-sm font-medium hover:opacity-80 disabled:opacity-40",
							style: {
								backgroundColor: "var(--bai-accent)",
								color: "var(--bai-accent-text)"
							},
							children: "Create Claim"
						})
					]
				})
			})]
		})
	});
}
//#endregion
export { Editor as default };

//# sourceMappingURL=editor-qPjckvrI.js.map