Planned looks

"use client";

import { Fragment, type ReactNode } from "react";
import {
  ArrowRotateRight as RefreshIcon,
  Check as CheckIcon,
  ListUl as ListIcon,
  Folder as FolderIcon,
  TriangleExclamation as WarningIcon,
  ArrowRight as ArrowRightIcon,
  Person as PersonIcon,
  Bell as BellIcon,
  House as HomeIcon,
} from "@gravity-ui/icons";
import { ActionBar } from "@gravity-ui/navigation";
import {
  Accordion,
  Alert,
  Breadcrumbs,
  Button,
  Card,
  Checkbox,
  CopyToClipboard,
  DefinitionList,
  Divider,
  Icon,
  Label,
  Link,
  PlaceholderContainer,
  Progress,
  RadioGroup,
  Select,
  Slider,
  Spin,
  Stepper,
  Switch,
  Tab,
  TabList,
  TabPanel,
  TabProvider,
  Table,
  Text,
  TextInput,
  User,
} from "@/components/GravityUI/GravityUI";

type Node = {
  id: string;
  parentId: string | null;
  order: number;
  component: string;
  props: Record<string, unknown>;
};

const root = {
  "component": "Column",
  "props": {
    "align": "stretch",
    "gap": "spacious"
  }
};
const nodes: Node[] = [
  {
    "id": "hero",
    "parentId": "root",
    "order": 0,
    "component": "HeroBlock",
    "props": {
      "eyebrow": {
        "path": "/season"
      },
      "title": {
        "path": "/capsuleName"
      },
      "body": "Plan a cohesive capsule with ready-to-wear looks, occasion coverage, care notes, and a carry-on packing workflow. Built around versatile neutrals with a few dress-up swaps.",
      "imageLabel": "Capsule",
      "tone": "info",
      "labels": [
        {
          "label": "Palette",
          "value": "Navy, cream, camel, black",
          "tone": "info",
          "type": "default"
        },
        {
          "label": "Trip length",
          "value": "7 days",
          "tone": "normal",
          "type": "default"
        },
        {
          "label": "Laundry",
          "value": "1 midweek refresh",
          "tone": "success",
          "type": "info"
        }
      ],
      "actions": [
        {
          "label": "Refresh plan",
          "icon": "refresh",
          "variant": "normal",
          "action": {
            "event": {
              "name": "refresh",
              "context": {
                "planner": "capsule-wardrobe"
              }
            }
          }
        },
        {
          "label": "Save capsule",
          "icon": "check",
          "variant": "primary",
          "action": {
            "event": {
              "name": "confirm",
              "context": {
                "capsule": {
                  "path": "/capsuleName"
                }
              }
            }
          }
        }
      ]
    }
  },
  {
    "id": "metrics",
    "parentId": "root",
    "order": 1,
    "component": "MetricGrid",
    "props": {
      "items": {
        "path": "/metrics"
      }
    }
  },
  {
    "id": "looksSection",
    "parentId": "root",
    "order": 2,
    "component": "Card",
    "props": {
      "view": "outlined",
      "padding": "comfortable",
      "theme": "normal"
    }
  },
  {
    "id": "looksTitle",
    "parentId": "looksSection",
    "order": 0,
    "component": "Text",
    "props": {
      "text": "Planned looks",
      "variant": "h2",
      "color": "primary"
    }
  },
  {
    "id": "looksIntro",
    "parentId": "looksSection",
    "order": 1,
    "component": "Text",
    "props": {
      "text": "Mix-and-match outfits grouped by context, with a clear hero piece and travel-friendly notes.",
      "variant": "body",
      "color": "secondary"
    }
  },
  {
    "id": "looksGrid",
    "parentId": "looksSection",
    "order": 2,
    "component": "CardGrid",
    "props": {
      "variant": "product",
      "columns": "three",
      "items": {
        "path": "/looks"
      }
    }
  },
  {
    "id": "occasionGrid",
    "parentId": "root",
    "order": 3,
    "component": "FeaturePanelGrid",
    "props": {
      "items": {
        "path": "/occasions"
      }
    }
  },
  {
    "id": "carePackingRow",
    "parentId": "root",
    "order": 4,
    "component": "Row",
    "props": {
      "gap": "normal",
      "align": "stretch"
    }
  },
  {
    "id": "careCard",
    "parentId": "carePackingRow",
    "order": 0,
    "component": "Card",
    "props": {
      "weight": 7,
      "view": "raised",
      "padding": "comfortable",
      "theme": "normal"
    }
  },
  {
    "id": "careTitle",
    "parentId": "careCard",
    "order": 0,
    "component": "Text",
    "props": {
      "text": "Garment care notes",
      "variant": "h2",
      "color": "primary"
    }
  },
  {
    "id": "careAlert",
    "parentId": "careCard",
    "order": 1,
    "component": "AlertBlock",
    "props": {
      "title": "Protect delicate items",
      "message": "Silk, wool, and knitwear need separate care. Keep them away from damp shoes and avoid overpacking to reduce creasing.",
      "tone": "warning"
    }
  },
  {
    "id": "careTable",
    "parentId": "careCard",
    "order": 2,
    "component": "DataTable",
    "props": {
      "title": "Care plan",
      "columns": [
        {
          "id": "garment",
          "label": "Garment",
          "align": "start"
        },
        {
          "id": "cleaning",
          "label": "Cleaning",
          "align": "start"
        },
        {
          "id": "drying",
          "label": "Drying",
          "align": "start"
        },
        {
          "id": "packing",
          "label": "Packing note",
          "align": "start"
        }
      ],
      "rows": {
        "path": "/careRows"
      },
      "emptyMessage": "No care notes added."
    }
  },
  {
    "id": "packingCard",
    "parentId": "carePackingRow",
    "order": 1,
    "component": "Card",
    "props": {
      "weight": 5,
      "view": "raised",
      "padding": "comfortable",
      "theme": "info"
    }
  },
  {
    "id": "packingTitle",
    "parentId": "packingCard",
    "order": 0,
    "component": "Text",
    "props": {
      "text": "Packing list progress",
      "variant": "h2",
      "color": "primary"
    }
  },
  {
    "id": "packingProgress",
    "parentId": "packingCard",
    "order": 1,
    "component": "ProgressList",
    "props": {
      "items": {
        "path": "/packing"
      }
    }
  },
  {
    "id": "packingDivider",
    "parentId": "packingCard",
    "order": 2,
    "component": "Divider",
    "props": {
      "axis": "horizontal"
    }
  },
  {
    "id": "packingCheckOne",
    "parentId": "packingCard",
    "order": 3,
    "component": "CheckBox",
    "props": {
      "label": {
        "path": "/checklist/0/label"
      },
      "value": {
        "path": "/checklist/0/value"
      }
    }
  },
  {
    "id": "packingCheckTwo",
    "parentId": "packingCard",
    "order": 4,
    "component": "CheckBox",
    "props": {
      "label": {
        "path": "/checklist/1/label"
      },
      "value": {
        "path": "/checklist/1/value"
      }
    }
  },
  {
    "id": "packingCheckThree",
    "parentId": "packingCard",
    "order": 5,
    "component": "CheckBox",
    "props": {
      "label": {
        "path": "/checklist/2/label"
      },
      "value": {
        "path": "/checklist/2/value"
      }
    }
  },
  {
    "id": "controlsCard",
    "parentId": "root",
    "order": 5,
    "component": "Card",
    "props": {
      "view": "outlined",
      "padding": "comfortable",
      "theme": "normal"
    }
  },
  {
    "id": "controlsTitle",
    "parentId": "controlsCard",
    "order": 0,
    "component": "Text",
    "props": {
      "text": "Planner settings",
      "variant": "h2",
      "color": "primary"
    }
  },
  {
    "id": "controlsRow",
    "parentId": "controlsCard",
    "order": 1,
    "component": "Row",
    "props": {
      "gap": "normal",
      "align": "stretch"
    }
  },
  {
    "id": "tripLength",
    "parentId": "controlsRow",
    "order": 0,
    "component": "SliderField",
    "props": {
      "weight": 4,
      "label": "Trip length in days",
      "value": 7,
      "min": 2,
      "max": 14,
      "step": 1
    }
  },
  {
    "id": "styleSelect",
    "parentId": "controlsRow",
    "order": 1,
    "component": "SelectField",
    "props": {
      "weight": 4,
      "label": "Style emphasis",
      "placeholder": "Choose emphasis",
      "options": [
        {
          "label": "Balanced",
          "value": "balanced"
        },
        {
          "label": "Work-focused",
          "value": "work"
        },
        {
          "label": "Evening-focused",
          "value": "evening"
        },
        {
          "label": "Casual-focused",
          "value": "casual"
        }
      ],
      "value": [
        "balanced"
      ]
    }
  },
  {
    "id": "laundrySwitch",
    "parentId": "controlsRow",
    "order": 2,
    "component": "SwitchField",
    "props": {
      "weight": 4,
      "label": "Include midweek laundry refresh",
      "value": true
    }
  },
  {
    "id": "occasionChoice",
    "parentId": "controlsCard",
    "order": 2,
    "component": "ChoicePicker",
    "props": {
      "label": "Occasions to cover",
      "variant": "multiple",
      "options": [
        {
          "label": "Office",
          "value": "office"
        },
        {
          "label": "Travel",
          "value": "travel"
        },
        {
          "label": "Dinner",
          "value": "dinner"
        },
        {
          "label": "Weekend",
          "value": "weekend"
        },
        {
          "label": "Formal event",
          "value": "formal"
        }
      ],
      "value": [
        "office",
        "travel",
        "dinner",
        "weekend"
      ]
    }
  }
];
const dataModel = {
  "capsuleName": "7-day City Capsule",
  "season": "Spring / early fall",
  "metrics": [
    {
      "label": "Garments",
      "value": "18",
      "description": "Core pieces selected",
      "tone": "info",
      "icon": "list"
    },
    {
      "label": "Looks",
      "value": "12",
      "description": "Work, weekend, evening",
      "tone": "success",
      "icon": "check"
    },
    {
      "label": "Packing days",
      "value": "7",
      "description": "Carry-on friendly",
      "tone": "normal",
      "icon": "folder"
    },
    {
      "label": "Care alerts",
      "value": "3",
      "description": "Delicate or special care",
      "tone": "warning",
      "icon": "warning"
    }
  ],
  "looks": [
    {
      "title": "Monday polish",
      "subtitle": "Work meeting",
      "body": "Cream silk blouse, navy wide-leg trousers, camel blazer, loafers, gold hoops.",
      "imageLabel": "Look 01",
      "value": "Smart casual",
      "meta": "Layered • wrinkle-aware",
      "tone": "info",
      "labels": [
        {
          "label": "Occasion",
          "value": "Office",
          "tone": "info",
          "type": "default"
        },
        {
          "label": "Weather",
          "value": "Mild",
          "tone": "normal",
          "type": "default"
        }
      ],
      "actions": [
        {
          "label": "View details",
          "icon": "arrowRight",
          "variant": "outlined",
          "action": {
            "event": {
              "name": "open_details",
              "context": {
                "look": "monday-polish"
              }
            }
          }
        }
      ]
    },
    {
      "title": "Gallery dinner",
      "subtitle": "Evening",
      "body": "Black slip dress, cropped cardigan, ankle boots, compact clutch, red lip.",
      "imageLabel": "Look 02",
      "value": "Evening",
      "meta": "One-piece base",
      "tone": "normal",
      "labels": [
        {
          "label": "Occasion",
          "value": "Dinner",
          "tone": "normal",
          "type": "default"
        },
        {
          "label": "Care",
          "value": "Steam only",
          "tone": "warning",
          "type": "info"
        }
      ],
      "actions": [
        {
          "label": "View details",
          "icon": "arrowRight",
          "variant": "outlined",
          "action": {
            "event": {
              "name": "open_details",
              "context": {
                "look": "gallery-dinner"
              }
            }
          }
        }
      ]
    },
    {
      "title": "Weekend market",
      "subtitle": "Casual day",
      "body": "Striped tee, straight-leg jeans, trench, white sneakers, canvas tote.",
      "imageLabel": "Look 03",
      "value": "Casual",
      "meta": "Comfort first",
      "tone": "success",
      "labels": [
        {
          "label": "Occasion",
          "value": "Errands",
          "tone": "success",
          "type": "default"
        },
        {
          "label": "Care",
          "value": "Machine wash",
          "tone": "normal",
          "type": "default"
        }
      ],
      "actions": [
        {
          "label": "View details",
          "icon": "arrowRight",
          "variant": "outlined",
          "action": {
            "event": {
              "name": "open_details",
              "context": {
                "look": "weekend-market"
              }
            }
          }
        }
      ]
    }
  ],
  "occasions": [
    {
      "title": "Work & meetings",
      "body": "Structured layers, neutral base colors, polished shoes, one subtle accessory.",
      "icon": "person",
      "tone": "info",
      "value": "5 looks",
      "labels": [
        {
          "label": "Palette",
          "value": "Navy / cream / camel",
          "tone": "normal",
          "type": "default"
        }
      ]
    },
    {
      "title": "Travel days",
      "body": "Soft knit, crease-resistant trousers, trench, sneakers, crossbody bag.",
      "icon": "folder",
      "tone": "normal",
      "value": "2 looks",
      "labels": [
        {
          "label": "Priority",
          "value": "Comfort",
          "tone": "success",
          "type": "default"
        }
      ]
    },
    {
      "title": "Evening plans",
      "body": "Black dress or silk blouse with tailored trousers; switch shoes and jewelry.",
      "icon": "bell",
      "tone": "warning",
      "value": "3 looks",
      "labels": [
        {
          "label": "Add-on",
          "value": "Statement earring",
          "tone": "warning",
          "type": "info"
        }
      ]
    },
    {
      "title": "Weekend casual",
      "body": "Denim, striped tee, cardigan, sneakers, tote. Repeat with different top layer.",
      "icon": "home",
      "tone": "success",
      "value": "2 looks",
      "labels": [
        {
          "label": "Repeatable",
          "value": "Yes",
          "tone": "success",
          "type": "default"
        }
      ]
    }
  ],
  "careRows": [
    {
      "cells": [
        "Silk blouse",
        "Hand wash cold or dry clean",
        "Hang dry; steam on low",
        "Pack in garment sleeve"
      ]
    },
    {
      "cells": [
        "Wool blazer",
        "Dry clean only",
        "Brush after wear",
        "Wear on plane to save space"
      ]
    },
    {
      "cells": [
        "Trench coat",
        "Spot clean",
        "Air overnight",
        "Outer layer, not packed"
      ]
    },
    {
      "cells": [
        "Knit cardigan",
        "Hand wash cold",
        "Dry flat",
        "Fold, do not hang"
      ]
    },
    {
      "cells": [
        "White sneakers",
        "Wipe clean",
        "Air dry",
        "Use shoe bags"
      ]
    }
  ],
  "packing": [
    {
      "label": "Tops",
      "value": 80,
      "text": "4 of 5 packed",
      "tone": "info"
    },
    {
      "label": "Bottoms",
      "value": 100,
      "text": "3 of 3 packed",
      "tone": "success"
    },
    {
      "label": "Layers",
      "value": 75,
      "text": "3 of 4 packed",
      "tone": "warning"
    },
    {
      "label": "Shoes",
      "value": 67,
      "text": "2 of 3 packed",
      "tone": "warning"
    },
    {
      "label": "Accessories",
      "value": 100,
      "text": "6 of 6 packed",
      "tone": "success"
    }
  ],
  "checklist": [
    {
      "label": "Use packing cubes by outfit type",
      "value": true
    },
    {
      "label": "Add mini steamer or wrinkle spray",
      "value": true
    },
    {
      "label": "Put silk and knitwear in breathable pouches",
      "value": false
    }
  ]
};

const iconData: Record<string, unknown> = {
  "refresh": RefreshIcon,
  "check": CheckIcon,
  "list": ListIcon,
  "folder": FolderIcon,
  "warning": WarningIcon,
  "arrowRight": ArrowRightIcon,
  "person": PersonIcon,
  "bell": BellIcon,
  "home": HomeIcon,
};

export function PlannedLooks() {
  const childrenByParent = groupChildren(nodes);
  const renderChildren = (parentId: string) =>
    (childrenByParent.get(parentId) ?? []).map((node) => (
      <Fragment key={node.id}>{renderNode(node, childrenByParent, renderChildren)}</Fragment>
    ));

  return renderLayout(root.component, root.props ?? {}, renderChildren("root"));
}

function renderNode(
  node: Node,
  childrenByParent: Map<string, Node[]>,
  renderChildren: (parentId: string) => ReactNode[],
) {
  const props = node.props ?? {};
  const children = renderChildren(node.id);

  switch (node.component) {
    case "Column":
    case "Row":
      return renderLayout(node.component, props, children);
    case "NavigationBar":
      return (
        <ActionBar aria-label="Generated navigation">
          <ActionBar.Section>
            <ActionBar.Group>{children}</ActionBar.Group>
          </ActionBar.Section>
        </ActionBar>
      );
    case "Card":
      return (
        <Card theme={stringProp(props.theme, "normal")} view={stringProp(props.view, "filled")} size="l" type="container">
          <div style={{ padding: padding(stringProp(props.padding, "normal")) }}>{children}</div>
        </Card>
      );
    case "Text":
      return (
        <Text as={textElement(props.variant)} variant={textVariant(props.variant)} color={textColor(props.color)}>
          {formatValue(resolve(props.text))}
        </Text>
      );
    case "Icon":
      return icon(props.name, props.size);
    case "Button":
      return (
        <Button
          view={buttonView(props.variant)}
          disabled={Boolean(resolve(props.disabled))}
          loading={Boolean(resolve(props.loading))}
          selected={Boolean(resolve(props.selected))}
          onClick={() => handleAction(props.action)}
        >
          {props.icon ? icon(props.icon, "s") : null}
          {formatValue(resolve(props.text))}
        </Button>
      );
    case "TextField":
      return (
        <label style={{ display: "grid", gap: 6 }}>
          {props.label ? <Text variant="body-2">{formatValue(props.label)}</Text> : null}
          <TextInput value={String(resolve(props.value) ?? "")} placeholder={stringProp(props.placeholder)} disabled={Boolean(resolve(props.disabled))} onUpdate={() => undefined} />
        </label>
      );
    case "CheckBox":
      return <Checkbox checked={Boolean(resolve(props.value))} disabled={Boolean(resolve(props.disabled))} onUpdate={() => undefined}>{formatValue(props.label)}</Checkbox>;
    case "SwitchField":
      return <Switch checked={Boolean(resolve(props.value))} disabled={Boolean(resolve(props.disabled))} onUpdate={() => undefined}>{formatValue(props.label)}</Switch>;
    case "ChoicePicker":
      return renderChoicePicker(props);
    case "SelectField":
      return <Select label={stringProp(props.label)} value={arrayValue(resolve(props.value))} options={optionList(props.options)} placeholder={stringProp(props.placeholder)} disabled={Boolean(resolve(props.disabled))} onUpdate={() => undefined} />;
    case "SliderField":
      return (
        <label style={{ display: "grid", gap: 8 }}>
          <Text variant="body-2">{formatValue(props.label)}</Text>
          <Slider value={numberProp(resolve(props.value), 0)} min={numberProp(props.min, 0)} max={numberProp(props.max, 100)} step={numberProp(props.step, 1)} disabled={Boolean(resolve(props.disabled))} onUpdate={() => undefined} />
        </label>
      );
    case "Divider":
      return <Divider orientation={props.axis === "vertical" ? "vertical" : "horizontal"} />;
    case "AlertBlock":
      return <Alert layout="horizontal" theme={stringProp(props.tone, "info")} view="filled" title={stringProp(props.title)} message={stringProp(props.message)} />;
    case "MetricGrid":
      return renderMetricGrid(props.items);
    case "DataTable":
      return renderDataTable(props);
    case "ProgressList":
      return renderProgressList(props.items);
    case "DefinitionListBlock":
      return renderDefinitionList(props);
    case "LinkList":
      return renderLinkList(props.items);
    case "UserList":
      return renderUserList(props.items);
    case "LabelGroup":
      return renderLabels(props.items);
    case "HeroBlock":
      return renderHeroBlock(props);
    case "FilterBar":
      return renderFilterBar(props);
    case "FeaturePanelGrid":
      return renderFeaturePanels(props.items);
    case "CardGrid":
      return renderCardGrid(props);
    case "TabsBlock":
      return renderTabs(props);
    case "EmptyStateList":
      return renderEmptyStates(props.items);
    case "LoadingStateList":
      return renderLoadingStates(props.items);
    case "BreadcrumbTrail":
      return renderBreadcrumbs(props);
    case "StepperBlock":
      return renderStepper(props);
    case "AccordionBlock":
      return renderAccordion(props);
    case "CopyList":
      return renderCopyList(props);
    default:
      return null;
  }
}

function renderLayout(component: string, props: Record<string, unknown>, children: ReactNode[]) {
  return (
    <div
      style={{
        alignItems: align(props.align),
        display: "flex",
        flexDirection: component === "Row" ? "row" : "column",
        flexWrap: component === "Row" ? "wrap" : undefined,
        gap: gap(props.gap),
        justifyContent: justify(props.justify),
      }}
    >
      {children}
    </div>
  );
}

function renderChoicePicker(props: Record<string, unknown>) {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      {props.label ? <Text variant="body-2">{formatValue(props.label)}</Text> : null}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {optionList(props.options).map((option) => (
          <Button key={option.value} view={arrayValue(resolve(props.value)).includes(option.value) ? "action" : "outlined"}>
            {option.content}
          </Button>
        ))}
      </div>
    </div>
  );
}

function renderMetricGrid(items: unknown) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 12 }}>
      {arrayRecords(items).map((item) => (
        <Card key={String(item.label) + "-" + String(item.value)} theme="normal" view="filled" type="container">
          <div style={{ display: "grid", gap: 6, padding: 14 }}>
            <Text variant="caption-2" color="secondary">{formatValue(item.label)}</Text>
            <Text variant="header-1">{formatValue(item.value)}</Text>
            {item.description ? <Text variant="caption-2" color="secondary">{formatValue(item.description)}</Text> : null}
          </div>
        </Card>
      ))}
    </div>
  );
}

function renderDataTable(props: Record<string, unknown>) {
  const columns = arrayRecords(props.columns).map((column) => ({
    id: String(column.id),
    name: formatValue(column.label),
    align: column.align === "end" ? "right" : column.align === "center" ? "center" : "left",
  }));
  const data = arrayRecords(props.rows).map((row, rowIndex) => ({
    id: rowIndex,
    ...Object.fromEntries(arrayValues(row.cells).map((cell, index) => [String(columns[index]?.id ?? index), formatValue(cell)])),
  }));

  return (
    <div style={{ display: "grid", gap: 10 }}>
      {props.title ? <Text as="h3" variant="subheader-2">{formatValue(props.title)}</Text> : null}
      <Table columns={columns} data={data} emptyMessage={stringProp(props.emptyMessage, "No data")} />
    </div>
  );
}

function renderProgressList(items: unknown) {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {arrayRecords(items).map((item) => (
        <div key={String(item.label)} style={{ display: "grid", gap: 4 }}>
          <Text variant="body-2">{formatValue(item.label)}</Text>
          <Progress value={numberProp(resolve(item.value), 0)} theme={stringProp(item.tone, "info")} />
          {item.text ? <Text variant="caption-2" color="secondary">{formatValue(item.text)}</Text> : null}
        </div>
      ))}
    </div>
  );
}

function renderDefinitionList(props: Record<string, unknown>) {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {props.title ? <Text as="h3" variant="subheader-2">{formatValue(props.title)}</Text> : null}
      <DefinitionList>
        {arrayRecords(props.items).map((item) => (
          <DefinitionList.Item key={String(item.label)} name={formatValue(item.label)}>{formatValue(item.value)}</DefinitionList.Item>
        ))}
      </DefinitionList>
    </div>
  );
}

function renderLinkList(items: unknown) {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      {arrayRecords(items).map((item) => (
        <Link key={String(item.label)} href={stringProp(item.href, "#")}>{formatValue(item.label)}</Link>
      ))}
    </div>
  );
}

function renderUserList(items: unknown) {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {arrayRecords(items).map((item) => (
        <User key={String(item.name)} name={stringProp(item.name)} description={stringProp(item.description)} />
      ))}
    </div>
  );
}

function renderLabels(items: unknown) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      {arrayRecords(items).map((item) => (
        <Label key={String(item.label) + "-" + String(item.value ?? "")} theme={stringProp(item.tone, "normal")} type={stringProp(item.type, "default")}>
          {formatValue(item.label)}{item.value ? ": " + formatValue(item.value) : ""}
        </Label>
      ))}
    </div>
  );
}

function renderHeroBlock(props: Record<string, unknown>) {
  return (
    <section style={{ display: "grid", gap: 16, padding: 24, border: "1px solid var(--g-color-line-generic)", borderRadius: 12 }}>
      {props.eyebrow ? <Text variant="caption-2" color="secondary">{formatValue(props.eyebrow)}</Text> : null}
      <Text as="h1" variant="display-1">{formatValue(props.title)}</Text>
      {props.body ? <Text variant="body-2" color="secondary">{formatValue(props.body)}</Text> : null}
      {renderLabels(props.labels)}
      {renderActionButtons(props.actions)}
    </section>
  );
}

function renderFilterBar(props: Record<string, unknown>) {
  return (
    <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
      {props.title ? <Text variant="subheader-2">{formatValue(props.title)}</Text> : null}
      <TextInput value={stringProp(props.searchValue)} placeholder={stringProp(props.searchPlaceholder, "Search")} onUpdate={() => undefined} />
      {arrayRecords(props.filters).map((filter) => (
        <Button key={String(filter.value)} view={filter.active ? "action" : "outlined"}>{formatValue(filter.label)}</Button>
      ))}
      {arrayRecords(props.sortOptions).length > 0 ? (
        <Select label={stringProp(props.sortLabel)} value={stringProp(props.sortValue) ? [stringProp(props.sortValue)] : []} options={optionList(props.sortOptions)} onUpdate={() => undefined} />
      ) : null}
    </div>
  );
}

function renderFeaturePanels(items: unknown) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }}>
      {arrayRecords(items).map((item) => (
        <Card key={String(item.title)} theme="normal" view="filled" type="container">
          <div style={{ display: "grid", gap: 8, padding: 14 }}>
            <Text variant="subheader-2">{formatValue(item.title)}</Text>
            {item.value ? <Text variant="header-1">{formatValue(item.value)}</Text> : null}
            <Text variant="body-2" color="secondary">{formatValue(item.body)}</Text>
            {renderLabels(item.labels)}
          </div>
        </Card>
      ))}
    </div>
  );
}

function renderCardGrid(props: Record<string, unknown>) {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {props.title ? <Text as="h3" variant="subheader-2">{formatValue(props.title)}</Text> : null}
      {props.description ? <Text variant="body-2" color="secondary">{formatValue(props.description)}</Text> : null}
      <div style={{ display: "grid", gridTemplateColumns: cardColumns(props.columns), gap: 12 }}>
        {arrayRecords(props.items).map((item) => (
          <Card key={String(item.title)} theme="normal" view="filled" type="container">
            <div style={{ display: "grid", gap: 10, padding: 14 }}>
              <Text variant="subheader-2">{formatValue(item.title)}</Text>
              {item.subtitle ? <Text variant="body-2" color="secondary">{formatValue(item.subtitle)}</Text> : null}
              {item.value ? <Text variant="header-1">{formatValue(item.value)}</Text> : null}
              <Text variant="body-2">{formatValue(item.body)}</Text>
              {renderLabels(item.labels)}
              {renderActionButtons(item.actions)}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function renderTabs(props: Record<string, unknown>) {
  const items = arrayRecords(props.items);
  const active = String(items.find((item) => item.active)?.value ?? items[0]?.value ?? "");

  return (
    <TabProvider value={active}>
      <div style={{ display: "grid", gap: 10 }}>
        {props.title ? <Text variant="subheader-2">{formatValue(props.title)}</Text> : null}
        <TabList size={stringProp(props.size, "m")}>{items.map((item) => <Tab key={String(item.value)} value={String(item.value)}>{formatValue(item.label)}</Tab>)}</TabList>
        {items.map((item) => <TabPanel key={String(item.value)} value={String(item.value)}>{formatValue(item.body)}</TabPanel>)}
      </div>
    </TabProvider>
  );
}

function renderEmptyStates(items: unknown) {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {arrayRecords(items).map((item) => (
        <PlaceholderContainer key={String(item.title)} size={stringProp(item.size, "m")}>
          <Text variant="subheader-2">{formatValue(item.title)}</Text>
          <Text variant="body-2" color="secondary">{formatValue(item.description)}</Text>
        </PlaceholderContainer>
      ))}
    </div>
  );
}

function renderLoadingStates(items: unknown) {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {arrayRecords(items).map((item) => (
        <div key={String(item.label)} style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Spin size={stringProp(item.size, "s")} />
          <Text variant="body-2">{formatValue(item.label)}</Text>
        </div>
      ))}
    </div>
  );
}

function renderBreadcrumbs(props: Record<string, unknown>) {
  return <Breadcrumbs items={arrayRecords(props.items).map((item) => ({ text: formatValue(item.label), href: stringProp(item.href, undefined) }))} />;
}

function renderStepper(props: Record<string, unknown>) {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {props.title ? <Text variant="subheader-2">{formatValue(props.title)}</Text> : null}
      <Stepper size={stringProp(props.size, "m")} items={arrayRecords(props.items).map((item) => ({ id: String(item.value), title: formatValue(item.label), view: stringProp(item.view, "idle"), disabled: Boolean(item.disabled) }))} activeStep={String(arrayRecords(props.items).find((item) => item.active)?.value ?? "")} />
    </div>
  );
}

function renderAccordion(props: Record<string, unknown>) {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {props.title ? <Text variant="subheader-2">{formatValue(props.title)}</Text> : null}
      <Accordion view={stringProp(props.view, "solid")} size={stringProp(props.size, "m")}>
        {arrayRecords(props.items).map((item) => (
          <Accordion.Item key={String(item.title)} title={formatValue(item.title)} disabled={Boolean(item.disabled)}>
            {formatValue(item.body)}
          </Accordion.Item>
        ))}
      </Accordion>
    </div>
  );
}

function renderCopyList(props: Record<string, unknown>) {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      {props.title ? <Text variant="subheader-2">{formatValue(props.title)}</Text> : null}
      {arrayRecords(props.items).map((item) => (
        <CopyToClipboard key={String(item.label)} text={stringProp(item.copyText)}>
          <Button view="outlined">{formatValue(item.label)}: {formatValue(item.value)}</Button>
        </CopyToClipboard>
      ))}
    </div>
  );
}

function renderActionButtons(actions: unknown) {
  const items = arrayRecords(actions);

  if (items.length === 0) {
    return null;
  }

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      {items.map((action) => (
        <Button key={String(action.label)} view={buttonView(action.variant)} disabled={Boolean(action.disabled)} loading={Boolean(action.loading)} selected={Boolean(action.selected)} onClick={() => handleAction(action.action)}>
          {action.icon ? icon(action.icon, "s") : null}
          {formatValue(action.label)}
        </Button>
      ))}
    </div>
  );
}

function handleAction(action: unknown) {
  console.log("A2UI action", action);
}

function groupChildren(nodes: Node[]) {
  const map = new Map<string, Node[]>();

  for (const node of nodes) {
    const parentId = node.parentId ?? "root";
    const list = map.get(parentId) ?? [];
    list.push(node);
    map.set(parentId, list);
  }

  for (const list of map.values()) {
    list.sort((left, right) => left.order === right.order ? left.id.localeCompare(right.id) : left.order - right.order);
  }

  return map;
}

function resolve(value: unknown): unknown {
  if (isRecord(value) && typeof value.path === "string") {
    return getPath(dataModel, value.path);
  }

  return value;
}

function getPath(source: unknown, path: string): unknown {
  if (path === "/") {
    return source;
  }

  return path
    .split("/")
    .slice(1)
    .map((part) => part.replace(/~1/g, "/").replace(/~0/g, "~"))
    .reduce<unknown>((current, key) => {
      if (!isRecord(current) && !Array.isArray(current)) {
        return undefined;
      }

      return (current as Record<string, unknown>)[key];
    }, source);
}

const iconAliases: Record<string, string> = {
  "open_details": "arrowRight"
};

function icon(name: unknown, size: unknown) {
  const normalizedName = normalizeIconName(name);
  const data =
    typeof normalizedName === "string" ? iconData[normalizedName] : undefined;

  return data ? <Icon data={data} size={size === "l" ? 20 : size === "m" ? 16 : 14} /> : null;
}

function normalizeIconName(name: unknown) {
  return typeof name === "string" && Object.prototype.hasOwnProperty.call(iconAliases, name)
    ? iconAliases[name]
    : name;
}

function buttonView(value: unknown) {
  return value === "primary" ? "action" : stringProp(value, "normal");
}

function textVariant(value: unknown) {
  const variants: Record<string, string> = {
    h1: "display-1",
    h2: "subheader-3",
    h3: "subheader-2",
    h4: "subheader-2",
    h5: "subheader-2",
    body: "body-2",
    caption: "caption-2",
  };

  return variants[stringProp(value, "body")] ?? "body-2";
}

function textElement(value: unknown) {
  return ["h1", "h2", "h3", "h4", "h5"].includes(String(value)) ? String(value) : "span";
}

function textColor(value: unknown) {
  return stringProp(value, "primary");
}

function align(value: unknown) {
  return value === "stretch" ? "stretch" : value === "center" ? "center" : value === "end" ? "flex-end" : "flex-start";
}

function justify(value: unknown) {
  return value === "spaceBetween" ? "space-between" : value === "center" ? "center" : value === "end" ? "flex-end" : "flex-start";
}

function gap(value: unknown) {
  return value === "spacious" ? 24 : value === "compact" ? 8 : 14;
}

function padding(value: unknown) {
  return value === "spacious" ? 24 : value === "comfortable" ? 20 : value === "compact" ? 12 : 16;
}

function cardColumns(value: unknown) {
  if (value === "three") {
    return "repeat(3, minmax(0, 1fr))";
  }

  if (value === "two") {
    return "repeat(2, minmax(0, 1fr))";
  }

  return "repeat(auto-fit, minmax(220px, 1fr))";
}

function optionList(value: unknown) {
  return arrayRecords(value).map((option) => ({
    value: String(option.value),
    content: formatValue(option.label),
  }));
}

function arrayRecords(value: unknown) {
  const resolved = resolve(value);

  return Array.isArray(resolved) ? resolved.filter(isRecord) : [];
}

function arrayValues(value: unknown) {
  const resolved = resolve(value);

  return Array.isArray(resolved) ? resolved : [];
}

function arrayValue(value: unknown) {
  if (Array.isArray(value)) {
    return value.map(String);
  }

  return typeof value === "string" && value ? [value] : [];
}

function numberProp(value: unknown, fallback: number) {
  return typeof value === "number" ? value : fallback;
}

function stringProp(value: unknown, fallback = "") {
  const resolved = resolve(value);

  return typeof resolved === "string" ? resolved : fallback;
}

function formatValue(value: unknown) {
  const resolved = resolve(value);

  if (resolved === null || resolved === undefined) {
    return "";
  }

  return String(resolved);
}

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}