import type { ProviderIntegrationDto } from '@navi/types';
import { AccessDenied } from '../../../components/AccessDenied';
import { EmptyState, Notice, PageHeader, StatusBadge } from '../../../components/DashboardPrimitives';
import { dashboardApi } from '../../../lib/api';
import { requireDashboardRoute } from '../../../lib/permissions';

export default async function ThirdPartyApiSettings() {
  const gate = await requireDashboardRoute('/third-party-api-settings');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;

  const integrations = (await dashboardApi<ProviderIntegrationDto[]>('/provider-control/provider-integrations')) ?? [];

  return (
    <div className="stack">
      <PageHeader title="Third-party API settings" eyebrow="Control Tower" />
      <Notice tone="info" title="No raw secrets" body="This view intentionally shows URLs and vault reference names only. Raw API keys stay in the selected vault." />
      <Notice tone="info" title="Environment separation" body="Demo, sandbox, and production integrations are configured separately so demo providers cannot become production providers by accident." />
      <div className="card">
        {integrations.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead><tr><th>Provider</th><th>Category</th><th>Environment</th><th>API base URL</th><th>Webhook URL</th><th>Vault ref</th><th>Readiness</th><th>Warnings</th></tr></thead>
              <tbody>
                {integrations.map((provider) => (
                  <tr key={provider.id}>
                    <td><strong>{provider.name}</strong></td>
                    <td><StatusBadge value={provider.categoryKind} /></td>
                    <td><StatusBadge value={provider.environment} /></td>
                    <td className="mono">{provider.apiBaseUrl ?? 'Not configured'}</td>
                    <td className="mono">{provider.webhookUrl ?? 'Not configured'}</td>
                    <td className="mono">{provider.vaultSecretRef ?? 'Not configured'}</td>
                    <td>
                      <div className="button-row">
                        <StatusBadge value={provider.inquiryOnly ? 'INQUIRY_ONLY' : 'BOOKABLE'} />
                        <StatusBadge value={provider.sandboxReady ? 'SANDBOX_READY' : 'SANDBOX_NOT_READY'} />
                        <StatusBadge value={provider.liveReady ? 'LIVE_READY' : 'LIVE_NOT_READY'} />
                      </div>
                    </td>
                    <td>
                      <div className="button-row">
                        {provider.safetyWarnings.filter((warning) => warning.level === 'BLOCKER').length ? (
                          provider.safetyWarnings.filter((warning) => warning.level === 'BLOCKER').map((warning) => (
                            <StatusBadge key={warning.code} value={`BLOCKER_${warning.label}`.toUpperCase().replace(/\s/g, '_')} />
                          ))
                        ) : (
                          <StatusBadge value="NO_BLOCKERS" />
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No third-party APIs configured" body="Create provider integrations first. API settings are not hardcoded into dashboard UI." />
        )}
      </div>
    </div>
  );
}