import { AdminShell } from '../../components/admin/admin-page.jsx';
import { listAgentEngines } from '@/lib/agent-engines.js';
import { EnginePingButton } from '@/app/components/engine-ping-button.jsx';
import { Cpu } from 'lucide-react';

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

export default async function SettingsEnginesPage() {
  const engines = await listAgentEngines();

  return (
    <AdminShell
      kicker="Settings"
      title="Engines"
      description={`Per-agent runtime choices for Anthropic API, Claude Code CLI, Ollama local LLMs, Hermes, and Codex. ${engines.filter(e => e.available).length} of ${engines.length} available.`}
      hideProjectSwitcher
    >
      <div className="mkt-page" data-page="settings-engines">
        <section className="mkt-stats">
          <div className="mkt-stat">
            <b>{engines.length}</b>
            <span>ENGINES</span>
          </div>
          <div className="mkt-stat">
            <b>{engines.filter(e => e.available).length}</b>
            <span>AVAILABLE</span>
          </div>
          <div className="mkt-stat">
            <b>{engines.filter(e => ['claude-code', 'codex', 'ollama'].includes(e.id)).length}</b>
            <span>LOCAL</span>
          </div>
          <div className="mkt-stat">
            <b>{engines.filter(e => ['anthropic', 'hermes'].includes(e.id)).length}</b>
            <span>CLOUD</span>
          </div>
        </section>

        <section className="mkt-section">
          <ul className="mkt-grid">
            {engines.map(engine => (
              <li key={engine.id} className="mkt-card">
                <div className="mkt-card-head">
                  <span className="mkt-chip-tile" aria-hidden="true">
                    <Cpu size={18} strokeWidth={1.75} />
                  </span>
                  <span style={{ fontFamily: "'IBM Plex Mono','SF Mono',ui-monospace,monospace", fontSize: 11, letterSpacing: '.04em', color: '#8a8f99' }}>
                    {engine.id}
                  </span>
                </div>
                <div className="mkt-card-body">
                  <h3 className="mkt-card-title">{engine.label}</h3>
                  <p className="mkt-card-desc">{engine.description}</p>
                </div>
                <div className="mkt-card-meta">
                  <span>Models <b>{engine.models.length}</b></span>
                  <span>Mode <b>{['claude-code', 'codex', 'ollama'].includes(engine.id) ? 'local' : 'cloud'}</b></span>
                  {engine.models[0]?.name ? <span>Default <b>{engine.models[0].name}</b></span> : null}
                </div>
                <div className="mkt-card-foot">
                  <span className={`mkt-availability ${engine.available ? 'installed' : 'warn'}`}>
                    {engine.available ? 'available' : 'not detected'}
                  </span>
                  {engine.available && ['claude-code', 'codex', 'ollama'].includes(engine.id) ? (
                    <EnginePingButton engineId={engine.id} model={engine.models[0]?.name} />
                  ) : null}
                </div>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </AdminShell>
  );
}
