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 PaymentProviderSettings() {
  const gate = await requireDashboardRoute('/payment-provider-settings');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;

  const integrations = (await dashboardApi<ProviderIntegrationDto[]>('/provider-control/provider-integrations')) ?? [];
  const paymentProviders = integrations.filter(
    (integration) => integration.paymentEnabled || integration.refundEnabled || integration.commissionEnabled,
  );

  return (
    <div className="stack">
      <PageHeader title="Payment provider settings" eyebrow="Control Tower" />
      <Notice tone="info" title="Hosted-payment only" body="Navi stores provider readiness and vault references here. Card PAN, CVV, and raw payment secrets must never touch Navi servers." />
      <Notice tone="info" title="Readiness rule" body="Refund and commission flags require payment to be enabled. Production payment providers also require a vault reference and live readiness." />
      <div className="card">
        {paymentProviders.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead><tr><th>Provider</th><th>Environment</th><th>Payment</th><th>Refund</th><th>Commission</th><th>Vault ref</th><th>Health</th><th>Safety</th></tr></thead>
              <tbody>
                {paymentProviders.map((provider) => (
                  <tr key={provider.id}>
                    <td><strong>{provider.name}</strong><div className="muted">{provider.categoryKind}</div></td>
                    <td><StatusBadge value={provider.environment} /></td>
                    <td><StatusBadge value={provider.paymentEnabled ? 'ENABLED' : 'DISABLED'} /></td>
                    <td><StatusBadge value={provider.refundEnabled ? 'ENABLED' : 'DISABLED'} /></td>
                    <td><StatusBadge value={provider.commissionEnabled ? 'ENABLED' : 'DISABLED'} /></td>
                    <td className="mono">{provider.vaultSecretRef ?? 'No vault reference'}</td>
                    <td><StatusBadge value={provider.healthStatus} /></td>
                    <td>
                      <div className="button-row">
                        {provider.safetyWarnings.filter((warning) => warning.level !== 'INFO').length ? (
                          provider.safetyWarnings.filter((warning) => warning.level !== 'INFO').map((warning) => (
                            <StatusBadge key={warning.code} value={`${warning.level}_${warning.label}`.toUpperCase().replace(/\s/g, '_')} />
                          ))
                        ) : (
                          <StatusBadge value="NO_BLOCKERS" />
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No payment-ready providers" body="Enable payment, refund, or commission flags on a provider integration before it appears here." />
        )}
      </div>
    </div>
  );
}