/* ============================================================
   Diligence hub — a Project/Diligence template, created from a DDQ.
   PHASE 1: the checklist becomes a collection of EMPTY data products —
   one card per request, grouped by the workbook's sections. Each is a
   placeholder to be filled by a human, drafted by AI from the model,
   or marked N/A. Filling one is how information gets INTO the model.
   Content: window.DILIGENCE (tabs/diligence_content.js).
   ============================================================ */
/* Artifacts page — the SAME stacked-card framework as Finance/Contracts
   (CX_DASH: card → openDrawer → drawer). The only difference is the
   collection is grouped into the DDQ's sections. Content: window.DIL_DASH. */
function DiligenceDashboard() {
  const D = window.DIL_DASH || { sections: [], cardsBySection: {}, statHtml: '' };
  const [sel, setSel] = React.useState((D.sections[0] && D.sections[0].key) || 'all');
  const hostRef = React.useRef(null);

  // Boot the CX framework + register the pack once (records are global).
  React.useEffect(() => {
    if (window.ensureFinCxGlobal && window.ensureFinCxGlobal() && window.registerCxPack) {
      window.registerCxPack(D);
    }
    return () => {
      try { if (window.closeFull) window.closeFull(); } catch (e) {}
      try { if (window.closeDrawer) window.closeDrawer(); } catch (e) {}
      document.body.style.overflow = '';
    };
  }, []);

  // Re-render just the selected section's cards into the host on change.
  React.useEffect(() => {
    const host = hostRef.current;
    if (!host) return;
    host.innerHTML =
      '<div class="cx-root fin-cx" data-screen-label="Diligence">' +
      '<div class="card-grid">' + (D.cardsBySection[sel] || '') + '</div></div>';
  }, [sel]);

  const C = { ink: 'var(--fg-dark)', muted: 'var(--fg-muted)', line: 'var(--border-subtle, rgba(38,24,17,0.10))', panel: 'var(--bg-panel)' };
  const total = (D.sections || []).reduce((a, s) => a + s.count, 0);
  const MENU = [{ key: 'all', name: 'All requests', count: total }].concat(D.sections || []);

  const MenuItem = (m) => {
    const active = m.key === sel;
    return (
      <button key={m.key} type="button" onClick={() => setSel(m.key)}
        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, width: '100%',
          textAlign: 'left', border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12.5,
          padding: '7px 10px', borderRadius: 7, marginBottom: 2,
          background: active ? '#1F3B2C' : 'transparent', color: active ? '#FFFCFA' : '#4A4642',
          fontWeight: active ? 500 : 400 }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name}</span>
        <span style={{ color: active ? 'rgba(255,252,250,0.7)' : '#A09792', fontWeight: 500 }}>{m.count}</span>
      </button>
    );
  };

  return (
    <div style={{ padding: '2px 2px 40px' }}>
      {/* Context — what this hub is and what it will do */}
      <div style={{ border: `1px solid ${C.line}`, borderLeft: `3px solid ${C.green}`, borderRadius: 12,
        background: 'var(--bg-app)', padding: '16px 20px', marginBottom: 14 }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: C.green }}>About this hub</div>
        <div style={{ fontSize: 15, fontWeight: 600, color: C.ink, margin: '4px 0 8px' }}>A data room that builds the model.</div>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: C.base, margin: '0 0 8px' }}>
          Created from a Pre-LOI diligence request list (DDQ). Claude turned each of the {total || '85'} requests into a
          tracked <strong>data product</strong>, grouped by the checklist&rsquo;s sections. Each one starts empty.
        </p>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: C.muted, margin: 0 }}>
          You resolve a request three ways — <strong>provide a document</strong>, let Claude <strong>draft it from the model</strong>,
          or <strong>mark it N/A</strong>. Where the answer already lives in the encoded org (Finance, Contracts…) it links
          straight to the source; where it doesn&rsquo;t, the gap is your build list. Every answer is encoded into the model —
          so the room stays current and useful <em>after</em> the deal, not a pile of static files.
        </p>
      </div>

      <div dangerouslySetInnerHTML={{ __html: D.statHtml }} />
      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
        <aside style={{ flex: '0 0 190px', border: `1px solid ${C.line}`, borderRadius: 12, padding: 8, background: '#FCFAF8', position: 'sticky', top: 8 }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.muted, padding: '4px 10px 6px' }}>Sections</div>
          {MENU.map(MenuItem)}
        </aside>
        <div style={{ flex: 1, minWidth: 0 }} ref={hostRef} />
      </div>
    </div>
  );
}
window.DiligenceDashboard = DiligenceDashboard;

/* ── Empty-state onboarding: upload a DDQ → build the collection ──
   Full-screen Proxa surface shown while the created hub's flow.template
   is 'diligence' and step !== 'built'. On finish, calls onAdvance('built'). */
function DiligenceOnboard({ onAdvance }) {
  const [phase, setPhase] = React.useState('drop'); // drop | uploaded | processing
  const timers = React.useRef([]);
  React.useEffect(() => () => timers.current.forEach(clearTimeout), []);

  const build = () => {
    setPhase('processing');
    timers.current.push(setTimeout(() => { if (onAdvance) onAdvance('built'); }, 2200));
  };

  const PROXA = 'var(--accent-purple-ai, #724C9E)';
  const C = { ink: 'var(--fg-dark)', muted: 'var(--fg-muted)', line: 'var(--border-subtle, rgba(38,24,17,0.10))' };
  const items = ((window.DILIGENCE || { stats: {} }).stats.items) || 85;

  return (
    <main className="main" data-screen-label="New hub — Diligence">
      <div style={{ maxWidth: 640, margin: '48px auto 0', padding: '0 24px', textAlign: 'center' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: PROXA }}>New hub · Proxa</div>
        <h1 style={{ fontSize: 30, fontWeight: 600, color: C.ink, letterSpacing: '-0.02em', margin: '10px 0 8px' }}>Diligence</h1>
        <p style={{ fontSize: 15, lineHeight: 1.6, color: C.muted, margin: '0 0 28px' }}>
          Upload a diligence request list (DDQ) and Claude turns each item into a data product to track and answer —
          from your model where it can, from your team where it can&rsquo;t.
        </p>

        {phase === 'drop' && (
          <div>
            <div role="button" tabIndex={0} onClick={() => setPhase('uploaded')}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setPhase('uploaded'); }}
              style={{ border: '1.5px dashed #C9C2BF', borderRadius: 14, padding: '34px 20px', cursor: 'pointer', background: 'var(--bg-app)' }}>
              <div style={{ margin: '0 auto 10px', width: 40, height: 40, display: 'grid', placeItems: 'center', color: C.muted }}>
                <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></svg>
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: C.ink }}>Drop a DDQ here, or click to upload</div>
              <div style={{ fontSize: 12.5, color: C.muted, marginTop: 3 }}>Excel checklist — sections &amp; requests</div>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-light-muted,#A09792)', marginTop: 14 }}>
              or <span style={{ textDecoration: 'underline', cursor: 'default' }}>create from scratch</span>
            </div>
          </div>
        )}

        {phase !== 'drop' && (
          <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, padding: '16px 18px', background: 'var(--bg-app)', textAlign: 'left' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke={PROXA} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 10h18M3 15h18M9 4v16M15 4v16" /></svg>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: C.ink }}>NaturalFoods_PreLOI_Diligence_Checklist.xlsx</div>
                <div style={{ fontSize: 12, color: C.muted }}>{items} requests · 8 sections · Ready</div>
              </div>
              <span style={{ color: 'var(--accent-green)' }}>
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" strokeOpacity="0.3" /><polyline points="8.5 12 11 14.5 15.5 9.5" /></svg>
              </span>
            </div>
          </div>
        )}

        {phase === 'uploaded' && (
          <button onClick={build} style={{ marginTop: 18, background: C.ink, color: '#FFFCFA', border: 'none',
            borderRadius: 10, padding: '11px 20px', fontSize: 14, fontWeight: 500, cursor: 'pointer' }}>
            Build {items} data products
          </button>
        )}

        {phase === 'processing' && (
          <div style={{ marginTop: 20, fontSize: 13.5, color: C.muted, display: 'inline-flex', alignItems: 'center', gap: 9 }}>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke={PROXA} strokeWidth="2" strokeLinecap="round" style={{ animation: 'dilspin 0.9s linear infinite' }}><circle cx="12" cy="12" r="9" strokeOpacity="0.25" /><path d="M21 12a9 9 0 0 0-9-9" /></svg>
            Reading 8 sections · creating {items} data products…
            <style>{'@keyframes dilspin{to{transform:rotate(360deg)}}'}</style>
          </div>
        )}
      </div>
    </main>
  );
}
window.DiligenceOnboard = DiligenceOnboard;