import { AdminShell } from '@/app/components/admin/admin-page.jsx';
import { HELP_ARTICLE_META, helpCategories } from '@/lib/help/registry.js';
import HelpBrowser from './help-browser.jsx';

export const dynamic = 'force-dynamic';

// Route map kept as a "Navigation" reference below the article browser.
const PRIMARY_NAV = [
  ['Overview',    '/',            'Main dashboard with the Main Agent composer, live runtime panels, and the artifact canvas.'],
  ['Projects',    '/projects',    'Top-level project scope. Create projects, set color/status, pick the active project.'],
  ['Agents',      '/agents',      'Manage installed workers, view tool permissions, edit skills, inspect per-agent memory.'],
  ['Tasks',       '/tasks',       'Durable task queue with comments, owners, run state, and delegation timelines.'],
  ['Approvals',   '/approvals',   'Approve or deny pending human-in-the-loop requests with full payload and risk context.'],
  ['Disk',        '/disk',        'Project-scoped file store with transcript metadata and local-only content boundaries.'],
  ['Missions',    '/missions',    'Mission templates and runs that queue project-aware heartbeat work.'],
  ['Audit',       '/audit',       'Search the durable audit log of actions, approvals, tool calls, and trust-mode flips.'],
  ['Schedules',   '/schedules',   'Upsert cron-style schedules, enable/pause them, and process heartbeat work manually.'],
  ['Activity',    '/activity',    'Live activity feed across agent runs, tool calls, and sub-agent events.'],
  ['Reports',     '/reports',     'Browse generated runs, artifacts, and report files with previews and download links.'],
  ['Marketplace', '/marketplace', 'Unified catalog of tools, skills, and bundles. Install, toggle, inspect risk tiers.'],
  ['Settings',    '/settings',    'Global system config: trust mode, default model, tool toggles, secrets management.'],
  ['Runtime',     '/runtime',     'Raw diagnostics view of the SQLite state snapshot, egress log, and heartbeat queue.'],
];

// Key guides for operating Madarx OS. Surfaced as durable links so the help
// page always identifies the product and points at the operator essentials.
const GUIDES = [
  ['Operator guide',  '/runtime',      'Operate Madarx OS day to day: runtime diagnostics, the heartbeat queue, and the egress log.'],
  ['Architecture',    '/architecture', 'How Madarx OS fits together — runtime, daemons, tools, and the process engine.'],
  ['Human-in-loop',   '/approvals',    'Review and approve human-in-loop requests before risky or irreversible actions run.'],
];

export default function HelpPage() {
  return (
    <AdminShell
      kicker="Help"
      title="Help Center"
      description="Search the Madarx OS docs, or press ⌘K anywhere to jump straight to a page, a setting, or a guide."
      hideProjectSwitcher
    >
      <HelpBrowser articles={HELP_ARTICLE_META} categories={helpCategories()} />

      <section className="admin-panel">
        <div className="admin-panel-head"><span>Guides</span><small>Operating Madarx OS.</small></div>
        <div className="admin-guide-grid">
          {GUIDES.map(([name, href, text]) => (
            <a className="admin-mini-card link" href={href} key={href}><b>{name}</b><p>{text}</p></a>
          ))}
        </div>
      </section>

      <section className="admin-panel">
        <div className="admin-panel-head"><span>Navigation</span><small>Jump to any surface.</small></div>
        <div className="admin-guide-grid">
          {PRIMARY_NAV.map(([name, href, text]) => (
            <a className="admin-mini-card link" href={href} key={href}><b>{name}</b><p>{text}</p></a>
          ))}
        </div>
      </section>
    </AdminShell>
  );
}
