/* ============================================================
   Calendar & Lists as DATA PRODUCTS, presented in the worksheet
   document shell (mirrors the existing Content-Library worksheet
   UI): a document header + a representative formatting toolbar
   that also holds the FUNCTIONAL face toggle (Data / Artifact /
   Control / Context). The toolbar's formatting controls are
   representative only — not wired up. The Data face renders as a
   spreadsheet grid; the current view is the Artifact face.
   ============================================================ */

// Calendar's underlying tabular data (the records behind the artifact).
const CAL_COLS = ['Date', 'Time', 'Event', 'Type', 'Owner'];
const CAL_ROWS = [
  ['Tue, Jun 9', '08:00', 'Daily stand-up', 'Meeting', 'AW'],
  ['Tue, Jun 9', '10:30', 'SVC field inspection', 'Inspection', 'MH'],
  ['Tue, Jun 9', '14:00', 'Owner progress meeting', 'Meeting', 'AW'],
  ['Wed, Jun 10', '09:00', 'North shaft liner start', 'Milestone', 'MH'],
  ['Wed, Jun 10', '15:30', 'Design coordination', 'Meeting', 'DP'],
  ['Thu, Jun 11', '11:00', 'Stone column inspection', 'Inspection', 'MH'],
  ['Fri, Jun 12', '13:30', 'Safety stand-down review', 'Meeting', 'AW'],
  ['Mon, Jun 15', '09:30', 'Weekly Review', 'Report', 'AW'],
  ['Tue, Jun 16', '16:00', 'Pay app walkthrough', 'Meeting', 'VH'],
  ['Wed, Jun 17', '—', 'Tunnel grout coordination', 'Meeting', 'MH'],
  ['Thu, Jun 18', '14:30', 'Photo QA review', 'Meeting', 'JW'],
  ['Fri, Jun 19', '09:30', 'Monthly Report close', 'Report', 'AW'],
];

// Lists' underlying tabular data — flattened from the board sections.
const LISTS_COLS = ['Status', 'Group', 'Item', 'Notes'];
function toolListsRows() {
  const secs = window.LISTS_SECTIONS || [];
  const tag = window.LISTS_TAG || {};
  const rows = [];
  secs.forEach((s) => (s.items || []).forEach(([status, title, note]) => {
    rows.push([(tag[status] && tag[status].label) || status, s.title, title, note || '']);
  }));
  return rows;
}

function wsColLetter(i) {
  let s = '';
  i += 1;
  while (i > 0) { const r = (i - 1) % 26; s = String.fromCharCode(65 + r) + s; i = Math.floor((i - 1) / 26); }
  return s;
}

// Data face = a spreadsheet grid. Column letters across, row numbers down.
// Pass either `grid` (a raw 2D array, e.g. a workbook sheet) or `cols`+`rows`
// (field names become row 1). `boldFirst` bolds row 1 (default: only in cols mode).
function WorksheetGrid({ cols, rows, grid, boldFirst }) {
  const g = grid || [cols || [], ...(rows || [])];
  const bold = boldFirst != null ? boldFirst : !grid;
  const nCols = g.reduce((m, r) => Math.max(m, r ? r.length : 0), 0);
  const padCols = nCols + 1;   // the data shape + one empty column on the right
  const padRows = g.length + 1; // + one empty row at the bottom
  const W0 = 240, WC = 96;      // first (label) column wider; data columns uniform
  const tableW = 40 + W0 + (padCols - 1) * WC;
  return (
    <div className="ws-grid-wrap">
      <table className="ws-grid" style={{ width: tableW }}>
        <colgroup>
          <col style={{ width: 40 }} />
          {Array.from({ length: padCols }).map((_, i) => <col key={i} style={{ width: i === 0 ? W0 : WC }} />)}
        </colgroup>
        <thead>
          <tr>
            <th className="ws-corner" aria-hidden="true"></th>
            {Array.from({ length: padCols }).map((_, i) => <th key={i} className="ws-colh">{wsColLetter(i)}</th>)}
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: padRows }).map((_, ri) => {
            const r = g[ri];
            return (
              <tr key={ri}>
                <td className="ws-rowh">{ri + 1}</td>
                {Array.from({ length: padCols }).map((_, ci) => (
                  <td key={ci} className={'ws-cell' + (ri === 0 && r && bold ? ' ws-cell--head' : '')} title={r && r[ci] || ''}>
                    {r && r[ci] != null ? r[ci] : ''}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function ToolControlFace({ source }) {
  return (
    <div className="mdl-face">
      <div className="mdl-face__label">Sync</div>
      <p className="mdl-face__p"><span className="mdl__sync-dot"></span>In sync with <strong>{source}</strong> · last synced 1d ago</p>
      <div className="mdl-face__label">Maintained by</div>
      <p className="mdl-face__p">Claude — wakes when the source updates and re-authors the records.</p>
    </div>
  );
}

function ToolContextFace({ what, why }) {
  return (
    <div className="mdl-face">
      <div className="mdl-face__label">What this is</div>
      <p className="mdl-face__p">{what}</p>
      <div className="mdl-face__label">Why it matters</div>
      <p className="mdl-face__p">{why}</p>
      <div className="mdl-face__label">Status</div>
      <p className="mdl-face__p"><span className="mdl-pill">Draft</span> Claude-authored — validate to pin it as memory.</p>
    </div>
  );
}

// ── Representative (non-functional) formatting-toolbar bits ──
const WsIco = ({ d, box = 24, w = 15 }) => (
  <svg width={w} height={w} viewBox={`0 0 ${box} ${box}`} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
function WsToolbarControls() {
  return (
    <div className="dps__tb-left" aria-hidden="true">
      <span className="dps__tb-btn"><WsIco d={<><polyline points="9 14 4 9 9 4" /><path d="M20 20v-7a4 4 0 0 0-4-4H4" /></>} /></span>
      <span className="dps__tb-btn"><WsIco d={<><polyline points="15 14 20 9 15 4" /><path d="M4 20v-7a4 4 0 0 1 4-4h12" /></>} /></span>
      <span className="dps__tb-sep" />
      <span className="dps__tb-txt">Default <i className="dps__cx" /></span>
      <span className="dps__tb-btn dps__tb-txt" style={{ fontWeight: 600 }}>T <i className="dps__cx" /></span>
      <span className="dps__tb-btn"><WsIco d={<><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="14" y2="12" /><line x1="4" y1="18" x2="18" y2="18" /></>} /> <i className="dps__cx" /></span>
      <span className="dps__tb-sep" />
      <span className="dps__tb-btn" style={{ fontWeight: 700 }}>B</span>
      <span className="dps__tb-btn" style={{ fontStyle: 'italic' }}>I</span>
      <span className="dps__tb-btn" style={{ textDecoration: 'line-through' }}>S</span>
      <span className="dps__tb-btn" style={{ textDecoration: 'underline' }}>A</span>
      <span className="dps__tb-btn"><WsIco d={<><path d="M19 11l-7-7-9 9 7 7 9-9z" /><path d="M5 19h14" /></>} /></span>
      <span className="dps__tb-btn">•••</span>
      <span className="dps__tb-sep" />
      <span className="dps__tb-txt dps__tb-btn">Comments</span>
      <span className="dps__tb-txt dps__tb-btn">Details</span>
      <span className="dps__tb-txt dps__tb-btn">Version History</span>
    </div>
  );
}

// Reusable worksheet document shell for ANY data product. `faces` is an array of
// { key, label, render(setFace) }. Used by the Tool DPs and the Model workbook DPs.
function DPShell({ name, author, faces, initial, icon }) {
  const [face, setFace] = React.useState(initial || (faces[0] && faces[0].key));
  const cur = faces.find((f) => f.key === face) || faces[0];
  return (
    <div className="dps">
      {/* Document header */}
      <div className="dps__head">
        <span className="dps__docico">{icon || <window.IconDataProduct size={18} />}</span>
        <div className="dps__titles">
          <div className="dps__title">{name}</div>
        </div>
        <div className="dps__headright">
          <span className="dps__author">{author || 'Brandon · just now'}</span>
          <button type="button" className="dps__more" aria-label="More">•••</button>
        </div>
      </div>

      {/* Toolbar — formatting is representative; the face toggle is functional. */}
      <div className="dps__toolbar">
        <WsToolbarControls />
        <div className="dps__facetoggle" role="tablist" aria-label="Data product faces">
          {faces.map((f) =>
            <button key={f.key} type="button" role="tab" aria-selected={face === f.key}
              className={`dps__face ${face === f.key ? 'is-active' : ''}`} onClick={() => setFace(f.key)}>{f.label}</button>
          )}
        </div>
      </div>

      {/* Body */}
      <div className="dps__body">
        <div className="dps__section">{cur.label}</div>
        {cur.render(setFace)}
      </div>
    </div>
  );
}

function ToolDP({ name, source, author, cols, rows, context, initial, children }) {
  const faces = [
    { key: 'data', label: 'Data', render: () => <WorksheetGrid cols={cols} rows={rows} /> },
    { key: 'artifact', label: 'Artifact', render: () => <div className="dps__artifact">{children}</div> },
    { key: 'control', label: 'Control', render: () => <ToolControlFace source={source} /> },
    { key: 'context', label: 'Context', render: () => <ToolContextFace what={context.what} why={context.why} /> },
  ];
  return <DPShell name={name} author={author} faces={faces} initial={initial || 'data'} />;
}

// Mobile drawer wrapper for the .mdl canvas pane. On ≤1024px the CSS turns
// .mdl__canvas into a right-side sheet; on desktop the head/scrim are hidden.
function MdlCanvas({ title, open, onClose, className, ariaLabel, children }) {
  return (
    <React.Fragment>
      <div className={`mdl__scrim ${open ? 'is-open' : ''}`} onClick={onClose} aria-hidden="true" />
      <section
        className={`mdl__canvas ${open ? 'is-open' : ''}${className ? ' ' + className : ''}`}
        role="tabpanel"
        aria-label={ariaLabel || title}>
        <div className="mdl__drawer-head">
          <div className="mdl__drawer-title">{title}</div>
          <button type="button" className="mdl__drawer-close" aria-label="Close" onClick={onClose}>×</button>
        </div>
        {children}
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { ToolDP, DPShell, WorksheetGrid, ToolControlFace, ToolContextFace, MdlCanvas, CAL_COLS, CAL_ROWS, LISTS_COLS, toolListsRows });