"use client";

import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from "react";
import {
  ArrowDownToLine,
  ArrowDownWideNarrow,
  ArrowUpDown,
  Check,
  ChevronDown,
  ChevronRight,
  CircleHelp,
  Columns3,
  Copy,
  Layers,
  ListFilter,
  Maximize2,
  MoreHorizontal,
  PanelLeft,
  Plus,
  Redo2,
  Search,
  Settings2,
  Table2,
  Trash2,
  Undo2,
  X,
} from "lucide-react";
import {
  DataGrid,
  useColumnFilter,
  useColumnSort,
  type DataGridColumn,
  type DataGridViewState,
} from "@reopt-ai/opt-datagrid";
import {
  useDataGridToolbar,
  type DataGridDensity,
} from "@reopt-ai/opt-datagrid/toolbar";
import {
  Avatar,
  Badge,
  Button,
  DialogRoot,
  DialogPanel,
  DialogHeader,
  DialogHeading,
  DialogDescription,
  DialogBody,
  DialogDismiss,
  DropdownMenu,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
  DropdownSeparator,
  Input,
  Textarea,
  cn,
} from "@reopt-ai/opt-ui";
import {
  CAMPAIGN_STORAGE_KEY,
  CHANNELS,
  FIELDS,
  OWNERS,
  STATUSES,
  campaignCsv,
  createCampaignWorkspace,
  mergeCampaignRows,
  money,
  parseCampaignWorkspace,
  type Campaign,
  type CampaignView,
  type CampaignWorkspace,
  type FieldId,
} from "./campaign-base-data";
import styles from "./campaign-base.module.css";

type Panel =
  | "filter"
  | "sort"
  | "fields"
  | "group"
  | "save"
  | "views"
  | "help"
  | null;
const tones = {
  Idea: "default",
  Draft: "info",
  Ready: "warning",
  Live: "success",
  Blocked: "error",
} as const;
const getRowId = (row: Campaign) => row.id;
const GRID_THEME = {
  borderRadius: "0",
  boxShadow: "none",
  frameBorderColor: "transparent",
  fontSize: "13px",
  accentColor: "#287f68",
  accentSubtle: "color-mix(in srgb, #287f68 12%, var(--opt-surface))",
};

function Modal({
  title,
  description,
  children,
  onClose,
  drawer = false,
}: {
  title: string;
  description?: string;
  children: ReactNode;
  onClose: () => void;
  drawer?: boolean;
}) {
  return (
    <DialogRoot
      open
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      <DialogPanel className={drawer ? styles.drawer : styles.dialog}>
        <DialogHeader>
          <div className={styles.dialogTitle}>
            <DialogHeading>{title}</DialogHeading>
            <DialogDismiss aria-label="Close dialog" />
          </div>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>
        <DialogBody>{children}</DialogBody>
      </DialogPanel>
    </DialogRoot>
  );
}
function Status({ value }: { value: Campaign["status"] }) {
  return (
    <Badge variant={tones[value]} size="sm">
      <span className={styles.statusDot} />
      {value}
    </Badge>
  );
}
function Owner({ name }: { name: string }) {
  return (
    <span className={styles.owner}>
      <Avatar name={name} size="xs" />
      <span>{name}</span>
    </span>
  );
}
function SelectField({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value: string;
  options: readonly string[];
  onChange: (value: string) => void;
}) {
  return (
    <label className={styles.field}>
      <span>{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        {options.map((option) => (
          <option key={option}>{option}</option>
        ))}
      </select>
    </label>
  );
}

function RecordDetail({
  record,
  onSave,
  onDelete,
  onDuplicate,
  onClose,
}: {
  record: Campaign;
  onSave: (row: Campaign) => void;
  onDelete: () => void;
  onDuplicate: () => void;
  onClose: () => void;
}) {
  const [draft, setDraft] = useState(record);
  const [comment, setComment] = useState("");
  const [dirty, setDirty] = useState(false);
  const update = (patch: Partial<Campaign>) => {
    setDraft((current) => ({ ...current, ...patch }));
    setDirty(true);
  };
  return (
    <Modal
      title={record.name}
      description="Campaign details · changes stay in this browser"
      onClose={onClose}
      drawer
    >
      <form
        onSubmit={(event) => {
          event.preventDefault();
          onSave({ ...draft, name: draft.name.trim() });
          setDirty(false);
        }}
        className={styles.recordForm}
      >
        <div className={styles.recordMeta}>
          <Status value={draft.status} />
          <span>{record.id}</span>
          <DropdownMenu>
            <DropdownTrigger
              aria-label="Record actions"
              className={styles.menuTrigger}
            >
              <MoreHorizontal size={17} />
            </DropdownTrigger>
            <DropdownContent>
              <DropdownItem onClick={onDuplicate}>
                <Copy size={14} />
                Duplicate record
              </DropdownItem>
              <DropdownSeparator />
              <DropdownItem onClick={onDelete}>
                <Trash2 size={14} />
                Delete record
              </DropdownItem>
            </DropdownContent>
          </DropdownMenu>
        </div>
        <label className={styles.field}>
          <span>Campaign name</span>
          <Input
            fullWidth
            required
            value={draft.name}
            onChange={(e) => update({ name: e.target.value })}
          />
        </label>
        <div className={styles.formGrid}>
          <SelectField
            label="Status"
            value={draft.status}
            options={STATUSES}
            onChange={(status) =>
              update({ status: status as Campaign["status"] })
            }
          />
          <SelectField
            label="Owner"
            value={draft.owner}
            options={OWNERS}
            onChange={(owner) => update({ owner })}
          />
          <SelectField
            label="Channel"
            value={draft.channel}
            options={CHANNELS}
            onChange={(channel) =>
              update({ channel: channel as Campaign["channel"] })
            }
          />
          <label className={styles.field}>
            <span>Launch date</span>
            <Input
              fullWidth
              type="date"
              value={draft.launchDate}
              onChange={(e) => update({ launchDate: e.target.value })}
            />
          </label>
          <label className={styles.field}>
            <span>Budget (USD)</span>
            <Input
              fullWidth
              type="number"
              min={0}
              step={1}
              required
              value={draft.budget}
              onChange={(e) => update({ budget: Number(e.target.value) })}
            />
          </label>
          <label className={styles.field}>
            <span>Target ROI</span>
            <Input
              fullWidth
              type="number"
              min={0}
              step={0.1}
              required
              value={draft.roi}
              onChange={(e) => update({ roi: Number(e.target.value) })}
            />
          </label>
        </div>
        <label className={styles.checkRow}>
          <input
            type="checkbox"
            checked={draft.approved}
            onChange={(e) => update({ approved: e.target.checked })}
          />
          Approved for launch
        </label>
        <label className={styles.field}>
          <span>Campaign brief</span>
          <Textarea
            fullWidth
            rows={4}
            value={draft.brief}
            onChange={(e) => update({ brief: e.target.value })}
          />
        </label>
        <div className={styles.formActions}>
          <span>{dirty ? "Unsaved changes" : "All changes saved"}</span>
          <Button type="submit" disabled={!dirty || !draft.name.trim()}>
            Save changes
          </Button>
        </div>
      </form>
      <section className={styles.comments} aria-label="Record notes">
        <h3>
          Notes <span>{draft.comments.length}</span>
        </h3>
        {draft.comments.map((item) => (
          <article key={item.id}>
            <Avatar
              name={item.id === "seed-comment" ? "Jisoo Kim" : "You"}
              size="sm"
            />
            <div>
              <strong>
                {item.id === "seed-comment" ? "Jisoo Kim" : "You"}
              </strong>
              <time>
                {new Date(item.date).toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                  timeZone: "UTC",
                })}
              </time>
              <p>{item.text}</p>
            </div>
          </article>
        ))}
        <form
          onSubmit={(event) => {
            event.preventDefault();
            if (!comment.trim()) return;
            const next = {
              ...draft,
              comments: [
                ...draft.comments,
                {
                  id: crypto.randomUUID(),
                  text: comment.trim(),
                  date: new Date().toISOString(),
                },
              ],
            };
            setDraft(next);
            onSave({ ...record, comments: next.comments });
            setComment("");
          }}
        >
          <Textarea
            fullWidth
            aria-label="Record note"
            placeholder="Add context for this campaign…"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
          />
          <Button type="submit" size="sm" disabled={!comment.trim()}>
            Add note
          </Button>
        </form>
      </section>
    </Modal>
  );
}

export function CampaignBaseAppDemo({
  compact = false,
}: {
  compact?: boolean;
}) {
  const [workspace, setWorkspace] = useState<CampaignWorkspace>(
    createCampaignWorkspace,
  );
  const [hydrated, setHydrated] = useState(false);
  const [storageError, setStorageError] = useState(false);
  const [panel, setPanel] = useState<Panel>(null);
  const [recordId, setRecordId] = useState<string | null>(null);
  const [selected, setSelected] = useState<string[]>([]);
  const [message, setMessage] = useState("");
  const [viewName, setViewName] = useState("");
  const [sidebar, setSidebar] = useState(true);
  const [history, setHistory] = useState<{
    past: Campaign[][];
    future: Campaign[][];
  }>({ past: [], future: [] });
  const [revision, setRevision] = useState(0);
  const current = useRef(workspace);
  current.current = workspace;
  const view =
    workspace.views.find((item) => item.id === workspace.activeView) ??
    workspace.views[0]!;
  useEffect(() => {
    try {
      const raw = localStorage.getItem(CAMPAIGN_STORAGE_KEY);
      if (raw) {
        const parsed = parseCampaignWorkspace(raw);
        if (parsed) setWorkspace(parsed);
        else
          setMessage(
            "Saved data could not be read. A fresh sample base is open.",
          );
      }
    } catch {
      setStorageError(true);
    }
    setHydrated(true);
  }, []);
  useEffect(() => {
    if (!hydrated) return;
    try {
      localStorage.setItem(CAMPAIGN_STORAGE_KEY, JSON.stringify(workspace));
      setStorageError(false);
    } catch {
      setStorageError(true);
    }
  }, [workspace, hydrated]);
  useEffect(() => {
    if (!message) return;
    const timeout = window.setTimeout(() => setMessage(""), 4500);
    return () => window.clearTimeout(timeout);
  }, [message]);
  const updateView = useCallback((patch: Partial<CampaignView>) => {
    setWorkspace((state) => ({
      ...state,
      views: state.views.map((item) =>
        item.id === state.activeView ? { ...item, ...patch } : item,
      ),
    }));
    setSelected([]);
    setRevision((n) => n + 1);
  }, []);
  const updateState = (patch: Partial<DataGridViewState>) =>
    updateView({ state: { ...view.state, ...patch } });
  const changeRows = useCallback((next: Campaign[], notice?: string) => {
    const previous = current.current.rows;
    if (JSON.stringify(previous) === JSON.stringify(next)) return;
    setHistory((h) => ({ past: [...h.past.slice(-29), previous], future: [] }));
    setWorkspace((state) => ({ ...state, rows: next }));
    if (notice) setMessage(notice);
  }, []);
  const mergeRows = useCallback(
    (next: readonly Campaign[]) =>
      changeRows(mergeCampaignRows(current.current.rows, next)),
    [changeRows],
  );
  const openRecord = useCallback((id: string) => setRecordId(id), []);
  const columns = useMemo<
    DataGridColumn<Campaign, string | number | boolean>[]
  >(
    () =>
      (
        [
          {
            id: "name",
            title: "Campaign",
            width: 290,
            editable: true,
            editor: { kind: "text" },
            getValue: (r) => r.name,
            setValue: (r, v) => ({ ...r, name: String(v).trim() }),
            validateValue: ({ nextValue: v }) =>
              String(v).trim() ? true : "Campaign name is required",
            renderCell: ({ row, value }) => (
              <span className={styles.nameCell}>
                <span>{String(value)}</span>
                <button
                  type="button"
                  aria-label={`Open ${row.name}`}
                  onMouseDown={(event) => event.stopPropagation()}
                  onKeyDown={(event) => event.stopPropagation()}
                  onDoubleClick={(event) => event.stopPropagation()}
                  onClick={(e) => {
                    e.stopPropagation();
                    openRecord(row.id);
                  }}
                >
                  <Maximize2 size={13} />
                </button>
              </span>
            ),
          },
          {
            id: "status",
            title: "Status",
            width: 138,
            editable: true,
            editor: {
              kind: "select",
              options: STATUSES.map((value) => ({ value, label: value })),
              openOnFocus: true,
              commitOnSelect: true,
            },
            getValue: (r) => r.status,
            setValue: (r, v) => ({
              ...r,
              status: String(v) as Campaign["status"],
            }),
            validateValue: ({ nextValue: v }) =>
              STATUSES.includes(v as Campaign["status"]) || "Choose a status",
            renderCell: ({ value }) => (
              <Status value={value as Campaign["status"]} />
            ),
          },
          {
            id: "owner",
            title: "Owner",
            width: 168,
            editable: true,
            editor: {
              kind: "select",
              options: OWNERS.map((value) => ({ value, label: value })),
              searchable: true,
              openOnFocus: true,
              commitOnSelect: true,
            },
            getValue: (r) => r.owner,
            setValue: (r, v) => ({ ...r, owner: String(v) }),
            validateValue: ({ nextValue: v }) =>
              OWNERS.includes(String(v)) || "Choose a team member",
            renderCell: ({ value }) => <Owner name={String(value)} />,
          },
          {
            id: "channel",
            title: "Channel",
            width: 110,
            editable: true,
            editor: {
              kind: "select",
              options: CHANNELS.map((value) => ({ value, label: value })),
              openOnFocus: true,
              commitOnSelect: true,
            },
            getValue: (r) => r.channel,
            setValue: (r, v) => ({
              ...r,
              channel: String(v) as Campaign["channel"],
            }),
            validateValue: ({ nextValue: v }) =>
              CHANNELS.includes(v as Campaign["channel"]) || "Choose a channel",
            renderCell: ({ value }) => (
              <span className={styles.channel}>{String(value)}</span>
            ),
          },
          {
            id: "launchDate",
            title: "Launch date",
            width: 142,
            editable: true,
            editor: { kind: "date" },
            getValue: (r) => r.launchDate,
            setValue: (r, v) => ({ ...r, launchDate: String(v) }),
            validateValue: ({ nextValue: v }) =>
              !v || /^\d{4}-\d{2}-\d{2}$/.test(String(v)) || "Use YYYY-MM-DD",
            formatValue: (v) =>
              v
                ? new Date(`${v}T12:00:00Z`).toLocaleDateString("en-US", {
                    month: "short",
                    day: "numeric",
                    timeZone: "UTC",
                  })
                : "—",
          },
          ...(["budget", "roi"] as const).map((id) => ({
            id,
            title: id === "budget" ? "Budget" : "Target ROI",
            width: 120,
            align: "right" as const,
            editable: true,
            editor: {
              kind: "number" as const,
              min: 0,
              step: id === "budget" ? 100 : 0.1,
            },
            getValue: (r: Campaign) => r[id],
            setValue: (r: Campaign, v: string | number | boolean) => ({
              ...r,
              [id]: Number(v),
            }),
            validateValue: ({
              nextValue: v,
            }: {
              nextValue: string | number | boolean;
            }) =>
              (Number.isFinite(Number(v)) && Number(v) >= 0) ||
              "Enter a positive number",
            formatValue: (v: string | number | boolean) =>
              id === "budget" ? money(Number(v)) : `${Number(v).toFixed(1)}×`,
          })),
          {
            id: "approved",
            title: "Approved",
            width: 110,
            editable: true,
            editor: { kind: "checkbox", trueValue: true, falseValue: false },
            getValue: (r) => r.approved,
            setValue: (r, v) => ({
              ...r,
              approved: v === true || v === "true",
            }),
            renderCell: ({ value }) => (
              <span
                className={cn(
                  styles.approval,
                  Boolean(value) && styles.approved,
                )}
              >
                {value ? <Check size={12} /> : null}
              </span>
            ),
          },
        ] satisfies DataGridColumn<Campaign, string | number | boolean>[]
      ).map((column) => ({
        ...column,
        width: view.widths[column.id] ?? column.width,
      })),
    [openRecord, view.widths],
  );
  const toolbar = useDataGridToolbar({
    columns,
    lockedColumns: ["name"],
    hiddenColumns: view.state.hiddenColumns,
    onHiddenColumnsChange: (hiddenColumns) => updateState({ hiddenColumns }),
    density: view.density,
    onDensityChange: (density) => updateView({ density }),
  });
  const searched = useMemo(
    () =>
      workspace.rows.filter((row) =>
        [row.name, row.owner, row.channel, row.status, row.brief].some(
          (value) => value.toLowerCase().includes(view.search.toLowerCase()),
        ),
      ),
    [workspace.rows, view.search],
  );
  const filtered = useColumnFilter({
    rows: searched,
    columns,
    filter: view.state.filters,
    logic: view.state.filterLogic,
  });
  const sorted = useColumnSort({
    rows: filtered.rows,
    columns,
    sort: view.state.sort,
  });
  const rows = sorted.rows;
  const groups = useMemo(() => {
    if (view.group === "none") return [{ name: "", rows }];
    const map = new Map<string, Campaign[]>();
    for (const row of rows) {
      const name = row[view.group];
      map.set(name, [...(map.get(name) ?? []), row]);
    }
    return [...map].map(([name, records]) => ({ name, rows: records }));
  }, [rows, view.group]);
  const visibleOrder = JSON.stringify(
    groups.map((group) => [group.name, ...group.rows.map((row) => row.id)]),
  );
  useEffect(() => {
    // Grid selections use row indices; invalidate them when records move or disappear.
    setSelected([]);
    setRevision((value) => value + 1);
  }, [visibleOrder]);
  const record = workspace.rows.find((row) => row.id === recordId);
  const totalBudget = rows.reduce((sum, row) => sum + row.budget, 0);
  const switchView = (id: string) => {
    setWorkspace((state) => ({ ...state, activeView: id }));
    setSelected([]);
    setPanel(null);
  };
  const addRecord = (status: Campaign["status"] = "Idea") => {
    const next: Campaign = {
      id: crypto.randomUUID(),
      name: "Untitled campaign",
      status,
      owner: OWNERS[0]!,
      channel: "Email",
      launchDate: "",
      budget: 0,
      roi: 0,
      approved: false,
      brief: "",
      comments: [],
    };
    changeRows([...workspace.rows, next], "New campaign created.");
    setRecordId(next.id);
  };
  const deleteRows = (ids: string[]) => {
    changeRows(
      workspace.rows.filter((row) => !ids.includes(row.id)),
      `${ids.length} campaign${ids.length === 1 ? "" : "s"} deleted. Undo is available.`,
    );
    setSelected([]);
    setRecordId(null);
    setRevision((n) => n + 1);
  };
  const duplicateRows = (ids: string[]) => {
    const copies = workspace.rows
      .filter((row) => ids.includes(row.id))
      .map((row) => ({
        ...row,
        id: crypto.randomUUID(),
        name: `${row.name} (copy)`,
        comments: [],
      }));
    changeRows(
      [...workspace.rows, ...copies],
      `${copies.length} campaign${copies.length === 1 ? "" : "s"} duplicated.`,
    );
    setSelected([]);
    if (copies.length === 1) setRecordId(copies[0]!.id);
  };
  const travel = (direction: "undo" | "redo") => {
    const source = direction === "undo" ? history.past : history.future;
    const next = source.at(-1);
    if (!next) return;
    setHistory(
      direction === "undo"
        ? {
            past: history.past.slice(0, -1),
            future: [...history.future, workspace.rows],
          }
        : {
            past: [...history.past, workspace.rows],
            future: history.future.slice(0, -1),
          },
    );
    setWorkspace((state) => ({ ...state, rows: next }));
    setSelected([]);
    setRecordId(null);
    setRevision((n) => n + 1);
    setMessage(direction === "undo" ? "Change undone." : "Change restored.");
  };
  const exportCsv = () => {
    const blob = new Blob(
      [
        "\uFEFF",
        campaignCsv(
          rows,
          toolbar.columns.map((c) => c.id as FieldId),
        ),
      ],
      { type: "text/csv;charset=utf-8" },
    );
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "campaigns.csv";
    link.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
    setMessage(`Exported ${rows.length} campaigns.`);
  };
  const viewList = (
    <>
      <div className={styles.sidebarLabel}>
        YOUR VIEWS<span>{workspace.views.length}</span>
      </div>
      <nav aria-label="Saved campaign views">
        {workspace.views.map((item) => (
          <button
            key={item.id}
            type="button"
            className={cn(
              styles.view,
              view.id === item.id && styles.activeView,
            )}
            aria-pressed={view.id === item.id}
            onClick={() => switchView(item.id)}
          >
            {item.layout === "board" ? (
              <Columns3 size={16} />
            ) : (
              <Table2 size={16} />
            )}
            <span>{item.name}</span>
            {view.id === item.id && (
              <span className={styles.viewCount}>{rows.length}</span>
            )}
          </button>
        ))}
      </nav>
      <button
        type="button"
        className={styles.createView}
        onClick={() => {
          setViewName(`${view.name} copy`);
          setPanel("save");
        }}
      >
        <Plus size={15} />
        Create a view
      </button>
    </>
  );

  return (
    <div
      className={cn(styles.app, compact && styles.compact)}
      data-campaign-ready={hydrated ? "true" : "false"}
      onKeyDownCapture={(event) => {
        if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
        const target = event.target as HTMLElement;
        if (target.closest("input, textarea, select, [contenteditable=true]"))
          return;
        if (
          event.key.toLowerCase() === "z" ||
          event.key.toLowerCase() === "y"
        ) {
          event.preventDefault();
          event.stopPropagation();
          travel(
            event.shiftKey || event.key.toLowerCase() === "y" ? "redo" : "undo",
          );
        }
      }}
    >
      <div className={styles.frame}>
        <header className={styles.header}>
          <div className={styles.brand}>
            <span className={styles.brandMark}>
              <Layers size={21} />
            </span>
            <div>
              <span>
                Studio workspace <ChevronRight size={11} /> Marketing
              </span>
              <h1>
                Campaign base <span aria-hidden="true">✦</span>
              </h1>
            </div>
          </div>
          <div className={styles.headerRight}>
            <span className={styles.saved}>
              <span />
              {storageError
                ? "Not saved · storage unavailable"
                : "Saved on this device"}
            </span>
            <Button
              variant="ghost"
              size="sm"
              aria-label="Help"
              onClick={() => setPanel("help")}
            >
              <CircleHelp size={18} />
            </Button>
            <Avatar name="Mina Park" size="sm" />
          </div>
        </header>
        <div className={styles.tableTabs}>
          <span>
            <Table2 size={15} />
            Campaigns
            <ChevronDown size={12} />
          </span>
          <div>
            {workspace.rows.length} records <span>·</span> Marketing operations
          </div>
          <Button variant="ghost" size="sm" onClick={exportCsv}>
            <ArrowDownToLine size={14} />
            Export CSV
          </Button>
        </div>
        <div className={styles.body}>
          {sidebar && <aside className={styles.sidebar}>{viewList}</aside>}
          <section
            aria-label="Campaign workspace"
            className={styles.main}
            {...toolbar.containerProps}
          >
            <div className={styles.viewHeading}>
              <div>
                <div className={styles.headingTop}>
                  <Button
                    variant="ghost"
                    size="sm"
                    aria-label="Toggle views"
                    className={styles.desktopToggle}
                    onClick={() => setSidebar(!sidebar)}
                  >
                    <PanelLeft size={16} />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    aria-label="Browse views"
                    className={styles.mobileToggle}
                    onClick={() => setPanel("views")}
                  >
                    <PanelLeft size={16} />
                  </Button>
                  <h2>{view.name}</h2>
                  <Badge variant="default" size="sm">
                    {view.layout === "grid" ? "Grid view" : "Board view"}
                  </Badge>
                </div>
                <p>Your campaigns, from first idea to the final send.</p>
              </div>
              <Button
                size="sm"
                className={styles.newButton}
                onClick={() => addRecord()}
              >
                <Plus size={15} />
                New campaign
              </Button>
            </div>
            <div className={styles.toolbar}>
              <div className={styles.viewSwitch}>
                <button
                  type="button"
                  aria-label="Grid view"
                  aria-pressed={view.layout === "grid"}
                  onClick={() => updateView({ layout: "grid" })}
                >
                  <Table2 size={15} />
                </button>
                <button
                  type="button"
                  aria-label="Board view"
                  aria-pressed={view.layout === "board"}
                  onClick={() => updateView({ layout: "board" })}
                >
                  <Columns3 size={15} />
                </button>
              </div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setPanel("fields")}
              >
                <Settings2 size={14} />
                Fields
                {view.state.hiddenColumns.length > 0 && (
                  <span>{view.state.hiddenColumns.length}</span>
                )}
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className={
                  view.state.filters.length ? styles.activeTool : undefined
                }
                onClick={() => setPanel("filter")}
              >
                <ListFilter size={14} />
                Filter
                {view.state.filters.length > 0 && (
                  <span>{view.state.filters.length}</span>
                )}
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className={
                  view.state.sort.length ? styles.activeTool : undefined
                }
                onClick={() => setPanel("sort")}
              >
                <ArrowUpDown size={14} />
                Sort
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setPanel("group")}
              >
                <Layers size={14} />
                Group{view.group !== "none" && <span>1</span>}
              </Button>
              <DropdownMenu>
                <DropdownTrigger
                  aria-label="Row height"
                  className={styles.menuTrigger}
                >
                  <ArrowDownWideNarrow size={15} />
                </DropdownTrigger>
                <DropdownContent>
                  {(
                    ["compact", "normal", "comfortable"] as DataGridDensity[]
                  ).map((density) => (
                    <DropdownItem
                      key={density}
                      onClick={() => toolbar.setDensity(density)}
                    >
                      {density === toolbar.density && <Check size={14} />}
                      {density[0]!.toUpperCase() + density.slice(1)}
                    </DropdownItem>
                  ))}
                </DropdownContent>
              </DropdownMenu>
              <div className={styles.toolbarSpacer} />
              <label className={styles.search}>
                <Search size={15} />
                <input
                  aria-label="Search records"
                  placeholder="Find a campaign…"
                  value={view.search}
                  onChange={(e) => updateView({ search: e.target.value })}
                />
                {view.search && (
                  <button
                    type="button"
                    aria-label="Clear search"
                    onClick={() => updateView({ search: "" })}
                  >
                    <X size={13} />
                  </button>
                )}
              </label>
              <DropdownMenu>
                <DropdownTrigger
                  aria-label="View options"
                  className={styles.menuTrigger}
                >
                  <MoreHorizontal size={17} />
                </DropdownTrigger>
                <DropdownContent>
                  <DropdownItem
                    onClick={() => {
                      setViewName(`${view.name} copy`);
                      setPanel("save");
                    }}
                  >
                    <Copy size={14} />
                    Save as new view
                  </DropdownItem>
                  <DropdownItem
                    onClick={() => toolbar.setFullScreen(!toolbar.fullScreen)}
                  >
                    <Maximize2 size={14} />
                    {toolbar.fullScreen ? "Exit full screen" : "Full screen"}
                  </DropdownItem>
                  <DropdownItem onClick={exportCsv}>
                    <ArrowDownToLine size={14} />
                    Export visible records
                  </DropdownItem>
                  {workspace.views.length > 1 && (
                    <>
                      <DropdownSeparator />
                      <DropdownItem
                        onClick={() => {
                          setWorkspace((state) => ({
                            ...state,
                            views: state.views.filter((v) => v.id !== view.id),
                            activeView: state.views.find(
                              (v) => v.id !== view.id,
                            )!.id,
                          }));
                          setSelected([]);
                        }}
                      >
                        Delete this view
                      </DropdownItem>
                    </>
                  )}
                </DropdownContent>
              </DropdownMenu>
            </div>
            {selected.length > 0 && (
              <div className={styles.selectionBar}>
                <strong>{selected.length} selected</strong>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    changeRows(
                      workspace.rows.map((r) =>
                        selected.includes(r.id) ? { ...r, approved: true } : r,
                      ),
                      "Selected campaigns approved.",
                    );
                  }}
                >
                  Approve
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => duplicateRows(selected)}
                >
                  Duplicate
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => deleteRows(selected)}
                >
                  Delete
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  aria-label="Clear row selection"
                  onClick={() => {
                    setSelected([]);
                    setRevision((n) => n + 1);
                  }}
                >
                  <X size={14} />
                </Button>
              </div>
            )}
            <div className={styles.content}>
              {rows.length === 0 ? (
                <div className={styles.empty}>
                  <Search size={30} />
                  <h3>No campaigns found</h3>
                  <p>Try another search or clear the filters for this view.</p>
                  <Button
                    variant="secondary"
                    onClick={() =>
                      updateView({
                        search: "",
                        state: { ...view.state, filters: [] },
                      })
                    }
                  >
                    Clear search and filters
                  </Button>
                </div>
              ) : view.layout === "board" ? (
                <div className={styles.board}>
                  {STATUSES.map((status) => {
                    const cards = rows.filter((row) => row.status === status);
                    return (
                      <section key={status} className={styles.boardColumn}>
                        <header>
                          <Status value={status} />
                          <span>{cards.length}</span>
                          <Button
                            variant="ghost"
                            size="sm"
                            aria-label={`Add ${status} campaign`}
                            onClick={() => addRecord(status)}
                          >
                            <Plus size={14} />
                          </Button>
                        </header>
                        {cards.map((row) => (
                          <button
                            type="button"
                            key={row.id}
                            className={styles.card}
                            onClick={() => openRecord(row.id)}
                          >
                            <span className={styles.cardChannel}>
                              {row.channel}
                            </span>
                            <strong>{row.name}</strong>
                            <p>{row.brief}</p>
                            <div>
                              <Avatar name={row.owner} size="xs" />
                              <span>
                                {row.launchDate
                                  ? new Date(
                                      `${row.launchDate}T12:00:00Z`,
                                    ).toLocaleDateString("en-US", {
                                      month: "short",
                                      day: "numeric",
                                      timeZone: "UTC",
                                    })
                                  : "Unscheduled"}
                              </span>
                              <span>{money(row.budget)}</span>
                            </div>
                          </button>
                        ))}
                      </section>
                    );
                  })}
                </div>
              ) : (
                groups.map((group) => (
                  <section
                    key={group.name || "all"}
                    className={styles.gridGroup}
                  >
                    {group.name && (
                      <button
                        type="button"
                        className={styles.groupHeading}
                        aria-expanded={
                          !view.state.collapsedGroups.includes(group.name)
                        }
                        onClick={() =>
                          updateState({
                            collapsedGroups:
                              view.state.collapsedGroups.includes(group.name)
                                ? view.state.collapsedGroups.filter(
                                    (name) => name !== group.name,
                                  )
                                : [...view.state.collapsedGroups, group.name],
                          })
                        }
                      >
                        {view.state.collapsedGroups.includes(group.name) ? (
                          <ChevronRight size={14} />
                        ) : (
                          <ChevronDown size={14} />
                        )}
                        <strong>{group.name}</strong>
                        <span>{group.rows.length} campaigns</span>
                        <span>
                          {money(
                            group.rows.reduce((sum, r) => sum + r.budget, 0),
                          )}
                        </span>
                      </button>
                    )}
                    {!view.state.collapsedGroups.includes(group.name) && (
                      <DataGrid
                        key={`${view.id}-${revision}-${view.search}-${view.state.filters.length}-${view.group}-${group.name}`}
                        ariaLabel="Campaign records"
                        rows={group.rows}
                        columns={toolbar.columns}
                        getRowId={getRowId}
                        onRowsChange={mergeRows}
                        height={Math.min(
                          640,
                          Math.max(
                            150,
                            group.rows.length * toolbar.rowHeight +
                              toolbar.headerHeight +
                              42,
                          ),
                        )}
                        rowHeight={toolbar.rowHeight}
                        headerHeight={toolbar.headerHeight}
                        rowMarkers="both"
                        freezeColumns={
                          view.state.pinnedColumns.includes("name") ? 1 : 0
                        }
                        theme={GRID_THEME}
                        keybindings={{ undo: false, redo: false }}
                        columnSortState={sorted.columnSortState}
                        onHeaderMenuAction={(index, action) =>
                          updateState({
                            sort:
                              action === "clear-sort"
                                ? []
                                : [
                                    {
                                      column: toolbar.columns[index]!.id,
                                      direction:
                                        action === "sort-asc" ? "asc" : "desc",
                                    },
                                  ],
                          })
                        }
                        onColumnResize={(column, width) =>
                          updateView({
                            widths: {
                              ...view.widths,
                              [column.id]: Math.min(800, Math.max(60, width)),
                            },
                          })
                        }
                        onRowSelectionChange={(indices) =>
                          setSelected((ids) => [
                            ...ids.filter(
                              (id) => !group.rows.some((row) => row.id === id),
                            ),
                            ...indices
                              .map((index) => group.rows[index]?.id)
                              .filter((id): id is string => Boolean(id)),
                          ])
                        }
                        onRowAppended={() => addRecord()}
                        trailingRowOptions={{
                          hint: "Add a campaign",
                          targetColumn: 0,
                        }}
                      />
                    )}
                  </section>
                ))
              )}
            </div>
            <footer className={styles.footer}>
              <span>
                <strong>{rows.length}</strong> campaigns
                <span className={styles.footerMuted}>
                  {" "}
                  of {workspace.rows.length}
                </span>
              </span>
              <span className={styles.footerMuted}>
                Budget <strong>{money(totalBudget)}</strong>
              </span>
              <span className={styles.footerMuted}>
                {rows.filter((r) => r.approved).length} approved
              </span>
              <div />
              <Button
                variant="ghost"
                size="sm"
                aria-label="Undo change"
                disabled={!history.past.length}
                onClick={() => travel("undo")}
              >
                <Undo2 size={15} />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                aria-label="Redo change"
                disabled={!history.future.length}
                onClick={() => travel("redo")}
              >
                <Redo2 size={15} />
              </Button>
              <span className={styles.footerHint}>
                Double-click a cell to edit
              </span>
            </footer>
          </section>
        </div>
        <div className={styles.liveMessage} role="status">
          {message}
        </div>
        {panel === "views" && (
          <Modal title="Your views" onClose={() => setPanel(null)}>
            {viewList}
          </Modal>
        )}
        {panel === "fields" && (
          <Modal
            title="Visible fields"
            description="Choose the fields in this view. Drag a column edge to resize it."
            onClose={() => setPanel(null)}
          >
            <div className={styles.fieldList}>
              {columns.map((column) => (
                <label className={styles.checkRow} key={column.id}>
                  <input
                    type="checkbox"
                    checked={toolbar.isColumnVisible(column.id)}
                    disabled={toolbar.isColumnLocked(column.id)}
                    onChange={() => toolbar.toggleColumnVisibility(column.id)}
                  />
                  <span>{column.title}</span>
                  {column.id === "name" && <small>Primary field</small>}
                </label>
              ))}
              <label className={styles.checkRow}>
                <input
                  type="checkbox"
                  checked={view.state.pinnedColumns.includes("name")}
                  onChange={(e) =>
                    updateState({
                      pinnedColumns: e.target.checked ? ["name"] : [],
                    })
                  }
                />
                Freeze campaign column
              </label>
              <Button
                variant="secondary"
                size="sm"
                onClick={toolbar.showAllColumns}
              >
                Show all fields
              </Button>
            </div>
          </Modal>
        )}
        {panel === "filter" && (
          <Modal
            title="Filter campaigns"
            description="Filters are saved automatically with this view."
            onClose={() => setPanel(null)}
          >
            <div className={styles.rules}>
              <label className={styles.field}>
                <span>Match conditions</span>
                <select
                  value={view.state.filterLogic}
                  onChange={(e) =>
                    updateState({ filterLogic: e.target.value as "and" | "or" })
                  }
                >
                  <option value="and">All conditions</option>
                  <option value="or">Any condition</option>
                </select>
              </label>
              {view.state.filters.map((filter, index) => {
                const choices =
                  filter.column === "status"
                    ? STATUSES
                    : filter.column === "owner"
                      ? OWNERS
                      : filter.column === "channel"
                        ? CHANNELS
                        : filter.column === "approved"
                          ? ["true", "false"]
                          : null;
                const numeric = ["budget", "roi"].includes(filter.column);
                const replace = (patch: Partial<typeof filter>) =>
                  updateState({
                    filters: view.state.filters.map((f, i) =>
                      i === index ? { ...f, ...patch } : f,
                    ),
                  });
                return (
                  <div className={styles.rule} key={index}>
                    <select
                      aria-label={`Filter field ${index + 1}`}
                      value={filter.column}
                      onChange={(e) => {
                        const column = e.target.value;
                        replace({
                          column,
                          operator: "eq",
                          value:
                            column === "approved"
                              ? true
                              : column === "status"
                                ? "Idea"
                                : column === "owner"
                                  ? OWNERS[0]
                                  : column === "channel"
                                    ? "Email"
                                    : ["budget", "roi"].includes(column)
                                      ? 0
                                      : "",
                        });
                      }}
                    >
                      {FIELDS.map((f) => (
                        <option key={f.id} value={f.id}>
                          {f.title}
                        </option>
                      ))}
                    </select>
                    <select
                      aria-label={`Filter operator ${index + 1}`}
                      value={filter.operator}
                      onChange={(e) =>
                        replace({
                          operator: e.target.value as typeof filter.operator,
                        })
                      }
                    >
                      <option value="eq">is</option>
                      <option value="neq">is not</option>
                      {!choices && (
                        <>
                          <option value="contains">contains</option>
                          <option value="gte">at least</option>
                          <option value="lte">at most</option>
                        </>
                      )}
                    </select>
                    {choices ? (
                      <select
                        aria-label={`Filter value ${index + 1}`}
                        value={String(filter.value)}
                        onChange={(e) =>
                          replace({
                            value:
                              filter.column === "approved"
                                ? e.target.value === "true"
                                : e.target.value,
                          })
                        }
                      >
                        {choices.map((choice) => (
                          <option key={choice}>{choice}</option>
                        ))}
                      </select>
                    ) : (
                      <Input
                        fullWidth
                        aria-label={`Filter value ${index + 1}`}
                        type={
                          numeric
                            ? "number"
                            : filter.column === "launchDate"
                              ? "date"
                              : "text"
                        }
                        value={String(filter.value ?? "")}
                        onChange={(e) =>
                          replace({
                            value: numeric
                              ? Number(e.target.value)
                              : e.target.value,
                          })
                        }
                      />
                    )}
                    <Button
                      variant="ghost"
                      size="sm"
                      aria-label={`Remove filter ${index + 1}`}
                      onClick={() =>
                        updateState({
                          filters: view.state.filters.filter(
                            (_, i) => i !== index,
                          ),
                        })
                      }
                    >
                      <X size={14} />
                    </Button>
                  </div>
                );
              })}
              <Button
                variant="secondary"
                size="sm"
                onClick={() =>
                  updateState({
                    filters: [
                      ...view.state.filters,
                      { column: "status", operator: "eq", value: "Ready" },
                    ],
                  })
                }
              >
                <Plus size={14} />
                Add condition
              </Button>
            </div>
          </Modal>
        )}
        {panel === "sort" && (
          <Modal
            title="Sort campaigns"
            description="Sorts apply in order. You can also sort from a column header."
            onClose={() => setPanel(null)}
          >
            <div className={styles.rules}>
              {view.state.sort.length === 0 && (
                <p>No sorting applied. Records appear in creation order.</p>
              )}
              {view.state.sort.map((sort, index) => (
                <div className={styles.rule} key={index}>
                  <select
                    aria-label={`Sort field ${index + 1}`}
                    value={sort.column}
                    onChange={(e) =>
                      updateState({
                        sort: view.state.sort.map((s, i) =>
                          i === index ? { ...s, column: e.target.value } : s,
                        ),
                      })
                    }
                  >
                    {FIELDS.map((f) => (
                      <option key={f.id} value={f.id}>
                        {f.title}
                      </option>
                    ))}
                  </select>
                  <select
                    aria-label={`Sort direction ${index + 1}`}
                    value={sort.direction}
                    onChange={(e) =>
                      updateState({
                        sort: view.state.sort.map((s, i) =>
                          i === index
                            ? {
                                ...s,
                                direction: e.target.value as "asc" | "desc",
                              }
                            : s,
                        ),
                      })
                    }
                  >
                    <option value="asc">Ascending</option>
                    <option value="desc">Descending</option>
                  </select>
                  <Button
                    variant="ghost"
                    size="sm"
                    aria-label={`Remove sort ${index + 1}`}
                    onClick={() =>
                      updateState({
                        sort: view.state.sort.filter((_, i) => i !== index),
                      })
                    }
                  >
                    <X size={14} />
                  </Button>
                </div>
              ))}
              <Button
                variant="secondary"
                size="sm"
                disabled={view.state.sort.length >= FIELDS.length}
                onClick={() => {
                  const field = FIELDS.find(
                    (f) => !view.state.sort.some((s) => s.column === f.id),
                  );
                  if (field)
                    updateState({
                      sort: [
                        ...view.state.sort,
                        { column: field.id, direction: "asc" },
                      ],
                    });
                }}
              >
                <Plus size={14} />
                Add sort
              </Button>
            </div>
          </Modal>
        )}
        {panel === "group" && (
          <Modal
            title="Group campaigns"
            description="Organize the grid into collapsible sections. The board always groups by status."
            onClose={() => setPanel(null)}
          >
            <label className={styles.field}>
              <span>Group by</span>
              <select
                value={view.group}
                onChange={(e) =>
                  updateView({
                    group: e.target.value as CampaignView["group"],
                    state: { ...view.state, collapsedGroups: [] },
                  })
                }
              >
                <option value="none">No grouping</option>
                <option value="status">Status</option>
                <option value="owner">Owner</option>
                <option value="channel">Channel</option>
              </select>
            </label>
          </Modal>
        )}
        {panel === "save" && (
          <Modal
            title="Create a view"
            description="Keep this search, filters, sorting, fields, and layout as a separate view."
            onClose={() => setPanel(null)}
          >
            <form
              className={styles.rules}
              onSubmit={(e) => {
                e.preventDefault();
                if (!viewName.trim()) return;
                const copy = {
                  ...view,
                  id: crypto.randomUUID(),
                  name: viewName.trim(),
                };
                setWorkspace((state) => ({
                  ...state,
                  views: [...state.views, copy],
                  activeView: copy.id,
                }));
                setPanel(null);
                setMessage(`Created view ${copy.name}.`);
              }}
            >
              <label className={styles.field}>
                <span>View name</span>
                <Input
                  fullWidth
                  autoFocus
                  required
                  value={viewName}
                  onChange={(e) => setViewName(e.target.value)}
                />
              </label>
              <Button type="submit" disabled={!viewName.trim()}>
                Create view
              </Button>
            </form>
          </Modal>
        )}
        {panel === "help" && (
          <Modal
            title="Make room for your next idea"
            description="A campaign workspace built with opt-ui and opt-datagrid."
            onClose={() => setPanel(null)}
          >
            <div className={styles.help}>
              <p>
                <strong>Edit naturally.</strong> Double-click a cell or press
                Enter. Copy and paste ranges from a spreadsheet. Drag column
                borders to resize.
              </p>
              <p>
                <strong>Keep your perspective.</strong> Every view remembers
                filters, sorting, visible fields, grouping, and row height.
              </p>
              <p>
                <strong>Work in batches.</strong> Select row checkboxes to
                approve, duplicate, or delete campaigns. Undo and redo are
                available in the footer.
              </p>
              <p>
                <strong>Your browser is the workspace.</strong> Records, notes,
                and views are stored on this device. Export CSV to take a copy
                with you.
              </p>
            </div>
          </Modal>
        )}
        {record && (
          <RecordDetail
            key={record.id}
            record={record}
            onClose={() => setRecordId(null)}
            onSave={(row) => {
              changeRows(
                mergeCampaignRows(workspace.rows, [row]),
                "Campaign saved.",
              );
            }}
            onDelete={() => deleteRows([record.id])}
            onDuplicate={() => duplicateRows([record.id])}
          />
        )}
      </div>
    </div>
  );
}