/**
 * Manage Connected App — OAuth Policies & Access Grants
 *
 * Route: /setup/connected-apps/:appId
 *
 * Sections:
 * 1. App Info (read-only summary)
 * 2. OAuth Policies (RunAsUserId, PermittedUsers)
 * 3. Access Grants (Profile/PermissionSet — visible when PermittedUsers = AdminApproved)
 */
import { useParams, Link } from 'react-router-dom';
import {
    ArrowLeft, Loader2, AlertCircle, Zap,
} from 'lucide-react';
import { useSystemPermission } from '@nexuscrm/host-sdk';
import { PropRow } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { Badge } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { useConnectedApp } from './hooks/useConnectedApp';
import { useAccessGrants } from './hooks/useAccessGrants';
import { OAuthPoliciesSection } from './components/OAuthPoliciesSection';
import { AccessGrantsSection } from './components/AccessGrantsSection';
import { tryGetSetupCapabilityPagePath } from '../../core/navigation/setupPagePaths';
import { useApp } from '@nexuscrm/host-sdk';

// ============================================================================
// Main Component
// ============================================================================

export function ConnectedAppDetailPage() {
    const { appId } = useParams<{ appId: string }>();
    const { currentFrontendAppId } = useApp();
    const canEdit = useSystemPermission('CustomizeApplication');
    const connectedAppsPath = tryGetSetupCapabilityPagePath(currentFrontendAppId, 'connectedApps') ?? '/';

    const connectedApp = useConnectedApp(appId);
    const { app, loading, error } = connectedApp;

    // Load grants based on the *saved* policy, not unsaved local state
    const savedPermittedUsers = app?.PermittedUsers ?? 'AllUsers';
    const accessGrants = useAccessGrants(appId, savedPermittedUsers);

    // ─── Loading / Error ──────────────────────────────────────────────────
    if (loading) {
        return (
            <div className="flex items-center justify-center py-24">
                <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
                <span className="ml-3 text-gray-500 dark:text-gray-400">Loading connected app...</span>
            </div>
        );
    }

    if (error || !app) {
        return (
            <div className="max-w-3xl mx-auto py-12">
                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6 flex items-start gap-3">
                    <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 shrink-0" />
                    <div>
                        <h3 className="font-semibold text-red-800 dark:text-red-300">Failed to load connected app</h3>
                        <p className="text-sm text-red-700 dark:text-red-400 mt-1">{error || 'Not found.'}</p>
                        <Link to={connectedAppsPath} className="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline mt-3">
                            <ArrowLeft className="w-4 h-4" /> Back to Connected Apps
                        </Link>
                    </div>
                </div>
            </div>
        );
    }

    const isActive = app.IsActive;
    const scopes = app.Scopes ? app.Scopes.split(' ').filter(Boolean) : [];

    return (
        <div className="space-y-6">
            {/* ─── Header ──────────────────────────────────────────────── */}
            <div>
                <p className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">
                    Manage Connected App
                </p>
                <h1 className="text-xl font-bold text-gray-900 dark:text-white">{app.Name}</h1>
                <Link
                    to={connectedAppsPath}
                    className="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline mt-1"
                >
                    <ArrowLeft className="w-3.5 h-3.5" />
                    &laquo; Back to Connected Apps
                </Link>
            </div>

            {/* ─── Section 1: App Info (read-only) ─────────────────────── */}
            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm">
                <div className="flex items-center gap-2 px-5 py-3 border-b border-gray-200 dark:border-gray-700">
                    <Zap className="w-4 h-4 text-gray-400" />
                    <h2 className="text-base font-semibold text-gray-800 dark:text-gray-200">App Information</h2>
                </div>
                <div className="px-5 py-4">
                    <table className="w-full">
                        <tbody>
                            <PropRow
                                left={{ label: 'Name', value: app.Name }}
                                right={{
                                    label: 'Status',
                                    value: (
                                        <Badge variant={isActive ? 'success' : 'neutral'}>
                                            {isActive ? 'Active' : 'Inactive'}
                                        </Badge>
                                    ),
                                }}
                            />
                            <PropRow
                                left={{
                                    label: 'Consumer Key',
                                    value: <span className="font-mono text-xs">{app.ConsumerKey}</span>,
                                }}
                                right={{
                                    label: 'Client Type',
                                    value: (
                                        <Badge variant={app.ClientType === 'public' ? 'warning' : 'neutral'}>
                                            {app.ClientType === 'public' ? 'Public' : 'Confidential'}
                                        </Badge>
                                    ),
                                }}
                            />
                            <PropRow
                                left={{
                                    label: 'Redirect URIs',
                                    value: <span className="text-xs">{app.RedirectUris || app.CallbackUrl || 'None'}</span>,
                                }}
                                right={{
                                    label: 'Scopes',
                                    value: scopes.length > 0 ? (
                                        <div className="flex flex-wrap gap-1">
                                            {scopes.map(s => <Badge key={s} variant="info">{s}</Badge>)}
                                        </div>
                                    ) : <span className="text-gray-400">None</span>,
                                }}
                            />
                        </tbody>
                    </table>
                </div>
            </div>

            {/* ─── Section 2: OAuth Policies ────────────────────────────── */}
            <OAuthPoliciesSection
                canEdit={canEdit}
                permittedUsers={connectedApp.permittedUsers}
                setPermittedUsers={connectedApp.setPermittedUsers}
                setPolicyDirty={connectedApp.setPolicyDirty}
                policyDirty={connectedApp.policyDirty}
                policySaving={connectedApp.policySaving}
                savePolicies={connectedApp.savePolicies}
                runAsUserId={connectedApp.runAsUserId}
                runAsUserName={connectedApp.runAsUserName}
                clearRunAsUser={connectedApp.clearRunAsUser}
                userQuery={connectedApp.userQuery}
                userResults={connectedApp.userResults}
                userSearching={connectedApp.userSearching}
                showUserDropdown={connectedApp.showUserDropdown}
                setShowUserDropdown={connectedApp.setShowUserDropdown}
                searchUsers={connectedApp.searchUsers}
                selectUser={connectedApp.selectUser}
            />

            {/* ─── Section 3: Access Grants (only when saved policy is AdminApproved) */}
            {savedPermittedUsers === 'AdminApproved' && (
                <AccessGrantsSection
                    canEdit={canEdit}
                    grants={accessGrants.grants}
                    grantsLoading={accessGrants.grantsLoading}
                    showAddGrant={accessGrants.showAddGrant}
                    setShowAddGrant={accessGrants.setShowAddGrant}
                    grantType={accessGrants.grantType}
                    setGrantType={accessGrants.setGrantType}
                    grantSearchQuery={accessGrants.grantSearchQuery}
                    grantSearchResults={accessGrants.grantSearchResults}
                    grantSearching={accessGrants.grantSearching}
                    addingGrant={accessGrants.addingGrant}
                    searchGrants={accessGrants.searchGrants}
                    addGrant={accessGrants.addGrant}
                    setGrantSearchQuery={accessGrants.setGrantSearchQuery}
                    setGrantSearchResults={accessGrants.setGrantSearchResults}
                    deletingGrant={accessGrants.deletingGrant}
                    setDeletingGrant={accessGrants.setDeletingGrant}
                    removeGrant={accessGrants.removeGrant}
                />
            )}
        </div>
    );
}

export default ConnectedAppDetailPage;