/* ============================================================
   Projects tile — a Collection (Diligence, Contracts) is a project
   whose data products are grouped into SECTIONS via the accordion
   side menu (same rail as Model/Slides). Right pane = the selected
   DP as a card. These DPs are "empty" placeholders: the status is
   editable and the body prompts "Click to add content".
   ============================================================ */
// Eyebrow = the canonical unique DP id (window.dpId), NOT a section-coded
// prefix — so a diligence "financial" request can't collide with a finance
// hub artifact, and Claude can reference any DP unambiguously.

function CollectionsPanel() {
  var dil = (window.DILIGENCE || { sections: [] }).sections || [];
  var COLLECTIONS = {
    diligence: {
      label: 'Diligence', count: (window.DILIGENCE && window.DILIGENCE.stats && window.DILIGENCE.stats.items) || 85,
      sections: dil.map(function (s) {
        return { id: s.key, name: s.name, items: (s.items || []).map(function (it) {
          var dkey = 'dil_' + s.key + '_' + it.n;
          return { key: dkey, num: window.dpId(dkey), name: it.request, section: s.name, status: it.status || 'Requested' };
        }) };
      }),
    },
    contracts: {
      label: 'Contracts', count: 2,
      sections: [{ id: 'contracts', name: 'Contracts', items: [
        { key: 'con_register', num: window.dpId('con_register'), name: 'Tabular Review', section: 'Contracts', status: 'Published' },
        { key: 'con_expiry', num: window.dpId('con_expiry'), name: 'Contract Expiration Schedule', section: 'Contracts', status: 'Published' },
      ] }],
    },
  };
  var ORDER = ['diligence', 'contracts'];

  var C = { ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)', line: 'var(--border-subtle, rgba(38,24,17,0.10))' };
  var _c = React.useState('diligence'); var coll = _c[0], setColl = _c[1];
  var active = COLLECTIONS[coll];
  var _sel = React.useState(active.sections[0] && active.sections[0].id); var selSec = _sel[0], setSelSec = _sel[1];
  var _st = React.useState({}); var statuses = _st[0], setStatuses = _st[1];      // {itemKey: status}
  var _canvas = React.useState(false); var canvasOpen = _canvas[0], setCanvasOpen = _canvas[1];

  React.useEffect(function () { setSelSec(active.sections[0] && active.sections[0].id); }, [coll]);

  // Register a drawer record for each item into the CX_DASH `recordContent`
  // registry, so clicking a card opens the SAME drawer as the finance cards
  // (empty/compose state for these placeholder requests).
  React.useEffect(function () {
    var recs = {};
    active.sections.forEach(function (sec) {
      sec.items.forEach(function (it) {
        var title = String(it.name).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        recs[it.key] = {
          crumb: it.name,
          html: '<div class="drawer-title-row"><div>' +
            '<div class="drawer-title-eyebrow">' + active.label + ' · ' + sec.name + '</div>' +
            '<h1>' + title + '</h1></div></div>' +
            '<div style="padding:52px 8px;text-align:center;border:1px dashed #E7E1DF;border-radius:12px;margin-top:8px;">' +
            '<div style="font-size:14px;font-weight:600;color:#171412;">This request is empty</div>' +
            '<div style="font-size:13px;line-height:1.6;color:#A09792;margin-top:6px;max-width:420px;margin-left:auto;margin-right:auto;">' +
            'Add content — upload the requested document, or ask Claude to draft it from the model. Once it has content, it becomes a data product like the rest.</div></div>',
        };
      });
    });
    try {
      var sc = document.createElement('script');
      sc.textContent = 'try{ if(typeof recordContent!=="undefined") Object.assign(recordContent, ' + JSON.stringify(recs) + '); }catch(e){}';
      document.body.appendChild(sc);
      document.body.removeChild(sc);
    } catch (e) { /* no-op */ }
  }, [coll]);

  var section = active.sections.find(function (s) { return s.id === selSec; }) || active.sections[0];
  var statusOf = function (it) { return statuses[it.key] || it.status; };
  var setStatus = function (key, s) { setStatuses(function (m) { var n = Object.assign({}, m); n[key] = s; return n; }); };

  function Chip(key) {
    var c = COLLECTIONS[key];
    var on = key === coll;
    return (
      <button key={key} type="button" onClick={function () { setColl(key); }}
        style={{ display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontFamily: 'inherit',
          fontSize: 13, fontWeight: 500, padding: '7px 14px', borderRadius: 999,
          border: '1px solid ' + (on ? 'transparent' : C.line), background: on ? C.ink : 'transparent', color: on ? '#FFFCFA' : C.base }}>
        <span style={{ display: 'inline-flex', width: 14, height: 14 }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" />
          </svg>
        </span>
        {c.label}
        <span style={{ color: on ? 'rgba(255,252,250,0.7)' : C.muted, fontWeight: 500 }}>{c.count}</span>
      </button>
    );
  }

  return (
    <div className="mdl">
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{ORDER.map(Chip)}</div>
      <div className="mdl__body">
        <aside className="mdl__menu" role="tablist" aria-label="Sections">
          {active.sections.map(function (sec) {
            return (
              <div key={sec.id} className="mdl__sec mdl__sec--file">
                <button type="button" role="tab" aria-selected={sec.id === selSec}
                  className={'mdl__filechip mdl__filechip--lone ' + (sec.id === selSec ? 'is-active' : '')}
                  onClick={function () { setSelSec(sec.id); setCanvasOpen(true); }}>
                  <span className="mdl__filechip-name" title={sec.name}>{sec.name}</span>
                  <span style={{ flex: 'none', fontSize: 11.5, color: C.muted, fontVariantNumeric: 'tabular-nums' }}>{sec.items.length}</span>
                </button>
              </div>
            );
          })}
        </aside>
        <window.MdlCanvas
          title={section && section.name}
          open={canvasOpen}
          onClose={function () { setCanvasOpen(false); }}
          ariaLabel={section && section.name}
          className="mdl__canvas--flat">
          <div className="hubx"><div className="card-grid">
            {section && section.items.map(function (it) {
              var itm = Object.assign({}, it, { status: statusOf(it) });
              return <window.DPCard key={it.key} item={itm}
                onClick={function () { if (window.openDrawer) window.openDrawer(it.key); }}
                onStatus={function (s) { setStatus(it.key, s); }} />;
            })}
          </div></div>
        </window.MdlCanvas>
      </div>
    </div>
  );
}
window.CollectionsPanel = CollectionsPanel;