import React, { useMemo, useState } from "react";
// Simple CASE problem definition widget for Canvas preview
// This version is self-contained (no external UI libraries) and mirrors the
// Squarespace widget logic in a lighter form so it can run in Canvas.
const domains = ["Healthcare", "Gender", "Climate", "Education", "Other"] as const;
type Domain = (typeof domains)[number];
type ItemType = "cause" | "effect" | "both" | "unspecified";
type LensType = "systemic" | "stakeholder" | "unsure";
type Item = {
id: number;
text: string;
type: ItemType;
};
const stepLabels = [
"Domain",
"Problem",
"Brainstorm",
"Label C/E",
"Lens (S)",
"Action (A)",
"Summary"
];
const stepDescription: Record = {
1: "Pick the domain you want to explore.",
2: "Write one big problem statement or phrase.",
3: "List 8–30 bad things linked to your problem.",
4: "Label each item as Cause, Effect or Both.",
5: "Choose a Systemic or Stakeholder lens.",
6: "Write a hopeful action / vision statement.",
7: "Review your AI-assisted CASE summary."
};
let idCounter = 1;
const CASEWidget: React.FC = () => {
const [step, setStep] = useState(1);
const [selectedDomain, setSelectedDomain] = useState(null);
const [customDomain, setCustomDomain] = useState("");
const [problem, setProblem] = useState("");
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState("");
const [lens, setLens] = useState("unsure");
const [lensNote, setLensNote] = useState("");
const [action, setAction] = useState("");
const [summaryLine, setSummaryLine] = useState("");
const [summaryAction, setSummaryAction] = useState("");
const effectiveDomain =
selectedDomain === "Other" ? customDomain || "Another domain" : selectedDomain || "";
const causeItems = items.filter((i) => i.type === "cause" || i.type === "both");
const effectItems = items.filter((i) => i.type === "effect" || i.type === "both");
const canGoNext = useMemo(() => {
switch (step) {
case 1:
return !!selectedDomain && (selectedDomain !== "Other" || customDomain.trim().length > 0);
case 2:
return problem.trim().length > 8;
case 3:
return items.length >= 8;
case 4:
return (
items.some((i) => i.type === "cause" || i.type === "both") &&
items.some((i) => i.type === "effect" || i.type === "both")
);
case 5:
return lens !== "unsure";
case 6:
return action.trim().length > 8;
case 7:
return false;
default:
return false;
}
}, [step, selectedDomain, customDomain, problem, items, lens, action]);
const generateSummary = () => {
const topCause = causeItems[0]?.text || "a key underlying cause";
const topEffect = effectItems[0]?.text || "a major harmful effect";
let stakeholder: string;
if (lensNote.trim()) stakeholder = lensNote.trim();
else if (lens === "stakeholder") stakeholder = "key people who are directly affected";
else if (lens === "systemic") stakeholder = "the system-level actors involved";
else stakeholder = "the people and systems involved";
const domainText = effectiveDomain ? `In the domain of ${effectiveDomain}, ` : "";
const s = `${domainText}${topCause} is driving ${topEffect} for ${stakeholder}.`;
const a =
action.trim() ||
"We now need to design testable, collaborative actions that connect this cause to a better outcome.";
setSummaryLine(s);
setSummaryAction(a);
};
const handleNext = () => {
if (step === 6) {
generateSummary();
setStep(7);
} else if (step < 7 && canGoNext) {
setStep((s) => s + 1);
}
};
const handleBack = () => {
if (step > 1) setStep((s) => s - 1);
};
const handleRestart = () => {
setStep(1);
setSelectedDomain(null);
setCustomDomain("");
setProblem("");
setItems([]);
setNewItem("");
setLens("unsure");
setLensNote("");
setAction("");
setSummaryLine("");
setSummaryAction("");
};
const addItem = () => {
const t = newItem.trim();
if (!t || items.length >= 30) return;
setItems((prev) => [...prev, { id: idCounter++, text: t, type: "unspecified" }]);
setNewItem("");
};
const updateItemType = (id: number, type: ItemType) => {
setItems((prev) => prev.map((it) => (it.id === id ? { ...it, type } : it)));
};
const mainCardStyle: React.CSSProperties = {
border: "1px solid #e2e8f0",
borderRadius: 16,
padding: 16,
background: "rgba(255,255,255,0.96)",
boxShadow: "0 1px 2px rgba(15,23,42,0.08)",
};
const pillStyle: React.CSSProperties = {
fontSize: 10,
textTransform: "uppercase",
letterSpacing: "0.08em",
color: "#2563eb",
border: "1px solid #bfdbfe",
borderRadius: 999,
padding: "2px 8px",
background: "#eff6ff",
};
const smallText: React.CSSProperties = { fontSize: 11, color: "#6b7280" };
const renderStep = () => {
switch (step) {
case 1:
return (
)}
);
case 2:
return (
Start by choosing the broad domain you want to explore.
{domains.map((d) => (
))}
{selectedDomain === "Other" && (
Write your domain name
setCustomDomain(e.target.value)}
placeholder="e.g. Urban mobility, Digital inclusion, Mental health in teens"
style={{
width: "100%",
borderRadius: 8,
border: "1px solid #e5e7eb",
padding: "6px 8px",
fontSize: 12,
}}
/>
Write one big problem statement or phrase. Don't worry about perfection – you can refine it later.
Or try a suggestion: