import {
  Compass,
  Building2,
  Brush,
  Activity,
  HardDrive,
  Target,
  Clock,
  FileText,
  Search,
  HelpCircle,
} from 'lucide-react';
import { AdminShell } from '../../components/admin/admin-page.jsx';

export const runtime = 'nodejs';
export const dynamic = 'force-dynamic';

const WORKSPACE_CARDS = [
  {
    href: '/settings/onboarding',
    icon: Compass,
    name: 'Getting started',
    desc: 'Initial setup checklist for connecting engines, seeding agents, and verifying the runtime.',
  },
  {
    href: '/settings/organization',
    icon: Building2,
    name: 'Agent chart',
    desc: 'Roles, hierarchy, and manager assignments for the agents on your team.',
  },
  {
    href: '/settings/brand',
    icon: Brush,
    name: 'Brand templates',
    desc: 'Voice, palette, and template assets agents use when producing artifacts.',
  },
  {
    href: '/settings/runtime',
    icon: Activity,
    name: 'Runtime diagnostics',
    desc: 'Raw SQLite counts and runtime state. Useful when investigating sync or worker issues.',
  },
];

const ADVANCED_CARDS = [
  {
    href: '/disk',
    icon: HardDrive,
    name: 'Disk',
    desc: 'Per-project files and artifacts on local disk. Local-only flags and content boundaries enforced here.',
  },
  {
    href: '/missions',
    icon: Target,
    name: 'Missions',
    desc: 'Cross-agent objectives and project missions. Will move under Projects in a later phase.',
  },
  {
    href: '/schedules',
    icon: Clock,
    name: 'Schedules',
    desc: 'All cron schedules across agents. Per-agent schedules also live on each agent detail page.',
  },
  {
    href: '/reports',
    icon: FileText,
    name: 'Reports',
    desc: 'Generated reports archive. Eventually merges into Disk as a kind filter.',
  },
  {
    href: '/audit',
    icon: Search,
    name: 'Audit log',
    desc: 'Append-only compliance trail. Every approval, tool call, schedule, and trust-mode flip is recorded.',
  },
  {
    href: '/activity',
    icon: Activity,
    name: 'Activity stream',
    desc: 'Live SSE feed of agent ticks, tool calls, and sub-agent runs across all engines.',
  },
  {
    href: '/help',
    icon: HelpCircle,
    name: 'Help & shortcuts',
    desc: 'Keyboard shortcuts, support links, and operator notes.',
  },
];

function NavCard({ href, icon: Icon, name, desc }) {
  return (
    <a href={href} className="mkt-card">
      <div className="mkt-card-head">
        <span className="mkt-chip-tile" aria-hidden="true">
          <Icon size={18} strokeWidth={1.75} />
        </span>
      </div>
      <div className="mkt-card-body">
        <h3 className="mkt-card-title">{name}</h3>
        <p className="mkt-card-desc">{desc}</p>
      </div>
      <div className="mkt-card-foot">
        <span className="mkt-availability installed">open</span>
        <span className="mkt-card-arrow" aria-hidden="true">›</span>
      </div>
    </a>
  );
}

export default function SettingsAdvancedPage() {
  return (
    <AdminShell
      kicker="Settings"
      title="Advanced"
      description="Power-user surfaces and one-time workspace configuration. Demoted from the main sidebar — reach them here when you need them."
      hideProjectSwitcher
    >
      <div className="mkt-page" data-page="settings-advanced">
        <section className="mkt-section">
          <h2 className="mkt-stat-hdr">Workspace setup</h2>
          <div className="mkt-grid">
            {WORKSPACE_CARDS.map((card) => (
              <NavCard key={card.href} {...card} />
            ))}
          </div>
        </section>

        <section className="mkt-section">
          <h2 className="mkt-stat-hdr">Advanced &amp; diagnostics</h2>
          <div className="mkt-grid">
            {ADVANCED_CARDS.map((card) => (
              <NavCard key={card.href} {...card} />
            ))}
          </div>
        </section>
      </div>
    </AdminShell>
  );
}
