import "./dist-DZj99xX4.js";
import "./dist-DAY54QOk.js";
import { t as DocumentToolbar } from "./connect-DwcZHh7Q.js";
import { g as actions } from "./module-DTep1zWB.js";
import { i as useSelectedObservationDocument } from "./observation-CovBSv9M.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region editors/observation-editor/editor.tsx
const CATEGORIES = [
	"METHODOLOGY",
	"PROCESS",
	"FRICTION",
	"SURPRISE",
	"QUALITY"
];
const CAT_COLORS = {
	METHODOLOGY: "bg-purple-500/20 text-purple-300",
	PROCESS: "bg-blue-500/20 text-blue-300",
	FRICTION: "bg-amber-500/20 text-amber-300",
	SURPRISE: "bg-cyan-500/20 text-cyan-300",
	QUALITY: "bg-emerald-500/20 text-emerald-300"
};
const STATUS_COLORS = {
	PENDING: "bg-amber-500/20 text-amber-300 border-amber-500/30",
	PROMOTED: "bg-blue-500/20 text-blue-300 border-blue-500/30",
	IMPLEMENTED: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
	ARCHIVED: "bg-gray-500/20 text-gray-400 border-gray-500/30"
};
function ts() {
	return (/* @__PURE__ */ new Date()).toISOString();
}
function Editor() {
	const [document, dispatch] = useSelectedObservationDocument();
	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__ */ jsx("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",
							children: [
								/* @__PURE__ */ jsx("span", {
									className: `rounded-full border px-3 py-1 text-xs font-semibold ${STATUS_COLORS[state.status ?? "PENDING"]}`,
									children: state.status
								}),
								state.category && /* @__PURE__ */ jsx("span", {
									className: `rounded px-2 py-0.5 text-xs font-medium ${CAT_COLORS[state.category] ?? ""}`,
									children: state.category
								}),
								state.observedBy && /* @__PURE__ */ jsxs("span", {
									className: "text-xs",
									style: { color: "var(--bai-text-faint)" },
									children: ["by ", state.observedBy]
								}),
								state.observedAt && /* @__PURE__ */ jsx("span", {
									className: "text-xs",
									style: { color: "var(--bai-text-faint)" },
									children: new Date(state.observedAt).toLocaleDateString()
								})
							]
						}),
						/* @__PURE__ */ jsx("h1", {
							className: "text-xl font-bold",
							style: { color: "var(--bai-text)" },
							children: state.title
						}),
						/* @__PURE__ */ jsx("p", {
							className: "text-sm",
							style: { color: "var(--bai-text-tertiary)" },
							children: state.description
						}),
						state.content && /* @__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 })
						}),
						state.promotedTo && /* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2 rounded-lg bg-blue-500/10 px-3 py-2 text-xs text-blue-300",
							children: [
								"Promoted to:",
								" ",
								/* @__PURE__ */ jsx("span", {
									className: "font-mono",
									children: state.promotedTo
								})
							]
						}),
						/* @__PURE__ */ jsx("div", {
							className: "flex gap-2 pt-2",
							style: { borderTop: "1px solid var(--bai-border)" },
							children: state.status === "PENDING" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
								/* @__PURE__ */ jsx("button", {
									type: "button",
									onClick: () => {
										const ref = prompt("Promoted to note ID:");
										if (ref) dispatch(actions.promoteObservation({
											promotedTo: ref,
											promotedAt: ts()
										}));
									},
									className: "rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700",
									children: "Promote"
								}),
								/* @__PURE__ */ jsx("button", {
									type: "button",
									onClick: () => dispatch(actions.implementObservation({ updatedAt: ts() })),
									className: "rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700",
									children: "Implement"
								}),
								/* @__PURE__ */ jsx("button", {
									type: "button",
									onClick: () => dispatch(actions.archiveObservation({ updatedAt: ts() })),
									className: "rounded bg-gray-600 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700",
									children: "Archive"
								})
							] })
						})
					]
				})
			})]
		})
	});
}
function CreateForm({ dispatch }) {
	const [title, setTitle] = useState("");
	const [desc, setDesc] = useState("");
	const [content, setContent] = useState("");
	const [category, setCategory] = useState("FRICTION");
	const [observer, setObserver] = useState("");
	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: "Capture Observation"
						}),
						/* @__PURE__ */ jsx("input", {
							type: "text",
							value: title,
							onChange: (e) => setTitle(e.target.value),
							placeholder: "What did you observe?",
							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 summary",
							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("div", {
							className: "flex gap-3",
							children: [/* @__PURE__ */ jsx("select", {
								value: category,
								onChange: (e) => setCategory(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: CATEGORIES.map((c) => /* @__PURE__ */ jsx("option", {
									value: c,
									children: c
								}, c))
							}), /* @__PURE__ */ jsx("input", {
								type: "text",
								value: observer,
								onChange: (e) => setObserver(e.target.value),
								placeholder: "Observer (optional)",
								className: "flex-1 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("textarea", {
							value: content,
							onChange: (e) => setContent(e.target.value),
							placeholder: "Details (optional)",
							rows: 4,
							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.createObservation({
								title,
								description: desc,
								content: content || void 0,
								category,
								observedAt: ts(),
								observedBy: observer || void 0
							})),
							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: "Capture"
						})
					]
				})
			})]
		})
	});
}
//#endregion
export { Editor as default };

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