// kova/templates.jsx — Template layer (Atomic Design · Brad Frost)
// Templates compose organisms into named-zone page skeletons.
// Pages instantiate templates; Pages do NOT use raw spacing tokens.
// This is the layer Wave D was missing.

const { PageHead, Card } = window.K;


/* ============================================================
   ModuleOverview — page-head · KPI strip · primary · queue · activity · side rail
   Used by: HomePage, every module overview page in later waves.

   Zones:
     pageHead        <PageHead/>
     kpis            array of <KPITile/>     · renders a 4-up grid
     primary         the dominant card (DecisionCard etc.)
     secondary       a card or list below primary  (optional)
     activity        <ActivityStream/>              (optional)
     side            array of <Card/>               (right column)
     empty           replacement node when pending=empty (optional)
   ============================================================ */
const ModuleOverview = ({ pageHead, kpis, primary, secondary, activity, side, empty }) => (
  <div className="k-page-enter">
    {pageHead}

    {kpis && kpis.length > 0 && (
      <div className="k-template-kpis" data-count={kpis.length}>
        {kpis}
      </div>
    )}

    {empty ? empty : (
      <div className="k-template-overview-grid">
        <div className="k-template-overview-main">
          {primary}
          {secondary}
          {activity}
        </div>
        {side && side.length > 0 && (
          <div className="k-template-overview-side">
            {side}
          </div>
        )}
      </div>
    )}
  </div>
);


/* ============================================================
   DetailObject — page-head · status row · main column · side column · sticky footer
   Used by: ApprovalsDetail, every detail page in later waves.

   Zones:
     back            back-link node
     pageHead        <PageHead/>
     statusRow       array of chips/stamps under the page head
     main            array of <Card/>/organisms       (left, 2fr)
     side            array of <Card/>/organisms       (right, 1fr)
     footer          sticky action bar at bottom      (optional)
   ============================================================ */
const DetailObject = ({ back, pageHead, statusRow, main, side, footer }) => (
  <div className="k-page-enter">
    {back}
    {pageHead}
    {statusRow && (
      <div className="k-detail-status-row">{statusRow}</div>
    )}
    <div className="k-detail-grid">
      <div className="k-detail-main">{main}</div>
      <div className="k-detail-side">{side}</div>
    </div>
    {footer}
  </div>
);


/* ============================================================
   ListTable — page-head · filter bar · tabs · body (rows or table)
   Used by: ApprovalsInbox, every queue/list page in later waves.

   Zones:
     pageHead        <PageHead/>
     tabs            <Tabs/>                          (optional)
     filterBar       node — usually filter chip strip (optional)
     body            list rows or table
     empty           replacement node when body is empty (optional)
   ============================================================ */
const ListTable = ({ pageHead, tabs, filterBar, body, empty }) => (
  <div className="k-page-enter">
    {pageHead}
    {tabs}
    {filterBar}
    {empty ? empty : body}
  </div>
);


Object.assign(window.K, { ModuleOverview, DetailObject, ListTable });