import { useEffect, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import ec2CpuAnimation from '../../../../svgAsset/animated-cpu.svg'
import { CopyValueButton } from './CopyValueButton'
import { ServerLaunchProgress } from './ServerLaunchProgress'
import {
    AlertTriangle,
    Cpu,
    HardDrive,
    Loader2,
    Network,
    Play,
    Plus,
    Power,
    RefreshCw,
    RotateCcw,
    Save,
    Search,
    Server,
    Terminal,
    Trash2,
    X,
} from 'lucide-react'
import {
    authorizeEc2SecurityGroupIngress,
    checkEc2InstanceSsh,
    createEc2Ami,
    createEc2KeyPair,
    createEc2SecurityGroup,
    deregisterEc2Ami,
    describeEc2Instance,
    getEc2ConsoleOutput,
    listEc2Amis,
    listEc2KeyPairs,
    listEc2SecurityGroups,
    listEc2Subnets,
    listEc2Vpcs,
    rebootEc2Instance,
    startEc2Instance,
    stopEc2Instance,
    terminateEc2Instance,
    updateEc2InstanceSecurityGroups,
    updateEc2InstanceTags,
    type Ec2Image,
    type Ec2KeyPair,
    type Ec2SecurityGroup,
    type Ec2SecurityGroupRef,
    type Ec2Subnet,
    type Ec2Tag,
    type Ec2Vpc,
    type IpPermissionInput,
} from '@/api/aws/ec2.api'
import { createCloudResource } from '@/api/cloudProxyClient'
import type { CloudProvider } from '@/types/cloud'
import type { CloudResource } from '@/types/resource'
import alpineImage from '../../../../OS_img/Alpine_Distro.jpg'
import amazonLinuxImage from '../../../../OS_img/amazon_Linux.png'
import debianImage from '../../../../OS_img/debian.jpg'
import redHatImage from '../../../../OS_img/RedHat.png'
import ubuntuImage from '../../../../OS_img/Ubuntu_Linux.png'

const EC2_LAUNCH_MINIMUM_MS = 5_000

// ─── Props ────────────────────────────────────────────────────────────────────

interface ComputePanelProps {
    cloud: CloudProvider
    resource?: CloudResource
    runtimeReachable?: boolean
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

function stateClass(state?: string): string {
    switch (state) {
        case 'running': return 'healthy'
        case 'stopped': return 'inactive'
        case 'pending':
        case 'stopping': return 'pending'
        case 'terminated':
        case 'shutting-down': return 'error'
        default: return 'unknown'
    }
}

// ─── Tag editor (inline) ──────────────────────────────────────────────────────

function InlineTagEditor({ instanceId, initialTags }: { instanceId: string; initialTags: Ec2Tag[] }) {
    const qc = useQueryClient()
    const [rows, setRows] = useState<Ec2Tag[]>(initialTags)
    const [err, setErr] = useState('')

    const mutation = useMutation({
        mutationFn: ({ toAdd, toRemove }: { toAdd: Ec2Tag[]; toRemove: string[] }) =>
            updateEc2InstanceTags(instanceId, toAdd, toRemove),
        onSuccess: () => {
            void qc.invalidateQueries({ queryKey: ['ec2', 'instance', instanceId] })
            void qc.invalidateQueries({ queryKey: ['ec2', 'instances'] })
        },
        onError: (e) => setErr(e instanceof Error ? e.message : 'Save failed'),
    })

    function addRow() { setRows((prev) => [...prev, { key: '', value: '' }]) }
    function removeRow(idx: number) { setRows((prev) => prev.filter((_, i) => i !== idx)) }
    function setKey(idx: number, key: string) { setRows((prev) => prev.map((r, i) => i === idx ? { ...r, key } : r)) }
    function setValue(idx: number, value: string) { setRows((prev) => prev.map((r, i) => i === idx ? { ...r, value } : r)) }

    function handleSave() {
        const newTags = rows.filter((r) => r.key.trim())
        const newKeys = new Set(newTags.map((t) => t.key))
        const oldKeys = new Set(initialTags.map((t) => t.key))
        const toAdd = newTags.filter((t) => !oldKeys.has(t.key) || initialTags.find((ot) => ot.key === t.key)?.value !== t.value)
        const toRemove = initialTags.map((t) => t.key).filter((k) => !newKeys.has(k))
        setErr('')
        mutation.mutate({ toAdd, toRemove })
    }

    return (
        <div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
                {rows.map((tag, idx) => (
                    <div key={idx} className="field-row" style={{ gap: 4 }}>
                        <input
                            className="input"
                            placeholder="Key"
                            value={tag.key}
                            onChange={(e) => setKey(idx, e.target.value)}
                            style={{ flex: 1 }}
                        />
                        <input
                            className="input"
                            placeholder="Value"
                            value={tag.value}
                            onChange={(e) => setValue(idx, e.target.value)}
                            style={{ flex: 2 }}
                        />
                        <button className="icon-btn danger" onClick={() => removeRow(idx)} title="Remove">
                            <Trash2 size={12} />
                        </button>
                    </div>
                ))}
            </div>
            {err && <p style={{ fontSize: 11, color: 'var(--status-error)', margin: '0 0 6px' }}>{err}</p>}
            <div style={{ display: 'flex', gap: 6 }}>
                <button className="button compact" onClick={addRow}>
                    <Plus size={12} />
                    Add tag
                </button>
                <button className="button compact primary" onClick={handleSave} disabled={mutation.isPending}>
                    {mutation.isPending ? <Loader2 size={12} /> : <Save size={12} />}
                    Save tags
                </button>
            </div>
        </div>
    )
}

function InlineSecurityGroupEditor({ instanceId, vpcId, initialGroups }: {
    instanceId: string; vpcId?: string; initialGroups: Ec2SecurityGroupRef[]
}) {
    const qc = useQueryClient()
    const [selected, setSelected] = useState(() => new Set(initialGroups.map((group) => group.id).filter(Boolean) as string[]))
    const groups = useQuery({queryKey: ['ec2', 'security-groups', vpcId], queryFn: ({signal}) => listEc2SecurityGroups(vpcId, signal)})
    const mutation = useMutation({
        mutationFn: (groupIds: string[]) => updateEc2InstanceSecurityGroups(instanceId, groupIds),
        onSuccess: () => {
            void qc.invalidateQueries({queryKey: ['ec2', 'instance', instanceId]})
            void qc.invalidateQueries({queryKey: ['ec2', 'instances']})
            void qc.invalidateQueries({queryKey: ['cloud-resources', 'aws', 'compute']})
        },
    })
    const compatibleGroups = (groups.data ?? []).filter((group) => !vpcId || group.vpcId === vpcId)

    return <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
        {compatibleGroups.map((group) => <label key={group.groupId} style={{display: 'flex', gap: 6, alignItems: 'center'}}>
            <input type="checkbox" checked={selected.has(group.groupId)} onChange={(event) => {
                setSelected((previous) => {
                    const next = new Set(previous)
                    if (event.target.checked) next.add(group.groupId)
                    else next.delete(group.groupId)
                    return next
                })
            }}/>
            <span>{group.groupName} <code>{group.groupId}</code></span>
        </label>)}
        {groups.isError && <p className="error-text compact-text">Unable to load security groups.</p>}
        {mutation.isError && <p className="error-text compact-text">{mutation.error instanceof Error ? mutation.error.message : 'Save failed'}</p>}
        <button className="button primary compact" disabled={groups.isLoading || selected.size === 0 || mutation.isPending} onClick={() => mutation.mutate([...selected])}>
            <Save size={13}/>{mutation.isPending ? 'Saving' : 'Save security groups'}
        </button>
    </div>
}

// ─── Create AMI modal (inline) ────────────────────────────────────────────────

function CreateAmiModal({ instanceId, instanceName, onClose, onCreated }: {
    instanceId: string
    instanceName: string
    onClose: () => void
    onCreated: () => void
}) {
    const [name, setName] = useState(`${instanceName}-ami`)
    const [description, setDescription] = useState('')
    const [noReboot, setNoReboot] = useState(false)
    const [err, setErr] = useState('')

    const qc = useQueryClient()
    const mutation = useMutation({
        mutationFn: () => createEc2Ami(instanceId, {
            name: name.trim(),
            description: description || undefined,
            noReboot,
        }),
        onSuccess: () => {
            void qc.invalidateQueries({ queryKey: ['ec2', 'amis'] })
            onCreated()
            onClose()
        },
        onError: (e) => setErr(e instanceof Error ? e.message : 'AMI creation failed'),
    })

    function handleSubmit() {
        if (!name.trim()) { setErr('Name is required.'); return }
        setErr('')
        mutation.mutate()
    }

    return (
        <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose() }}>
            <div className="create-table-modal" style={{ maxWidth: 420 }}>
                <h3>Create AMI</h3>

                <div className="modal-section">
                    <p className="modal-section-title">Image name</p>
                    <input
                        className="input"
                        style={{ width: '100%', minWidth: 'unset' }}
                        autoFocus
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        onKeyDown={(e) => e.key === 'Escape' && onClose()}
                    />
                </div>

                <div className="modal-section">
                    <p className="modal-section-title">Description — optional</p>
                    <input
                        className="input"
                        style={{ width: '100%', minWidth: 'unset' }}
                        placeholder="e.g. production snapshot"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                    />
                </div>

                <div className="modal-section">
                    <div className="field-row" style={{ alignItems: 'center' }}>
                        <label className="toggle-switch" style={{ width: 32, height: 18 }}>
                            <input type="checkbox" checked={noReboot} onChange={(e) => setNoReboot(e.target.checked)} />
                            <span className="toggle-track" />
                        </label>
                        <p className="modal-section-title" style={{ margin: 0 }}>No reboot — skip instance restart before imaging</p>
                    </div>
                </div>

                {err && <p style={{ fontSize: 12, color: 'var(--status-error)', margin: '0 0 8px' }}>{err}</p>}

                <div className="modal-footer">
                    <button className="button" onClick={onClose} disabled={mutation.isPending}>Cancel</button>
                    <button
                        className="button primary"
                        onClick={handleSubmit}
                        disabled={!name.trim() || mutation.isPending}
                    >
                        {mutation.isPending ? <Loader2 size={13} /> : <HardDrive size={13} />}
                        Create AMI
                    </button>
                </div>
            </div>
        </div>
    )
}

// ─── Console output modal (inline) ───────────────────────────────────────────

function ConsoleOutputModal({ instanceId, onClose }: { instanceId: string; onClose: () => void }) {
    const query = useQuery({
        queryKey: ['ec2', 'console', instanceId],
        queryFn: ({ signal }) => getEc2ConsoleOutput(instanceId, signal),
    })

    return (
        <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose() }}>
            <div className="create-table-modal" style={{ maxWidth: 720, maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}>
                <h3 style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Terminal size={14} />
                    Console output — {instanceId}
                </h3>

                {query.isLoading && (
                    <p style={{ fontSize: 12, color: 'var(--text-2)' }}>Loading…</p>
                )}

                {query.isError && (
                    <p style={{ fontSize: 12, color: 'var(--status-error)' }}>
                        {query.error instanceof Error ? query.error.message : 'Failed to fetch console output.'}
                    </p>
                )}

                {query.data && (
                    <>
                        {query.data.timestamp && (
                            <p style={{ fontSize: 11, color: 'var(--text-2)', margin: '0 0 8px' }}>
                                As of {new Date(query.data.timestamp).toLocaleString()}
                            </p>
                        )}
                        <pre
                            className="mono"
                            style={{
                                flex: 1,
                                overflowY: 'auto',
                                background: 'var(--surface-2)',
                                padding: 12,
                                borderRadius: 4,
                                fontSize: 11,
                                margin: 0,
                                whiteSpace: 'pre-wrap',
                                wordBreak: 'break-all',
                            }}
                        >
                            {query.data.output || '(no output yet)'}
                        </pre>
                    </>
                )}

                <div className="modal-footer" style={{ marginTop: 12 }}>
                    <button className="button" onClick={onClose}>Close</button>
                </div>
            </div>
        </div>
    )
}

// ─── Deregister AMI confirm (inline) ─────────────────────────────────────────

function DeregisterAmiConfirm({ imageId, onConfirm, onCancel, isPending }: {
    imageId: string
    onConfirm: () => void
    onCancel: () => void
    isPending: boolean
}) {
    return (
        <div className="modal-overlay" onClick={onCancel}>
            <div className="create-table-modal" style={{ width: 380 }} onClick={(e) => e.stopPropagation()}>
                <div className="modal-header" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <AlertTriangle size={14} style={{ color: 'var(--status-error)', flexShrink: 0 }} />
                    <span>Deregister AMI</span>
                    <button className="icon-btn" style={{ marginLeft: 'auto' }} onClick={onCancel} aria-label="Close" title="Close">
                        <X size={13} />
                    </button>
                </div>
                <div className="modal-section">
                    <div style={{
                        background: 'var(--bg-secondary)',
                        border: '1px solid var(--border)',
                        borderRadius: 4,
                        padding: '8px 12px',
                        marginBottom: 12,
                    }}>
                        <div style={{ fontFamily: 'monospace', fontSize: 13 }}>{imageId}</div>
                    </div>
                    <p style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                        This will deregister the AMI. Associated snapshots are not deleted automatically.
                    </p>
                </div>
                <div className="modal-footer">
                    <button className="button" onClick={onCancel} disabled={isPending}>Cancel</button>
                    <button className="button danger" onClick={onConfirm} disabled={isPending}>
                        {isPending ? <Loader2 size={13} /> : <Trash2 size={13} />}
                        Deregister
                    </button>
                </div>
            </div>
        </div>
    )
}

// ─── Instance panel ───────────────────────────────────────────────────────────

function InstancePanel({ instanceId }: { instanceId: string }) {
    const qc = useQueryClient()
    const [tab, setTab] = useState<'details' | 'connection' | 'securityGroups' | 'tags' | 'console'>('details')
    const [showAmiModal, setShowAmiModal] = useState(false)
    const [showConsoleModal, setShowConsoleModal] = useState(false)
    const [terminateStep, setTerminateStep] = useState<'idle' | 'confirm'>('idle')

    const query = useQuery({
        queryKey: ['ec2', 'instance', instanceId],
        queryFn: ({ signal }) => describeEc2Instance(instanceId, signal),
        refetchInterval: (query) => {
            const state = query.state.data?.state
            if (state === 'pending' || state === 'stopping' || state === 'shutting-down') {
                return 1_500
            }
            const connection = query.state.data?.connection
            return connection?.launchStatus === 'in-progress' || connection?.sshStatus === 'initializing' ? 5_000 : false
        },
    })

    const invalidate = () => {
        void qc.invalidateQueries({ queryKey: ['ec2', 'instance', instanceId] })
        void qc.invalidateQueries({ queryKey: ['ec2', 'instances'] })
        void qc.invalidateQueries({ queryKey: ['cloud-resources', 'aws', 'compute'] })
    }

    const startMut = useMutation({
        mutationFn: () => startEc2Instance(instanceId),
        onSuccess: invalidate,
    })
    const stopMut = useMutation({
        mutationFn: () => stopEc2Instance(instanceId),
        onSuccess: invalidate,
    })
    const rebootMut = useMutation({
        mutationFn: () => rebootEc2Instance(instanceId),
        onSuccess: invalidate,
    })
    const terminateMut = useMutation({
        mutationFn: () => terminateEc2Instance(instanceId),
        onSuccess: () => {
            setTerminateStep('idle')
            invalidate()
        },
    })
    const sshCheck = useMutation({
        mutationFn: () => checkEc2InstanceSsh(instanceId),
    })

    if (query.isLoading) {
        return (
            <div className="empty compact">
                <Loader2 size={16} style={{ animation: 'spin 1s linear infinite' }} />
                <p>Loading instance…</p>
            </div>
        )
    }

    if (query.isError || !query.data) {
        return (
            <div className="empty compact">
                <p style={{ color: 'var(--status-error)' }}>
                    {query.error instanceof Error ? query.error.message : 'Failed to load instance'}
                </p>
            </div>
        )
    }

    const inst = query.data
    const state = inst.state ?? 'unknown'
    const canStart = state === 'stopped'
    const canStop = state === 'running'
    const canReboot = state === 'running'
    const canTerminate = state !== 'terminated' && state !== 'shutting-down'

    return (
        <>
            {showAmiModal && (
                <CreateAmiModal
                    instanceId={instanceId}
                    instanceName={inst.name}
                    onClose={() => setShowAmiModal(false)}
                    onCreated={() => void qc.invalidateQueries({ queryKey: ['ec2', 'amis'] })}
                />
            )}
            {showConsoleModal && (
                <ConsoleOutputModal
                    instanceId={instanceId}
                    onClose={() => setShowConsoleModal(false)}
                />
            )}

            <div className="widget">
                <div className="widget-header">
                    <h3>{inst.name || instanceId}</h3>
                    <span className={`status ${stateClass(state)}`}>{state}</span>
                    <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
                        <button
                            className="button compact"
                            disabled={!canStart || startMut.isPending}
                            onClick={() => startMut.mutate()}
                            title="Start"
                        >
                            <Play size={12} />
                            Start
                        </button>
                        <button
                            className="button compact"
                            disabled={!canStop || stopMut.isPending}
                            onClick={() => stopMut.mutate()}
                            title="Stop"
                        >
                            <Power size={12} />
                            Stop
                        </button>
                        <button
                            className="button compact"
                            disabled={!canReboot || rebootMut.isPending}
                            onClick={() => rebootMut.mutate()}
                            title="Reboot"
                        >
                            <RotateCcw size={12} />
                            Reboot
                        </button>
                        <button
                            className="button compact"
                            onClick={() => setShowAmiModal(true)}
                            title="Create AMI"
                        >
                            <HardDrive size={12} />
                            Create AMI
                        </button>
                        {canTerminate && terminateStep === 'idle' && (
                            <button
                                className="button compact danger"
                                onClick={() => setTerminateStep('confirm')}
                                title="Terminate"
                            >
                                <Trash2 size={12} />
                                Terminate
                            </button>
                        )}
                        {canTerminate && terminateStep === 'confirm' && (
                            <>
                                <button
                                    className="button compact danger"
                                    disabled={terminateMut.isPending}
                                    onClick={() => terminateMut.mutate()}
                                >
                                    {terminateMut.isPending ? <Loader2 size={12} /> : null}
                                    Confirm terminate
                                </button>
                                <button
                                    className="button compact"
                                    onClick={() => setTerminateStep('idle')}
                                >
                                    Cancel
                                </button>
                            </>
                        )}
                        <button
                            className="button compact"
                            disabled={query.isFetching}
                            onClick={() => query.refetch()}
                        >
                            <RefreshCw size={12} />
                        </button>
                    </div>
                </div>

                {/* Tabs */}
                <div className="sns-tabs">
                    <button
                        className={`sns-tab${tab === 'details' ? ' active' : ''}`}
                        onClick={() => setTab('details')}
                    >
                        Details
                    </button>
                    <button
                        className={`sns-tab${tab === 'connection' ? ' active' : ''}`}
                        onClick={() => setTab('connection')}
                    >
                        Connect
                    </button>
                    <button
                        className={`sns-tab${tab === 'securityGroups' ? ' active' : ''}`}
                        onClick={() => setTab('securityGroups')}
                    >
                        Security groups
                    </button>
                    <button
                        className={`sns-tab${tab === 'tags' ? ' active' : ''}`}
                        onClick={() => setTab('tags')}
                    >
                        Tags
                    </button>
                    <button
                        className={`sns-tab${tab === 'console' ? ' active' : ''}`}
                        onClick={() => { setTab('console'); setShowConsoleModal(true) }}
                    >
                        Console
                    </button>
                </div>

                <div className="widget-body">
                    {tab === 'details' && (
                        <div className="meta-grid">
                            <div className="meta-row">
                                <span className="meta-label">Instance ID</span>
                                <span className="meta-value" style={{ fontFamily: 'monospace' }}>{inst.instanceId}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Type</span>
                                <span className="meta-value">{inst.instanceType ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">AMI</span>
                                <span className="meta-value" style={{ fontFamily: 'monospace', fontSize: 11 }}>{inst.imageId ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Key pair</span>
                                <span className="meta-value">{inst.keyName ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Architecture</span>
                                <span className="meta-value">{inst.architecture ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Platform</span>
                                <span className="meta-value">{inst.platform ?? 'Linux'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Launch time</span>
                                <span className="meta-value" style={{ color: '#8d9cad' }}>{inst.launchTime ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Availability zone</span>
                                <span className="meta-value">{inst.availabilityZone ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Public IP</span>
                                <span className="meta-value" style={{ fontFamily: 'monospace' }}>{inst.publicIpAddress ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Private IP</span>
                                <span className="meta-value" style={{ fontFamily: 'monospace' }}>{inst.privateIpAddress ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">VPC</span>
                                <span className="meta-value" style={{ fontFamily: 'monospace', fontSize: 11 }}>{inst.vpcId ?? '—'}</span>
                            </div>
                            <div className="meta-row">
                                <span className="meta-label">Subnet</span>
                                <span className="meta-value" style={{ fontFamily: 'monospace', fontSize: 11 }}>{inst.subnetId ?? '—'}</span>
                            </div>
                            {inst.securityGroups.length > 0 && (
                                <div className="meta-row">
                                    <span className="meta-label">Security groups</span>
                                    <span className="meta-value">
                                        {inst.securityGroups.map((sg) => sg.name ?? sg.id ?? '').join(', ')}
                                    </span>
                                </div>
                            )}
                            {inst.networkInterfaces.length > 0 && (
                                <div className="meta-row" style={{ gridColumn: '1 / -1', alignItems: 'start' }}>
                                    <span className="meta-label">Network interfaces</span>
                                    <span className="meta-value" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                                        {inst.networkInterfaces.map((networkInterface) => (
                                            <span key={networkInterface.networkInterfaceId} style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                                                <code>{networkInterface.networkInterfaceId}</code>
                                                {networkInterface.deviceIndex !== undefined && <span>device {networkInterface.deviceIndex}</span>}
                                                {networkInterface.status && <span>{networkInterface.status}</span>}
                                                {networkInterface.privateIpAddress && <span>private {networkInterface.privateIpAddress}</span>}
                                                {networkInterface.publicIpAddress && <span>public {networkInterface.publicIpAddress}</span>}
                                            </span>
                                        ))}
                                    </span>
                                </div>
                            )}
                        </div>
                    )}

                    {tab === 'connection' && (() => {
                        const connection = inst.connection
                        const sshUser = connection?.sshUser || 'root'
                        const command = connection?.sshHost && connection.sshPort && inst.keyName
                            ? `ssh -i ${inst.keyName}.pem -p ${connection.sshPort} ${sshUser}@${connection.sshHost}`
                            : undefined
                        if (!connection) {
                            return <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>Connection diagnostics are unavailable.</p>
                        }
                        const canCheckSsh = state === 'running' && connection.containerStatus === 'running'
                            && Boolean(connection.sshPort)
                        const failure = typeof connection.failure === 'string'
                            ? connection.failure
                            : connection.failure?.message
                        const launchPending = connection.launchStatus === 'in-progress'
                        const sshPending = connection.sshStatus === 'initializing'
                        const keyInjected = connection.keyInjectionStatus === 'succeeded' || connection.keyInjectionStatus === 'ok'
                        return <div className="ec2-connect-panel">
                            {!canCheckSsh && <div className="ec2-connection-notice">
                                {state === 'terminated'
                                    ? 'This instance is terminated. Launch diagnostics remain available below.'
                                    : state === 'stopped'
                                        ? 'Start this instance before connecting over SSH.'
                                        : `SSH is unavailable while this instance is ${state}.`}
                            </div>}
                            <div className="ec2-readiness-grid">
                                <div className="ec2-readiness-card">
                                    <div className="ec2-readiness-heading"><span>Launch</span><LaunchGear active={launchPending}/></div>
                                    <strong className={connection.launchStatus === 'failed' ? 'error' : ''}>{connection.launchStatus ?? 'unknown'}</strong>
                                    <small>{connection.selectedImageReference ?? 'No selected image recorded'}</small>
                                </div>
                                <div className="ec2-readiness-card">
                                    <div className="ec2-readiness-heading"><span>SSH readiness</span><SshHeartbeat active={sshPending}/></div>
                                    <strong className={connection.sshStatus === 'impaired' ? 'error' : ''}>{connection.sshStatus ?? 'unknown'}</strong>
                                    <small>{connection.sshStatusMessage ?? 'No readiness result recorded'}</small>
                                </div>
                                <div className="ec2-readiness-card">
                                    <div className="ec2-readiness-heading"><span>Key injection</span>{keyInjected && <KeyInjectionReady/>}</div>
                                    <strong>{connection.keyInjectionStatus ?? (inst.keyName ? 'unknown' : 'not requested')}</strong>
                                    <small>{inst.keyName ?? 'No key pair selected'}</small>
                                </div>
                            </div>

                            {failure && <div className="ec2-connect-error"><AlertTriangle size={14}/><span>{failure}</span></div>}

                            <div className="meta-grid ec2-connect-details">
                                <div className="meta-row"><span className="meta-label">SSH target</span><span className="meta-value">{connection.sshPort ? `${connection.sshHost}:${connection.sshPort}` : 'Not published'}</span></div>
                                <div className="meta-row"><span className="meta-label">Backing container</span><span className="meta-value">{connection.containerStatus}</span></div>
                                <div className="meta-row"><span className="meta-label">Image source</span><span className="meta-value">{connection.selectedImageType ?? 'unknown'}</span></div>
                                <div className="meta-row"><span className="meta-label">Init / SSH service</span><span className="meta-value">{connection.initType ?? 'unknown'} / {connection.sshServiceName ?? 'unknown'}</span></div>
                                {command && <div className="meta-row ec2-command-row"><span className="meta-label">Command</span><code>{command}</code><CopyValueButton value={command} label="SSH command" /></div>}
                            </div>

                            {canCheckSsh && <div className="ec2-ssh-check">
                                <div>
                                    <strong>Live SSH banner check</strong>
                                    <p>Runs from the UI backend, using the published diagnostic port.</p>
                                </div>
                                <button className="button compact primary" disabled={sshCheck.isPending} onClick={() => sshCheck.mutate()}>
                                    {sshCheck.isPending ? <Loader2 size={12} className="spin"/> : <Terminal size={12}/>}
                                    {sshCheck.isPending ? 'Checking' : 'Check SSH'}
                                </button>
                            </div>}
                            {sshCheck.isSuccess && <div className="ec2-check-result success">
                                <strong>{sshCheck.data.banner}</strong>
                                <span>Checked from {sshCheck.data.checkedFrom} at {new Date(sshCheck.data.checkedAt).toLocaleString()}</span>
                                <span>{sshCheck.data.target.host}:{sshCheck.data.target.port}</span>
                            </div>}
                            {sshCheck.isError && <div className="ec2-check-result error">
                                <strong>SSH check failed</strong>
                                <span>{sshCheck.error instanceof Error ? sshCheck.error.message : 'Unable to verify SSH'}</span>
                            </div>}

                            {(connection.launchEvents?.length ?? 0) > 0 && <div className="ec2-launch-timeline">
                                <h4>Launch timeline</h4>
                                {connection.launchEvents?.map((event, index) => <div className="ec2-launch-event" key={`${event.timestamp ?? 'event'}-${index}`}>
                                    <span className={`ec2-event-dot ${event.status ?? 'unknown'}`}/>
                                    <div><strong>{event.stage ?? 'Launch event'}</strong><small>{event.message ?? event.status ?? 'Recorded'}</small></div>
                                    <time>{event.timestamp ? new Date(event.timestamp).toLocaleTimeString() : ''}</time>
                                </div>)}
                            </div>}
                        </div>
                    })()}

                    {tab === 'tags' && (
                        <InlineTagEditor instanceId={instanceId} initialTags={inst.tags} />
                    )}

                    {tab === 'securityGroups' && (
                        <InlineSecurityGroupEditor instanceId={instanceId} vpcId={inst.vpcId} initialGroups={inst.securityGroups}/>
                    )}

                    {tab === 'console' && (
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                            <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>
                                Open the console output modal to view system logs.
                            </p>
                            <button
                                className="button"
                                onClick={() => setShowConsoleModal(true)}
                                style={{ alignSelf: 'flex-start' }}
                            >
                                <Terminal size={13} />
                                View console output
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </>
    )
}

function LaunchGear({active}: {active: boolean}) {
    return <img className={`ec2-launch-cpu${active ? ' active' : ''}`} src={ec2CpuAnimation} alt="Animated instance CPU"/>
}

function SshHeartbeat({active}: {active: boolean}) {
    return <svg className={`ec2-ssh-heartbeat${active ? ' active' : ''}`} viewBox="0 0 100 32" aria-hidden="true">
        <path d="M2 17h16l6-11 9 22 10-17 6 6h49"/>
    </svg>
}

function KeyInjectionReady() {
    return <svg className="ec2-key-ready" viewBox="0 0 150 150" aria-label="Key injected">
        <rect x="12" y="13" width="126" height="125" rx="9" fill="#f4f1f7" stroke="#19152d" strokeWidth="3"/>
        <path d="M12 33V22a9 9 0 0 1 9-9h108a9 9 0 0 1 9 9v11Z" fill="#393044"/>
        <circle cx="24" cy="23" r="3" fill="#ff5a36"/><circle cx="35" cy="23" r="3" fill="#ffc33a"/><circle cx="46" cy="23" r="3" fill="#62c9aa"/>
        <path d="M63 62v-6c0-7 5-11 12-11s12 4 12 11v6" fill="none" stroke="#19152d" strokeWidth="2.6"/>
        <path d="M57 62h36v17c0 6-5 10-10 10H67c-5 0-10-4-10-10Z" fill="#ffc33a" stroke="#19152d" strokeWidth="2.6"/>
        <path d="M75 71v7" stroke="#19152d" strokeWidth="2.6" strokeLinecap="round"/>
        <rect x="34" y="100" width="79" height="24" rx="12" fill="#45b5fa" stroke="#19152d" strokeWidth="2.6"/>
        <circle cx="51" cy="112" r="1.8" fill="#19152d"/><circle cx="66" cy="112" r="1.8" fill="#19152d"/><circle cx="81" cy="112" r="1.8" fill="#19152d"/><circle cx="96" cy="112" r="1.8" fill="#19152d"/>
    </svg>
}

// ─── AMI panel ────────────────────────────────────────────────────────────────

function AmiPanel({ imageId }: { imageId: string }) {
    const qc = useQueryClient()
    const [showDeregister, setShowDeregister] = useState(false)

    const deregisterMut = useMutation({
        mutationFn: () => deregisterEc2Ami(imageId),
        onSuccess: () => {
            void qc.invalidateQueries({ queryKey: ['ec2', 'amis'] })
            void qc.invalidateQueries({ queryKey: ['ec2', 'instances'] })
            setShowDeregister(false)
        },
    })

    return (
        <>
            {showDeregister && (
                <DeregisterAmiConfirm
                    imageId={imageId}
                    onConfirm={() => deregisterMut.mutate()}
                    onCancel={() => setShowDeregister(false)}
                    isPending={deregisterMut.isPending}
                />
            )}

            <div className="widget">
                <div className="widget-header">
                    <h3>{imageId}</h3>
                    <div style={{ marginLeft: 'auto' }}>
                        <button
                            className="button danger compact"
                            onClick={() => setShowDeregister(true)}
                        >
                            <Trash2 size={12} />
                            Deregister
                        </button>
                    </div>
                </div>
                <div className="widget-body">
                    <div className="meta-grid">
                        <div className="meta-row">
                            <span className="meta-label">Image ID</span>
                            <span className="meta-value" style={{ fontFamily: 'monospace' }}>{imageId}</span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

// ─── ComputePanel ─────────────────────────────────────────────────────────────

export function ComputePanel({ cloud, resource, runtimeReachable }: ComputePanelProps) {
    if (cloud !== 'aws' || !runtimeReachable || !resource) {
        return null
    }

    if (resource.type === 'instance') {
        return <InstancePanel instanceId={resource.id} />
    }

    if (resource.type === 'image') {
        return <AmiPanel imageId={resource.id} />
    }

    return (
        <div className="empty compact">
            <p>Unsupported resource type: {resource.type}</p>
        </div>
    )
}

// ─── LaunchInstanceForm ────────────────────────────────────────────────────────

type InboundRule = { id: string; protocol: string; portInput: string; cidr: string }

type LaunchStep = 1 | 2 | 3 | 4

type AmiFamily = 'alpine' | 'amazon-linux' | 'fedora' | 'ubuntu' | 'red-hat' | 'debian' | 'suse' | 'other'

type AmiClassification = { family: AmiFamily; label: string; mark: string; color: string }

function classifyAmi(ami: Ec2Image): AmiClassification {
    const metadata = `${ami.name} ${ami.description ?? ''} ${ami.platform ?? ''}`.toLowerCase()
    if (metadata.includes('alpine')) return { family: 'alpine', label: 'Alpine', mark: 'A', color: '#0d597f' }
    if (metadata.includes('ubuntu')) return { family: 'ubuntu', label: 'Ubuntu', mark: 'U', color: '#e95420' }
    if (metadata.includes('amazon linux') || metadata.includes('amzn')) return { family: 'amazon-linux', label: 'Amazon Linux', mark: 'A', color: '#ff9900' }
    if (metadata.includes('fedora')) return { family: 'fedora', label: 'Fedora', mark: 'F', color: '#51a2da' }
    if (metadata.includes('red hat') || metadata.includes('rhel')) return { family: 'red-hat', label: 'Red Hat', mark: 'R', color: '#ee0000' }
    if (metadata.includes('debian')) return { family: 'debian', label: 'Debian', mark: 'D', color: '#a80030' }
    if (metadata.includes('suse')) return { family: 'suse', label: 'SUSE', mark: 'S', color: '#30ba78' }
    return { family: 'other', label: ami.platform || 'Other', mark: '?', color: 'var(--text-2)' }
}

const QUICK_START_AMIS: Array<{ family: Exclude<AmiFamily, 'other'>; label: string; image: string; preferredImageId?: string }> = [
    { family: 'alpine', label: 'Alpine', image: alpineImage, preferredImageId: 'ami-alpine' },
    { family: 'amazon-linux', label: 'Amazon Linux 2023', image: amazonLinuxImage, preferredImageId: 'ami-0abcdef1234567891' },
    { family: 'fedora', label: 'Fedora', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Crect width="64" height="64" rx="8" fill="%2351a2da"/%3E%3Ctext x="32" y="43" text-anchor="middle" font-family="Arial" font-size="34" font-weight="bold" fill="white"%3EF%3C/text%3E%3C/svg%3E' },
    { family: 'ubuntu', label: 'Ubuntu', image: ubuntuImage },
    { family: 'suse', label: 'openSUSE', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Crect width="64" height="64" rx="8" fill="%2330ba78"/%3E%3Ctext x="32" y="43" text-anchor="middle" font-family="Arial" font-size="30" font-weight="bold" fill="white"%3ES%3C/text%3E%3C/svg%3E' },
    { family: 'red-hat', label: 'Red Hat', image: redHatImage },
    { family: 'debian', label: 'Debian 12', image: debianImage, preferredImageId: 'ami-debian12' },
]

const SG_PRESETS: Array<{ label: string; protocol: string; portInput: string; cidr: string }> = [
    { label: 'SSH',   protocol: 'tcp',  portInput: '22',  cidr: '0.0.0.0/0' },
    { label: 'HTTP',  protocol: 'tcp',  portInput: '80',  cidr: '0.0.0.0/0' },
    { label: 'HTTPS', protocol: 'tcp',  portInput: '443', cidr: '0.0.0.0/0' },
    { label: 'All',   protocol: '-1',   portInput: '',    cidr: '0.0.0.0/0' },
]

function parseRule(rule: InboundRule): IpPermissionInput {
    if (rule.protocol === '-1' || rule.protocol === 'icmp') {
        return { protocol: rule.protocol, fromPort: -1, toPort: -1, cidr: rule.cidr }
    }
    const parts = rule.portInput.split('-').map((s) => parseInt(s.trim(), 10))
    const fromPort = isNaN(parts[0]) ? 0 : parts[0]
    const toPort   = parts.length > 1 && !isNaN(parts[1]) ? parts[1] : fromPort
    return { protocol: rule.protocol, fromPort, toPort, cidr: rule.cidr }
}

const X86_INSTANCE_TYPES = [
    't2.micro', 't2.small', 't2.medium',
    't3.micro', 't3.small', 't3.medium', 't3.large', 't3.xlarge',
    'm5.large', 'm5.xlarge',
    'c5.large', 'c5.xlarge',
]
const ARM_INSTANCE_TYPES = ['t4g.micro', 't4g.small', 't4g.medium', 'm6gd.large', 'm6gd.2xlarge', 'm7gd.large', 'm7gd.2xlarge', 'm8gd.medium', 'm8gd.large', 'm8gd.2xlarge']

export function LaunchInstanceForm({
    cloud,
    selectedResource,
    onSuccess,
    onCancel,
}: {
    cloud: CloudProvider
    selectedResource?: CloudResource
    onSuccess: (resource: CloudResource) => void
    onCancel: () => void
}) {
    const qc = useQueryClient()
    const [step, setStep] = useState<LaunchStep>(1)
    const [stepError, setStepError] = useState('')
    const [name, setName] = useState('')
    const [imageId, setImageId] = useState(selectedResource?.type === 'image' ? selectedResource.id : '')
    const [architectureFilter, setArchitectureFilter] = useState('')
    const [amiSearch, setAmiSearch] = useState('')
    const [showAmiBrowser, setShowAmiBrowser] = useState(false)
    const [instanceType, setInstanceType] = useState('t3.micro')
    const [keyName, setKeyName] = useState('')
    const [keyPairMode, setKeyPairMode] = useState<'existing' | 'new'>('existing')
    const [newKeyName, setNewKeyName] = useState('')
    const [newKeyType, setNewKeyType] = useState<'rsa' | 'ed25519'>('rsa')
    const [createdKeyMaterial, setCreatedKeyMaterial] = useState<{ name: string; material: string }>()
    const [rootVolumeSize, setRootVolumeSize] = useState('20')
    const [rootVolumeType, setRootVolumeType] = useState('gp3')
    const [userData, setUserData] = useState('')
    const [subnetId, setSubnetId] = useState('')
    const [selectedSgs, setSelectedSgs] = useState<string[]>([])
    const [showCreateSg, setShowCreateSg] = useState(false)
    const [newSgName, setNewSgName] = useState('')
    const [newSgDesc, setNewSgDesc] = useState('')
    const [newSgVpc, setNewSgVpc] = useState('')
    const [inboundRules, setInboundRules] = useState<InboundRule[]>([])

    function addRule(protocol = 'tcp', portInput = '', cidr = '0.0.0.0/0') {
        setInboundRules((prev) => [...prev, { id: Math.random().toString(36).slice(2), protocol, portInput, cidr }])
    }
    function removeRule(id: string) {
        setInboundRules((prev) => prev.filter((r) => r.id !== id))
    }
    function updateRule(id: string, patch: Partial<Omit<InboundRule, 'id'>>) {
        setInboundRules((prev) => prev.map((r) => r.id === id ? { ...r, ...patch } : r))
    }

    const amisQ = useQuery({ queryKey: ['ec2', 'amis'],            queryFn: ({ signal }) => listEc2Amis(signal) })
    const keysQ = useQuery({ queryKey: ['ec2', 'key-pairs'],       queryFn: ({ signal }) => listEc2KeyPairs(signal) })
    const vpcsQ = useQuery({ queryKey: ['ec2', 'vpcs'],            queryFn: ({ signal }) => listEc2Vpcs(signal) })
    const subsQ = useQuery({ queryKey: ['ec2', 'subnets'],         queryFn: ({ signal }) => listEc2Subnets(undefined, signal) })
    const sgsQ  = useQuery({ queryKey: ['ec2', 'security-groups'], queryFn: ({ signal }) => listEc2SecurityGroups(undefined, signal) })
    const selectedSubnet = (subsQ.data ?? []).find((subnet) => subnet.subnetId === subnetId)

    useEffect(() => {
        if (!selectedSubnet) {
            return
        }
        const compatibleGroupIds = new Set((sgsQ.data ?? [])
            .filter((group) => group.vpcId === selectedSubnet.vpcId)
            .map((group) => group.groupId))
        setSelectedSgs((current) => {
            const compatible = current.filter((groupId) => compatibleGroupIds.has(groupId))
            if (compatible.length !== current.length) {
                setStepError('Security groups from another VPC were removed. Select groups in the subnet VPC.')
            }
            return compatible
        })
    }, [selectedSubnet, sgsQ.data])

    const createMut = useMutation({
        mutationFn: async (values: Record<string, unknown>) => {
            const startedAt = Date.now()
            const created = await createCloudResource(cloud, 'compute', values)
            const remaining = EC2_LAUNCH_MINIMUM_MS - (Date.now() - startedAt)
            if (remaining > 0) {
                await new Promise<void>((resolve) => setTimeout(resolve, remaining))
            }
            return created
        },
        onSuccess: (created) => {
            void qc.invalidateQueries({ queryKey: ['cloud-resources', cloud, 'compute'] })
            onSuccess(created)
        },
    })

    const createKeyMut = useMutation({
        mutationFn: () => createEc2KeyPair(newKeyName.trim(), newKeyType),
        onSuccess: (keyPair) => {
            setKeyName(keyPair.keyName)
            setCreatedKeyMaterial({ name: keyPair.keyName, material: keyPair.keyMaterial })
            void qc.invalidateQueries({ queryKey: ['ec2', 'key-pairs'] })
        },
    })

    const createSgMut = useMutation({
        mutationFn: async (vars: {name: string; desc: string; vpc: string; rules: InboundRule[]}) => {
            const { groupId } = await createEc2SecurityGroup(vars.name, vars.desc || vars.name, vars.vpc || undefined)
            for (const rule of vars.rules) {
                await authorizeEc2SecurityGroupIngress(groupId, parseRule(rule))
            }
            return { groupId }
        },
        onSuccess: ({ groupId }, vars) => {
            // Optimistically insert into cache — do NOT invalidate immediately;
            // invalidation races the AWS propagation window and overwrites
            // the entry with a server list that doesn't yet include the new SG.
            qc.setQueryData(['ec2', 'security-groups'], (old: Ec2SecurityGroup[] | undefined) => [
                ...(old ?? []),
                {
                    groupId,
                    groupName: vars.name,
                    description: vars.desc || vars.name,
                    vpcId: vars.vpc || undefined,
                    inboundRules: [],
                    outboundRules: [],
                    tags: [],
                } satisfies Ec2SecurityGroup,
            ])
            setSelectedSgs((prev) => [...prev, groupId])
            setShowCreateSg(false)
            setNewSgName('')
            setNewSgDesc('')
            setNewSgVpc('')
            setInboundRules([])
        },
    })

    function toggleSg(groupId: string, checked: boolean) {
        setSelectedSgs((prev) => checked ? [...prev, groupId] : prev.filter((id) => id !== groupId))
    }

    function launch() {
        const hasIncompatibleSecurityGroup = selectedSubnet && selectedSgs.some((groupId) =>
            !(sgsQ.data ?? []).some((group) => group.groupId === groupId && group.vpcId === selectedSubnet.vpcId))
        if (hasIncompatibleSecurityGroup) {
            setStep(3)
            setStepError('Security groups must belong to the selected subnet VPC.')
            return
        }
        createMut.mutate({
            name,
            imageId,
            instanceType,
            keyName:          keyName    || undefined,
            subnetId:         subnetId   || undefined,
            securityGroupIds: selectedSgs.length ? selectedSgs.join(',') : undefined,
            rootVolumeSize,
            rootVolumeType,
            userData: userData || undefined,
        })
    }

    function nextStep() {
        if (step === 1 && (!name.trim() || !imageId)) {
            setStepError('Enter an instance name and select an AMI to continue.')
            return
        }
        if (step === 2 && keyPairMode === 'new' && !keyName) {
            setStepError('Create the new key pair before continuing, or choose an existing key pair.')
            return
        }
        setStepError('')
        setStep((current) => Math.min(4, current + 1) as LaunchStep)
    }

    function downloadPrivateKey() {
        if (!createdKeyMaterial) return
        const href = URL.createObjectURL(new Blob([createdKeyMaterial.material], { type: 'application/x-pem-file' }))
        const link = document.createElement('a')
        link.href = href
        link.download = `${createdKeyMaterial.name}.pem`
        link.click()
        URL.revokeObjectURL(href)
    }

    const vpcs        = vpcsQ.data ?? []
    const subnets     = subsQ.data ?? []
    const groupByVpc  = vpcs.length > 2

    function vpcLabel(vpc: Ec2Vpc): string {
        const tag = vpc.tags.find((t: Ec2Tag) => t.key === 'Name')?.value
        return tag ? `${tag} (${vpc.vpcId})` : vpc.vpcId
    }

    const amis = amisQ.data ?? []
    const architectures = [...new Set(amis.map((ami) => ami.architecture).filter((architecture): architecture is string => Boolean(architecture)))].sort()
    const filteredAmis = amis.filter((ami) => !architectureFilter || ami.architecture === architectureFilter)
    const quickStartAmis = QUICK_START_AMIS.map((catalogAmi) => ({
        ...catalogAmi,
        ami: filteredAmis.find((candidate) => candidate.imageId === catalogAmi.preferredImageId)
            ?? filteredAmis.find((candidate) => classifyAmi(candidate).family === catalogAmi.family),
    }))
    const quickStartImageIds = new Set(quickStartAmis.flatMap((catalogAmi) => catalogAmi.ami ? [catalogAmi.ami.imageId] : []))
    const normalizedAmiSearch = amiSearch.trim().toLowerCase()
    const visibleQuickStartAmis = quickStartAmis.filter((catalogAmi) => {
        const searchable = `${catalogAmi.label} ${catalogAmi.ami?.imageId ?? ''} ${catalogAmi.ami?.name ?? ''} ${catalogAmi.ami?.description ?? ''}`.toLowerCase()
        return !normalizedAmiSearch || searchable.includes(normalizedAmiSearch)
    })
    const browsableAmis = filteredAmis.filter((ami) => {
        const searchable = `${ami.imageId} ${ami.name} ${ami.description ?? ''} ${classifyAmi(ami).label}`.toLowerCase()
        return !quickStartImageIds.has(ami.imageId) && (!normalizedAmiSearch || searchable.includes(normalizedAmiSearch))
    })
    const selectedAmi = amis.find((ami) => ami.imageId === imageId)
    const compatibleInstanceTypes = selectedAmi?.architecture === 'arm64' ? ARM_INSTANCE_TYPES : X86_INSTANCE_TYPES
    const selectedGroups = (sgsQ.data ?? []).filter((group) => selectedSgs.includes(group.groupId))
    const availableSecurityGroups = (sgsQ.data ?? []).filter((group) => !selectedSubnet || group.vpcId === selectedSubnet.vpcId)

    useEffect(() => {
        if (!compatibleInstanceTypes.includes(instanceType)) {
            setInstanceType(compatibleInstanceTypes[0])
        }
    }, [compatibleInstanceTypes, instanceType])
    const steps: Array<{ number: LaunchStep; label: string }> = [
        { number: 1, label: 'Name and AMI' },
        { number: 2, label: 'Instance and key pair' },
        { number: 3, label: 'Network and security' },
        { number: 4, label: 'Storage and review' },
    ]

    return (
        <form className="launch-form ec2-launch-form" aria-label="Launch instance wizard" onSubmit={(event) => { event.preventDefault(); if (step === 4) launch() }}>
            <header className="launch-form-header">
                <div><p className="eyebrow">EC2 compute</p><h3>Launch an instance</h3><p className="muted compact-text">Choose an image, configure access and networking, then review the instance before launch.</p></div>
                <span>4-step setup</span>
            </header>
            <nav className="launch-stepper" aria-label="Launch steps">
                {steps.map((item) => (
                    <button key={item.number} type="button" className={step === item.number ? 'active' : ''} onClick={() => item.number < step && setStep(item.number)} disabled={item.number > step}>
                        <b>{item.number}</b><span>{item.label}</span>
                    </button>
                ))}
            </nav>

            {step === 1 && <section className="launch-form-section">
                <div className="launch-section-title"><Server size={17}/><div><h4>Instance identity</h4><p>Name the instance and select its operating system image.</p></div></div>
                <div className="launch-form-grid">
                <label className="launch-field launch-field--span">
                    <span>Instance name <em className="field-required">*</em></span>
                    <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. my-web-server" />
                </label>
                <label className="launch-field">
                    <span>Architecture</span>
                    <select className="input" value={architectureFilter} onChange={(e) => { setArchitectureFilter(e.target.value); setImageId('') }}>
                        <option value="">All architectures</option>
                        {architectures.map((architecture) => <option key={architecture} value={architecture}>{architecture}</option>)}
                    </select>
                </label>
                <div className="launch-field launch-field--span">
                    <span>Amazon Machine Image <em className="field-required">*</em></span>
                    <div className="ami-catalog">
                        <div className="ami-search">
                            <Search size={15} aria-hidden="true" />
                            <input className="input" value={amiSearch} onChange={(e) => { setAmiSearch(e.target.value); setShowAmiBrowser(Boolean(e.target.value)) }} placeholder="Search AMIs" aria-label="Search available AMIs" />
                        </div>
                        {amisQ.isLoading && <span className="muted">Loading AMIs…</span>}
                        {!amisQ.isLoading && <>
                            <div className="ami-catalog-heading">Quick Start</div>
                            <div className="ami-quick-start-grid">
                                {visibleQuickStartAmis.map((catalogAmi) => (
                                    <button
                                        key={catalogAmi.family}
                                        type="button"
                                        className={`ami-quick-start-tile${imageId === catalogAmi.ami?.imageId ? ' selected' : ''}${catalogAmi.ami ? '' : ' unavailable'}`}
                                        disabled={!catalogAmi.ami}
                                        onClick={() => { if (catalogAmi.ami) { setImageId(catalogAmi.ami.imageId); setArchitectureFilter(catalogAmi.ami.architecture ?? '') } }}
                                        title={catalogAmi.ami ? catalogAmi.ami.name || catalogAmi.ami.imageId : `No local ${catalogAmi.label} AMI is available`}
                                    >
                                        <img src={catalogAmi.image} alt="" />
                                        <span>{catalogAmi.label}</span>
                                        <small>{catalogAmi.ami?.architecture || 'No local AMI'}</small>
                                    </button>
                                ))}
                            </div>
                        </>}
                        {!amisQ.isLoading && amis.length === 0 && <span className="muted">No AMIs are available.</span>}
                        {!amisQ.isLoading && amis.length > 0 && <>
                            <button type="button" className="ami-browser-toggle" onClick={() => setShowAmiBrowser((visible) => !visible)}>
                                {showAmiBrowser ? 'Hide available AMIs' : 'Browse available AMIs'}
                            </button>
                            {showAmiBrowser && <div className="ami-browser-list">
                                {browsableAmis.map((ami) => {
                                    const distro = classifyAmi(ami)
                                    return <label key={ami.imageId} className="ami-browser-item">
                                        <input type="radio" name="ami" checked={imageId === ami.imageId} onChange={() => { setImageId(ami.imageId); setArchitectureFilter(ami.architecture ?? '') }} />
                                        <span><b style={{ background: distro.color }}>{distro.mark}</b>{ami.name || ami.imageId}</span>
                                        <code>{ami.imageId} · {distro.label}</code>
                                    </label>
                                })}
                                {browsableAmis.length === 0 && <span className="muted">No additional AMIs match this search and architecture.</span>}
                            </div>}
                        </>}
                    </div>
                </div>
                </div>
            </section>}

            {step === 2 && <section className="launch-form-section">
                <div className="launch-section-title"><Cpu size={17}/><div><h4>Compute and access</h4><p>Choose the instance capacity and SSH credentials.</p></div></div>
                <div className="launch-form-grid">
                <label className="launch-field">
                    <span>Instance type <em className="field-required">*</em></span>
                    <select className="input" value={instanceType} onChange={(e) => setInstanceType(e.target.value)}>
                        {compatibleInstanceTypes.map((type) => <option key={type} value={type}>{type}</option>)}
                    </select>
                    {selectedAmi?.architecture === 'arm64' && <small>ARM64 AMIs require Graviton instance types.</small>}
                </label>
                <div className="launch-field launch-field--span">
                    <span>Key pair</span>
                    <div className="launch-choice-row">
                        <label><input type="radio" checked={keyPairMode === 'existing'} onChange={() => setKeyPairMode('existing')} /> Choose existing</label>
                        <label><input type="radio" checked={keyPairMode === 'new'} onChange={() => { setKeyPairMode('new'); setKeyName('') }} /> Create new</label>
                    </div>
                    {keyPairMode === 'existing' ? (
                        <select className="input" value={keyName} onChange={(e) => setKeyName(e.target.value)}>
                            <option value="">No key pair</option>
                            {(keysQ.data ?? []).map((keyPair: Ec2KeyPair) => <option key={keyPair.keyPairId} value={keyPair.keyName}>{keyPair.keyName}</option>)}
                        </select>
                    ) : <div className="launch-key-create">
                        <input className="input" value={newKeyName} onChange={(e) => { setNewKeyName(e.target.value); setKeyName('') }} placeholder="Key pair name" />
                        <select className="input" value={newKeyType} onChange={(e) => setNewKeyType(e.target.value as 'rsa' | 'ed25519')}><option value="rsa">RSA</option><option value="ed25519">ED25519</option></select>
                        <button type="button" className="button" disabled={!newKeyName.trim() || createKeyMut.isPending} onClick={() => createKeyMut.mutate()}>{createKeyMut.isPending ? 'Creating…' : 'Create key pair'}</button>
                        {createdKeyMaterial && <button type="button" className="button primary" onClick={downloadPrivateKey}>Download {createdKeyMaterial.name}.pem</button>}
                    </div>}
                    {createKeyMut.error instanceof Error && <p className="form-error" style={{ marginTop: 8 }}>{createKeyMut.error.message}</p>}
                    {createdKeyMaterial && <p className="muted" style={{ margin: '8px 0 0' }}>The private key is available only from this creation response. Download it before leaving this wizard.</p>}
                </div>
                </div>
            </section>}

            {step === 3 && <section className="launch-form-section">
                <div className="launch-section-title"><Network size={17}/><div><h4>Network and security</h4><p>Place the instance in a subnet and control inbound access.</p></div></div>
                <div className="launch-form-grid">
                <label className="launch-field launch-field--span">
                    <span>Subnet</span>
                    <select className="input" value={subnetId} onChange={(e) => setSubnetId(e.target.value)}>
                        <option value="">Default subnet selection</option>
                        {groupByVpc ? vpcs.map((vpc: Ec2Vpc) => {
                            const vpcSubnets = subnets.filter((subnet: Ec2Subnet) => subnet.vpcId === vpc.vpcId)
                            return vpcSubnets.length ? <optgroup key={vpc.vpcId} label={vpcLabel(vpc)}>{vpcSubnets.map((subnet) => <option key={subnet.subnetId} value={subnet.subnetId}>{subnet.availabilityZone} · {subnet.cidrBlock}</option>)}</optgroup> : null
                        }) : subnets.map((subnet: Ec2Subnet) => <option key={subnet.subnetId} value={subnet.subnetId}>{subnet.availabilityZone} · {subnet.cidrBlock}</option>)}
                    </select>
                </label>
                <div className="launch-field launch-field--span">
                <div className="sg-header">
                    <span>Security Groups</span>
                    <button
                        type="button"
                        className="button small"
                        onClick={() => setShowCreateSg((v) => !v)}
                        title={showCreateSg ? 'Cancel new SG' : 'Create a new security group'}
                    >
                        {showCreateSg ? <X size={12}/> : <Plus size={12}/>}
                        {showCreateSg ? 'Cancel' : 'New SG'}
                    </button>
                </div>

                <div className="sg-checklist">
                    {sgsQ.isLoading && <span className="muted">Loading…</span>}
                    {selectedSubnet && <span className="muted">Showing groups in {selectedSubnet.vpcId} only.</span>}
                    {sgsQ.data?.length === 0 && !showCreateSg && (
                        <span className="muted">No security groups — create one above.</span>
                    )}
                    {availableSecurityGroups.map((sg: Ec2SecurityGroup) => (
                        <label key={sg.groupId} className="sg-check-item">
                            <input
                                type="checkbox"
                                checked={selectedSgs.includes(sg.groupId)}
                                onChange={(e) => toggleSg(sg.groupId, e.target.checked)}
                            />
                            <span>{sg.groupName || sg.groupId}</span>
                            {sg.groupName && <code>{sg.groupId}</code>}
                        </label>
                    ))}
                </div>

                {showCreateSg && (
                    <div className="sg-create-inline">
                        <label className="sg-create-field">
                            <span>Name <em className="field-required">*</em></span>
                            <input className="input" value={newSgName} onChange={(e) => setNewSgName(e.target.value)} placeholder="e.g. web-servers"/>
                        </label>
                        <label className="sg-create-field">
                            <span>Description</span>
                            <input className="input" value={newSgDesc} onChange={(e) => setNewSgDesc(e.target.value)} placeholder="Optional description"/>
                        </label>
                        <label className="sg-create-field">
                            <span>VPC</span>
                            <select className="input" value={newSgVpc} onChange={(e) => setNewSgVpc(e.target.value)}>
                                <option value="">Default VPC</option>
                                {vpcs.map((vpc: Ec2Vpc) => (
                                    <option key={vpc.vpcId} value={vpc.vpcId}>{vpcLabel(vpc)}</option>
                                ))}
                            </select>
                        </label>

                        <div className="sg-rules-section">
                            <div className="sg-rules-header">
                                <span className="sg-rules-label">Inbound Rules</span>
                                <div className="sg-rules-divider"/>
                                <div className="sg-presets">
                                    {SG_PRESETS.map((p) => (
                                        <button key={p.label} type="button" className="button small"
                                            onClick={() => addRule(p.protocol, p.portInput, p.cidr)}>
                                            {p.label}
                                        </button>
                                    ))}
                                    <button type="button" className="button small" onClick={() => addRule()}>
                                        <Plus size={10}/> Custom
                                    </button>
                                </div>
                            </div>

                            {inboundRules.length > 0 && (
                                <div className="sg-rule-list">
                                    <div className="sg-rule-row sg-rule-header-row">
                                        <span>Protocol</span>
                                        <span>Port(s)</span>
                                        <span>Source CIDR</span>
                                        <span/>
                                    </div>
                                    {inboundRules.map((rule) => {
                                        const noPort = rule.protocol === '-1' || rule.protocol === 'icmp'
                                        return (
                                            <div key={rule.id} className="sg-rule-row">
                                                <select className="input" value={rule.protocol}
                                                    onChange={(e) => updateRule(rule.id, { protocol: e.target.value, portInput: '' })}>
                                                    <option value="tcp">TCP</option>
                                                    <option value="udp">UDP</option>
                                                    <option value="icmp">ICMP</option>
                                                    <option value="-1">All</option>
                                                </select>
                                                <input className="input" value={rule.portInput}
                                                    placeholder={noPort ? 'All' : '80 or 80-443'}
                                                    disabled={noPort}
                                                    onChange={(e) => updateRule(rule.id, { portInput: e.target.value })}/>
                                                <input className="input" value={rule.cidr}
                                                    placeholder="0.0.0.0/0"
                                                    onChange={(e) => updateRule(rule.id, { cidr: e.target.value })}/>
                                                <button type="button" className="icon-btn danger" onClick={() => removeRule(rule.id)}>
                                                    <X size={12}/>
                                                </button>
                                            </div>
                                        )
                                    })}
                                </div>
                            )}
                        </div>

                        <div className="sg-create-actions">
                            {createSgMut.error instanceof Error && (
                                <span className="sg-create-error">
                                    {createSgMut.error.message.startsWith('char')
                                        ? 'Security group creation failed — runtime returned an unexpected response.'
                                        : createSgMut.error.message}
                                </span>
                            )}
                            <button
                                type="button"
                                className="button primary small"
                                disabled={!newSgName || createSgMut.isPending}
                                onClick={() => createSgMut.mutate({name: newSgName, desc: newSgDesc, vpc: newSgVpc, rules: inboundRules})}
                            >
                                <Plus size={12}/>
                                {createSgMut.isPending ? 'Creating…' : 'Create SG'}
                            </button>
                        </div>
                    </div>
                )}
                </div>
                </div>
            </section>}

            {step === 4 && <section className="launch-form-section">
                <div className="launch-section-title"><HardDrive size={17}/><div><h4>Storage and review</h4><p>Configure the root disk, bootstrap script, and verify the launch request.</p></div></div>
                <div className="launch-form-grid">
                <label className="launch-field">
                    <span>Root volume size (GiB)</span>
                    <input className="input" type="number" min="1" value={rootVolumeSize} onChange={(event) => setRootVolumeSize(event.target.value)} />
                    <small>Creates the root EBS volume at this size.</small>
                </label>
                <label className="launch-field">
                    <span>Root volume type</span>
                    <select className="input" value={rootVolumeType} onChange={(event) => setRootVolumeType(event.target.value)}>
                        <option value="gp3">General Purpose SSD (gp3)</option>
                        <option value="gp2">General Purpose SSD (gp2)</option>
                        <option value="io1">Provisioned IOPS SSD (io1)</option>
                        <option value="st1">Throughput Optimized HDD (st1)</option>
                        <option value="sc1">Cold HDD (sc1)</option>
                    </select>
                </label>
                <div className="launch-field launch-field--span launch-review">
                    <span>Review: fields sent to RunInstances</span>
                    <div className="meta-grid">
                        <div className="meta-row"><span className="meta-label">Name</span><span className="meta-value">{name}</span></div>
                        <div className="meta-row"><span className="meta-label">AMI</span><span className="meta-value">{selectedAmi?.name || imageId} ({imageId})</span></div>
                        <div className="meta-row"><span className="meta-label">Instance type</span><span className="meta-value">{instanceType}</span></div>
                        <div className="meta-row"><span className="meta-label">Key pair</span><span className="meta-value">{keyName || 'Not sent'}</span></div>
                        <div className="meta-row"><span className="meta-label">Subnet</span><span className="meta-value">{selectedSubnet ? `${selectedSubnet.availabilityZone} (${subnetId})` : 'Not sent'}</span></div>
                        <div className="meta-row"><span className="meta-label">Security groups</span><span className="meta-value">{selectedGroups.length ? selectedGroups.map((group) => group.groupName || group.groupId).join(', ') : 'Not sent'}</span></div>
                        <div className="meta-row"><span className="meta-label">Root volume</span><span className="meta-value">{rootVolumeSize} GiB {rootVolumeType}, delete on termination</span></div>
                        <div className="meta-row"><span className="meta-label">User data</span><span className="meta-value">{userData ? 'Shell script or cloud-init supplied' : 'Not sent'}</span></div>
                    </div>
                </div>
                <label className="launch-field launch-field--span">
                    <span>User data</span>
                    <textarea className="textarea code-textarea small" value={userData} onChange={(event) => setUserData(event.target.value)} placeholder={'#!/bin/bash\napt-get update\napt-get upgrade -y\napt-get install -y curl git'} rows={7}/>
                    <small>Runs once after the instance starts. Use a shell script or cloud-init document, matching the AWS RunInstances UserData field.</small>
                    <input type="file" accept=".sh,.txt,.yaml,.yml,.cfg,text/plain,text/x-shellscript" onChange={async (event) => { const file = event.currentTarget.files?.[0]; if (file) setUserData(await file.text()); event.currentTarget.value = '' }}/>
                </label>
                </div>
            </section>}

            {stepError && <div className="form-error launch-field--span">{stepError}</div>}
            {createMut.error instanceof Error && <div className="form-error launch-field--span">{createMut.error.message}</div>}
            {createMut.isPending && <div className="launch-field--span"><ServerLaunchProgress name={name} description="Creating the instance and preparing its local runtime."/></div>}
            <div className="launch-form-actions">
                <button type="button" className="button" onClick={step === 1 ? onCancel : () => { setStep((current) => (current - 1) as LaunchStep); setStepError('') }}>{step === 1 ? 'Cancel' : 'Back'}</button>
                {step < 4 ? <button type="button" className="button primary" onClick={nextStep}>Next</button> : <button type="button" className="button primary" disabled={createMut.isPending} onClick={launch}><Plus size={14}/>{createMut.isPending ? 'Launching…' : 'Launch instance'}</button>}
            </div>
        </form>
    )
}