"use client";

import {
  useCoAgent,
  useCopilotAction,
  useCoAgentStateRender,
  useCopilotAdditionalInstructions,
  useLangGraphInterrupt,
} from "@copilotkit/react-core";
import {
  CopilotKitCSSProperties,
  CopilotChat,
  CopilotPopup,
} from "@copilotkit/react-ui";
import { useCallback, useEffect, useRef, useState } from "react";
import type React from "react";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import AppChatHeader, { PopupHeader } from "@/components/canvas/AppChatHeader";
import { X, Check, Loader2 } from "lucide-react";
import CardRenderer from "@/components/canvas/CardRenderer";
import ShikiHighlighter from "react-shiki/web";
import {
  motion,
  useScroll,
  useTransform,
  useMotionValueEvent,
} from "motion/react";
import { EmptyState } from "@/components/empty-state";
import { cn } from "@/lib/utils";
import type {
  AgentState,
  PlanStep,
  Item,
  ItemData,
  ProjectData,
  EntityData,
  NoteData,
  ChartData,
  CardType,
} from "@/lib/canvas/types";
import { initialState, isNonEmptyAgentState } from "@/lib/canvas/state";
import {
  projectAddField4Item,
  projectSetField4ItemText,
  projectSetField4ItemDone,
  projectRemoveField4Item,
  chartAddField1Metric,
  chartSetField1Label,
  chartSetField1Value,
  chartRemoveField1Metric,
} from "@/lib/canvas/updates";
import useMediaQuery from "@/hooks/use-media-query";
import ItemHeader from "@/components/canvas/ItemHeader";
import NewItemMenu from "@/components/canvas/NewItemMenu";

export default function CopilotKitPage() {
  const { state, setState } = useCoAgent<AgentState>({
    name: "sample_agent",
    initialState,
  });

  // Global cache for the last non-empty agent state
  const cachedStateRef = useRef<AgentState>(state ?? initialState);
  useEffect(() => {
    if (isNonEmptyAgentState(state)) {
      cachedStateRef.current = state as AgentState;
    }
  }, [state]);
  // we use viewState to avoid transient flicker; TODO: troubleshoot and remove this workaround
  const viewState: AgentState = isNonEmptyAgentState(state)
    ? (state as AgentState)
    : cachedStateRef.current;

  const isDesktop = useMediaQuery("(min-width: 768px)");
  const [showJsonView, setShowJsonView] = useState<boolean>(false);
  const scrollAreaRef = useRef<HTMLDivElement | null>(null);
  const { scrollY } = useScroll({ container: scrollAreaRef });
  const headerScrollThreshold = 64;
  const headerOpacity = useTransform(
    scrollY,
    [0, headerScrollThreshold],
    [1, 0],
  );
  const [headerDisabled, setHeaderDisabled] = useState<boolean>(false);
  const titleInputRef = useRef<HTMLInputElement | null>(null);
  const descTextareaRef = useRef<HTMLInputElement | null>(null);
  const lastCreationRef = useRef<{
    type: CardType;
    name: string;
    id: string;
    ts: number;
  } | null>(null);
  const lastChecklistCreationRef = useRef<
    Record<string, { text: string; id: string; ts: number }>
  >({});
  const lastMetricCreationRef = useRef<
    Record<
      string,
      { label: string; value: number | ""; id: string; ts: number }
    >
  >({});
  // Strong idempotency during plan execution: allow only one creation per type while plan runs
  const createdByTypeRef = useRef<Partial<Record<CardType, string>>>({});
  const prevPlanStatusRef = useRef<string | null>(null);

  // Reset per-plan idempotency map on plan start/end or when plan definition changes
  useEffect(() => {
    const status = String(viewState?.planStatus ?? "");
    const prevStatus = prevPlanStatusRef.current;
    const started = status === "in_progress" && prevStatus !== "in_progress";
    const ended =
      prevStatus === "in_progress" &&
      (status === "completed" || status === "failed" || status === "");
    if (started || ended) {
      createdByTypeRef.current = {};
    }
    prevPlanStatusRef.current = status;
  }, [viewState?.planStatus]);

  useMotionValueEvent(scrollY, "change", (y) => {
    const disable = y >= headerScrollThreshold;
    setHeaderDisabled(disable);
    if (disable) {
      titleInputRef.current?.blur();
      descTextareaRef.current?.blur();
    }
  });

  useEffect(() => {
    console.log("[CoAgent state updated]", state);
  }, [state]);

  // Reset JSON view when there are no items
  useEffect(() => {
    const itemsCount = (viewState?.items ?? []).length;
    if (itemsCount === 0 && showJsonView) {
      setShowJsonView(false);
    }
  }, [viewState?.items, showJsonView]);

  // Use cached viewState to derive plan-related fields
  const planStepsMemo = (viewState?.planSteps ??
    initialState.planSteps) as PlanStep[];
  const planStatusMemo = viewState?.planStatus ?? initialState.planStatus;
  const currentStepIndexMemo =
    typeof viewState?.currentStepIndex === "number"
      ? viewState.currentStepIndex
      : initialState.currentStepIndex;

  // One-time final summary renderer in chat when plan completes or fails
  useCoAgentStateRender<AgentState>({
    name: "sample_agent",
    nodeName: "plan-final-summary",
    render: ({ state }) => {
      const status = String(state?.planStatus ?? "");
      const steps = (state?.planSteps ?? []) as PlanStep[];
      if (!Array.isArray(steps) || steps.length === 0) return null;
      if (status !== "completed" && status !== "failed") return null;
      const count = steps.length;
      return (
        <div className="my-2 w-full">
          <Accordion type="single" collapsible defaultValue="done">
            <AccordionItem value="done">
              <AccordionTrigger className="text-xs">
                <span className="inline-flex items-center gap-2">
                  <Check
                    className={cn(
                      "h-4 w-4",
                      status === "completed"
                        ? "text-green-600"
                        : "text-red-600",
                    )}
                  />
                  <span className="font-medium">
                    {count} steps {status}
                  </span>
                </span>
              </AccordionTrigger>
              <AccordionContent>
                <div className="rounded-2xl border shadow-sm bg-card p-4">
                  <div className="mb-2 text-xs font-semibold">
                    Plan{" "}
                    <span
                      className={cn(
                        "ml-2 rounded-full px-2 py-0.5 text-[10px] font-medium border",
                        status === "completed"
                          ? "text-green-700 border-green-300 bg-green-50"
                          : "text-red-700 border-red-300 bg-red-50",
                      )}
                    >
                      {status}
                    </span>
                  </div>
                  <ol className="space-y-1">
                    {steps.map((s, i) => (
                      <li
                        key={`${s.title ?? "step"}-${i}`}
                        className="flex items-start gap-2"
                      >
                        <span className="mt-0.5 inline-flex h-4 w-4 items-center justify-center">
                          {String(s.status).toLowerCase() === "completed" ? (
                            <Check className="h-4 w-4 text-green-600" />
                          ) : String(s.status).toLowerCase() === "failed" ? (
                            <X className="h-4 w-4 text-red-600" />
                          ) : (
                            <span className="block h-2 w-2 rounded-full bg-gray-300" />
                          )}
                        </span>
                        <div className="flex-1 text-xs">
                          <div
                            className={cn(
                              "leading-5",
                              String(s.status).toLowerCase() === "completed" &&
                                "text-green-700",
                              String(s.status).toLowerCase() === "failed" &&
                                "text-red-700",
                            )}
                          >
                            {s.title ?? `Step ${i + 1}`}
                          </div>
                        </div>
                      </li>
                    ))}
                  </ol>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      );
    },
  });

  const getStatePreviewJSON = (
    s: AgentState | undefined,
  ): Record<string, unknown> => {
    const snapshot = (s ?? initialState) as AgentState;
    const { globalTitle, globalDescription, items } = snapshot;
    return {
      globalTitle: globalTitle ?? initialState.globalTitle,
      globalDescription: globalDescription ?? initialState.globalDescription,
      items: items ?? initialState.items,
    };
  };

  // Strengthen grounding: always prefer shared state over chat history
  useCopilotAdditionalInstructions({
    instructions: (() => {
      const items = viewState.items ?? initialState.items;
      const gTitle = viewState.globalTitle ?? "";
      const gDesc = viewState.globalDescription ?? "";
      const summary = items
        .slice(0, 5)
        .map((p: Item) => `id=${p.id} • name=${p.name} • type=${p.type}`)
        .join("\n");
      const fieldSchema = [
        "FIELD SCHEMA (authoritative):",
        "- project.data:",
        "  - field1: string (text)",
        "  - field2: string (select: 'Option A' | 'Option B' | 'Option C'; empty string means unset)",
        "  - field3: string (date 'YYYY-MM-DD')",
        "  - field4: ChecklistItem[] where ChecklistItem={id: string, text: string, done: boolean, proposed: boolean}",
        "- entity.data:",
        "  - field1: string",
        "  - field2: string (select: 'Option A' | 'Option B' | 'Option C'; empty string means unset)",
        "  - field3: string[] (selected tags; subset of field3_options)",
        "  - field3_options: string[] (available tags)",
        "- note.data:",
        "  - field1: string (textarea)",
        "- chart.data:",
        "  - field1: Array<{id: string, label: string, value: number | ''}> with value in [0..100] or ''",
      ].join("\n");
      const toolUsageHints = [
        "TOOL USAGE HINTS:",
        "- Prefer calling specific actions: setProjectField1, setProjectField2, setProjectField3, addProjectChecklistItem, setProjectChecklistItem, removeProjectChecklistItem.",
        "- field2 values: 'Option A' | 'Option B' | 'Option C' | '' (empty clears).",
        "- field3 accepts natural dates (e.g., 'tomorrow', '2025-01-30'); it will be normalized to YYYY-MM-DD.",
        "- Checklist edits accept either the generated id (e.g., '001') or a numeric index (e.g., '1', 1-based).",
        "- For charts, values are clamped to [0..100]; use clearChartField1Value to clear an existing metric value.",
        "- Card subtitle/description keywords (description, overview, summary, caption, blurb) map to setItemSubtitleOrDescription. Never write these to data.field1 for non-note items.",
        "LOOP CONTROL: When asked to 'add a couple' items, add at most 2 and stop. Avoid repeated calls to the same mutating tool in one turn.",
        "RANDOMIZATION: If the user specifically asks for random/mock values, you MAY generate and set them right away using the tools (do not block for more details).",
        "VERIFICATION: After tools run, re-read the latest state and confirm what actually changed.",
      ].join("\n");
      return [
        "ALWAYS ANSWER FROM SHARED STATE (GROUND TRUTH).",
        "If a command does not specify which item to change, ask the user to clarify before proceeding.",
        `Global Title: ${gTitle || "(none)"}`,
        `Global Description: ${gDesc || "(none)"}`,
        "Items (sample):",
        summary || "(none)",
        fieldSchema,
        toolUsageHints,
      ].join("\n");
    })(),
  });

  // HITL: dropdown selector for item choice using LangGraph interrupt
  useLangGraphInterrupt({
    enabled: ({ eventValue }) => {
      try {
        return (
          typeof eventValue === "object" && eventValue?.type === "choose_item"
        );
      } catch {
        return false;
      }
    },
    render: ({ event, resolve }) => {
      const items = viewState.items ?? initialState.items;
      if (!items.length) {
        return (
          <div className="rounded-md border bg-white p-4 text-sm shadow">
            <p>No items available.</p>
            <button
              className="mt-3 rounded border px-3 py-1"
              onClick={() => resolve("")}
            >
              Close
            </button>
          </div>
        );
      }
      let selectedId = items[0].id;
      return (
        <div className="rounded-md border bg-white p-4 text-sm shadow">
          <p className="mb-2 font-medium">Select an item</p>
          <p className="mb-3 text-xs text-gray-600">
            {(event?.value as { content?: string })?.content ??
              "Which item should I use?"}
          </p>
          <select
            className="w-full rounded border px-2 py-1"
            defaultValue={selectedId}
            onChange={(e) => {
              selectedId = e.target.value;
            }}
          >
            {items.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name} ({p.id})
              </option>
            ))}
          </select>
          <div className="mt-3 flex justify-end gap-2">
            <button
              className="rounded border px-3 py-1"
              onClick={() => resolve("")}
            >
              Cancel
            </button>
            <button
              className="rounded border bg-blue-600 px-3 py-1 text-white"
              onClick={() => resolve(selectedId)}
            >
              Use item
            </button>
          </div>
        </div>
      );
    },
  });

  // HITL: choose a card type when not specified
  useLangGraphInterrupt({
    enabled: ({ eventValue }) => {
      try {
        return (
          typeof eventValue === "object" &&
          eventValue?.type === "choose_card_type"
        );
      } catch {
        return false;
      }
    },
    render: ({ event, resolve }) => {
      const options: { id: CardType; label: string }[] = [
        { id: "project", label: "Project" },
        { id: "entity", label: "Entity" },
        { id: "note", label: "Note" },
        { id: "chart", label: "Chart" },
      ];
      let selected: CardType | "" = "";
      return (
        <div className="rounded-md border bg-white p-4 text-sm shadow">
          <p className="mb-2 font-medium">Select a card type</p>
          <p className="mb-3 text-xs text-gray-600">
            {(event?.value as { content?: string })?.content ??
              "Which type of card should I create?"}
          </p>
          <select
            className="w-full rounded border px-2 py-1"
            defaultValue=""
            onChange={(e) => {
              selected = e.target.value as CardType;
            }}
          >
            <option value="" disabled>
              Select an item type…
            </option>
            {options.map((opt) => (
              <option key={opt.id} value={opt.id}>
                {opt.label}
              </option>
            ))}
          </select>
          <div className="mt-3 flex justify-end gap-2">
            <button
              className="rounded border px-3 py-1"
              onClick={() => resolve("")}
            >
              Cancel
            </button>
            <button
              className="rounded border bg-blue-600 px-3 py-1 text-white"
              onClick={() => selected && resolve(selected)}
              disabled={!selected}
            >
              Use type
            </button>
          </div>
        </div>
      );
    },
  });

  const updateItem = useCallback(
    (itemId: string, updates: Partial<Item>) => {
      setState((prev) => {
        const base = prev ?? initialState;
        const items: Item[] = base.items ?? [];
        const nextItems = items.map((p) =>
          p.id === itemId ? { ...p, ...updates } : p,
        );
        return { ...base, items: nextItems } as AgentState;
      });
    },
    [setState],
  );

  const updateItemData = useCallback(
    (itemId: string, updater: (prev: ItemData) => ItemData) => {
      setState((prev) => {
        const base = prev ?? initialState;
        const items: Item[] = base.items ?? [];
        const nextItems = items.map((p) =>
          p.id === itemId ? { ...p, data: updater(p.data) } : p,
        );
        return { ...base, items: nextItems } as AgentState;
      });
    },
    [setState],
  );

  const deleteItem = useCallback(
    (itemId: string) => {
      setState((prev) => {
        const base = prev ?? initialState;
        const existed = (base.items ?? []).some((p) => p.id === itemId);
        const items: Item[] = (base.items ?? []).filter((p) => p.id !== itemId);
        return {
          ...base,
          items,
          lastAction: existed ? `deleted:${itemId}` : `not_found:${itemId}`,
        } as AgentState;
      });
    },
    [setState],
  );

  // Checklist item local helper removed; Copilot actions handle checklist CRUD

  const toggleTag = useCallback(
    (itemId: string, tag: string) => {
      updateItemData(itemId, (prev) => {
        const anyPrev = prev as { field3?: string[] };
        if (Array.isArray(anyPrev.field3)) {
          const selected = new Set<string>(anyPrev.field3 ?? []);
          if (selected.has(tag)) selected.delete(tag);
          else selected.add(tag);
          return { ...anyPrev, field3: Array.from(selected) } as ItemData;
        }
        return prev;
      });
    },
    [updateItemData],
  );

  // Remove checklist item local helper removed; use Copilot action instead

  // Helper to generate default data by type
  const defaultDataFor = useCallback((type: CardType): ItemData => {
    switch (type) {
      case "project":
        return {
          field1: "",
          field2: "",
          field3: "",
          field4: [],
          field4_id: 0,
        } as ProjectData;
      case "entity":
        return {
          field1: "",
          field2: "",
          field3: [],
          field3_options: ["Tag 1", "Tag 2", "Tag 3"],
        } as EntityData;
      case "note":
        return { field1: "" } as NoteData;
      case "chart":
        return { field1: [], field1_id: 0 } as ChartData;
      default:
        return { content: "" } as NoteData;
    }
  }, []);

  const addItem = useCallback(
    (type: CardType, name?: string) => {
      const t: CardType = type;
      let createdId = "";
      setState((prev) => {
        const base = prev ?? initialState;
        const items: Item[] = base.items ?? [];
        // Derive next numeric id robustly from both itemsCreated counter and max existing id
        const maxExisting = items.reduce((max, it) => {
          const parsed = Number.parseInt(String(it.id ?? "0"), 10);
          return Number.isFinite(parsed) ? Math.max(max, parsed) : max;
        }, 0);
        const priorCount = Number.isFinite(base.itemsCreated)
          ? (base.itemsCreated as number)
          : 0;
        const nextNumber = Math.max(priorCount, maxExisting) + 1;
        createdId = String(nextNumber).padStart(4, "0");
        const item: Item = {
          id: createdId,
          type: t,
          name: name && name.trim() ? name.trim() : "",
          subtitle: "",
          data: defaultDataFor(t),
        };
        const nextItems = [...items, item];
        // clamp to one per type when plan is active
        const planActive = String(base?.planStatus ?? "") === "in_progress";
        let deduped = nextItems;
        if (planActive) {
          const seen = new Set<string>();
          deduped = [];
          for (const it of nextItems) {
            const key = it.type;
            if (seen.has(key)) continue;
            seen.add(key);
            deduped.push(it);
          }
        }
        return {
          ...base,
          items: deduped,
          itemsCreated: nextNumber,
          lastAction: `created:${createdId}`,
        } as AgentState;
      });
      return createdId;
    },
    [defaultDataFor, setState],
  );

  // Frontend Actions (exposed as tools to the agent via CopilotKit)
  useCopilotAction({
    name: "setGlobalTitle",
    description: "Set the global title/name (outside of items).",
    available: "remote",
    parameters: [
      {
        name: "title",
        type: "string",
        required: true,
        description: "The new global title/name.",
      },
    ],
    handler: ({ title }: { title: string }) => {
      setState((prev) => ({ ...(prev ?? initialState), globalTitle: title }));
    },
  });

  useCopilotAction({
    name: "setGlobalDescription",
    description: "Set the global description/subtitle (outside of items).",
    available: "remote",
    parameters: [
      {
        name: "description",
        type: "string",
        required: true,
        description: "The new global description/subtitle.",
      },
    ],
    handler: ({ description }: { description: string }) => {
      setState((prev) => ({
        ...(prev ?? initialState),
        globalDescription: description,
      }));
    },
  });

  // Frontend Actions (item-scoped)
  useCopilotAction({
    name: "setItemName",
    description: "Set an item's name/title.",
    available: "remote",
    parameters: [
      {
        name: "name",
        type: "string",
        required: true,
        description: "The new item name/title.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: ({ name, itemId }: { name: string; itemId: string }) => {
      updateItem(itemId, { name });
    },
  });

  // Set item subtitle
  useCopilotAction({
    name: "setItemSubtitleOrDescription",
    description:
      "Set an item's description/subtitle (short description or subtitle).",
    available: "remote",
    parameters: [
      {
        name: "subtitle",
        type: "string",
        required: true,
        description: "The new item description/subtitle.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: ({ subtitle, itemId }: { subtitle: string; itemId: string }) => {
      updateItem(itemId, { subtitle });
    },
  });

  // Note-specific field updates (field numbering)
  useCopilotAction({
    name: "setNoteField1",
    description: "Update note content (note.data.field1).",
    available: "remote",
    parameters: [
      {
        name: "value",
        type: "string",
        required: true,
        description: "New content for note.data.field1.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (note).",
      },
    ],
    handler: ({ value, itemId }: { value: string; itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const nd = prev as NoteData;
        if (Object.prototype.hasOwnProperty.call(nd, "field1")) {
          return { ...(nd as NoteData), field1: value } as NoteData;
        }
        return prev;
      });
    },
  });

  useCopilotAction({
    name: "appendNoteField1",
    description: "Append text to note content (note.data.field1).",
    available: "remote",
    parameters: [
      {
        name: "value",
        type: "string",
        required: true,
        description: "Text to append to note.data.field1.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (note).",
      },
      {
        name: "withNewline",
        type: "boolean",
        required: false,
        description: "If true, prefix with a newline.",
      },
    ],
    handler: ({
      value,
      itemId,
      withNewline,
    }: {
      value: string;
      itemId: string;
      withNewline?: boolean;
    }) => {
      updateItemData(itemId, (prev) => {
        const nd = prev as NoteData;
        if (Object.prototype.hasOwnProperty.call(nd, "field1")) {
          const existing = nd.field1 ?? "";
          const next = existing + (withNewline ? "\n" : "") + value;
          return { ...(nd as NoteData), field1: next } as NoteData;
        }
        return prev;
      });
    },
  });

  useCopilotAction({
    name: "clearNoteField1",
    description: "Clear note content (note.data.field1).",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (note).",
      },
    ],
    handler: ({ itemId }: { itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const nd = prev as NoteData;
        if (Object.prototype.hasOwnProperty.call(nd, "field1")) {
          return { ...(nd as NoteData), field1: "" } as NoteData;
        }
        return prev;
      });
    },
  });

  useCopilotAction({
    name: "setProjectField1",
    description: "Update project field1 (text).",
    available: "remote",
    parameters: [
      {
        name: "value",
        type: "string",
        required: true,
        description: "New value for field1.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: ({ value, itemId }: { value: string; itemId: string }) => {
      const safeValue = String((value as unknown as string) ?? "");
      updateItemData(itemId, (prev) => {
        const anyPrev = prev as { field1?: string };
        if (typeof anyPrev.field1 === "string") {
          return { ...anyPrev, field1: safeValue } as ItemData;
        }
        return prev;
      });
    },
  });

  // Project-specific field updates
  useCopilotAction({
    name: "setProjectField2",
    description: "Update project field2 (select).",
    available: "remote",
    parameters: [
      {
        name: "value",
        type: "string",
        required: true,
        description: "New value for field2.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: ({ value, itemId }: { value: string; itemId: string }) => {
      const safeValue = String((value as unknown as string) ?? "");
      updateItemData(itemId, (prev) => {
        const anyPrev = prev as { field2?: string };
        if (typeof anyPrev.field2 === "string") {
          return { ...anyPrev, field2: safeValue } as ItemData;
        }
        return prev;
      });
    },
  });

  useCopilotAction({
    name: "setProjectField3",
    description: "Update project field3 (date, YYYY-MM-DD).",
    available: "remote",
    parameters: [
      {
        name: "date",
        type: "string",
        required: true,
        description: "Date in YYYY-MM-DD format.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: (
      args: { date?: string; itemId: string } & Record<string, unknown>,
    ) => {
      const itemId = String(args.itemId);
      const dictArgs = args as Record<string, unknown>;
      const rawInput =
        dictArgs["date"] ??
        dictArgs["value"] ??
        dictArgs["val"] ??
        dictArgs["text"];
      const normalizeDate = (input: unknown): string | null => {
        if (input == null) return null;
        if (input instanceof Date && !isNaN(input.getTime())) {
          const yyyy = input.getUTCFullYear();
          const mm = String(input.getUTCMonth() + 1).padStart(2, "0");
          const dd = String(input.getUTCDate()).padStart(2, "0");
          return `${yyyy}-${mm}-${dd}`;
        }
        const asString = String(input);
        // Already in YYYY-MM-DD
        if (/^\d{4}-\d{2}-\d{2}$/.test(asString)) return asString;
        const parsed = new Date(asString);
        if (!isNaN(parsed.getTime())) {
          const yyyy = parsed.getUTCFullYear();
          const mm = String(parsed.getUTCMonth() + 1).padStart(2, "0");
          const dd = String(parsed.getUTCDate()).padStart(2, "0");
          return `${yyyy}-${mm}-${dd}`;
        }
        return null;
      };
      const normalized = normalizeDate(rawInput);
      if (!normalized) return;
      updateItemData(itemId, (prev) => {
        const anyPrev = prev as { field3?: string };
        if (typeof anyPrev.field3 === "string") {
          return { ...anyPrev, field3: normalized } as ItemData;
        }
        return prev;
      });
    },
  });

  // Clear project field3 (date)
  useCopilotAction({
    name: "clearProjectField3",
    description: "Clear project field3 (date).",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: ({ itemId }: { itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const anyPrev = prev as { field3?: string };
        if (typeof anyPrev.field3 === "string") {
          return { ...anyPrev, field3: "" } as ItemData;
        }
        return prev;
      });
    },
  });

  // Project field4 (checklist) CRUD
  useCopilotAction({
    name: "addProjectChecklistItem",
    description: "Add a new checklist item to a project.",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (project).",
      },
      {
        name: "text",
        type: "string",
        required: false,
        description: "Initial checklist text (optional).",
      },
    ],
    handler: ({ itemId, text }: { itemId: string; text?: string }) => {
      const norm = (text ?? "").trim();
      // 1) If a checklist item with same text exists, return its id
      const project = (viewState.items ?? initialState.items).find(
        (it) => it.id === itemId,
      );
      if (project && project.type === "project") {
        const list = (project.data as ProjectData).field4 ?? [];
        const dup = norm
          ? list.find((c) => (c.text ?? "").trim() === norm)
          : undefined;
        if (dup) return dup.id;
      }
      // 2) Per-project throttle to avoid rapid duplicates
      const now = Date.now();
      const key = `${itemId}`;
      const recent = lastChecklistCreationRef.current[key];
      if (recent && recent.text === norm && now - recent.ts < 800) {
        return recent.id;
      }
      let createdId = "";
      updateItemData(itemId, (prev) => {
        const { next, createdId: id } = projectAddField4Item(
          prev as ProjectData,
          text,
        );
        createdId = id;
        return next;
      });
      lastChecklistCreationRef.current[key] = {
        text: norm,
        id: createdId,
        ts: now,
      };
      return createdId;
    },
  });

  useCopilotAction({
    name: "setProjectChecklistItem",
    description: "Update a project's checklist item text and/or done state.",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (project).",
      },
      {
        name: "checklistItemId",
        type: "string",
        required: true,
        description: "Checklist item id.",
      },
      {
        name: "text",
        type: "string",
        required: false,
        description: "New text (optional).",
      },
      {
        name: "done",
        type: "boolean",
        required: false,
        description: "Done status (optional).",
      },
    ],
    handler: (args) => {
      const itemId = String(args.itemId ?? "");
      const target = args.checklistItemId ?? args.itemId;
      let targetId = target != null ? String(target) : "";
      const maybeDone = args.done;
      const text: string | undefined =
        args.text != null ? String(args.text) : undefined;
      const toBool = (v: unknown): boolean | undefined => {
        if (typeof v === "boolean") return v;
        if (typeof v === "string") {
          const s = v.trim().toLowerCase();
          if (s === "true") return true;
          if (s === "false") return false;
        }
        return undefined;
      };
      const done = toBool(maybeDone);
      updateItemData(itemId, (prev) => {
        let next = prev as ProjectData;
        const list = next.field4 ?? [];
        // If a plain numeric was provided, allow using it as index (0- or 1-based)
        if (!list.some((c) => c.id === targetId) && /^\d+$/.test(targetId)) {
          const n = parseInt(targetId, 10);
          let idx = -1;
          if (n >= 0 && n < list.length)
            idx = n; // 0-based
          else if (n > 0 && n - 1 < list.length) idx = n - 1; // 1-based
          if (idx >= 0) targetId = list[idx].id;
        }
        if (typeof text === "string")
          next = projectSetField4ItemText(next, targetId, text);
        if (typeof done === "boolean")
          next = projectSetField4ItemDone(next, targetId, done);
        return next;
      });
    },
  });

  useCopilotAction({
    name: "removeProjectChecklistItem",
    description: "Remove a checklist item from a project by id.",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (project).",
      },
      {
        name: "checklistItemId",
        type: "string",
        required: true,
        description: "Checklist item id to remove.",
      },
    ],
    handler: ({
      itemId,
      checklistItemId,
    }: {
      itemId: string;
      checklistItemId: string;
    }) => {
      updateItemData(itemId, (prev) =>
        projectRemoveField4Item(prev as ProjectData, checklistItemId),
      );
    },
  });

  // Entity field updates and field3 (tags)
  useCopilotAction({
    name: "setEntityField1",
    description: "Update entity field1 (text).",
    available: "remote",
    parameters: [
      {
        name: "value",
        type: "string",
        required: true,
        description: "New value for field1.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (entity).",
      },
    ],
    handler: ({ value, itemId }: { value: string; itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const anyPrev = prev;
        if (typeof anyPrev.field1 === "string") {
          return { ...anyPrev, field1: value } as ItemData;
        }
        return prev;
      });
    },
  });

  useCopilotAction({
    name: "setEntityField2",
    description: "Update entity field2 (select).",
    available: "remote",
    parameters: [
      {
        name: "value",
        type: "string",
        required: true,
        description: "New value for field2.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (entity).",
      },
    ],
    handler: ({ value, itemId }: { value: string; itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const anyPrev = prev as { field2?: string };
        if (typeof anyPrev.field2 === "string") {
          return { ...anyPrev, field2: value } as ItemData;
        }
        return prev;
      });
    },
  });

  useCopilotAction({
    name: "addEntityField3",
    description: "Add a tag to entity field3 (tags) if not present.",
    available: "remote",
    parameters: [
      {
        name: "tag",
        type: "string",
        required: true,
        description: "Tag to add.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (entity).",
      },
    ],
    handler: ({ tag, itemId }: { tag: string; itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const e = prev as EntityData;
        const current = new Set<string>((e.field3 ?? []) as string[]);
        current.add(tag);
        return { ...e, field3: Array.from(current) } as EntityData;
      });
    },
  });

  useCopilotAction({
    name: "removeEntityField3",
    description: "Remove a tag from entity field3 (tags) if present.",
    available: "remote",
    parameters: [
      {
        name: "tag",
        type: "string",
        required: true,
        description: "Tag to remove.",
      },
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (entity).",
      },
    ],
    handler: ({ tag, itemId }: { tag: string; itemId: string }) => {
      updateItemData(itemId, (prev) => {
        const e = prev as EntityData;
        return {
          ...e,
          field3: ((e.field3 ?? []) as string[]).filter((t) => t !== tag),
        } as EntityData;
      });
    },
  });

  // Chart field1 (metrics) CRUD
  useCopilotAction({
    name: "addChartField1",
    description: "Add a new metric (field1 entries).",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (chart).",
      },
      {
        name: "label",
        type: "string",
        required: false,
        description: "Metric label (optional).",
      },
      {
        name: "value",
        type: "number",
        required: false,
        description: "Metric value 0..100 (optional).",
      },
    ],
    handler: ({
      itemId,
      label,
      value,
    }: {
      itemId: string;
      label?: string;
      value?: number;
    }) => {
      const normLabel = (label ?? "").trim();
      // 1) If a metric with same label exists, return its id
      const item = (viewState.items ?? initialState.items).find(
        (it) => it.id === itemId,
      );
      if (item && item.type === "chart") {
        const list = (item.data as ChartData).field1 ?? [];
        const dup = normLabel
          ? list.find((m) => (m.label ?? "").trim() === normLabel)
          : undefined;
        if (dup) return dup.id;
      }
      // 2) Per-chart throttle to avoid rapid duplicates
      const now = Date.now();
      const key = `${itemId}`;
      const recent = lastMetricCreationRef.current[key];
      const valKey: number | "" =
        typeof value === "number" && Number.isFinite(value)
          ? Math.max(0, Math.min(100, value))
          : "";
      if (
        recent &&
        recent.label === normLabel &&
        recent.value === valKey &&
        now - recent.ts < 800
      ) {
        return recent.id;
      }
      let createdId = "";
      updateItemData(itemId, (prev) => {
        const { next, createdId: id } = chartAddField1Metric(
          prev as ChartData,
          label,
          value,
        );
        createdId = id;
        return next;
      });
      lastMetricCreationRef.current[key] = {
        label: normLabel,
        value: valKey,
        id: createdId,
        ts: now,
      };
      return createdId;
    },
  });

  useCopilotAction({
    name: "setChartField1Label",
    description: "Update chart field1 entry label by index.",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (chart).",
      },
      {
        name: "index",
        type: "number",
        required: true,
        description: "Metric index (0-based).",
      },
      {
        name: "label",
        type: "string",
        required: true,
        description: "New metric label.",
      },
    ],
    handler: ({
      itemId,
      index,
      label,
    }: {
      itemId: string;
      index: number;
      label: string;
    }) => {
      updateItemData(itemId, (prev) =>
        chartSetField1Label(prev as ChartData, index, label),
      );
    },
  });

  useCopilotAction({
    name: "setChartField1Value",
    description: "Update chart field1 entry value by index (0..100).",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (chart).",
      },
      {
        name: "index",
        type: "number",
        required: true,
        description: "Metric index (0-based).",
      },
      {
        name: "value",
        type: "number",
        required: true,
        description: "Metric value 0..100.",
      },
    ],
    handler: ({
      itemId,
      index,
      value,
    }: {
      itemId: string;
      index: number;
      value: number;
    }) => {
      updateItemData(itemId, (prev) =>
        chartSetField1Value(prev as ChartData, index, value),
      );
    },
  });

  // Clear chart metric value by index
  useCopilotAction({
    name: "clearChartField1Value",
    description: "Clear chart field1 entry value by index (sets to empty).",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (chart).",
      },
      {
        name: "index",
        type: "number",
        required: true,
        description: "Metric index (0-based).",
      },
    ],
    handler: ({ itemId, index }: { itemId: string; index: number }) => {
      updateItemData(itemId, (prev) =>
        chartSetField1Value(prev as ChartData, index, ""),
      );
    },
  });

  useCopilotAction({
    name: "removeChartField1",
    description: "Remove a chart field1 entry by index.",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id (chart).",
      },
      {
        name: "index",
        type: "number",
        required: true,
        description: "Metric index (0-based).",
      },
    ],
    handler: ({ itemId, index }: { itemId: string; index: number }) => {
      updateItemData(itemId, (prev) =>
        chartRemoveField1Metric(prev as ChartData, index),
      );
    },
  });

  useCopilotAction({
    name: "createItem",
    description: "Create a new item.",
    available: "remote",
    parameters: [
      {
        name: "type",
        type: "string",
        required: true,
        description: "One of: project, entity, note, chart.",
      },
      {
        name: "name",
        type: "string",
        required: false,
        description: "Optional item name.",
      },
    ],
    handler: ({ type, name }: { type: string; name?: string }) => {
      const t = type as CardType;
      const normalized = (name ?? "").trim();
      const planStatus = String(viewState?.planStatus ?? "");

      // Per-plan strict idempotency: during an active plan, only one creation per type
      if (planStatus === "in_progress") {
        // If any item of this type already exists, return its id instead of creating another
        const existingOfType = (viewState.items ?? initialState.items).find(
          (it) => it.type === t,
        );
        if (existingOfType) {
          createdByTypeRef.current[t] = existingOfType.id;
          return existingOfType.id;
        }
        const existingCreatedId = createdByTypeRef.current[t];
        if (existingCreatedId) {
          return existingCreatedId;
        }
      }
      // 1) Name-based idempotency: if an item with same type+name exists, return it
      if (normalized) {
        const existing = (viewState.items ?? initialState.items).find(
          (it) => it.type === t && (it.name ?? "").trim() === normalized,
        );
        if (existing) {
          return existing.id;
        }
      }
      // 2) Per-run throttle: avoid duplicate creations within a short window for identical type+name
      const now = Date.now();
      const recent = lastCreationRef.current;
      if (
        recent &&
        recent.type === t &&
        (recent.name ?? "") === normalized &&
        now - recent.ts < 5000
      ) {
        return recent.id;
      }
      const id = addItem(t, name);
      lastCreationRef.current = { type: t, name: normalized, id, ts: now };
      if (planStatus === "in_progress") {
        createdByTypeRef.current[t] = id;
      }
      return id;
    },
  });

  // Frontend action: delete an item by id
  useCopilotAction({
    name: "deleteItem",
    description: "Delete an item by id.",
    available: "remote",
    parameters: [
      {
        name: "itemId",
        type: "string",
        required: true,
        description: "Target item id.",
      },
    ],
    handler: ({ itemId }: { itemId: string }) => {
      const existed = (viewState.items ?? initialState.items).some(
        (p) => p.id === itemId,
      );
      deleteItem(itemId);
      return existed ? `deleted:${itemId}` : `not_found:${itemId}`;
    },
  });

  const titleClasses = cn(
    /* base styles */
    "w-full outline-none rounded-md px-2 py-1",
    "bg-transparent placeholder:text-gray-400",
    "ring-1 ring-transparent transition-all ease-out",
    /* hover styles */
    "hover:ring-border",
    /* focus styles */
    "focus:ring-2 focus:ring-accent/50 focus:shadow-sm focus:bg-accent/10",
    "focus:shadow-accent focus:placeholder:text-accent/65 focus:text-accent",
  );

  return (
    <div
      style={
        { "--copilot-kit-primary-color": "#2563eb" } as CopilotKitCSSProperties
      }
      className="h-screen flex flex-col"
    >
      {/* Main Layout */}
      <div className="flex flex-1 overflow-hidden">
        {/* Chat Sidebar */}
        <aside className="-order-1 max-md:hidden flex flex-col min-w-80 w-[30vw] max-w-120 p-4 pr-0">
          <div className="h-full flex flex-col align-start w-full shadow-lg rounded-2xl border border-sidebar-border overflow-hidden">
            {/* Chat Header */}
            <AppChatHeader />
            {/* Sidebar Plan Tracker or Completed Summary */}
            {(() => {
              const steps = planStepsMemo;
              const count = steps.length;
              const status = String(planStatusMemo ?? "");
              if (
                !Array.isArray(steps) ||
                count === 0 ||
                status === "completed" ||
                status === "failed" ||
                status === ""
              )
                return null;
              if (status === "completed") {
                return (
                  <div className="px-4 pt-3 border-b">
                    <Accordion type="single" collapsible>
                      <AccordionItem value="done">
                        <AccordionTrigger className="text-xs pt-0 pb-3">
                          <span className="inline-flex items-center gap-2">
                            <Check className="h-4 w-4 text-green-600" />
                            <span className="font-medium">
                              {count} steps completed
                            </span>
                          </span>
                        </AccordionTrigger>
                        <AccordionContent>
                          <div className="rounded-xl border bg-card p-3">
                            <div className="mb-1 text-xs font-semibold">
                              Plan{" "}
                              <span className="ml-2 rounded-full px-2 py-0.5 text-[10px] font-medium border text-green-700 border-green-300 bg-green-50">
                                completed
                              </span>
                            </div>
                            <ol className="space-y-1">
                              {steps.map((s, i) => (
                                <li
                                  key={`${s.title ?? "step"}-${i}`}
                                  className="flex items-start gap-2"
                                >
                                  <span className="mt-0.5 inline-flex h-4 w-4 items-center justify-center">
                                    <Check className="h-4 w-4 text-green-600" />
                                  </span>
                                  <div className="flex-1 text-xs">
                                    <div className="leading-5 text-green-700">
                                      {s.title ?? `Step ${i + 1}`}
                                    </div>
                                  </div>
                                </li>
                              ))}
                            </ol>
                          </div>
                        </AccordionContent>
                      </AccordionItem>
                    </Accordion>
                  </div>
                );
              }
              return (
                <div className="p-4 py-3 border-b">
                  <div className="rounded-xl border bg-card p-3">
                    <div className="mb-1 text-xs font-semibold">
                      Plan{" "}
                      <span className="ml-2 rounded-full px-2 py-0.5 text-[10px] font-medium border text-blue-700 border-blue-300 bg-blue-50">
                        in_progress
                      </span>
                    </div>
                    <ol className="space-y-1">
                      {steps.map((s, i) => {
                        const st = String(s?.status ?? "pending").toLowerCase();
                        const isActive =
                          typeof currentStepIndexMemo === "number" &&
                          currentStepIndexMemo === i &&
                          st === "in_progress";
                        const isDone = st === "completed";
                        const isFailed = st === "failed";
                        return (
                          <li
                            key={`${s.title ?? "step"}-${i}`}
                            className="flex items-start gap-2"
                          >
                            <span className="mt-0.5 inline-flex h-4 w-4 items-center justify-center">
                              {isDone ? (
                                <Check className="h-4 w-4 text-green-600" />
                              ) : isActive ? (
                                <Loader2 className="h-4 w-4 animate-spin text-blue-600" />
                              ) : isFailed ? (
                                <X className="h-4 w-4 text-red-600" />
                              ) : (
                                <span className="block h-2 w-2 rounded-full bg-gray-300" />
                              )}
                            </span>
                            <div className="flex-1 text-xs">
                              <div
                                className={cn(
                                  "leading-5",
                                  isDone && "text-green-700",
                                  isActive && "text-blue-700",
                                  isFailed && "text-red-700",
                                )}
                              >
                                {s.title ?? `Step ${i + 1}`}
                              </div>
                            </div>
                          </li>
                        );
                      })}
                    </ol>
                  </div>
                </div>
              );
            })()}
            {/* Chat Content - conditionally rendered to avoid duplicate rendering */}
            {isDesktop && (
              <CopilotChat
                className="flex-1 overflow-auto w-full"
                labels={{
                  title: "Agent",
                  initial:
                    "👋 Share a brief or ask to extract fields. Changes will sync with the canvas in real time.",
                }}
                suggestions={[
                  {
                    title: "Add a Project",
                    message: "Create a new project.",
                  },
                  {
                    title: "Add an Entity",
                    message: "Create a new entity.",
                  },
                  {
                    title: "Add a Note",
                    message: "Create a new note.",
                  },
                  {
                    title: "Add a Chart",
                    message: "Create a new chart.",
                  },
                ]}
              />
            )}
          </div>
        </aside>
        {/* Main Content */}
        <main className="relative flex flex-1 h-full">
          <div
            ref={scrollAreaRef}
            className="relative overflow-auto size-full px-4 sm:px-8 md:px-10 py-4"
          >
            <div
              className={cn(
                "relative mx-auto max-w-7xl h-full min-h-8",
                (showJsonView || (viewState.items ?? []).length === 0) &&
                  "flex flex-col",
              )}
            >
              {/* Global Title & Description (hidden in JSON view) */}
              {!showJsonView && (
                <motion.div
                  style={{ opacity: headerOpacity }}
                  className="sticky top-0 mb-6"
                >
                  <input
                    ref={titleInputRef}
                    disabled={headerDisabled}
                    value={viewState?.globalTitle ?? initialState.globalTitle}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setState((prev) => ({
                        ...(prev ?? initialState),
                        globalTitle: e.target.value,
                      }))
                    }
                    placeholder="Canvas title..."
                    className={cn(titleClasses, "text-2xl font-semibold")}
                  />
                  <input
                    ref={descTextareaRef}
                    disabled={headerDisabled}
                    value={
                      viewState?.globalDescription ??
                      initialState.globalDescription
                    }
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setState((prev) => ({
                        ...(prev ?? initialState),
                        globalDescription: e.target.value,
                      }))
                    }
                    placeholder="Canvas description..."
                    className={cn(
                      titleClasses,
                      "mt-2 text-sm leading-6 resize-none overflow-hidden",
                    )}
                  />
                </motion.div>
              )}

              {(viewState.items ?? []).length === 0 ? (
                <EmptyState className="flex-1">
                  <div className="mx-auto max-w-lg text-center">
                    <h2 className="text-lg font-semibold text-foreground">
                      Nothing here yet
                    </h2>
                    <p className="mt-2 text-sm text-muted-foreground">
                      Create your first item to get started.
                    </p>
                    <div className="mt-6 flex justify-center">
                      <NewItemMenu
                        onSelect={(t: CardType) => addItem(t)}
                        align="center"
                        className="md:h-10"
                      />
                    </div>
                  </div>
                </EmptyState>
              ) : (
                <div className="flex-1 py-0 overflow-hidden">
                  {showJsonView ? (
                    <div className="pb-16 size-full">
                      <div className="rounded-2xl border shadow-sm bg-card size-full overflow-auto max-md:text-sm">
                        <ShikiHighlighter language="json" theme="github-light">
                          {JSON.stringify(
                            getStatePreviewJSON(viewState),
                            null,
                            2,
                          )}
                        </ShikiHighlighter>
                      </div>
                    </div>
                  ) : (
                    <div className="grid gap-6 lg:grid-cols-2 pb-20">
                      {(viewState.items ?? []).map((item) => (
                        <article
                          key={item.id}
                          className="relative rounded-2xl border p-5 shadow-sm transition-colors ease-out bg-card hover:border-accent/40 focus-within:border-accent/60"
                        >
                          <button
                            type="button"
                            aria-label="Delete card"
                            className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-card text-gray-400 hover:bg-accent/10 hover:text-accent transition-colors"
                            onClick={() => deleteItem(item.id)}
                          >
                            <X className="h-4 w-4" />
                          </button>
                          <ItemHeader
                            id={item.id}
                            name={item.name}
                            subtitle={item.subtitle}
                            description={""}
                            onNameChange={(v) =>
                              updateItem(item.id, { name: v })
                            }
                            onSubtitleChange={(v) =>
                              updateItem(item.id, { subtitle: v })
                            }
                          />

                          <div className="mt-6">
                            <CardRenderer
                              item={item}
                              onUpdateData={(updater) =>
                                updateItemData(item.id, updater)
                              }
                              onToggleTag={(tag) => toggleTag(item.id, tag)}
                            />
                          </div>
                        </article>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
          {(viewState.items ?? []).length > 0 ? (
            <div
              className={cn(
                "absolute left-1/2 -translate-x-1/2 bottom-4",
                "inline-flex rounded-lg shadow-lg bg-card",
                "[&_button]:bg-card [&_button]:w-22 md:[&_button]:h-10",
                "[&_button]:shadow-none! [&_button]:hover:bg-accent",
                "[&_button]:hover:border-accent [&_button]:hover:text-accent",
                "[&_button]:hover:bg-accent/10!",
              )}
            >
              <NewItemMenu
                onSelect={(t: CardType) => addItem(t)}
                align="center"
                className="rounded-r-none border-r-0 peer"
              />
              <Button
                type="button"
                variant="outline"
                className={cn(
                  "gap-1.25 text-base font-semibold rounded-l-none",
                  "peer-hover:border-l-accent!",
                )}
                onClick={() => setShowJsonView((v) => !v)}
              >
                {showJsonView ? "Canvas" : <>JSON</>}
              </Button>
            </div>
          ) : null}
        </main>
      </div>
      <div className="md:hidden">
        {/* Mobile Chat Popup - conditionally rendered to avoid duplicate rendering */}
        {!isDesktop && (
          <CopilotPopup
            Header={PopupHeader}
            labels={{
              title: "Agent",
              initial:
                "👋 Share a brief or ask to extract fields. Changes will sync with the canvas in real time.",
            }}
            suggestions={[
              {
                title: "Add a Project",
                message: "Create a new project.",
              },
              {
                title: "Add an Entity",
                message: "Create a new entity.",
              },
              {
                title: "Add a Note",
                message: "Create a new note.",
              },
              {
                title: "Add a Chart",
                message: "Create a new chart.",
              },
            ]}
          />
        )}
      </div>
    </div>
  );
}