import {X} from 'lucide-react'
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import {useEffect, useState} from 'react'
import {describeUserPoolClient, updateUserPoolClientOAuth} from '@/api/cloudProxyClient'
import {useAccountId} from '@/lib/accountStore'
import type {UserPoolClientSettings, UserPoolOAuthFlow} from '@/types/resource'

type Props = {
    poolId: string
    clientId: string
    runtimeReachable: boolean
    onClose: () => void
}

const FLOWS: {flow: UserPoolOAuthFlow; label: string; hint: string}[] = [
    {flow: 'code', label: 'Authorization code', hint: 'Recommended for web and mobile apps, with PKCE.'},
    {flow: 'implicit', label: 'Implicit', hint: 'Legacy: tokens come back in the URL.'},
    {flow: 'client_credentials', label: 'Client credentials', hint: 'Machine-to-machine. Needs a client secret.'},
]
const STANDARD_SCOPES = ['openid', 'email', 'phone', 'profile', 'aws.cognito.signin.user.admin']
const COGNITO = 'COGNITO'

type Draft = {callbackUrls: string; logoutUrls: string; oauthFlows: UserPoolOAuthFlow[]; oauthScopes: string[]; identityProviders: string[]}

export function CognitoAppClientSettings({poolId, clientId, runtimeReachable, onClose}: Props) {
    const accountId = useAccountId()
    const queryClient = useQueryClient()
    const clientKey = ['cognito-client', accountId, poolId, clientId]
    const [draft, setDraft] = useState<Draft | null>(null)
    const [notice, setNotice] = useState('')

    const clientQuery = useQuery({
        queryKey: clientKey,
        queryFn: ({signal}) => describeUserPoolClient('aws', poolId, clientId, signal),
        enabled: runtimeReachable,
    })
    const client = clientQuery.data

    useEffect(() => {
        if (client) setDraft(draftFrom(client))
    }, [client])

    const saveMutation = useMutation({
        mutationFn: (value: Draft) => updateUserPoolClientOAuth('aws', poolId, clientId, {
            callbackUrls: lines(value.callbackUrls),
            logoutUrls: lines(value.logoutUrls),
            oauthFlows: value.oauthFlows,
            oauthScopes: value.oauthScopes,
            identityProviders: value.identityProviders,
        }),
        onSuccess: (saved) => {
            queryClient.setQueryData(clientKey, saved)
            setNotice(saved.oauthFlows.includes('code') && saved.identityProviders.includes(COGNITO)
                ? 'Saved. Apps using this client can now send users to the hosted login page.'
                : 'Saved.')
        },
    })

    const disabled = !runtimeReachable || saveMutation.isPending
    const scopes = draft ? [...STANDARD_SCOPES, ...draft.oauthScopes.filter((scope) => !STANDARD_SCOPES.includes(scope))] : STANDARD_SCOPES
    const otherProviders = draft?.identityProviders.filter((provider) => provider !== COGNITO) ?? []
    const changed = Boolean(client && draft && JSON.stringify(normalized(draft)) !== JSON.stringify(normalized(draftFrom(client))))
    const update = (patch: Partial<Draft>) => { setNotice(''); setDraft((current) => current && {...current, ...patch}) }
    const toggle = <T extends string>(list: T[], value: T, on: boolean) => on ? [...list.filter((entry) => entry !== value), value] : list.filter((entry) => entry !== value)
    const error = clientQuery.error ?? saveMutation.error

    return <section className="cognito-user" aria-label={`App client ${client?.clientName || clientId}`}>
        <div className="input-row resource-table-bar">
            <div><p className="eyebrow">App client</p><strong>{client?.clientName || clientId}</strong></div>
            <button className="icon-btn" type="button" title="Close" aria-label="Close app client settings" onClick={onClose}><X size={14}/></button>
        </div>
        {clientQuery.isLoading && <p className="muted padded">Loading app client</p>}
        {client && draft && <form className="cognito-user-grid" aria-label="Hosted sign-in settings" onSubmit={(event) => { event.preventDefault(); saveMutation.mutate(draft) }}>
            <dl className="cognito-facts">
                <dt>Client ID</dt><dd className="mono">{client.clientId}</dd>
                <dt>Client secret</dt><dd>{client.hasSecret ? 'Yes' : 'No (public client)'}</dd>
                <dt>Sign-in flows</dt><dd>{client.explicitAuthFlows.length ? client.explicitAuthFlows.map((flow) => <code key={flow} className="cognito-flow">{flow.replace(/^ALLOW_/, '')}</code>) : '—'}</dd>
            </dl>

            <div>
                <p className="eyebrow">Hosted sign-in</p>
                <label className="cognito-check">
                    <input type="checkbox" checked={draft.identityProviders.includes(COGNITO)} disabled={disabled} onChange={(event) => update({identityProviders: toggle(draft.identityProviders, COGNITO, event.target.checked)})}/>
                    Hosted login page for this pool's users
                </label>
                {otherProviders.length > 0 && <p className="muted compact-text">Also signs in with: {otherProviders.map((provider) => <code key={provider}>{provider}</code>)}</p>}
                <p className="eyebrow">OAuth flows</p>
                {FLOWS.map(({flow, label, hint}) => (
                    <label key={flow} className="cognito-check" title={hint}>
                        <input type="checkbox" checked={draft.oauthFlows.includes(flow)} disabled={disabled || (flow === 'client_credentials' && !client.hasSecret)} onChange={(event) => update({oauthFlows: toggle(draft.oauthFlows, flow, event.target.checked)})}/>
                        {label} <small className="muted">{hint}</small>
                    </label>
                ))}
            </div>

            <div>
                <p className="eyebrow">Scopes</p>
                {scopes.map((scope) => (
                    <label key={scope} className="cognito-check">
                        <input type="checkbox" checked={draft.oauthScopes.includes(scope)} disabled={disabled} onChange={(event) => update({oauthScopes: toggle(draft.oauthScopes, scope, event.target.checked)})}/>
                        <code>{scope}</code>
                    </label>
                ))}
            </div>

            <div className="cognito-client-urls">
                <label className="dynamic-field"><span>Callback URLs</span>
                    <textarea className="textarea code-textarea small" rows={3} value={draft.callbackUrls} disabled={disabled} placeholder="http://localhost:3000/api/auth/callback" onChange={(event) => update({callbackUrls: event.target.value})}/>
                    <small className="muted">One per line. Where Cognito sends users back with a code. https, or http for localhost.</small>
                </label>
                <label className="dynamic-field"><span>Sign-out URLs</span>
                    <textarea className="textarea code-textarea small" rows={3} value={draft.logoutUrls} disabled={disabled} placeholder="http://localhost:3000/" onChange={(event) => update({logoutUrls: event.target.value})}/>
                    <small className="muted">One per line. Allowed <code>logout_uri</code> values after sign-out.</small>
                </label>
                <div><button className="button primary" type="submit" disabled={disabled || !changed}>{saveMutation.isPending ? 'Saving' : 'Save settings'}</button></div>
            </div>
        </form>}
        {notice && <p className="cognito-outcome cognito-outcome--ok" role="status">{notice}</p>}
        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
    </section>
}

function draftFrom(client: UserPoolClientSettings): Draft {
    return {
        callbackUrls: client.callbackUrls.join('\n'),
        logoutUrls: client.logoutUrls.join('\n'),
        oauthFlows: client.oauthFlows,
        oauthScopes: client.oauthScopes,
        identityProviders: client.identityProviders,
    }
}

function normalized(draft: Draft) {
    return {
        callbackUrls: lines(draft.callbackUrls),
        logoutUrls: lines(draft.logoutUrls),
        oauthFlows: [...draft.oauthFlows].sort(),
        oauthScopes: [...draft.oauthScopes].sort(),
        identityProviders: [...draft.identityProviders].sort(),
    }
}

function lines(value: string): string[] {
    return value.split('\n').map((line) => line.trim()).filter(Boolean)
}