import { AdminShell } from '../../components/admin/admin-page.jsx';
import { KeyRound, ShieldCheck, ScrollText, Gauge } from 'lucide-react';

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

export default function SettingsToolsPage() {
  return (
    <AdminShell
      kicker="Settings"
      title="Tools & secrets"
      description="Read-only summary of installed tools, encrypted secrets, allowlists, and rate-limit activity. Deep views live in the marketplace and dedicated admin surfaces."
      hideProjectSwitcher
    >
      <div className="mkt-page" data-page="settings-tools">
        <section className="mkt-stats">
          <div className="mkt-stat"><b>—</b><span>Tools installed</span></div>
          <div className="mkt-stat"><b>—</b><span>Secrets</span></div>
          <div className="mkt-stat"><b>—</b><span>Allowlist entries</span></div>
          <div className="mkt-stat"><b>—</b><span>Rate-limit events</span></div>
        </section>
        <section className="mkt-section">
          <ul className="mkt-grid">
            <li className="mkt-card">
              <div className="mkt-card-head">
                <span className="mkt-chip-tile" aria-hidden="true">
                  <KeyRound size={18} strokeWidth={1.75} />
                </span>
              </div>
              <div className="mkt-card-body">
                <h3 className="mkt-card-title">Tool marketplace</h3>
                <p className="mkt-card-desc">Browse and install tools, skills, and bundles. Manage installation state from the marketplace surface.</p>
              </div>
              <div className="mkt-card-foot">
                <span className="mkt-availability installed">open</span>
                <a href="/marketplace?kind=tool" className="admin-button secondary">Open</a>
              </div>
            </li>
            <li className="mkt-card">
              <div className="mkt-card-head">
                <span className="mkt-chip-tile" aria-hidden="true">
                  <ShieldCheck size={18} strokeWidth={1.75} />
                </span>
              </div>
              <div className="mkt-card-body">
                <h3 className="mkt-card-title">Secrets vault</h3>
                <p className="mkt-card-desc">Encrypted credentials resolved per agent / project / global. Detailed inspection lands in a future phase.</p>
              </div>
              <div className="mkt-card-foot">
                <span className="mkt-availability">coming soon</span>
              </div>
            </li>
            <li className="mkt-card">
              <div className="mkt-card-head">
                <span className="mkt-chip-tile" aria-hidden="true">
                  <ScrollText size={18} strokeWidth={1.75} />
                </span>
              </div>
              <div className="mkt-card-body">
                <h3 className="mkt-card-title">Tool allowlists</h3>
                <p className="mkt-card-desc">Per-tool destination allowlists. Default-deny for most write tools.</p>
              </div>
              <div className="mkt-card-foot">
                <span className="mkt-availability">coming soon</span>
              </div>
            </li>
            <li className="mkt-card">
              <div className="mkt-card-head">
                <span className="mkt-chip-tile" aria-hidden="true">
                  <Gauge size={18} strokeWidth={1.75} />
                </span>
              </div>
              <div className="mkt-card-body">
                <h3 className="mkt-card-title">Rate-limit events</h3>
                <p className="mkt-card-desc">Sliding-window quota events per tool. View raw counts in audit.</p>
              </div>
              <div className="mkt-card-foot">
                <span className="mkt-availability installed">open</span>
                <a href="/audit" className="admin-button secondary">Open audit</a>
              </div>
            </li>
          </ul>
        </section>
      </div>
    </AdminShell>
  );
}
