/* maydays — Library wrapper + Tools hub
   (Rapids lives in rapids.jsx) */
const { useState: _xus, useMemo: _xum, useEffect: _xue } = React;

/* ============================================================
   LIBRARY HUB — wraps Step 2 CK / Bugs / Drugs / Progress
   ============================================================ */
function LibraryHub({ data, route, onNavigate }) {
  // pick the active sub-tab from the route (default step2)
  const activeTab =
    route.name === 'progress' ? 'progress' :
    route.stepId === 'bugs'   ? 'bugs' :
    route.stepId === 'drugs'  ? 'drugs' :
                                'step2';

  const tabs = [
    { id: 'step2',    label: 'Step 2 CK', go: () => onNavigate({ name: 'step', stepId: 'step2' }) },
    { id: 'bugs',     label: 'Bugs',      go: () => onNavigate({ name: 'step', stepId: 'bugs' })  },
    { id: 'drugs',    label: 'Drugs',     go: () => onNavigate({ name: 'step', stepId: 'drugs' }) },
    { id: 'progress', label: 'Progress',  go: () => onNavigate({ name: 'progress' }) },
  ];

  const stepMap = { step2: data.STEP2, bugs: data.BUGS, drugs: data.DRUGS };

  return (
    <div className="fade">
      <div className="library-bar">
        <div className="library-bar-inner">
          <div className="library-bar-title">
            <span className="eyebrow">{ORN.sprig} library</span>
            <span className="serif" style={{ fontSize: 22 }}>Step 2, Bugs, Drugs, Progress</span>
          </div>
          <div className="library-tabs">
            {tabs.map(t => (
              <button key={t.id}
                      className={`library-tab ${activeTab === t.id ? 'active' : ''}`}
                      onClick={t.go}>
                {t.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div style={{ paddingTop: 18 }}>
        {activeTab === 'progress'
          ? <ProgressDashboard onNavigate={onNavigate} data={data} hideCrumbs />
          : <StepHub step={stepMap[activeTab]} onNavigate={onNavigate} hideCrumbs />}
      </div>
    </div>
  );
}

/* ============================================================
   TOOLS HUB
   ============================================================ */
function ToolsHub({ data, onNavigate }) {
  return (
    <div className="fade">
      <Crumbs items={[{ label: 'Home', to: { name: 'home' } }, { label: 'Tools' }]} onNavigate={onNavigate} />

      <div className="row" style={{ justifyContent:'space-between', alignItems:'flex-end', gap: 24, marginBottom: 24 }}>
        <div>
          <div className="eyebrow">{ORN.sprig} tools</div>
          <h1 style={{ marginTop: 8 }}>The workshop.</h1>
          <p className="ink-soft" style={{ fontSize: 17, marginTop: 10, maxWidth: 640 }}>
            Small programs to help with med-school logistics. Trackers, planners, templates,
            cheat sheets. Drop your tools here as you import them.
          </p>
        </div>
        <button className="btn ghost" onClick={() => alert('Import flow lives here once a tool is ready to drop in.')}>
          + Import a tool
        </button>
      </div>

      <div className="grid-3">
        {data.TOOLS_LIST.map(tool => (
          <div key={tool.id} className="card tool-card">
            <div className="tool-thumb">
              <BotanicalFrame label={`${tool.title.toLowerCase()} · preview`} height={140} />
            </div>
            <div className="tool-body">
              <div className="row" style={{ justifyContent:'space-between', alignItems:'center' }}>
                <span className="eyebrow">{tool.tag || 'TOOL'}</span>
                {tool.status === 'placeholder' && <span className="rdx-badge notdone">○ Coming soon</span>}
              </div>
              <div className="serif" style={{ fontSize: 22, marginTop: 6 }}>{tool.title}</div>
              <p className="ink-soft" style={{ fontSize: 13.5, marginTop: 6, color: 'var(--muted)' }}>{tool.desc}</p>
              <div className="row" style={{ marginTop: 16, gap: 8 }}>
                <button className="btn sm" disabled style={{ opacity: 0.55, cursor:'not-allowed' }}>Open</button>
                <button className="btn ghost sm">About</button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <BranchDivider />

      <div className="card" style={{ padding: 24, textAlign:'center' }}>
        <div className="eyebrow">{ORN.sprig} ready to drop one in?</div>
        <h3 style={{ marginTop: 8 }}>Bring your med-school tools home.</h3>
        <p className="ink-soft" style={{ maxWidth: 520, margin: '8px auto 0', color: 'var(--muted)' }}>
          Anything you have built (rotation tracker, study planner, dosing calculator) can live here.
          Each tool becomes a card with its own page.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { LibraryHub, ToolsHub });