import {RefreshCw} from 'lucide-react'
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import {useEffect, useState} from 'react'
import {Link} from 'react-router-dom'
import {
    attachFileSystemToFunction,
    createAccessPoint,
    createMountTarget,
    deleteAccessPoint,
    deleteMountTarget,
    detachFileSystemFromFunction,
    getCloudResource,
    listCloudResources,
} from '@/api/cloudProxyClient'
import {cloudQueryKeys} from '@/api/queries/cloudQueries'
import {useAccountId} from '@/lib/accountStore'
import type {CloudResource} from '@/types/resource'

type Props = {
    resource?: CloudResource
    runtimeReachable: boolean
}

type MountTarget = {id: string; subnetId: string | null; availabilityZone: string | null; ipAddress: string | null; state: string | null}
type AccessPoint = {id: string; arn: string | null; name: string | null; path: string; uid: number | null; gid: number | null; permissions: string | null; state: string | null}
type MountedFunction = {name: string; accessPointId: string | null; mountPath: string | null}

const EMPTY_ACCESS_POINT = {name: '', path: '/', uid: '1000', gid: '1000', permissions: '755'}

export function FileSystemPanel({resource, runtimeReachable}: Props) {
    const accountId = useAccountId()
    const queryClient = useQueryClient()
    const [subnetId, setSubnetId] = useState('')
    const [accessPointForm, setAccessPointForm] = useState(EMPTY_ACCESS_POINT)
    const [attachForm, setAttachForm] = useState({accessPointId: '', functionName: '', mountPath: '/mnt/data'})
    const [notice, setNotice] = useState('')
    const detailKey = ['efs-file-system', accountId, resource?.id]

    const detailQuery = useQuery({
        queryKey: detailKey,
        queryFn: ({signal}) => getCloudResource('aws', 'filesystems', resource?.id ?? '', signal),
        enabled: Boolean(resource) && runtimeReachable,
    })
    const functionsQuery = useQuery({
        queryKey: cloudQueryKeys.resources('aws', 'serverless'),
        queryFn: ({signal}) => listCloudResources('aws', 'serverless', undefined, signal),
        enabled: Boolean(resource) && runtimeReachable,
    })

    useEffect(() => {
        setNotice('')
        setSubnetId('')
        setAccessPointForm(EMPTY_ACCESS_POINT)
        setAttachForm({accessPointId: '', functionName: '', mountPath: '/mnt/data'})
    }, [resource?.id])

    const settle = (updated: CloudResource, message: string) => {
        queryClient.setQueryData(detailKey, updated)
        setNotice(message)
        return queryClient.invalidateQueries({queryKey: cloudQueryKeys.resources('aws', 'filesystems')})
    }
    const id = resource?.id ?? ''
    const addMountTarget = useMutation({
        mutationFn: () => createMountTarget('aws', id, subnetId.trim()),
        onSuccess: (updated) => { setSubnetId(''); return settle(updated, `Added a mount target in ${subnetId.trim()}.`) },
    })
    const removeMountTarget = useMutation({
        mutationFn: (mountTargetId: string) => deleteMountTarget('aws', id, mountTargetId),
        onSuccess: (updated, mountTargetId) => settle(updated, `Removed mount target ${mountTargetId}.`),
    })
    const addAccessPoint = useMutation({
        mutationFn: () => createAccessPoint('aws', id, {
            ...(accessPointForm.name.trim() ? {name: accessPointForm.name.trim()} : {}),
            path: accessPointForm.path.trim(),
            uid: Number(accessPointForm.uid),
            gid: Number(accessPointForm.gid),
            permissions: accessPointForm.permissions.trim(),
        }),
        onSuccess: (updated) => { setAccessPointForm(EMPTY_ACCESS_POINT); return settle(updated, `Created an access point at ${accessPointForm.path.trim()}.`) },
    })
    const removeAccessPoint = useMutation({
        mutationFn: (accessPointId: string) => deleteAccessPoint('aws', id, accessPointId),
        onSuccess: (updated, accessPointId) => settle(updated, `Deleted access point ${accessPointId}.`),
    })
    const attach = useMutation({
        mutationFn: () => attachFileSystemToFunction('aws', id, {...attachForm, mountPath: attachForm.mountPath.trim()}),
        onSuccess: (updated) => settle(updated, `${attachForm.functionName} now sees this file system at ${attachForm.mountPath.trim()}.`),
    })
    const detach = useMutation({
        mutationFn: (functionName: string) => detachFileSystemFromFunction('aws', id, functionName),
        onSuccess: (updated, functionName) => settle(updated, `Detached ${functionName}.`),
    })

    if (!resource) {
        return <section className="table-panel"><div className="empty compact"><h3>Select a file system</h3><p>Choose a file system to manage its mount targets and access points, and attach it to Lambda functions.</p></div></section>
    }

    const fileSystem = detailQuery.data ?? resource
    const metadata = fileSystem.metadata
    const mountTargets = Array.isArray(metadata.mountTargets) ? metadata.mountTargets as MountTarget[] : []
    const accessPoints = Array.isArray(metadata.accessPoints) ? metadata.accessPoints as AccessPoint[] : []
    const mounted = Array.isArray(metadata.functions) ? metadata.functions as MountedFunction[] : []
    const functionNames = (functionsQuery.data ?? []).map((fn) => fn.name).sort()
    const mutations = [addMountTarget, removeMountTarget, addAccessPoint, removeAccessPoint, attach, detach]
    const disabled = !runtimeReachable || mutations.some((mutation) => mutation.isPending)
    const error = detailQuery.error ?? mutations.find((mutation) => mutation.error)?.error
    const accessPointLabel = (accessPointId: string | null) => {
        const accessPoint = accessPoints.find((candidate) => candidate.id === accessPointId)
        return accessPoint ? `${accessPoint.name ?? accessPoint.id} (${accessPoint.path})` : accessPointId ?? '—'
    }
    const run = (action: () => void) => { setNotice(''); action() }

    return <section className="table-panel" style={{marginTop: 16}} aria-label={`File system ${fileSystem.name}`}>
        <div className="input-row resource-table-bar">
            <div><p className="eyebrow">EFS file system</p><span className="muted mono">{String(metadata.fileSystemId ?? fileSystem.id)}</span><span className="muted"> · {String(metadata.throughputMode ?? '')} · {metadata.encrypted ? 'encrypted' : 'not encrypted'}</span></div>
            <div className="cdn-actions">
                <button className="button" type="button" disabled={!runtimeReachable || detailQuery.isFetching} onClick={() => { void detailQuery.refetch() }}><RefreshCw size={14}/>{detailQuery.isFetching ? 'Loading' : 'Refresh'}</button>
            </div>
        </div>

        <div className="input-row resource-table-bar"><div><p className="eyebrow">Mount targets</p><span className="muted">Functions and tasks reach the file system through a mount target in their subnet.</span></div></div>
        {mountTargets.length === 0 ? <p className="muted compact-text efs-note">No mount targets yet. Add one before attaching the file system to a function.</p>
            : <div className="cognito-table"><table className="table"><thead><tr><th>Mount target</th><th>Subnet</th><th>Zone</th><th>IP address</th><th>State</th><th aria-label="Actions"/></tr></thead><tbody>{mountTargets.map((mountTarget) => (
                <tr key={mountTarget.id}>
                    <td className="mono">{mountTarget.id}</td>
                    <td className="mono">{mountTarget.subnetId ?? '—'}</td>
                    <td>{mountTarget.availabilityZone ?? '—'}</td>
                    <td className="mono">{mountTarget.ipAddress ?? '—'}</td>
                    <td><code>{mountTarget.state ?? '—'}</code></td>
                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Remove ${mountTarget.id}`} onClick={() => run(() => {
                        if (window.confirm(`Remove mount target ${mountTarget.id}?`)) removeMountTarget.mutate(mountTarget.id)
                    })}>Remove</button></td>
                </tr>
            ))}</tbody></table></div>}
        <form className="dynamic-form efs-inline-form" aria-label="Add mount target" onSubmit={(event) => { event.preventDefault(); run(() => addMountTarget.mutate()) }}>
            <label className="dynamic-field"><span>Subnet ID</span><input className="input mono" value={subnetId} placeholder="subnet-…" onChange={(event) => setSubnetId(event.target.value)} disabled={disabled} required/></label>
            <div><button className="button" type="submit" disabled={disabled || !subnetId.trim()}>{addMountTarget.isPending ? 'Adding' : 'Add mount target'}</button></div>
        </form>

        <div className="input-row resource-table-bar"><div><p className="eyebrow">Access points</p><span className="muted">An entry point into one directory, as a fixed POSIX user. Lambda mounts a file system through an access point.</span></div></div>
        {accessPoints.length === 0 ? <p className="muted compact-text efs-note">No access points yet.</p>
            : <div className="cognito-table"><table className="table"><thead><tr><th>Access point</th><th>Root directory</th><th>POSIX user</th><th>State</th><th aria-label="Actions"/></tr></thead><tbody>{accessPoints.map((accessPoint) => (
                <tr key={accessPoint.id}>
                    <td>{accessPoint.name && <>{accessPoint.name}<br/></>}<small className="mono">{accessPoint.id}</small></td>
                    <td className="mono">{accessPoint.path}{accessPoint.permissions ? <small className="muted"> ({accessPoint.permissions})</small> : null}</td>
                    <td className="mono">{accessPoint.uid ?? '—'}:{accessPoint.gid ?? '—'}</td>
                    <td><code>{accessPoint.state ?? '—'}</code></td>
                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Delete ${accessPoint.id}`} onClick={() => run(() => {
                        if (window.confirm(`Delete access point ${accessPoint.id}? Files stay in the file system.`)) removeAccessPoint.mutate(accessPoint.id)
                    })}>Delete</button></td>
                </tr>
            ))}</tbody></table></div>}
        <form className="dynamic-form efs-access-point-form" aria-label="Create access point" onSubmit={(event) => { event.preventDefault(); run(() => addAccessPoint.mutate()) }}>
            <label className="dynamic-field"><span>Name</span><input className="input" value={accessPointForm.name} onChange={(event) => setAccessPointForm({...accessPointForm, name: event.target.value})} disabled={disabled}/></label>
            <label className="dynamic-field"><span>Root directory</span><input className="input mono" value={accessPointForm.path} onChange={(event) => setAccessPointForm({...accessPointForm, path: event.target.value})} disabled={disabled} required pattern="/.*" title="Start with /"/></label>
            <label className="dynamic-field"><span>User ID</span><input className="input" type="number" min={0} value={accessPointForm.uid} onChange={(event) => setAccessPointForm({...accessPointForm, uid: event.target.value})} disabled={disabled} required/></label>
            <label className="dynamic-field"><span>Group ID</span><input className="input" type="number" min={0} value={accessPointForm.gid} onChange={(event) => setAccessPointForm({...accessPointForm, gid: event.target.value})} disabled={disabled} required/></label>
            <label className="dynamic-field"><span>Permissions</span><input className="input mono" value={accessPointForm.permissions} onChange={(event) => setAccessPointForm({...accessPointForm, permissions: event.target.value})} disabled={disabled} required pattern="[0-7]{3,4}" title="Octal, such as 755"/></label>
            <div><button className="button" type="submit" disabled={disabled}>{addAccessPoint.isPending ? 'Creating' : 'Create access point'}</button></div>
        </form>

        <div className="input-row resource-table-bar"><div><p className="eyebrow">Lambda functions</p><span className="muted">Functions that mount this file system share its files. A function can mount one file system.</span></div></div>
        {mounted.length === 0 ? <p className="muted compact-text efs-note">No function mounts this file system.</p>
            : <div className="cognito-table"><table className="table"><thead><tr><th>Function</th><th>Mount path</th><th>Access point</th><th aria-label="Actions"/></tr></thead><tbody>{mounted.map((fn) => (
                <tr key={fn.name}>
                    <td><Link to="/cloud-explorer/aws/serverless" className="mono">{fn.name}</Link></td>
                    <td className="mono">{fn.mountPath ?? '—'}</td>
                    <td>{accessPointLabel(fn.accessPointId)}</td>
                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Detach ${fn.name}`} onClick={() => run(() => {
                        if (window.confirm(`Detach the file system from ${fn.name}?`)) detach.mutate(fn.name)
                    })}>Detach</button></td>
                </tr>
            ))}</tbody></table></div>}
        {accessPoints.length > 0 && <form className="dynamic-form efs-access-point-form" aria-label="Attach to a function" onSubmit={(event) => { event.preventDefault(); run(() => attach.mutate()) }}>
            <label className="dynamic-field"><span>Function</span><select className="input" value={attachForm.functionName} onChange={(event) => setAttachForm({...attachForm, functionName: event.target.value})} disabled={disabled} required>
                <option value="">{functionNames.length === 0 ? 'No functions yet' : 'Choose a function'}</option>
                {functionNames.map((name) => <option key={name} value={name}>{name}</option>)}
            </select></label>
            <label className="dynamic-field"><span>Access point</span><select className="input" value={attachForm.accessPointId} onChange={(event) => setAttachForm({...attachForm, accessPointId: event.target.value})} disabled={disabled} required>
                <option value="">Choose an access point</option>
                {accessPoints.map((accessPoint) => <option key={accessPoint.id} value={accessPoint.id}>{accessPointLabel(accessPoint.id)}</option>)}
            </select></label>
            <label className="dynamic-field"><span>Mount path</span><input className="input mono" value={attachForm.mountPath} onChange={(event) => setAttachForm({...attachForm, mountPath: event.target.value})} disabled={disabled} required pattern="/mnt/[a-zA-Z0-9\-_.]+" title="Under /mnt, such as /mnt/data"/></label>
            <div><button className="button" type="submit" disabled={disabled || mountTargets.length === 0} title={mountTargets.length === 0 ? 'Add a mount target first' : undefined}>{attach.isPending ? 'Attaching' : 'Attach'}</button></div>
        </form>}
        {accessPoints.length > 0 && <p className="muted compact-text efs-note">Lambda needs a VPC to mount a file system. A function not yet in one is put in this file system&apos;s mount target subnets with the default security group.</p>}

        {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>
}