import React from 'react';
import type { SsoProviderDiscovery } from '@/lib/sso';

interface SsoProviderSectionProps {
  providers: SsoProviderDiscovery[];
  loading: boolean;
}

export function SsoProviderSection({
  providers,
  loading,
}: SsoProviderSectionProps): React.ReactElement {
  if (loading) {
    return <p className="text-sm text-text-muted">Loading SSO providers...</p>;
  }

  const configuredProviders = providers.filter((provider) => provider.configured);

  if (providers.length === 0 || configuredProviders.length === 0) {
    return (
      <div className="rounded-lg border border-surface-border bg-surface-card p-4">
        <p className="text-sm text-text-muted">
          No SSO providers configured. Set WorkOS or Keycloak environment variables to enable SSO.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {configuredProviders.map((provider) => (
        <div
          key={provider.id}
          className="rounded-lg border border-surface-border bg-surface-card p-4"
        >
          <div className="flex items-center justify-between gap-4">
            <div>
              <h3 className="text-sm font-medium text-text-primary">{provider.name}</h3>
              <p className="text-xs text-text-muted">
                {provider.protocols.join(' + ').toUpperCase()}
                {provider.loginMode ? ` • primary ${provider.loginMode.toUpperCase()}` : ''}
              </p>
            </div>
            <span className="rounded-full border border-accent/30 bg-accent/10 px-2 py-1 text-xs font-medium text-accent">
              Enabled
            </span>
          </div>

          <div className="mt-3 space-y-2 text-xs text-text-muted">
            {provider.callbackPath && <p>Callback: {provider.callbackPath}</p>}
            {provider.teamSync.enabled && provider.teamSync.claim && (
              <p>Team sync claim: {provider.teamSync.claim}</p>
            )}
            {provider.samlFallback.configured && provider.samlFallback.loginUrl && (
              <p>SAML fallback: {provider.samlFallback.loginUrl}</p>
            )}
            {provider.warnings.map((warning) => (
              <p key={warning} className="text-warning">
                {warning}
              </p>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}