import { useState, useEffect } from 'react';
import { Input } from '@/components/ui/input';
import { TogglePill } from '@/components/ui/toggle-pill';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Combobox } from '@/components/ui/combobox';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { SegmentedControl } from '@/components/ui/segmented-control';
import { toast } from '@/components/ui/toast-store';
import { apiFetch } from '@/lib/api';
import { CapabilityGate } from './CapabilityGate';
import { PaidGate } from './PaidGate';
import { Loader2, CheckCircle, XCircle } from 'lucide-react';
import { SettingsPrimaryButton } from './settings/SettingsActions';
import { useMastheadStats } from './settings/MastheadStatsContext';

const ROLE_OPTIONS = [
    { value: 'viewer', label: 'Viewer' },
    { value: 'admin', label: 'Admin' },
];

interface SSOProviderConfig {
    provider: string;
    enabled: boolean;
    displayName: string;
    // LDAP
    ldapUrl?: string;
    ldapBindDn?: string;
    ldapBindPassword?: string;
    ldapSearchBase?: string;
    ldapSearchFilter?: string;
    ldapAdminGroupDn?: string;
    ldapDefaultRole?: string;
    ldapTlsRejectUnauthorized?: boolean;
    // OIDC
    oidcIssuerUrl?: string;
    oidcClientId?: string;
    oidcClientSecret?: string;
    oidcScopes?: string;
    oidcAdminClaim?: string;
    oidcAdminClaimValue?: string;
    oidcDefaultRole?: string;
    // Custom OIDC claim mapping
    oidcIdClaim?: string;
    oidcUsernameClaim?: string;
    oidcEmailClaim?: string;
}

// Ordered by tier: free OIDC (Custom + presets) first, then LDAP/AD (paid).
// The ordering reinforces the free → paid progression in the UI.
const PROVIDERS = [
    { id: 'oidc_custom', label: 'Custom OIDC', type: 'oidc' as const },
    { id: 'oidc_google', label: 'Google', type: 'oidc' as const },
    { id: 'oidc_github', label: 'GitHub', type: 'oidc' as const },
    { id: 'oidc_okta', label: 'Okta', type: 'oidc' as const },
    { id: 'ldap', label: 'LDAP / Active Directory', type: 'ldap' as const },
];

function ProviderCard({ providerId, type, label, initialConfig, onSave }: {
    providerId: string;
    type: 'ldap' | 'oidc';
    label: string;
    initialConfig: SSOProviderConfig | null;
    onSave: () => void;
}) {
    const [config, setConfig] = useState<Partial<SSOProviderConfig>>(initialConfig || { enabled: false });
    const [saving, setSaving] = useState(false);
    const [testing, setTesting] = useState(false);
    const [testResult, setTestResult] = useState<{ success: boolean; error?: string } | null>(null);
    const [expanded, setExpanded] = useState(!!initialConfig?.enabled);

    // Keep local draft aligned with the saved config once it loads (or refreshes
    // after save). Without this, cards mount with enabled:false before fetch
    // completes and the Active badge (from initialConfig) disagrees with the OFF toggle.
    useEffect(() => {
        setConfig(initialConfig || { enabled: false });
    }, [initialConfig]);

    const update = (field: string, value: string | boolean) => {
        setConfig(prev => ({ ...prev, [field]: value }));
    };

    const handleSave = async () => {
        setSaving(true);
        try {
            const body = {
                ...config,
                provider: providerId,
                displayName: config.displayName || label,
            };
            const res = await apiFetch(`/sso/config/${providerId}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
                localOnly: true,
            });
            if (res.ok) {
                toast.success('SSO configuration saved');
                onSave();
            } else {
                const data = await res.json();
                toast.error(data?.error || data?.message || 'Failed to save');
            }
        } catch (error: unknown) {
            toast.error((error as Error)?.message || 'Failed to save SSO configuration');
        } finally {
            setSaving(false);
        }
    };

    const handleTest = async () => {
        setTesting(true);
        setTestResult(null);
        try {
            const res = await apiFetch(`/sso/config/${providerId}/test`, { method: 'POST', localOnly: true });
            const data = await res.json().catch(() => null);
            if (!res.ok) {
                const message = data?.error || data?.message || 'Connection test failed';
                setTestResult({ success: false, error: message });
                toast.error(message);
                return;
            }
            setTestResult(data);
            if (data?.success) {
                toast.success('Connection successful');
            } else {
                toast.error(data?.error || 'Connection failed');
            }
        } catch (error: unknown) {
            const message = (error as Error)?.message || 'Connection test failed';
            setTestResult({ success: false, error: message });
            toast.error(message);
        } finally {
            setTesting(false);
        }
    };

    const handleDelete = async () => {
        try {
            const res = await apiFetch(`/sso/config/${providerId}`, { method: 'DELETE', localOnly: true });
            if (res.ok) {
                toast.success('SSO provider removed');
                setConfig({ enabled: false });
                setExpanded(false);
                onSave();
            } else {
                const data = await res.json().catch(() => null);
                toast.error(data?.error || data?.message || 'Failed to remove provider');
            }
        } catch (error: unknown) {
            toast.error((error as Error)?.message || 'Failed to remove provider');
        }
    };

    return (
        <div className="rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel transition-colors hover:border-t-card-border-hover">
            <div
                className="flex items-center justify-between p-4 cursor-pointer hover:bg-muted/30 transition-colors"
                onClick={() => setExpanded(!expanded)}
            >
                <div className="flex items-center gap-3">
                    <span className="font-medium text-sm">{label}</span>
                    {config.enabled && (
                        <Badge variant="secondary" className="text-xs bg-success-muted text-success border-success/20">
                            Active
                        </Badge>
                    )}
                </div>
                <div className="flex items-center gap-2">
                    <TogglePill
                        checked={!!config.enabled}
                        onChange={(checked) => update('enabled', checked)}
                        onClick={(e) => e.stopPropagation()}
                    />
                </div>
            </div>

            {expanded && (
                <div className="border-t border-border p-4 space-y-4">
                    {type === 'ldap' ? (
                        <>
                            <div className="grid gap-2">
                                <Label className="text-xs text-muted-foreground">Server URL</Label>
                                <Input
                                    placeholder="ldap://ldap.example.com:389"
                                    value={config.ldapUrl || ''}
                                    onChange={e => update('ldapUrl', e.target.value)}
                                />
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Bind DN</Label>
                                    <Input
                                        placeholder="cn=readonly,dc=example,dc=com"
                                        value={config.ldapBindDn || ''}
                                        onChange={e => update('ldapBindDn', e.target.value)}
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Bind Password</Label>
                                    <Input
                                        type="password"
                                        placeholder="Enter to update"
                                        value={config.ldapBindPassword || ''}
                                        onChange={e => update('ldapBindPassword', e.target.value)}
                                    />
                                </div>
                            </div>
                            <div className="grid gap-2">
                                <Label className="text-xs text-muted-foreground">Search Base</Label>
                                <Input
                                    placeholder="ou=users,dc=example,dc=com"
                                    value={config.ldapSearchBase || ''}
                                    onChange={e => update('ldapSearchBase', e.target.value)}
                                />
                            </div>
                            <div className="grid gap-2">
                                <Label className="text-xs text-muted-foreground">Search Filter</Label>
                                <Input
                                    placeholder="(uid={{username}})"
                                    value={config.ldapSearchFilter || ''}
                                    onChange={e => update('ldapSearchFilter', e.target.value)}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Use <code className="bg-muted px-1 rounded">{'{{username}}'}</code> as placeholder.
                                    For Active Directory: <code className="bg-muted px-1 rounded">{'(sAMAccountName={{username}})'}</code>
                                </p>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Admin Group DN</Label>
                                    <Input
                                        placeholder="cn=sencho-admins,ou=groups,dc=..."
                                        value={config.ldapAdminGroupDn || ''}
                                        onChange={e => update('ldapAdminGroupDn', e.target.value)}
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Default Role</Label>
                                    <Combobox
                                        options={ROLE_OPTIONS}
                                        value={config.ldapDefaultRole || 'viewer'}
                                        onValueChange={v => update('ldapDefaultRole', v)}
                                        placeholder="Select role"
                                    />
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <TogglePill
                                    checked={config.ldapTlsRejectUnauthorized !== false}
                                    onChange={checked => update('ldapTlsRejectUnauthorized', checked)}
                                />
                                <Label className="text-xs text-muted-foreground">Verify TLS certificate</Label>
                            </div>
                        </>
                    ) : (
                        <>
                            {providerId === 'oidc_custom' && (
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Display Name</Label>
                                    <Input
                                        placeholder="My Identity Provider"
                                        value={config.displayName || ''}
                                        onChange={e => update('displayName', e.target.value)}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Name shown on the login button (e.g., "Corporate SSO").
                                    </p>
                                </div>
                            )}
                            {(providerId === 'oidc_okta' || providerId === 'oidc_custom') && (
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Issuer URL</Label>
                                    <Input
                                        placeholder={providerId === 'oidc_okta' ? 'https://dev-123456.okta.com' : 'https://auth.example.com/realms/myrealm'}
                                        value={config.oidcIssuerUrl || ''}
                                        onChange={e => update('oidcIssuerUrl', e.target.value)}
                                    />
                                    {providerId === 'oidc_custom' && (
                                        <p className="text-xs text-muted-foreground">
                                            Base URL of the OIDC discovery endpoint (without <code className="bg-muted px-1 rounded">/.well-known/openid-configuration</code>).
                                        </p>
                                    )}
                                </div>
                            )}
                            <div className="grid grid-cols-2 gap-3">
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Client ID</Label>
                                    <Input
                                        placeholder="Client ID"
                                        value={config.oidcClientId || ''}
                                        onChange={e => update('oidcClientId', e.target.value)}
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Client Secret</Label>
                                    <Input
                                        type="password"
                                        placeholder="Enter to update"
                                        value={config.oidcClientSecret || ''}
                                        onChange={e => update('oidcClientSecret', e.target.value)}
                                    />
                                </div>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Admin Claim</Label>
                                    <Input
                                        placeholder="groups"
                                        value={config.oidcAdminClaim || ''}
                                        onChange={e => update('oidcAdminClaim', e.target.value)}
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Admin Claim Value</Label>
                                    <Input
                                        placeholder="sencho-admins"
                                        value={config.oidcAdminClaimValue || ''}
                                        onChange={e => update('oidcAdminClaimValue', e.target.value)}
                                    />
                                </div>
                            </div>
                            <div className="grid grid-cols-2 gap-3 items-start">
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Scopes</Label>
                                    <Input
                                        placeholder="openid email profile"
                                        value={config.oidcScopes || ''}
                                        onChange={e => update('oidcScopes', e.target.value)}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Space-separated list of OAuth scopes. Leave blank for default.
                                    </p>
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-xs text-muted-foreground">Default Role</Label>
                                    <Combobox
                                        options={ROLE_OPTIONS}
                                        value={config.oidcDefaultRole || 'viewer'}
                                        onValueChange={v => update('oidcDefaultRole', v)}
                                        placeholder="Select role"
                                    />
                                </div>
                            </div>
                            {providerId === 'oidc_custom' && (
                                <>
                                    <div className="grid grid-cols-3 gap-3">
                                        <div className="grid gap-2">
                                            <Label className="text-xs text-muted-foreground">User ID Claim</Label>
                                            <Input
                                                placeholder="sub"
                                                value={config.oidcIdClaim || ''}
                                                onChange={e => update('oidcIdClaim', e.target.value)}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label className="text-xs text-muted-foreground">Username Claim</Label>
                                            <Input
                                                placeholder="preferred_username"
                                                value={config.oidcUsernameClaim || ''}
                                                onChange={e => update('oidcUsernameClaim', e.target.value)}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label className="text-xs text-muted-foreground">Email Claim</Label>
                                            <Input
                                                placeholder="email"
                                                value={config.oidcEmailClaim || ''}
                                                onChange={e => update('oidcEmailClaim', e.target.value)}
                                            />
                                        </div>
                                    </div>
                                    <p className="text-xs text-muted-foreground">
                                        Map claims from your provider's token to Sencho user fields. Leave blank for standard OIDC defaults.
                                    </p>
                                </>
                            )}
                        </>
                    )}

                    <div className="flex items-center justify-between pt-2">
                        <div className="flex items-center gap-2">
                            <SettingsPrimaryButton size="sm" onClick={handleSave} disabled={saving}>
                                {saving ? <><Loader2 className="w-3 h-3 animate-spin" /> Saving</> : 'Save'}
                            </SettingsPrimaryButton>
                            <Button size="sm" variant="outline" onClick={handleTest} disabled={testing}>
                                {testing ? <><Loader2 className="w-3 h-3 mr-1 animate-spin" /> Testing...</> : 'Test Connection'}
                            </Button>
                            {testResult && (
                                testResult.success
                                    ? <CheckCircle className="w-4 h-4 text-success" />
                                    : <XCircle className="w-4 h-4 text-destructive" />
                            )}
                        </div>
                        {initialConfig && (
                            <Button size="sm" variant="ghost" className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground" onClick={handleDelete}>
                                Remove
                            </Button>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}

// Mirrors the backend tier split in ssoConfig.ts requireTierForProvider: Custom OIDC
// and preset OIDC (Google/GitHub/Okta) are free, LDAP/AD requires the paid plan.
function ProviderCardWithGate(props: {
    providerId: string;
    type: 'ldap' | 'oidc';
    label: string;
    initialConfig: SSOProviderConfig | null;
    onSave: () => void;
}) {
    const card = <ProviderCard {...props} />;
    if (props.providerId === 'ldap') {
        return <PaidGate>{card}</PaidGate>;
    }
    return card;
}

type AuthMode = 'local_and_sso' | 'sso_only';

function RoleSyncToggle() {
    // null = loading/unknown/unconfirmed; never present "off" as a confirmed
    // state during loading or error.
    const [enabled, setEnabled] = useState<boolean | null>(null);
    const [saving, setSaving] = useState(false);

    useEffect(() => {
        let cancelled = false;
        void (async () => {
            try {
                const res = await apiFetch('/sso/config/role-sync', { localOnly: true });
                if (!res.ok) {
                    if (!cancelled) {
                        const data = await res.json().catch(() => null);
                        toast.error(data?.error || data?.message || 'Failed to load role sync setting');
                    }
                    return;
                }
                const data = await res.json() as { enabled: boolean };
                if (!cancelled) setEnabled(data.enabled);
            } catch (error: unknown) {
                if (!cancelled) {
                    setEnabled(null);
                    toast.error((error as Error)?.message || 'Failed to load role sync setting');
                }
            }
        })();
        return () => { cancelled = true; };
    }, []);

    const handleToggle = async (next: boolean) => {
        if (saving) return;
        setSaving(true);
        try {
            const res = await apiFetch('/sso/config/role-sync', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ enabled: next }),
                localOnly: true,
            });
            if (!res.ok) {
                const data = await res.json().catch(() => null);
                toast.error(data?.error || data?.message || 'Failed to update role sync');
                return;
            }
            setEnabled(next);
            toast.success(next ? 'IdP role synchronization enabled' : 'IdP role synchronization disabled');
        } catch (error: unknown) {
            toast.error((error as Error)?.message || 'Failed to update role sync');
        } finally {
            setSaving(false);
        }
    };

    return (
        <div className="flex items-center gap-3 rounded-md border border-card-border bg-card/40 p-4">
            <div className="flex flex-col flex-1 min-w-0">
                <Label className="font-mono text-[10px] uppercase tracking-[0.14em] text-stat-subtitle">
                    IdP role synchronization
                </Label>
                <p className="text-xs text-muted-foreground">
                    When enabled, SSO sign-in syncs the provider&apos;s role group mapping over any role an admin assigns in Settings → Users. Disable to keep manual role edits persistent across logins.
                </p>
            </div>
            {enabled === null ? (
                <div className="flex items-center justify-center w-[60px]">
                    <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
                </div>
            ) : (
                <TogglePill
                    checked={enabled}
                    onChange={handleToggle}
                    disabled={saving}
                    aria-label="IdP role synchronization"
                />
            )}
        </div>
    );
}

const AUTH_MODE_OPTIONS: Array<{ value: AuthMode; label: string }> = [
    { value: 'local_and_sso', label: 'Local and SSO' },
    { value: 'sso_only', label: 'SSO only' },
];

const ENABLE_LOCAL_LOGIN_CLI = 'node dist/cli/enableLocalLogin.js';

function AuthenticationModePanel({
    enabledProviderNames,
}: {
    enabledProviderNames: string[];
}) {
    const [mode, setMode] = useState<AuthMode>('local_and_sso');
    const [loaded, setLoaded] = useState(false);
    const [saving, setSaving] = useState(false);
    const [confirmRisk, setConfirmRisk] = useState(false);
    const [pendingMode, setPendingMode] = useState<AuthMode | null>(null);

    const loadMode = async () => {
        try {
            const res = await apiFetch('/sso/auth-mode', { localOnly: true });
            if (!res.ok) {
                const data = await res.json().catch(() => null);
                toast.error(data?.error || 'Failed to load authentication mode');
                return;
            }
            const data = await res.json() as { authenticationMode?: AuthMode };
            if (data.authenticationMode === 'sso_only' || data.authenticationMode === 'local_and_sso') {
                setMode(data.authenticationMode);
            }
            setLoaded(true);
        } catch (error: unknown) {
            toast.error((error as Error)?.message || 'Failed to load authentication mode');
        }
    };

    // eslint-disable-next-line react-hooks/set-state-in-effect
    useEffect(() => { void loadMode(); }, []);

    const saveMode = async (next: AuthMode, confirm: boolean) => {
        setSaving(true);
        try {
            const body =
                next === 'sso_only'
                    ? { mode: next, confirm }
                    : { mode: next };
            const res = await apiFetch('/sso/auth-mode', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
                localOnly: true,
            });
            const data = await res.json().catch(() => null);
            if (!res.ok) {
                toast.error(data?.error || 'Failed to update authentication mode');
                return;
            }
            setMode(next);
            setPendingMode(null);
            setConfirmRisk(false);
            toast.success(
                next === 'sso_only'
                    ? 'SSO-only mode enabled. Local password login is disabled.'
                    : 'Local and SSO mode enabled.',
            );
        } catch (error: unknown) {
            toast.error((error as Error)?.message || 'Failed to update authentication mode');
        } finally {
            setSaving(false);
        }
    };

    const handleModeChange = (next: AuthMode) => {
        if (next === mode) return;
        if (next === 'sso_only') {
            setPendingMode('sso_only');
            setConfirmRisk(false);
            return;
        }
        void saveMode('local_and_sso', false);
    };

    if (!loaded) {
        return (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
                Loading authentication mode
            </div>
        );
    }

    return (
        <div className="space-y-3 rounded-md border border-card-border bg-card/40 p-4">
            <div className="space-y-1">
                <Label className="font-mono text-[10px] uppercase tracking-[0.14em] text-stat-subtitle">
                    Authentication mode
                </Label>
                <p className="text-xs text-muted-foreground">
                    Choose whether local password login remains available alongside SSO.
                </p>
            </div>

            <SegmentedControl
                value={pendingMode ?? mode}
                options={AUTH_MODE_OPTIONS}
                onChange={handleModeChange}
                ariaLabel="Authentication mode"
                disabled={saving}
            />

            {mode === 'sso_only' && (
                <p className="text-xs text-muted-foreground">
                    Local password login is disabled. Emergency recovery:{' '}
                    <code className="bg-muted px-1 rounded">{ENABLE_LOCAL_LOGIN_CLI}</code>
                    {' '}(no restart required).
                </p>
            )}

            {pendingMode === 'sso_only' && (
                <div className="space-y-3 rounded-md border border-warning/40 bg-warning/5 p-3">
                    <p className="text-sm text-stat-value">
                        Local password login will be disabled. Verify that SSO works and that your
                        account receives the Admin role before continuing.
                    </p>
                    {enabledProviderNames.length > 0 ? (
                        <p className="text-xs text-muted-foreground">
                            Providers that will remain available: {enabledProviderNames.join(', ')}.
                        </p>
                    ) : (
                        <p className="text-xs text-destructive">
                            Enable and test at least one SSO provider before continuing.
                        </p>
                    )}
                    <p className="text-xs text-muted-foreground">
                        If the identity provider is unavailable, recover with{' '}
                        <code className="bg-muted px-1 rounded">{ENABLE_LOCAL_LOGIN_CLI}</code>
                        {' '}(no restart required).
                    </p>
                    <label className="flex items-start gap-2 text-sm">
                        <Checkbox
                            checked={confirmRisk}
                            onCheckedChange={(v) => setConfirmRisk(v === true)}
                            disabled={saving}
                        />
                        <span>I understand local password login will stop working until re-enabled.</span>
                    </label>
                    <div className="flex gap-2">
                        <SettingsPrimaryButton
                            disabled={saving || !confirmRisk || enabledProviderNames.length === 0}
                            onClick={() => void saveMode('sso_only', true)}
                        >
                            {saving ? 'Saving…' : 'Enable SSO only'}
                        </SettingsPrimaryButton>
                        <Button
                            type="button"
                            variant="outline"
                            disabled={saving}
                            onClick={() => {
                                setPendingMode(null);
                                setConfirmRisk(false);
                            }}
                        >
                            Cancel
                        </Button>
                    </div>
                </div>
            )}
        </div>
    );
}

export function SSOSection() {
    const [configs, setConfigs] = useState<SSOProviderConfig[]>([]);

    const fetchConfigs = async () => {
        try {
            const res = await apiFetch('/sso/config', { localOnly: true });
            if (res.ok) {
                setConfigs(await res.json());
            } else {
                const data = await res.json().catch(() => null);
                toast.error(data?.error || data?.message || 'Failed to load SSO configuration');
            }
        } catch (error: unknown) {
            toast.error((error as Error)?.message || 'Failed to load SSO configuration');
        }
    };

    // eslint-disable-next-line react-hooks/set-state-in-effect
    useEffect(() => { fetchConfigs(); }, []);

    const enabledProviders = configs.filter(c => c.enabled).length;
    useMastheadStats([
        { label: 'PROVIDERS', value: `${configs.length}` },
        {
            label: 'ENABLED',
            value: `${enabledProviders}`,
            tone: enabledProviders > 0 ? 'value' : 'subtitle',
        },
    ]);

    const getConfig = (provider: string) => configs.find(c => c.provider === provider) || null;
    const enabledProviderNames = configs
        .filter(c => c.enabled)
        .map(c => c.displayName || c.provider);

    return (
          <CapabilityGate capability="sso" featureName="SSO Authentication">
            <div className="space-y-6">
                <CapabilityGate capability="authentication-mode" featureName="Authentication mode">
                    <AuthenticationModePanel enabledProviderNames={enabledProviderNames} />
                </CapabilityGate>

                <div className="space-y-3">
                    {PROVIDERS.map(p => (
                        <ProviderCardWithGate
                            key={p.id}
                            providerId={p.id}
                            type={p.type}
                            label={p.label}
                            initialConfig={getConfig(p.id)}
                            onSave={fetchConfigs}
                        />
                    ))}
                </div>

                <RoleSyncToggle />

                <div className="text-xs text-muted-foreground space-y-1">
                    <p>SSO users are automatically provisioned on first login and assigned a role based on your identity provider's group membership.</p>
                    <p>For OIDC providers, set the OAuth callback URL to: <code className="bg-muted px-1 rounded">{'https://<your-sencho-url>/api/auth/sso/oidc/<provider>/callback'}</code></p>
                </div>
            </div>
          </CapabilityGate>
    );
}
