Form Validation

"use client";

import { TableAppearanceComparisonDemo } from "@/demos/table/table-appearance-comparison-demo";

/** Same shared data-table fixture, initially showing Formily validation. */
export function FormValidationTableAppearanceComparisonDemo() {
  return <TableAppearanceComparisonDemo initialEditable />;
}

"use client";

import { useEffect, useMemo, useState } from "react";
import { onFieldValueChange } from "@formily/core";
import {
  CircleAlert,
  Info,
  Lock,
  RotateCcw,
  TriangleAlert,
} from "lucide-react";

import { Button } from "@/components/f-ui/button/button";
import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import {
  applyEditableArrayIssues,
  type EditableArrayIssue,
} from "@/components/f-ui/editable-table/lib/editable-array-issues";
import { f } from "@/components/f-ui/field-types/catalog";
import { Form } from "@/components/f-ui/formily/form";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import { createForm } from "@/components/f-ui/formily/internals/create-form";

type Line = { id: string; item: string; qty: number; price: number };
type Variant = "balanced" | "compact" | "explicit";
const VARIANTS: { id: Variant; title: string; description: string }[] = [
  {
    id: "balanced",
    title: "A · Wash + corner",
    description: "A larger scan cue, with no icon beside the value.",
  },
  {
    id: "compact",
    title: "B · Corner only",
    description: "The quietest signal. Values keep the same space as A.",
  },
  {
    id: "explicit",
    title: "C · Severity icon",
    description:
      "Different shapes for error and warning, with a reserved icon slot.",
  },
];
const INITIAL: Line[] = [
  {
    id: "mixed",
    item: "Precision mounting bracket — anodized aluminum",
    qty: 7.5,
    price: 12850.75,
  },
  {
    id: "locked",
    item: "Replacement filter cartridge — industrial grade",
    qty: 120,
    price: 2400,
  },
  { id: "clean", item: "Standard washer", qty: 12, price: 18 },
  { id: "invalid", item: "Cable assembly — custom length", qty: 0, price: -4 },
];
const cloneLines = () => INITIAL.map((line) => ({ ...line }));

function issuesFor(lines: readonly Line[]): EditableArrayIssue[] {
  const issues: EditableArrayIssue[] = [];
  const add = (
    rowId: string,
    colKey: string,
    severity: "error" | "warning" | "info",
    message: string,
  ) =>
    issues.push({
      rowId,
      colKey,
      severity,
      message,
      source: "server",
    });
  for (const line of lines) {
    if (line.qty <= 0)
      add(line.id, "qty", "error", "Quantity must be greater than zero.");
    if (!Number.isInteger(line.qty))
      add(line.id, "qty", "error", "Enter a whole number of units.");
    if (line.qty % 6 !== 0)
      add(line.id, "qty", "error", "Order in packs of 6.");
    if (line.id === "mixed" && line.qty > 6)
      add(
        line.id,
        "qty",
        "warning",
        "This quantity exceeds the suggested order.",
      );
    if (line.qty > 100)
      add(
        line.id,
        "qty",
        "warning",
        "Quantity above 100 needs a second reviewer.",
      );
    if (line.price < 0)
      add(line.id, "price", "error", "Unit price cannot be negative.");
    if (line.price > 1000) {
      add(
        line.id,
        "price",
        "warning",
        "Unit price is above the catalog price.",
      );
      add(line.id, "price", "warning", "Price is above the last purchase.");
    }
    if (line.id === "locked" && line.price > 1000) {
      add(
        line.id,
        "price",
        "warning",
        "No current price agreement is attached.",
      );
      add(line.id, "price", "warning", "Supplier quote is older than 30 days.");
      add(line.id, "price", "warning", "A reviewer must confirm the currency.");
    }
    if (line.id === "mixed")
      add(
        line.id,
        "item",
        "info",
        "Description was updated by the supplier. The item code is unchanged.",
      );
  }
  return issues;
}

/** One real form, three synchronized arrays; only the public appearance prop differs. */
export function FormValidationCellFeedbackComparisonDemo() {
  const [narrow, setNarrow] = useState(true);
  const [locked, setLocked] = useState(true);
  const [dense, setDense] = useState(false);
  const [resetKey, setResetKey] = useState(0);
  return (
    <div
      className="not-prose w-full space-y-4"
      data-slot="cell-feedback-comparison"
    >
      <div className="bg-muted/40 rounded-xl border p-4">
        <p className="text-sm font-medium">
          Same values. Same messages. Three ways to mark a cell.
        </p>
        <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
          Edits stay in sync across all three tables. Row 2 starts locked; its
          unit price has five warnings. Row 1 has mixed errors and a warning.
          Row 3 is clean. Focus a field or click a flagged description to
          inspect it.
        </p>
        <div className="mt-3 flex flex-wrap gap-2">
          <Button
            variant={narrow ? "secondary" : "outline"}
            aria-pressed={narrow}
            onClick={() => setNarrow((value) => !value)}
          >
            {narrow ? "Minimum numeric width · 160 px" : "Comfortable columns"}
          </Button>
          <Button
            variant={locked ? "secondary" : "outline"}
            icon={<Lock aria-hidden />}
            aria-pressed={locked}
            onClick={() => setLocked((value) => !value)}
          >
            {locked ? "Row 2 locked" : "Row 2 unlocked"}
          </Button>
          <Button
            variant={dense ? "secondary" : "outline"}
            aria-pressed={dense}
            onClick={() => setDense((value) => !value)}
          >
            {dense ? "12 rows" : "4 rows"}
          </Button>
          <Button
            variant="ghost"
            icon={<RotateCcw aria-hidden />}
            onClick={() => setResetKey((value) => value + 1)}
          >
            Reset values
          </Button>
        </div>
        <div className="text-muted-foreground mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
          <span className="inline-flex items-center gap-1">
            <CircleAlert className="text-destructive size-3.5" />
            Error
          </span>
          <span className="inline-flex items-center gap-1">
            <TriangleAlert className="text-warning size-3.5" />
            Warning
          </span>
          <span className="inline-flex items-center gap-1">
            <Info className="text-info size-3.5" />
            Note · no wash
          </span>
          <span>Field borders and message behavior stay identical.</span>
        </div>
      </div>
      <ComparisonTables
        key={`${resetKey}-${dense}`}
        narrow={narrow}
        locked={locked}
        dense={dense}
      />
      <p className="text-muted-foreground text-xs leading-relaxed">
        Balanced is the recommended default. Compact and explicit remain
        available. Compare the long price in row 1, the five warnings on locked
        row 2, and how easy it is to find clean row 3. Use each table’s message
        button to read the full list and jump to a cell.
      </p>
    </div>
  );
}

function ComparisonTables({
  narrow,
  locked,
  dense,
}: {
  narrow: boolean;
  locked: boolean;
  dense: boolean;
}) {
  const form = useMemo(() => {
    const rows = dense
      ? Array.from({ length: 3 }, (_, index) =>
          cloneLines().map((line) => ({
            ...line,
            id: index === 0 ? line.id : `${line.id}-${index}`,
          })),
        ).flat()
      : cloneLines();
    // Preserve scenario rules on repeated rows by deriving messages from their base identity below.
    let syncing = false;
    let feedbackQueued = false;
    return createForm<Record<Variant, Line[]>>({
      initialValues: Object.fromEntries(
        VARIANTS.map(({ id }) => [id, rows.map((line) => ({ ...line }))]),
      ) as Record<Variant, Line[]>,
      effects() {
        onFieldValueChange("*.*.*", (field) => {
          if (syncing) return;
          const [owner, index, key] = field.path.toString().split(".");
          if (!VARIANTS.some(({ id }) => id === owner) || !index || !key)
            return;
          syncing = true;
          try {
            for (const { id } of VARIANTS) {
              if (id !== owner)
                field.form.setValuesIn(`${id}.${index}.${key}`, field.value);
            }
          } finally {
            syncing = false;
          }
          // Formily clears stale server feedback on each value change. Reapply
          // the shared fixture after every synchronized field has processed it.
          if (!feedbackQueued) {
            feedbackQueued = true;
            queueMicrotask(() => {
              feedbackQueued = false;
              for (const { id } of VARIANTS) applyMessages(field.form, id);
            });
          }
        });
      },
    });
  }, [dense]);

  useEffect(() => {
    for (const { id } of VARIANTS) applyMessages(form, id);
  }, [form]);

  const columns = useMemo(
    () =>
      defineEditableColumns<Line>({
        item: {
          ...f.text({ label: "Item description" }),
          size: narrow ? 188 : 280,
        },
        qty: {
          ...f.number({ label: "Qty" }),
          size: narrow ? 88 : 192,
          field: {
            component: [NumberInput, { surface: "tableCell" }],
            readOnly: (row) => locked && baseLine(row as Line).id === "locked",
            lockReason:
              "Submitted by the requester. Unlock row 2 to adjust this value.",
          },
        },
        price: {
          ...f.number({ label: "Unit price" }),
          size: narrow ? 88 : 216,
          field: {
            component: [NumberInput, { surface: "tableCell" }],
            readOnly: (row) => locked && baseLine(row as Line).id === "locked",
            lockReason:
              "Submitted by the requester. Unlock row 2 to adjust this value.",
          },
        },
      }),
    [narrow, locked],
  );

  return (
    <Form
      form={form}
      revealErrors="always"
      onSubmit={() => undefined}
      className="space-y-5"
    >
      {VARIANTS.map(({ id, title, description }) => (
        <section
          key={id}
          aria-label={title}
          data-feedback-variant={id}
          className="min-w-0 overflow-hidden rounded-xl border"
        >
          <div className="bg-muted/20 border-b px-4 py-3">
            <p className="m-0 text-sm font-semibold">{title}</p>
            <p className="text-muted-foreground m-0 mt-1 text-xs">
              {description}
            </p>
          </div>
          <div className="p-3">
            <EditableTable<Line>
              key={`${id}-${narrow}`}
              name={id}
              cellFeedbackAppearance={id}
              variant="embedded"
              editMode="inline"
              columns={columns}
              getRowId={(row) => row.id}
              rollupPlacement="toolbar"
              features={{ rowActions: false, footer: false }}
            />
          </div>
        </section>
      ))}
    </Form>
  );
}

function baseLine(line: Line): Line {
  return { ...line, id: line.id.replace(/-\d+$/, "") };
}

function applyMessages(
  form: ReturnType<typeof createForm<Record<Variant, Line[]>>>,
  id: Variant,
) {
  const lines = form.values[id] ?? [];
  const issues = lines.flatMap((line) =>
    issuesFor([baseLine(line)]).map((issue) => ({ ...issue, rowId: line.id })),
  );
  applyEditableArrayIssues(form, { arrayPath: id, scope: { source: "server" }, issues });
}

"use client";

import { Button } from "@/components/f-ui/button/button";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { f } from "@/components/f-ui/field-types/catalog";
import { Form } from "@/components/f-ui/formily/form";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import {
  useMixedCellValidation,
  type MixedValidationLine,
} from "./use-mixed-cell-validation";

const columns = defineEditableColumns<MixedValidationLine>({
  item: { ...f.text({ label: "Item" }), size: 260 },
  qty: {
    ...f.number({ label: "Qty" }),
    field: {
      component: [NumberInput],
      required: true,
      validator: (value) =>
        Number.isInteger(Number(value)) && Number(value) > 0
          ? ""
          : "Quantity must be a positive whole number.",
    },
  },
  price: {
    ...f.number({ label: "Unit price" }),
    field: {
      component: [NumberInput],
      required: true,
      validator: (value) =>
        Number(value) >= 0 ? "" : "Unit price cannot be negative.",
    },
  },
});

export function FormValidationMixedCellValidationDemo() {
  const demo = useMixedCellValidation();
  return (
    <section
      className="not-prose w-full space-y-3"
      aria-label="Mixed cell validation demo"
      data-slot="mixed-cell-validation-demo"
    >
      <div className="bg-muted/40 space-y-3 rounded-xl border p-4">
        <p className="text-sm font-medium">
          Local quantity rules + simulated backend price warnings
        </p>
        <p className="text-muted-foreground text-xs leading-relaxed">
          Start with local validation and check both rows. Each price above 100
          produces two backend warnings. Update row 1 contract raises its
          backend limit to 200 and returns an empty result, without editing the
          draft. Row 1 and row 2 refer to the named items, even after reversing
          their order.
        </p>
        <div className="flex flex-wrap gap-2">
          <Button onClick={() => void demo.validateLocal()}>
            Validate local rules
          </Button>
          <Button variant="outline" onClick={() => demo.check()}>
            Check all rows
          </Button>
          <Button variant="outline" onClick={() => demo.check(["a"])}>
            Check row 1
          </Button>
          <Button variant="outline" onClick={() => demo.check(["b"])}>
            Check row 2
          </Button>
          <Button variant="outline" onClick={demo.updateContract}>
            Update row 1 contract
          </Button>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" onClick={demo.hold}>
            Hold row 1 response
          </Button>
          <Button
            variant="outline"
            disabled={!demo.held}
            onClick={demo.deliver}
          >
            Deliver held response
          </Button>
          <Button variant="ghost" onClick={demo.useValidRow}>
            Use valid row 1
          </Button>
          <Button variant="ghost" onClick={demo.reverse}>
            Reverse rows
          </Button>
          <Button variant="ghost" onClick={() => void demo.reset()}>
            Reset demo
          </Button>
        </div>
        <p className="text-muted-foreground text-xs" role="status">
          {demo.pending
            ? `${demo.pending} backend check(s) in flight`
            : "No backend checks in flight"}
          {demo.held ? " · one response held" : ""}
        </p>
      </div>
      <Form form={demo.form} onSubmit={() => undefined}>
        <EditableTable<MixedValidationLine>
          name="lines"
          variant="embedded"
          editMode="inline"
          columns={columns}
          getRowId={(row) => row.id}
          rollupPlacement="toolbar"
          features={{ rowActions: false, footer: false }}
        />
      </Form>
      <div className="bg-muted/30 rounded-lg border px-3 py-2">
        <p className="text-muted-foreground mb-1 text-xs font-medium">
          Recent checks
        </p>
        <ol
          className="m-0 list-none space-y-1 p-0 text-xs"
          aria-label="Validation event log"
        >
          {demo.events.map((event, index) => (
            <li key={`${event}-${index}`}>{event}</li>
          ))}
        </ol>
      </div>
    </section>
  );
}

"use client";

import { useId, useState } from "react";
import { Button } from "@/components/f-ui/button/button";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { f } from "@/components/f-ui/field-types/catalog";
import { Form } from "@/components/f-ui/formily/form";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import { Input } from "@/components/ui/input";
import {
  type ApprovalLine,
  type DecisionRecord,
  DEMO_REVIEWER,
} from "./warning-approval/approval-service";
import { useWarningApproval } from "./warning-approval/use-warning-approval";

const columns = defineEditableColumns<ApprovalLine>({
  item: { ...f.text({ label: "Item" }), size: 250 },
  qty: {
    ...f.number({ label: "Qty" }),
    field: {
      component: [NumberInput],
      required: true,
      validator: (value) =>
        Number.isInteger(Number(value)) && Number(value) > 0
          ? ""
          : "Quantity must be a positive whole number.",
    },
  },
  price: {
    ...f.number({ label: "Unit price" }),
    field: {
      component: [NumberInput],
      required: true,
      validator: (value) =>
        Number.isFinite(Number(value)) && Number(value) >= 0
          ? ""
          : "Unit price must be a nonnegative number.",
    },
  },
});
const rowLabel = (id: string) => `Row ${{ a: 1, b: 2, c: 3 }[id] ?? id}`;
const decisionLabel = (kind: DecisionRecord["kind"]) =>
  kind === "acceptance"
    ? "Warning accepted"
    : kind === "row-approval"
      ? "Rows approved"
      : "Document approved";

export function FormValidationWarningApprovalDemo() {
  const [session, setSession] = useState(0);
  return (
    <ApprovalSession
      key={session}
      onReset={() => setSession((value) => value + 1)}
    />
  );
}
function ApprovalSession({ onReset }: { onReset: () => void }) {
  const demo = useWarningApproval();
  const reasonId = useId();
  const approved = demo.snapshot.rows.filter((row) => row.approved).length;
  const warningCount =
    demo.snapshot.pendingWarnings.length +
    demo.snapshot.acceptedWarnings.length;
  const hadApproval = demo.snapshot.records.some(
    (record) => record.kind !== "acceptance",
  );
  return (
    <section
      className="not-prose w-full space-y-4"
      data-slot="warning-approval-demo"
      aria-label="Warning acceptance and approval demo"
    >
      <div className="bg-muted/40 space-y-3 rounded-xl border p-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <p
            className="text-sm font-medium"
            data-slot="document-approval-state"
          >
            {demo.snapshot.documentApproved
              ? "Document approved"
              : approved
                ? `Partially approved · ${approved} / 3 rows`
                : hadApproval
                  ? "Approval reopened"
                  : "Awaiting review"}
          </p>
          <span className="text-muted-foreground text-xs">
            Reviewer: {DEMO_REVIEWER} · simulated backend
          </span>
        </div>
        <p className="text-muted-foreground text-xs leading-relaxed">
          Accept each warning before approving its row. Row 3’s hard error
          blocks the whole document, but eligible selected rows can be approved.
          Editing a row automatically rechecks it and reopens its earlier
          decisions.
        </p>
        <div className="flex flex-wrap gap-2">
          <Button
            disabled={demo.busy || demo.selectedIds.length === 0}
            onClick={() => demo.approve("rows")}
          >
            Approve selected rows ({demo.selectedIds.length})
          </Button>
          <Button
            variant="outline"
            disabled={demo.busy || demo.snapshot.documentApproved}
            onClick={() => demo.approve("document")}
          >
            Approve entire document
          </Button>
          <Button
            variant="outline"
            disabled={demo.pendingAction}
            onClick={demo.recheck}
          >
            Recheck all rows
          </Button>
          <Button variant="ghost" onClick={onReset}>
            Reset approval demo
          </Button>
        </div>
        <p
          role="status"
          className="text-muted-foreground text-xs"
          data-slot="approval-command-status"
        >
          {demo.checking.length
            ? `Rechecking ${demo.checking.length} row(s)… `
            : ""}
          {demo.message}
        </p>
      </div>
      <Form form={demo.form} onSubmit={() => undefined}>
        <EditableTable<ApprovalLine>
          name="lines"
          variant="embedded"
          editMode="inline"
          columns={columns}
          getRowId={(row) => row.id}
          rollupPlacement="toolbar"
          onSelectionChange={demo.setSelectedIds}
          features={{
            selection: { batchDelete: false },
            rowActions: false,
            footer: false,
          }}
        />
      </Form>
      <ul
        className="m-0 flex list-none flex-wrap gap-x-5 gap-y-1 p-0 text-xs"
        aria-label="Row approval status"
      >
        {demo.snapshot.rows.map((row) => (
          <li key={row.data.id} data-row-status={row.data.id}>
            {rowLabel(row.data.id)}:{" "}
            <span className="font-medium">
              {row.checkedRevision !== row.revision
                ? "Needs recheck"
                : row.approved
                  ? "Approved"
                  : row.findings.some((finding) => finding.severity === "error")
                    ? "Needs correction"
                    : demo.snapshot.pendingWarnings.some(
                          (finding) => finding.rowId === row.data.id,
                        )
                      ? "Awaiting warning decisions"
                      : "Ready for approval"}
            </span>{" "}
            · revision {row.revision}
          </li>
        ))}
      </ul>
      <div className="space-y-3 rounded-xl border p-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h3 className="text-sm font-medium">Warning decisions</h3>
          <p
            className="text-muted-foreground text-xs"
            data-slot="warning-decision-counts"
          >
            {warningCount} warning(s) detected ·{" "}
            {demo.snapshot.pendingWarnings.length} pending ·{" "}
            {demo.snapshot.acceptedWarnings.length} accepted
          </p>
        </div>
        <div className="space-y-1">
          <label htmlFor={reasonId} className="text-xs font-medium">
            Acceptance reason
          </label>
          <Input
            id={reasonId}
            value={demo.reason}
            onChange={(event) => demo.setReason(event.target.value)}
          />
        </div>
        {demo.snapshot.pendingWarnings.length ? (
          <ul
            className="m-0 list-none divide-y p-0"
            aria-label="Pending warning decisions"
          >
            {demo.snapshot.pendingWarnings.map((finding) => (
              <li
                key={`${finding.rowId}-${finding.id}`}
                className="flex flex-wrap items-center justify-between gap-2 py-2"
              >
                <span className="text-sm">
                  {rowLabel(finding.rowId)} · {finding.label}
                </span>
                <Button
                  variant="outline"
                  disabled={demo.busy}
                  onClick={() => demo.accept(finding)}
                  aria-label={`Accept ${rowLabel(finding.rowId)} · ${finding.label}`}
                >
                  Accept warning
                </Button>
              </li>
            ))}
          </ul>
        ) : (
          <p className="text-muted-foreground text-xs">
            {demo.checking.length
              ? "Waiting for current validation results."
              : "No warnings awaiting a decision. Accepted findings remain in the backend result and decision history."}
          </p>
        )}
      </div>
      <div className="space-y-2 rounded-xl border p-4">
        <div className="flex items-center justify-between gap-2">
          <h3 className="text-sm font-medium">
            Decision history ({demo.snapshot.records.length})
          </h3>
          <span className="text-muted-foreground text-xs">
            Retained while this demo is open
          </span>
        </div>
        {!demo.snapshot.records.length ? (
          <p className="text-muted-foreground text-xs">
            No decisions yet. Closing a message popup does not create an
            acceptance.
          </p>
        ) : (
          <div
            className="scrollbar-thin focus-visible:outline-ring max-h-72 overflow-y-auto rounded-sm focus-visible:outline-2"
            tabIndex={0}
            role="region"
            aria-label="Decision history"
          >
            <ol className="m-0 list-none divide-y p-0">
              {[...demo.snapshot.records].reverse().map((record) => (
                <li
                  key={record.id}
                  className="space-y-1 py-2 text-xs"
                  data-decision-current={record.current ? "true" : "false"}
                >
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <span className="font-medium">
                      {decisionLabel(record.kind)} ·{" "}
                      {record.kind === "document-approval"
                        ? "Entire document"
                        : record.rowIds.map(rowLabel).join(", ")}
                      {record.finding ? ` · ${record.finding.label}` : ""}
                    </span>
                    <span className="text-muted-foreground">
                      {record.current
                        ? "Current"
                        : "Outdated after data change"}
                    </span>
                  </div>
                  <p className="text-muted-foreground">
                    {record.actor} ·{" "}
                    {new Date(record.at).toLocaleTimeString("en-GB")} ·{" "}
                    {record.rowIds
                      .map(
                        (id) =>
                          `${rowLabel(id)} revision ${record.revisions[id]}`,
                      )
                      .join(", ")}
                  </p>
                  <details>
                    <summary className="cursor-pointer underline underline-offset-4">
                      View decision details
                    </summary>
                    <div className="text-muted-foreground space-y-1 pt-1">
                      <p>Reason: {record.reason || "Reviewed for approval."}</p>
                      {record.finding ? (
                        <p>
                          Original warning: {record.finding.message} Rule
                          version: {record.finding.ruleVersion}.
                        </p>
                      ) : null}
                      {record.reviewedRows.map((row) => (
                        <p key={row.id}>
                          {rowLabel(row.id)} at decision: qty {row.qty}, unit
                          price {row.price}.
                        </p>
                      ))}
                    </div>
                  </details>
                </li>
              ))}
            </ol>
          </div>
        )}
      </div>
    </section>
  );
}

"use client";

import { useEffect, useMemo } from "react";
import { toast } from "sonner";

import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormErrorSummary } from "@/components/f-ui/formily/form-error-summary";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

import { type Line, lineColumns, submitCatch } from "./surface-cases-shared";

/** Cells-only page: no FormErrorSummary — rollup is the aggregate. */
export function FormValidationTableOnlyNoSummaryDemo() {
  const form = useMemo(
    () =>
      createForm<{ lines: Line[] }>({
        initialValues: {
          lines: [
            { id: "a", sku: "SKU-1", qty: 1 },
            { id: "b", sku: "", qty: 0 },
          ],
        },
      }),
    [],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormErrorSummary } from "@/components/f-ui/formily/form-error-summary";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";

/** `scope="form"` keeps only path-less issues — not header fields. */
export function FormValidationSummaryScopeFormDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string }>({
        initialValues: { customer: "" },
      }),
    [],
  );
  const [scope, setScope] = useState<"all" | "form">("form");

  return (
    <div className="w-full max-w-md space-y-4">
      <label className="flex items-center gap-2 text-sm">
        <Switch
          checked={scope === "all"}
          onCheckedChange={(on) => setScope(on ? "all" : "form")}
        />
        <span className="text-muted-foreground">
          {scope === "all" ? 'scope="all"' : 'scope="form" (root only)'}
        </span>
      </label>
      <Form
        key={scope}
        form={form}
        onSubmit={() => ({
          status: "error" as const,
          issues: [
            {
              source: "system" as const,
              message: "Could not reach the server",
            },
          ],
        })}
      >
        <FormErrorSummary scope={scope} />
        <FormField name="customer" kind="text" label="Customer" required />
        <FormActions>
          <Button type="submit">
            Submit empty
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

"use client";

import { useState } from "react";

import {
  MessagePopover,
  type MessageItem,
} from "@/components/f-ui/message-popover/message-popover";
import { FooterToolbar } from "@/components/f-ui/page/footer-toolbar";
import { Button } from "@/components/ui/button";

const MESSAGES: MessageItem[] = [
  {
    id: "e1",
    severity: "error",
    title: "Missing unit price",
    subtitle: "Line 2 · Unit price",
    group: "Line items",
    description: "Enter a price greater than 0.",
  },
  {
    id: "w1",
    severity: "warning",
    title: "Qty looks high",
    subtitle: "Line 1 · Qty",
    group: "Line items",
    description: "Confirm quantity on line 1 before submit.",
  },
];

/**
 * Footer left = Message Popover; finalizing actions on the right.
 * Open after Validate / blocked Submit — not on every draft keystroke.
 */
export function ObjectMessagingFooterPopoverDemo() {
  const [open, setOpen] = useState(false);
  const [items] = useState(MESSAGES);

  return (
    <div className="overflow-hidden rounded-xl border bg-card">
      <div className="space-y-2 border-b px-6 py-3">
        <p className="text-sm font-medium">Purchase request · PR-1042</p>
        <p className="text-xs text-muted-foreground">
          Draft edits stay quiet. Click Validate to open the object message list.
        </p>
        <Button
          type="button"
          variant="outline"
          onClick={() => setOpen(true)}
        >
          Validate
        </Button>
      </div>
      <FooterToolbar
        className="border-t-0"
        extra={
          <MessagePopover
            items={items}
            open={open}
            onOpenChange={setOpen}
          />
        }
      >
        <Button type="button" variant="outline">
          Save draft
        </Button>
        <Button
          type="button"
          onClick={() => setOpen(true)}
        >
          Submit
        </Button>
      </FooterToolbar>
    </div>
  );
}

"use client";

import { toast } from "sonner";

import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { StepsForm } from "@/components/f-ui/steps-form/steps-form";

import { type Line, lineColumns } from "./surface-cases-shared";

export function FormValidationStepsTableDemo() {
  return (
    <div className="w-full max-w-2xl">
      <StepsForm
        initialValues={{
          lines: [{ id: "s1", sku: "", qty: 0 }],
        }}
        errorSummary={false}
        onFinish={async () => {
          toast.success("Queued");
        }}
      >
        <StepsForm.Step name="lines" title="Lines">
          <EditableTable<Line>
            name="lines"
            variant="embedded"
            columns={lineColumns}
            getRowId={(row) => row.id}
          />
        </StepsForm.Step>
        <StepsForm.Step name="done" title="Done">
          <p className="text-muted-foreground text-sm">
            Last step — write API would run on Submit here.
          </p>
        </StepsForm.Step>
      </StepsForm>
    </div>
  );
}

"use client";

import { useEffect, useMemo } from "react";
import { toast } from "sonner";

import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormErrorSummary } from "@/components/f-ui/formily/form-error-summary";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

import { type Line, lineColumns, ALL_CLASS_ISSUES, mergeAfterInvalidSubmit } from "./surface-cases-shared";

/**
 * One Submit: header, array-root, cells, root/system, warning — each on its
 * locked surface (summary vs rollup).
 */
export function FormValidationAllClassesDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string; memo: string; lines: Line[] }>({
        initialValues: {
          customer: "",
          memo: "",
          lines: [
            { id: "ok", sku: "SKU-1", qty: 2 },
            { id: "bad", sku: "", qty: 0 },
          ],
        },
      }),
    [],
  );

  useEffect(() => {
    mergeAfterInvalidSubmit(form, ALL_CLASS_ISSUES);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="customer" kind="text" label="Customer" required />
        <FormField name="memo" kind="text" label="Memo" />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
        />
        <FormActions>
          <Button type="submit">
            Submit again
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

"use client";

import { useMemo } from "react";
import { toast } from "sonner";

import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormErrorSummary } from "@/components/f-ui/formily/form-error-summary";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

import { type Line, lineColumns } from "./surface-cases-shared";

/** Array-root “add at least one line” stays in the summary, not a fake Row N. */
export function FormValidationArrayRootDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string; lines: Line[] }>({
        initialValues: { customer: "", lines: [] },
      }),
    [],
  );

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        focusOnInvalid="summary"
        onSubmit={(values) => {
          if (values.lines.length === 0) {
            return {
              status: "error" as const,
              issues: [
                {
                  source: "submit" as const,
                  path: "lines",
                  message: "Add at least one line",
                },
              ],
            };
          }
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="customer" kind="text" label="Customer" required />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
          recordCreator={{
            record: () => ({
              id: crypto.randomUUID(),
              sku: "",
              qty: 1,
            }),
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

"use client";

import { useMemo } from "react";
import { toast } from "sonner";

import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { applyEditableArrayIssues } from "@/components/f-ui/editable-table/lib/editable-array-issues";
import { f } from "@/components/f-ui/field-types/catalog";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { Input } from "@/components/f-ui/formily/connects/input";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

type OrderLine = {
  id: string;
  sku: string;
  qty: number;
  price: number;
  /** Secondary panel field. Only the FIVE row fills it with five errors. */
  fullList: string;
};

const PACK_SIZE = 6;

const FIVE_MESSAGES = [
  "Missing contract",
  "Outside the buying calendar",
  "Vendor is blocked",
  "Quantity exceeds the open PO",
  "Tax code is not on the order",
] as const;

function rowId(row: unknown): string {
  if (typeof row !== "object" || row == null || !("id" in row)) return "";
  return String((row as OrderLine).id);
}

function whenRow(id: string, message: string | { type: "warning"; message: string }) {
  return (_value: unknown, row?: unknown) => (rowId(row) === id ? message : undefined);
}

const columns = defineEditableColumns<OrderLine>({
  sku: {
    ...f.text({ label: "SKU" }),
    size: 140,
    field: {
      component: [Input],
      required: true,
      readOnly: (row) => rowId(row) === "locked",
      lockReason: (row) =>
        rowId(row) === "locked" ? "Warehouse count is in progress" : undefined,
      validator: [
        (value) =>
          String(value ?? "").startsWith("OLD-")
            ? { type: "warning", message: "This SKU is discontinued" }
            : undefined,
        ...FIVE_MESSAGES.map((message) => whenRow("cap", message)),
        whenRow("warnOnly", { type: "warning", message: "Slow-moving SKU" }),
        whenRow("warnOnly", { type: "warning", message: "A substitute exists" }),
        whenRow("errOnly", "SKU is not on the agreement"),
        whenRow("errOnly", "Plant does not stock this SKU"),
        whenRow("dedupe", "Listed twice by the catalog"),
        whenRow("dedupe", "Listed twice by the catalog"),
        whenRow("both", "Needs a buyer"),
        whenRow("both", { type: "warning", message: "Needs a buyer" }),
        whenRow("sources", "Catalog check failed"),
      ],
    },
  },
  qty: {
    ...f.number({ label: "Qty" }),
    size: 96,
    field: {
      component: [NumberInput, { surface: "tableCell" }],
      required: true,
      validator: [
        (v) => (Number.isInteger(Number(v)) ? undefined : "Qty must be a whole number"),
        (v) =>
          Number(v) % PACK_SIZE === 0
            ? undefined
            : `Qty must be a multiple of the pack size (${PACK_SIZE})`,
        (v) =>
          Number(v) > 100
            ? { type: "warning", message: "Qty above 100 needs a second approver" }
            : undefined,
      ],
    },
  },
  price: {
    ...f.number({ label: "Unit price" }),
    size: 112,
    field: {
      component: [NumberInput, { surface: "tableCell" }],
      validator: (v) =>
        Number(v) > 1000
          ? { type: "warning", message: "Unit price is above list price" }
          : undefined,
    },
  },
  fullList: {
    ...f.text({ label: "Full list" }),
    tier: "secondary",
    field: {
      component: [Input],
      validator: FIVE_MESSAGES.map((message) => whenRow("cap", message)),
    },
  },
});

const LINES: OrderLine[] = [
  { id: "mixed", sku: "SKU-100", qty: 100.5, price: 12, fullList: "" },
  { id: "warnings", sku: "OLD-7", qty: 12, price: 1200, fullList: "" },
  { id: "clean", sku: "SKU-102", qty: 6, price: 8, fullList: "" },
  { id: "cap", sku: "FIVE", qty: 6, price: 8, fullList: "five rules" },
  { id: "warnOnly", sku: "WARN", qty: 6, price: 8, fullList: "" },
  { id: "errOnly", sku: "ERR", qty: 6, price: 8, fullList: "" },
  { id: "locked", sku: "OLD-9", qty: 6, price: 8, fullList: "" },
  { id: "dedupe", sku: "DUP", qty: 6, price: 8, fullList: "" },
  { id: "both", sku: "BOTH", qty: 6, price: 8, fullList: "" },
  { id: "sources", sku: "SRC", qty: 6, price: 8, fullList: "" },
];

/** One row per cell-message case: mixed, cap, panel, warning-only, error-only, locked, dedupe, sources. */
export function FormValidationMultiMessageCellDemo() {
  const form = useMemo(
    () =>
      createForm<{ lines: OrderLine[] }>({
        initialValues: { lines: LINES },
      }),
    [],
  );

  return (
    <div className="w-full max-w-3xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted with warnings for the approver");
        }}
      >
        <EditableTable<OrderLine>
          name="lines"
          variant="embedded"
          columns={columns}
          getRowId={(row) => row.id}
          editMode="inline"
          expand={{ autoExpandOnError: false, expandAll: false }}
          features={{ rowActions: false, footer: false }}
        />
        <FormActions>
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              applyEditableArrayIssues(form, {
                arrayPath: "lines",
                issues: [
                  {
                    rowId: "sources",
                    colKey: "sku",
                    message: "Submitted after the cutoff",
                    source: "submit",
                    severity: "error",
                  },
                  {
                    rowId: "sources",
                    colKey: "sku",
                    message: "Server rejected the vendor",
                    source: "server",
                    severity: "error",
                  },
                  {
                    rowId: "sources",
                    colKey: "sku",
                    message: "Pricing service is down",
                    source: "system",
                    severity: "error",
                  },
                ],
              });
            }}
          >
            Apply server issues
          </Button>
          <Button type="submit">Submit</Button>
        </FormActions>
      </Form>
    </div>
  );
}