"use client";

import { useMemo, useRef, useState } from "react";
import {
  Bot,
  CheckCircle2,
  Clock3,
  Copy,
  Database,
  FileCheck2,
  FileText,
  History,
  MessageSquare,
  PanelLeft,
  Plus,
  RotateCcw,
  Search,
  Sparkles,
  Star,
  type LucideIcon,
} from "lucide-react";
import {
  Editor,
  createEditorStore,
  defaultCatalog,
  type EditorSpec,
  type InlineMarkType,
} from "@reopt-ai/opt-editor";
import {
  Avatar,
  Badge,
  Button,
  Progress,
  ToastProvider,
  cn,
} from "@reopt-ai/opt-ui";
import { useExampleAction } from "@/components/examples/use-example-action";
import type { EditorExampleDemoProps } from "./basic-editor-demo";

const AI_CREDIT_COST = 6;

export const BRANDAPP_EDITOR_SDK_SNIPPET = `// lib/brandapp-editor.ts
import { createReoptEavClient } from "@reopt-ai/brandapp-sdk/eav";

let eav: ReturnType<typeof createReoptEavClient> | undefined;

export function getBrandappEditorEavClient() {
  eav ??= createReoptEavClient({
    clientId: process.env.BRANDAPP_CLIENT_ID!,
    clientSecret: process.env.BRANDAPP_CLIENT_SECRET!,
    brandappId: process.env.BRANDAPP_ID!,
  });

  return eav;
}`;

type NoteEntityId =
  | "notes.workspace_page"
  | "campaigns.launch_plan"
  | "research.activation_brief"
  | "meetings.launch_review"
  | "drafts.workspace_inbox";

interface WorkspaceNote {
  id: string;
  title: string;
  section: string;
  owner: string;
  entityId: NoteEntityId;
  updated: string;
  score: number;
  status: "draft" | "review" | "published";
  favorite: boolean;
  spec: EditorSpec;
}

interface NoteComment {
  id: string;
  author: string;
  text: string;
  created: string;
  status: "open" | "resolved";
}

interface HandoffEvent {
  id: string;
  label: string;
  detail: string;
  tone: "info" | "success" | "warning";
}

interface VersionHistoryEntry {
  id: string;
  version: number;
  label: string;
  detail: string;
  created: string;
  author: string;
  snapshot: EditorSpec;
  status: WorkspaceNote["status"];
  score: number;
}

type SidePanel = "health" | "comments" | "history";

const SIDE_PANEL_TABS: Array<{
  id: SidePanel;
  label: string;
  Icon: LucideIcon;
}> = [
  { id: "health", label: "Health", Icon: CheckCircle2 },
  { id: "comments", label: "Comments", Icon: MessageSquare },
  { id: "history", label: "History", Icon: History },
];

const NOTE_ENTITY_OPTIONS: Array<{
  id: NoteEntityId;
  label: string;
  detail: string;
}> = [
  {
    id: "notes.workspace_page",
    label: "notes.workspace_page",
    detail: "Canonical note snapshot",
  },
  {
    id: "campaigns.launch_plan",
    label: "campaigns.launch_plan",
    detail: "Campaign execution record",
  },
  {
    id: "research.activation_brief",
    label: "research.activation_brief",
    detail: "Customer research entity",
  },
  {
    id: "meetings.launch_review",
    label: "meetings.launch_review",
    detail: "Decision-log entity",
  },
  {
    id: "drafts.workspace_inbox",
    label: "drafts.workspace_inbox",
    detail: "Unmapped draft inbox",
  },
];

interface NoteTemplate {
  id: string;
  title: string;
  description: string;
  section: string;
  owner: string;
  entityId: NoteEntityId;
  score: number;
  makeSpec: (title: string) => EditorSpec;
  handoff: {
    label: string;
    detail: string;
  };
}

const text = (value: string, marks: InlineMarkType[] = []) => [
  { text: value, marks },
];

function makeLaunchPlanSpec(): EditorSpec {
  return {
    root: ["title", "summary", "callout", "milestones", "risks"],
    elements: {
      title: {
        id: "title",
        type: "heading",
        attrs: { level: 1 },
        content: text("Launch operating plan"),
      },
      summary: {
        id: "summary",
        type: "paragraph",
        attrs: {},
        content: text(
          "A shared planning page for campaign scope, creative review, and BrandApp data checkpoints.",
        ),
      },
      callout: {
        id: "callout",
        type: "callout",
        attrs: { variant: "info" },
        content: text(
          "BrandApp EAV sync is treated as a release gate. No campaign is marked ready until owner, audience, credits, and legal copy are resolved.",
        ),
      },
      milestones: {
        id: "milestones",
        type: "list",
        attrs: { ordered: false },
        children: ["m1", "m2", "m3"],
      },
      m1: {
        id: "m1",
        type: "list-item",
        attrs: {},
        content: text("Approve audience query and suppression rules"),
      },
      m2: {
        id: "m2",
        type: "list-item",
        attrs: {},
        content: text("Generate three tone variants through BrandApp AI"),
      },
      m3: {
        id: "m3",
        type: "list-item",
        attrs: {},
        content: text("Publish note snapshot to the campaign base"),
      },
      risks: {
        id: "risks",
        type: "paragraph",
        attrs: {},
        content: text(
          "Open risk: Korean and English copy need final legal review before scheduled send.",
        ),
      },
    },
    version: 1,
  };
}

function makeResearchSpec(): EditorSpec {
  return {
    root: ["title", "context", "insights", "decision"],
    elements: {
      title: {
        id: "title",
        type: "heading",
        attrs: { level: 1 },
        content: text("Customer research brief"),
      },
      context: {
        id: "context",
        type: "paragraph",
        attrs: {},
        content: text(
          "Interview synthesis for activation, referral, and retention experiments.",
        ),
      },
      insights: {
        id: "insights",
        type: "list",
        attrs: { ordered: false },
        children: ["i1", "i2", "i3"],
      },
      i1: {
        id: "i1",
        type: "list-item",
        attrs: {},
        content: text("Teams want a visible credit balance before running AI."),
      },
      i2: {
        id: "i2",
        type: "list-item",
        attrs: {},
        content: text("Content owners need comments next to generated blocks."),
      },
      i3: {
        id: "i3",
        type: "list-item",
        attrs: {},
        content: text("EAV records should link directly back to notes."),
      },
      decision: {
        id: "decision",
        type: "callout",
        attrs: { variant: "success" },
        content: text(
          "Ship the BrandApp sidebar as the default metadata panel for note workspaces.",
        ),
      },
    },
    version: 1,
  };
}

function makeBlankNoteSpec(title: string): EditorSpec {
  return {
    root: ["title", "summary", "checklist", "next-step"],
    elements: {
      title: {
        id: "title",
        type: "heading",
        attrs: { level: 1 },
        content: text(title),
      },
      summary: {
        id: "summary",
        type: "paragraph",
        attrs: {},
        content: text(
          "Draft a workspace note with campaign context, owner decisions, and the BrandApp entity that should receive this page.",
        ),
      },
      checklist: {
        id: "checklist",
        type: "list",
        attrs: { ordered: false },
        children: ["draft-owner", "draft-entity"],
      },
      "draft-owner": {
        id: "draft-owner",
        type: "list-item",
        attrs: {},
        content: text("Assign an owner and reviewer"),
      },
      "draft-entity": {
        id: "draft-entity",
        type: "list-item",
        attrs: {},
        content: text("Link this note to a BrandApp EAV record"),
      },
      "next-step": {
        id: "next-step",
        type: "callout",
        attrs: { variant: "info" },
        content: text("Use AI update once the first draft has enough context."),
      },
    },
    version: 1,
  };
}

function makeMeetingNotesSpec(title: string): EditorSpec {
  return {
    root: ["title", "agenda", "decisions", "follow-up"],
    elements: {
      title: {
        id: "title",
        type: "heading",
        attrs: { level: 1 },
        content: text(title),
      },
      agenda: {
        id: "agenda",
        type: "paragraph",
        attrs: {},
        content: text(
          "Meeting notes for launch review, decision owners, and BrandApp records that need follow-up.",
        ),
      },
      decisions: {
        id: "decisions",
        type: "list",
        attrs: { ordered: false },
        children: ["decision-owner", "decision-eav", "decision-date"],
      },
      "decision-owner": {
        id: "decision-owner",
        type: "list-item",
        attrs: {},
        content: text("Name the owner for each open decision"),
      },
      "decision-eav": {
        id: "decision-eav",
        type: "list-item",
        attrs: {},
        content: text("Attach the matching BrandApp EAV record"),
      },
      "decision-date": {
        id: "decision-date",
        type: "list-item",
        attrs: {},
        content: text("Set a review date before the next sync"),
      },
      "follow-up": {
        id: "follow-up",
        type: "callout",
        attrs: { variant: "info" },
        content: text(
          "Publish this snapshot after all decisions are assigned.",
        ),
      },
    },
    version: 1,
  };
}

function makeSpecWithTitle(spec: EditorSpec, title: string): EditorSpec {
  const next = structuredClone(spec);
  const titleElement = next.elements.title;
  if (titleElement) {
    titleElement.content = text(title);
  }
  return next;
}

function makeDraftCopySpec(spec: EditorSpec, title: string): EditorSpec {
  const next = makeSpecWithTitle(spec, title);
  next.version = 1;
  return next;
}

function makeSpecWithAiSummary(spec: EditorSpec): EditorSpec {
  const next = structuredClone(spec);
  const id = `ai-summary-${next.version + 1}`;

  if (!next.root.includes(id)) {
    next.root.splice(2, 0, id);
    next.elements[id] = {
      id,
      type: "callout",
      attrs: { variant: "warning" },
      content: text(
        "AI summary: keep the owner, BrandApp EAV entity, and review deadline visible before handoff.",
      ),
    };
    next.version += 1;
  }

  return next;
}

const INITIAL_NOTES: WorkspaceNote[] = [
  {
    id: "launch",
    title: "Launch operating plan",
    section: "Campaigns",
    owner: "Mina Park",
    entityId: "campaigns.launch_plan",
    updated: "2 min ago",
    score: 84,
    status: "review",
    favorite: true,
    spec: makeLaunchPlanSpec(),
  },
  {
    id: "research",
    title: "Customer research brief",
    section: "Research",
    owner: "Eric Han",
    entityId: "research.activation_brief",
    updated: "16 min ago",
    score: 72,
    status: "draft",
    favorite: false,
    spec: makeResearchSpec(),
  },
];

const NOTE_TEMPLATES: NoteTemplate[] = [
  {
    id: "launch-template",
    title: "Launch plan",
    description: "Campaign scope, risks, milestones, and EAV gate.",
    section: "Campaigns",
    owner: "Mina Park",
    entityId: "campaigns.launch_plan",
    score: 68,
    makeSpec: (title) => makeSpecWithTitle(makeLaunchPlanSpec(), title),
    handoff: {
      label: "Launch template applied",
      detail: "Milestones, risks, and EAV gate sections were created.",
    },
  },
  {
    id: "research-template",
    title: "Research brief",
    description: "Insights, product decisions, and linked customer entity.",
    section: "Research",
    owner: "Eric Han",
    entityId: "research.activation_brief",
    score: 64,
    makeSpec: (title) => makeSpecWithTitle(makeResearchSpec(), title),
    handoff: {
      label: "Research template applied",
      detail: "Insight list and BrandApp customer entity mapping are ready.",
    },
  },
  {
    id: "meeting-template",
    title: "Meeting notes",
    description: "Decision log with owner, review date, and EAV follow-up.",
    section: "Meetings",
    owner: "Hana Lee",
    entityId: "meetings.launch_review",
    score: 58,
    makeSpec: makeMeetingNotesSpec,
    handoff: {
      label: "Meeting template applied",
      detail: "Decision owners and EAV follow-up checklist were created.",
    },
  },
];

const INITIAL_COMMENTS: Record<string, NoteComment[]> = {
  launch: [
    {
      id: "launch-c1",
      author: "Hana Lee",
      text: "Legal needs the Korean subject line before this moves to published.",
      created: "4 min ago",
      status: "open",
    },
    {
      id: "launch-c2",
      author: "BrandApp AI",
      text: "Audience, credits, and campaign owner are already linked to the EAV record.",
      created: "7 min ago",
      status: "resolved",
    },
  ],
  research: [
    {
      id: "research-c1",
      author: "Mina Park",
      text: "Turn the credit-balance insight into a product requirement.",
      created: "12 min ago",
      status: "open",
    },
  ],
};

const INITIAL_HANDOFF_EVENTS: Record<string, HandoffEvent[]> = {
  launch: [
    {
      id: "launch-handoff-1",
      label: "EAV link verified",
      detail: "notes.workspace_page is ready for campaign handoff.",
      tone: "success",
    },
    {
      id: "launch-handoff-2",
      label: "Legal review pending",
      detail: "Open Korean subject line comment blocks publish.",
      tone: "warning",
    },
  ],
  research: [
    {
      id: "research-handoff-1",
      label: "Research note mapped",
      detail: "Activation insights are linked to the customer research entity.",
      tone: "info",
    },
  ],
};

const INITIAL_VERSION_HISTORY: Record<string, VersionHistoryEntry[]> = {
  launch: [
    {
      id: "launch-version-1",
      version: 1,
      label: "Review draft synced",
      detail: "Campaign handoff page pulled from notes.workspace_page.",
      created: "2 min ago",
      author: "BrandApp sync",
      snapshot: makeLaunchPlanSpec(),
      status: "review",
      score: 84,
    },
  ],
  research: [
    {
      id: "research-version-1",
      version: 1,
      label: "Research draft imported",
      detail: "Customer research page mapped from BrandApp EAV.",
      created: "16 min ago",
      author: "BrandApp sync",
      snapshot: makeResearchSpec(),
      status: "draft",
      score: 72,
    },
  ],
};

const STATUS_VARIANT: Record<
  WorkspaceNote["status"],
  "info" | "warning" | "success"
> = {
  draft: "info",
  review: "warning",
  published: "success",
};

function getEntityOption(entityId: NoteEntityId) {
  return (
    NOTE_ENTITY_OPTIONS.find((option) => option.id === entityId) ??
    NOTE_ENTITY_OPTIONS[0]
  );
}

function SidebarButton({
  note,
  active,
  onSelect,
}: {
  note: WorkspaceNote;
  active: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onSelect}
      aria-pressed={active}
      className={cn(
        "flex w-full items-start gap-3 rounded-lg px-3 py-2 text-left transition-colors",
        active
          ? "bg-accent text-accent-fg"
          : "text-text-secondary hover:bg-bg-subtle hover:text-text-primary",
      )}
    >
      <FileText className="mt-0.5 size-4 shrink-0" aria-hidden />
      <span className="min-w-0 flex-1">
        <span className="flex min-w-0 items-center gap-1 text-sm font-medium">
          <span className="truncate">{note.title}</span>
          {note.favorite ? (
            <Star className="size-3 shrink-0 fill-current" aria-hidden />
          ) : null}
        </span>
        <span className="block truncate text-xs opacity-75">
          {note.section} · {note.updated}
        </span>
      </span>
    </button>
  );
}

function ActivityRow({
  icon,
  title,
  detail,
}: {
  icon: React.ReactNode;
  title: string;
  detail: string;
}) {
  return (
    <div className="border-border-subtle bg-surface flex gap-3 rounded-lg border px-3 py-2">
      <div className="text-accent mt-0.5">{icon}</div>
      <div className="min-w-0">
        <p className="text-text-primary truncate text-sm font-medium">
          {title}
        </p>
        <p className="text-text-tertiary truncate text-xs">{detail}</p>
      </div>
    </div>
  );
}

export function NotesAppDemo(props: EditorExampleDemoProps) {
  return (
    <ToastProvider position="bottom-right">
      <NotesAppDemoInner {...props} />
    </ToastProvider>
  );
}

function NotesAppDemoInner({ compact = false }: EditorExampleDemoProps) {
  const { notReal } = useExampleAction();
  const [aiCredits, setAiCredits] = useState(64);
  const [notes, setNotes] = useState<WorkspaceNote[]>(INITIAL_NOTES);
  const [activeNoteId, setActiveNoteId] = useState(INITIAL_NOTES[0].id);
  const [searchQuery, setSearchQuery] = useState("");
  const [sidePanel, setSidePanel] = useState<SidePanel>("health");
  const [commentsByNote, setCommentsByNote] =
    useState<Record<string, NoteComment[]>>(INITIAL_COMMENTS);
  const [handoffEventsByNote, setHandoffEventsByNote] = useState<
    Record<string, HandoffEvent[]>
  >(INITIAL_HANDOFF_EVENTS);
  const [versionHistoryByNote, setVersionHistoryByNote] = useState<
    Record<string, VersionHistoryEntry[]>
  >(INITIAL_VERSION_HISTORY);
  const nextHandoffIdRef = useRef(100);
  const nextVersionHistoryIdRef = useRef(100);
  const activeNote = notes.find((note) => note.id === activeNoteId) ?? notes[0];
  const activeComments = commentsByNote[activeNote.id] ?? [];
  const activeHandoffEvents = handoffEventsByNote[activeNote.id] ?? [];
  const activeVersionHistory = versionHistoryByNote[activeNote.id] ?? [];
  const activeEntity = getEntityOption(activeNote.entityId);
  const openCommentCount = activeComments.filter(
    (comment) => comment.status === "open",
  ).length;
  const filteredNotes = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    const nextNotes = query
      ? notes.filter((note) =>
          [note.title, note.section, note.owner, note.status].some((value) =>
            value.toLowerCase().includes(query),
          ),
        )
      : notes;

    return [...nextNotes].sort((a, b) => {
      if (a.favorite === b.favorite) return 0;
      return a.favorite ? -1 : 1;
    });
  }, [notes, searchQuery]);
  const store = useMemo(
    () => createEditorStore(structuredClone(activeNote.spec)),
    [activeNote],
  );

  const appendHandoffEvent = (
    noteId: string,
    event: Omit<HandoffEvent, "id">,
  ) => {
    setHandoffEventsByNote((current) => ({
      ...current,
      [noteId]: [
        { id: `${noteId}-handoff-${nextHandoffIdRef.current++}`, ...event },
        ...(current[noteId] ?? []),
      ],
    }));
  };

  const appendVersionHistory = (
    noteId: string,
    event: Omit<VersionHistoryEntry, "id">,
  ) => {
    setVersionHistoryByNote((current) => ({
      ...current,
      [noteId]: [
        {
          id: `${noteId}-version-${nextVersionHistoryIdRef.current++}`,
          ...event,
          snapshot: structuredClone(event.snapshot),
        },
        ...(current[noteId] ?? []),
      ],
    }));
  };

  const handleAiSummary = () => {
    const nextSpec = makeSpecWithAiSummary(activeNote.spec);
    const nextScore = Math.min(98, activeNote.score + 7);

    setNotes((current) =>
      current.map((note) =>
        note.id === activeNote.id
          ? {
              ...note,
              score: nextScore,
              updated: "just now",
              spec: nextSpec,
            }
          : note,
      ),
    );
    appendHandoffEvent(activeNote.id, {
      label: "AI summary inserted",
      detail: "Owner, EAV entity, and review deadline were queued for handoff.",
      tone: "info",
    });
    appendVersionHistory(activeNote.id, {
      version: nextSpec.version,
      label: "AI summary version",
      detail: "BrandApp AI inserted the handoff summary block.",
      created: "just now",
      author: "BrandApp AI",
      snapshot: nextSpec,
      status: activeNote.status,
      score: nextScore,
    });
    setAiCredits((current) => Math.max(0, current - AI_CREDIT_COST));
    notReal("AI update");
  };

  const handleAddReviewNote = () => {
    const id = `${activeNote.id}-review-${activeComments.length + 1}`;
    const nextComment: NoteComment = {
      id,
      author: "Mina Park",
      text: "Review note added from the workspace. Keep this attached to the BrandApp handoff.",
      created: "just now",
      status: "open",
    };

    setCommentsByNote((current) => ({
      ...current,
      [activeNote.id]: [nextComment, ...(current[activeNote.id] ?? [])],
    }));
    appendHandoffEvent(activeNote.id, {
      label: "Review note added",
      detail: "New reviewer note is attached before BrandApp publish.",
      tone: "warning",
    });
    setSidePanel("comments");
  };

  const handleResolveComment = (commentId: string) => {
    setCommentsByNote((current) => ({
      ...current,
      [activeNote.id]: (current[activeNote.id] ?? []).map((comment) =>
        comment.id === commentId
          ? {
              ...comment,
              status: "resolved",
            }
          : comment,
      ),
    }));
    appendHandoffEvent(activeNote.id, {
      label: "Comment resolved",
      detail: "Reviewer blocker cleared for the BrandApp snapshot.",
      tone: "success",
    });
  };

  const handlePublishSnapshot = () => {
    if (openCommentCount > 0) {
      setSidePanel("comments");
      return;
    }

    const nextScore = Math.max(activeNote.score, 95);

    setNotes((current) =>
      current.map((note) =>
        note.id === activeNote.id
          ? {
              ...note,
              status: "published",
              updated: "just now",
              score: nextScore,
            }
          : note,
      ),
    );
    appendHandoffEvent(activeNote.id, {
      label: "Snapshot published",
      detail: `${activeNote.title} synced to notes EAV just now.`,
      tone: "success",
    });
    appendVersionHistory(activeNote.id, {
      version: activeNote.spec.version,
      label: "Published snapshot",
      detail: `${activeNote.title} published to notes.workspace_page.`,
      created: "just now",
      author: "BrandApp sync",
      snapshot: activeNote.spec,
      status: "published",
      score: nextScore,
    });
    notReal("Publish");
    setSidePanel("health");
  };

  const handleCreateNote = () => {
    const nextIndex = notes.length + 1;
    const title = `Untitled workspace ${nextIndex}`;
    const nextNote: WorkspaceNote = {
      id: `workspace-${nextIndex}`,
      title,
      section: "Inbox",
      owner: "Mina Park",
      entityId: "drafts.workspace_inbox",
      updated: "just now",
      score: 48,
      status: "draft",
      favorite: false,
      spec: makeBlankNoteSpec(title),
    };

    setNotes((current) => [nextNote, ...current]);
    setCommentsByNote((current) => ({ ...current, [nextNote.id]: [] }));
    setHandoffEventsByNote((current) => ({
      ...current,
      [nextNote.id]: [
        {
          id: `${nextNote.id}-handoff-1`,
          label: "Workspace created",
          detail: "Draft note is ready for owner and EAV mapping.",
          tone: "info",
        },
      ],
    }));
    setVersionHistoryByNote((current) => ({
      ...current,
      [nextNote.id]: [
        {
          id: `${nextNote.id}-version-1`,
          version: nextNote.spec.version,
          label: "Workspace created",
          detail: "Blank note snapshot started for BrandApp EAV mapping.",
          created: "just now",
          author: nextNote.owner,
          snapshot: structuredClone(nextNote.spec),
          status: nextNote.status,
          score: nextNote.score,
        },
      ],
    }));
    setActiveNoteId(nextNote.id);
    setSearchQuery("");
    setSidePanel("health");
  };

  const handleCreateFromTemplate = (template: NoteTemplate) => {
    const nextIndex = notes.length + 1;
    const title = `${template.title} ${nextIndex}`;
    const nextNote: WorkspaceNote = {
      id: `${template.id}-${nextIndex}`,
      title,
      section: template.section,
      owner: template.owner,
      entityId: template.entityId,
      updated: "just now",
      score: template.score,
      status: "draft",
      favorite: true,
      spec: template.makeSpec(title),
    };

    setNotes((current) => [nextNote, ...current]);
    setCommentsByNote((current) => ({ ...current, [nextNote.id]: [] }));
    setHandoffEventsByNote((current) => ({
      ...current,
      [nextNote.id]: [
        {
          id: `${nextNote.id}-handoff-1`,
          label: template.handoff.label,
          detail: template.handoff.detail,
          tone: "success",
        },
        {
          id: `${nextNote.id}-handoff-2`,
          label: "Pinned from template",
          detail: "Template-created notes stay near the top of the workspace.",
          tone: "info",
        },
      ],
    }));
    setVersionHistoryByNote((current) => ({
      ...current,
      [nextNote.id]: [
        {
          id: `${nextNote.id}-version-1`,
          version: nextNote.spec.version,
          label: template.handoff.label,
          detail: `${template.title} snapshot initialized for BrandApp sync.`,
          created: "just now",
          author: nextNote.owner,
          snapshot: structuredClone(nextNote.spec),
          status: nextNote.status,
          score: nextNote.score,
        },
      ],
    }));
    setActiveNoteId(nextNote.id);
    setSearchQuery("");
    setSidePanel("health");
  };

  const handleToggleFavorite = () => {
    const nextFavorite = !activeNote.favorite;

    setNotes((current) =>
      current.map((note) =>
        note.id === activeNote.id
          ? {
              ...note,
              favorite: nextFavorite,
              updated: "just now",
            }
          : note,
      ),
    );
    appendHandoffEvent(activeNote.id, {
      label: nextFavorite ? "Pinned to sidebar" : "Removed from sidebar pins",
      detail: nextFavorite
        ? "This note now stays above unpinned workspace pages."
        : "This note returns to the standard workspace order.",
      tone: nextFavorite ? "success" : "info",
    });
  };

  const handleDuplicateNote = () => {
    const nextIndex = notes.length + 1;
    const baseTitle = `${activeNote.title} copy`;
    const existingTitles = new Set(notes.map((note) => note.title));
    let title = baseTitle;
    let copyIndex = 2;

    while (existingTitles.has(title)) {
      title = `${baseTitle} ${copyIndex}`;
      copyIndex += 1;
    }

    const nextNote: WorkspaceNote = {
      id: `${activeNote.id}-copy-${nextIndex}`,
      title,
      section: activeNote.section,
      owner: activeNote.owner,
      entityId: activeNote.entityId,
      updated: "just now",
      score: Math.max(52, activeNote.score - 8),
      status: "draft",
      favorite: false,
      spec: makeDraftCopySpec(activeNote.spec, title),
    };

    setNotes((current) => [nextNote, ...current]);
    setCommentsByNote((current) => ({ ...current, [nextNote.id]: [] }));
    setHandoffEventsByNote((current) => ({
      ...current,
      [nextNote.id]: [
        {
          id: `${nextNote.id}-handoff-1`,
          label: "Page duplicated",
          detail: `${activeNote.title} copied as a draft workspace page.`,
          tone: "info",
        },
        {
          id: `${nextNote.id}-handoff-2`,
          label: "BrandApp draft reset",
          detail: "Comments and publish status were reset before EAV handoff.",
          tone: "warning",
        },
      ],
    }));
    setVersionHistoryByNote((current) => ({
      ...current,
      [nextNote.id]: [
        {
          id: `${nextNote.id}-version-1`,
          version: nextNote.spec.version,
          label: "Draft copy created",
          detail: "Copied page content with fresh BrandApp publish history.",
          created: "just now",
          author: nextNote.owner,
          snapshot: structuredClone(nextNote.spec),
          status: nextNote.status,
          score: nextNote.score,
        },
      ],
    }));
    setActiveNoteId(nextNote.id);
    setSearchQuery("");
    setSidePanel("health");
  };

  const handleLinkEntity = (entityId: NoteEntityId) => {
    if (entityId === activeNote.entityId) return;

    const nextEntity = getEntityOption(entityId);
    const nextScore = Math.min(98, activeNote.score + 3);

    setNotes((current) =>
      current.map((note) =>
        note.id === activeNote.id
          ? {
              ...note,
              entityId,
              updated: "just now",
              score: nextScore,
            }
          : note,
      ),
    );
    appendHandoffEvent(activeNote.id, {
      label: "BrandApp record linked",
      detail: `${activeNote.title} now points to ${nextEntity.label}.`,
      tone: "success",
    });
    appendVersionHistory(activeNote.id, {
      version: activeNote.spec.version,
      label: "EAV relation updated",
      detail: `${nextEntity.label} relation captured before publish.`,
      created: "just now",
      author: activeNote.owner,
      snapshot: activeNote.spec,
      status: activeNote.status,
      score: nextScore,
    });
    notReal("BrandApp record");
    setSidePanel("health");
  };

  const handleRestoreVersion = (entry: VersionHistoryEntry) => {
    const restoredSpec = structuredClone(entry.snapshot);
    const restoredScore = Math.max(60, entry.score);

    setNotes((current) =>
      current.map((note) =>
        note.id === activeNote.id
          ? {
              ...note,
              spec: restoredSpec,
              status: entry.status,
              score: restoredScore,
              updated: "just now",
            }
          : note,
      ),
    );
    appendHandoffEvent(activeNote.id, {
      label: `Restored v${entry.version}`,
      detail: `${entry.label} restored from BrandApp snapshot history.`,
      tone: "success",
    });
    appendVersionHistory(activeNote.id, {
      version: restoredSpec.version,
      label: `Restored v${entry.version}`,
      detail: `${entry.label} restored before the next EAV publish.`,
      created: "just now",
      author: activeNote.owner,
      snapshot: restoredSpec,
      status: entry.status,
      score: restoredScore,
    });
    notReal(`Restore v${entry.version}`);
    setSidePanel("history");
  };

  if (compact) {
    return (
      <div className="bg-surface border-border flex h-full w-full overflow-hidden rounded-lg border">
        <aside className="border-border-subtle hidden w-40 shrink-0 border-r p-2 sm:block">
          {notes.map((note) => (
            <SidebarButton
              key={note.id}
              note={note}
              active={note.id === activeNote.id}
              onSelect={() => setActiveNoteId(note.id)}
            />
          ))}
        </aside>
        <div className="[&_li]:marker:text-text-tertiary min-w-0 flex-1 p-3 [&_li]:ml-5 [&_ol]:list-decimal [&_ul]:list-disc">
          <Editor
            key={activeNote.id}
            store={store}
            catalog={defaultCatalog}
            mode="edit"
            className="min-h-[250px]"
          />
          <div className="border-border-subtle bg-bg-subtle mt-3 flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-xs">
            <Badge variant="success" size="sm" dot>
              EAV mapped
            </Badge>
            <span className="text-text-secondary min-w-0 truncate">
              {activeEntity.label}
            </span>
            <span className="text-text-tertiary">
              {activeVersionHistory.length} snapshots
            </span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-surface border-border flex min-h-[620px] w-full overflow-hidden rounded-lg border shadow-sm">
      <aside className="border-border-subtle bg-bg-subtle/60 hidden w-64 shrink-0 flex-col border-r md:flex">
        <div className="border-border-subtle flex items-center gap-2 border-b px-4 py-3">
          <PanelLeft className="text-text-tertiary size-4" aria-hidden />
          <div className="min-w-0">
            <p className="text-text-primary truncate text-sm font-semibold">
              Brand workspace
            </p>
            <p className="text-text-tertiary text-xs">Notes · EAV synced</p>
          </div>
        </div>
        <div className="flex items-center gap-2 px-4 py-3">
          <div className="relative min-w-0 flex-1">
            <Search
              className="text-text-tertiary pointer-events-none absolute top-2 left-2 size-3.5"
              aria-hidden
            />
            <input
              aria-label="Search notes"
              placeholder="Search notes"
              value={searchQuery}
              onChange={(event) => setSearchQuery(event.target.value)}
              className="border-border bg-surface text-text-primary focus-visible:ring-ring h-8 w-full rounded-lg border pr-2 pl-7 text-xs outline-none focus-visible:ring-2"
            />
          </div>
          <Button
            size="sm"
            variant="secondary"
            aria-label="New note"
            className="w-8 px-0"
            leftIcon={<Plus className="size-4" aria-hidden />}
            onClick={handleCreateNote}
          />
        </div>
        <div className="flex flex-1 flex-col gap-1 overflow-y-auto px-2 pb-3">
          {filteredNotes.map((note) => (
            <SidebarButton
              key={note.id}
              note={note}
              active={note.id === activeNote.id}
              onSelect={() => setActiveNoteId(note.id)}
            />
          ))}
          {filteredNotes.length === 0 ? (
            <div className="text-text-tertiary px-3 py-6 text-center text-xs">
              No notes match this search.
            </div>
          ) : null}
        </div>
        <div className="border-border-subtle border-t px-3 py-3">
          <div className="flex items-center justify-between">
            <p className="text-text-primary text-xs font-medium">Templates</p>
            <Badge variant="info" size="sm">
              {NOTE_TEMPLATES.length}
            </Badge>
          </div>
          <div className="mt-2 flex flex-col gap-1">
            {NOTE_TEMPLATES.map((template) => (
              <button
                key={template.id}
                type="button"
                onClick={() => handleCreateFromTemplate(template)}
                className="text-text-secondary hover:bg-bg-subtle hover:text-text-primary rounded-lg px-3 py-2 text-left transition-colors"
              >
                <span className="block truncate text-xs font-medium">
                  {template.title}
                </span>
                <span className="text-text-tertiary mt-0.5 block truncate text-[11px]">
                  {template.description}
                </span>
              </button>
            ))}
          </div>
        </div>
        <div className="border-border-subtle border-t p-3">
          <div className="border-border bg-surface rounded-lg border p-3">
            <div className="flex items-center justify-between">
              <p className="text-text-primary text-xs font-medium">
                AI credits
              </p>
              <Badge variant="info" size="sm">
                BrandApp
              </Badge>
            </div>
            <Progress
              value={aiCredits}
              label="Monthly usage"
              showLabel
              size="sm"
              className="mt-3"
            />
          </div>
        </div>
      </aside>

      <main className="flex min-w-0 flex-1 flex-col">
        <div className="border-border-subtle border-b px-4 py-3 md:hidden">
          <select
            aria-label="Select workspace note"
            value={activeNote.id}
            onChange={(event) => {
              setActiveNoteId(event.target.value);
              setSearchQuery("");
            }}
            className="border-border bg-surface text-text-primary focus-visible:ring-ring h-9 w-full rounded-lg border px-3 text-sm outline-none focus-visible:ring-2"
          >
            {filteredNotes.map((note) => (
              <option key={note.id} value={note.id}>
                {note.title}
              </option>
            ))}
          </select>
        </div>

        <header className="border-border-subtle flex flex-wrap items-center justify-between gap-3 border-b px-5 py-3">
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <Badge variant={STATUS_VARIANT[activeNote.status]} dot>
                {activeNote.status}
              </Badge>
              <span className="text-text-tertiary text-xs">
                Synced {activeNote.updated}
              </span>
            </div>
            <h2 className="text-text-primary mt-1 truncate text-lg font-semibold">
              {activeNote.title}
            </h2>
          </div>
          <div className="flex max-w-full flex-wrap items-center gap-2">
            <Avatar name={activeNote.owner} size="sm" status="online" />
            <Button
              size="sm"
              variant="secondary"
              aria-label={activeNote.favorite ? "Unpin note" : "Pin note"}
              leftIcon={
                <Star
                  className={cn(
                    "size-4",
                    activeNote.favorite && "fill-current",
                  )}
                  aria-hidden
                />
              }
              onClick={handleToggleFavorite}
            >
              {activeNote.favorite ? "Pinned" : "Pin"}
            </Button>
            <Button
              size="sm"
              variant="secondary"
              aria-label="Duplicate note"
              leftIcon={<Copy className="size-4" aria-hidden />}
              onClick={handleDuplicateNote}
            >
              Duplicate
            </Button>
            <Button
              size="sm"
              variant="secondary"
              aria-label="Open history"
              leftIcon={<History className="size-4" aria-hidden />}
              onClick={() => setSidePanel("history")}
            >
              History
            </Button>
            <Button
              size="sm"
              variant="secondary"
              leftIcon={<FileCheck2 className="size-4" aria-hidden />}
              onClick={handlePublishSnapshot}
            >
              {openCommentCount > 0 ? "Review first" : "Publish"}
            </Button>
            <Button
              size="sm"
              variant="secondary"
              aria-label="Open comments"
              leftIcon={<MessageSquare className="size-4" aria-hidden />}
              onClick={() => setSidePanel("comments")}
            >
              Comment
              {openCommentCount > 0 ? (
                <span className="ml-1 tabular-nums">{openCommentCount}</span>
              ) : null}
            </Button>
            <Button
              size="sm"
              leftIcon={<Sparkles className="size-4" aria-hidden />}
              onClick={handleAiSummary}
            >
              AI update
            </Button>
          </div>
        </header>

        <div className="grid min-h-0 flex-1 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_300px]">
          <section className="[&_li]:marker:text-text-tertiary min-w-0 overflow-y-auto px-6 py-5 [&_li]:ml-5 [&_ol]:list-decimal [&_ul]:list-disc">
            <Editor
              key={`${activeNote.id}-${activeNote.spec.version}`}
              store={store}
              catalog={defaultCatalog}
              mode="edit"
              className="min-h-[500px]"
            />
          </section>

          <aside className="border-border-subtle bg-bg-subtle/40 flex min-h-0 flex-col gap-4 border-t p-4 xl:border-t-0 xl:border-l">
            <div className="border-border bg-surface rounded-lg border p-1">
              <div className="grid grid-cols-3 gap-1">
                {SIDE_PANEL_TABS.map(({ id, label, Icon }) => (
                  <button
                    key={id}
                    type="button"
                    aria-label={label}
                    aria-pressed={sidePanel === id}
                    onClick={() => setSidePanel(id)}
                    className={cn(
                      "flex items-center justify-center gap-1.5 rounded-md px-2 py-2 text-sm font-medium transition-colors",
                      sidePanel === id
                        ? "bg-accent text-accent-fg"
                        : "text-text-secondary hover:bg-bg-subtle hover:text-text-primary",
                    )}
                  >
                    <Icon className="size-3.5" aria-hidden />
                    <span>{label}</span>
                    {id === "comments" && openCommentCount > 0 ? (
                      <span className="ml-1 tabular-nums">
                        {openCommentCount}
                      </span>
                    ) : null}
                    {id === "history" ? (
                      <span className="ml-1 tabular-nums">
                        {activeVersionHistory.length}
                      </span>
                    ) : null}
                  </button>
                ))}
              </div>
            </div>

            {sidePanel === "health" ? (
              <div className="flex flex-col gap-4">
                <div className="border-border bg-surface rounded-lg border p-4">
                  <div className="flex items-center justify-between">
                    <p className="text-text-primary text-sm font-semibold">
                      Page health
                    </p>
                    <Badge variant="success" progress={activeNote.score}>
                      {activeNote.score}
                    </Badge>
                  </div>
                  <div className="mt-4 flex flex-col gap-2">
                    <ActivityRow
                      icon={<Database className="size-4" aria-hidden />}
                      title="EAV entity linked"
                      detail={activeEntity.label}
                    />
                    <ActivityRow
                      icon={<Bot className="size-4" aria-hidden />}
                      title="AI agent available"
                      detail="brandapp provider · sonnet"
                    />
                    <ActivityRow
                      icon={<Clock3 className="size-4" aria-hidden />}
                      title="Review deadline"
                      detail="Tomorrow, 10:00 KST"
                    />
                    <ActivityRow
                      icon={<FileCheck2 className="size-4" aria-hidden />}
                      title="BrandApp snapshot"
                      detail={
                        activeNote.status === "published"
                          ? "published just now"
                          : openCommentCount > 0
                            ? `${openCommentCount} comments block publish`
                            : "ready to publish to notes EAV"
                      }
                    />
                    <ActivityRow
                      icon={<History className="size-4" aria-hidden />}
                      title="Version history"
                      detail={`v${activeNote.spec.version} · ${activeVersionHistory.length} snapshots`}
                    />
                  </div>
                  <label className="mt-4 block">
                    <span className="text-text-tertiary text-xs">
                      BrandApp record
                    </span>
                    <select
                      aria-label="Linked BrandApp record"
                      value={activeNote.entityId}
                      onChange={(event) =>
                        handleLinkEntity(event.target.value as NoteEntityId)
                      }
                      className="border-border bg-bg-subtle text-text-primary focus-visible:ring-ring mt-1 h-9 w-full rounded-lg border px-3 text-sm outline-none focus-visible:ring-2"
                    >
                      {NOTE_ENTITY_OPTIONS.map((option) => (
                        <option key={option.id} value={option.id}>
                          {option.label}
                        </option>
                      ))}
                    </select>
                    <span className="text-text-tertiary mt-1 block text-xs">
                      {activeEntity.detail}
                    </span>
                  </label>
                </div>

                <div className="border-border bg-surface rounded-lg border p-4">
                  <div className="flex items-center justify-between gap-3">
                    <p className="text-text-primary text-sm font-semibold">
                      BrandApp sync
                    </p>
                    <Badge variant="info" size="sm">
                      server managed
                    </Badge>
                  </div>
                  <div className="mt-3 flex flex-col gap-2 text-xs">
                    <ActivityRow
                      icon={<Database className="size-4" aria-hidden />}
                      title="EAV route"
                      detail="SDK credentials stay behind the application boundary."
                    />
                    <ActivityRow
                      icon={<FileCheck2 className="size-4" aria-hidden />}
                      title="Linked record"
                      detail={activeNote.entityId}
                    />
                  </div>
                </div>

                <div className="border-border bg-surface rounded-lg border p-4">
                  <div className="flex items-center justify-between gap-3">
                    <p className="text-text-primary text-sm font-semibold">
                      Handoff history
                    </p>
                    <Badge variant="info" size="sm">
                      {activeHandoffEvents.length} events
                    </Badge>
                  </div>
                  <div className="mt-3 flex flex-col gap-2">
                    {activeHandoffEvents.slice(0, 4).map((event) => (
                      <div
                        key={event.id}
                        className="border-border-subtle rounded-lg border px-3 py-2"
                      >
                        <div className="flex items-center justify-between gap-2">
                          <p className="text-text-primary truncate text-sm font-medium">
                            {event.label}
                          </p>
                          <Badge variant={event.tone} size="sm" dot>
                            {event.tone}
                          </Badge>
                        </div>
                        <p className="text-text-tertiary mt-1 truncate text-xs">
                          {event.detail}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ) : sidePanel === "comments" ? (
              <div className="border-border bg-surface rounded-lg border p-4">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <p className="text-text-primary text-sm font-semibold">
                      Review comments
                    </p>
                    <p className="text-text-tertiary mt-1 text-xs">
                      {openCommentCount} open for {activeNote.title}
                    </p>
                  </div>
                  <Button
                    size="sm"
                    variant="secondary"
                    leftIcon={<Plus className="size-4" aria-hidden />}
                    onClick={handleAddReviewNote}
                  >
                    Note
                  </Button>
                </div>
                <div className="mt-4 flex flex-col gap-2">
                  {activeComments.length === 0 ? (
                    <div className="border-border-subtle text-text-tertiary rounded-lg border px-3 py-6 text-center text-xs">
                      No review comments yet.
                    </div>
                  ) : (
                    activeComments.map((comment) => (
                      <div
                        key={comment.id}
                        className="border-border-subtle rounded-lg border px-3 py-2"
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div className="min-w-0">
                            <p className="text-text-primary truncate text-sm font-medium">
                              {comment.author}
                            </p>
                            <p className="text-text-tertiary text-xs">
                              {comment.created}
                            </p>
                          </div>
                          <Badge
                            variant={
                              comment.status === "open" ? "warning" : "success"
                            }
                            size="sm"
                            dot
                          >
                            {comment.status}
                          </Badge>
                        </div>
                        <p className="text-text-secondary mt-2 text-sm">
                          {comment.text}
                        </p>
                        {comment.status === "open" ? (
                          <Button
                            size="sm"
                            variant="secondary"
                            className="mt-3"
                            leftIcon={
                              <CheckCircle2 className="size-4" aria-hidden />
                            }
                            onClick={() => handleResolveComment(comment.id)}
                          >
                            Resolve
                          </Button>
                        ) : null}
                      </div>
                    ))
                  )}
                </div>
              </div>
            ) : (
              <div className="border-border bg-surface rounded-lg border p-4">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <p className="text-text-primary text-sm font-semibold">
                      Version history
                    </p>
                    <p className="text-text-tertiary mt-1 text-xs">
                      {activeVersionHistory.length} BrandApp snapshots for{" "}
                      {activeNote.title}
                    </p>
                  </div>
                  <Badge variant="info" size="sm">
                    v{activeNote.spec.version}
                  </Badge>
                </div>
                <div className="mt-4 flex flex-col gap-2">
                  {activeVersionHistory.length === 0 ? (
                    <div className="border-border-subtle text-text-tertiary rounded-lg border px-3 py-6 text-center text-xs">
                      No snapshots have been recorded yet.
                    </div>
                  ) : (
                    activeVersionHistory.map((entry, index) => (
                      <div
                        key={entry.id}
                        className="border-border-subtle rounded-lg border px-3 py-2"
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div className="min-w-0">
                            <p className="text-text-primary truncate text-sm font-medium">
                              {entry.label}
                            </p>
                            <p className="text-text-tertiary text-xs">
                              {entry.created} · {entry.author}
                            </p>
                          </div>
                          <Badge
                            variant={index === 0 ? "success" : "info"}
                            size="sm"
                            dot
                          >
                            v{entry.version}
                          </Badge>
                        </div>
                        <p className="text-text-secondary mt-2 text-sm">
                          {entry.detail}
                        </p>
                        <Button
                          size="sm"
                          variant="secondary"
                          className="mt-3"
                          aria-label={
                            index === 0
                              ? `Current version ${entry.label}`
                              : `Restore v${entry.version} ${entry.label}`
                          }
                          leftIcon={
                            <RotateCcw className="size-4" aria-hidden />
                          }
                          disabled={index === 0}
                          onClick={() => handleRestoreVersion(entry)}
                        >
                          {index === 0
                            ? "Current"
                            : `Restore v${entry.version}`}
                        </Button>
                      </div>
                    ))
                  )}
                </div>
              </div>
            )}
          </aside>
        </div>
      </main>
    </div>
  );
}
Notes App

Related Examples

Diff Review

Basic Editor

Headless Composition

Notes App

Related Examples

Diff Review

Basic Editor

Headless Composition
