import { AdminShell } from '../../components/admin/admin-page.jsx';
import { getToolMarketplace } from '@/lib/tools/registry.js';
import { CORE_TOOLS } from '@/lib/orchestrator-tools.js';
import { Plug } from 'lucide-react';

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

function prettifyConnectorType(s) {
  return s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}

export default function SettingsConnectorsPage() {
  const marketplace = getToolMarketplace(CORE_TOOLS);
  const ready = marketplace.connectors.filter(connector => connector.status === 'ready').length;

  return (
    <AdminShell
      kicker="Settings"
      title="Connectors"
      description={`Credential readiness for marketplace tools. ${ready} of ${marketplace.connectors.length} ready. Missing entries show names only — never values.`}
      hideProjectSwitcher
    >
      <div className="mkt-page" data-page="settings-connectors">
        <section className="mkt-stats">
          <div className="mkt-stat">
            <b>{marketplace.connectors.length}</b>
            <span>CONNECTORS</span>
          </div>
          <div className="mkt-stat">
            <b>{ready}</b>
            <span>READY</span>
          </div>
          <div className="mkt-stat">
            <b>{marketplace.connectors.length - ready}</b>
            <span>MISSING</span>
          </div>
          <div className="mkt-stat">
            <b>{new Set(marketplace.connectors.map(c => c.category || c.type.split('_')[0])).size}</b>
            <span>CATEGORIES</span>
          </div>
        </section>

        <section className="mkt-section">
          <ul className="mkt-grid">
            {marketplace.connectors.map(connector => (
              <li key={connector.type} className="mkt-card">
                <div className="mkt-card-head">
                  <span className="mkt-chip-tile" aria-hidden="true">
                    <Plug size={18} strokeWidth={1.75} />
                  </span>
                  <span style={{ fontFamily: "'IBM Plex Mono','SF Mono',ui-monospace,monospace", fontSize: 11, letterSpacing: '.04em', color: '#8a8f99' }}>
                    {connector.type}
                  </span>
                </div>
                <div className="mkt-card-body">
                  <h3 className="mkt-card-title">{prettifyConnectorType(connector.type)}</h3>
                  <p className="mkt-card-desc">
                    {connector.missing_env?.length
                      ? `Missing env names: ${connector.missing_env.join(', ')}`
                      : 'Ready for governed runtime use.'}
                  </p>
                </div>
                <div className="mkt-card-meta">
                  {connector.missing_env?.length
                    ? <span>Missing env <b>{connector.missing_env.length}</b></span>
                    : <span>Ready <b>yes</b></span>}
                  {connector.category ? <span>Category <b>{connector.category}</b></span> : null}
                </div>
                <div className="mkt-card-foot">
                  <span className={`mkt-availability ${connector.status === 'ready' ? 'installed' : 'warn'}`}>
                    {connector.status}
                  </span>
                </div>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </AdminShell>
  );
}
