<script lang="ts">
	import { tick } from 'svelte';
	import * as Dialog from '$lib/components/ui/dialog';
	import { Button } from '$lib/components/ui/button';
	import { ArrowBigRight, Settings2, Shield, Loader2, Download, CheckCircle2, XCircle, ShieldCheck, ShieldAlert, ShieldX, AlertTriangle, X, Play } from 'lucide-svelte';
	import { toast } from 'svelte-sonner';
	import { currentEnvironment } from '$lib/stores/environment';
	import { focusFirstInput } from '$lib/utils';
	import PullTab from '$lib/components/PullTab.svelte';
	import ScanTab from '$lib/components/ScanTab.svelte';
	import type { ScanResult } from '$lib/components/ScanTab.svelte';
	import ContainerSettingsTab from './ContainerSettingsTab.svelte';
	import { parseHostPort, expandPortBindings } from '$lib/utils/port-parse';
	import type { VulnerabilityCriteria } from '$lib/components/VulnerabilityCriteriaSelector.svelte';

	// Parse shell command respecting quotes
	function parseShellCommand(cmd: string): string[] {
		const args: string[] = [];
		let current = '';
		let inQuotes = false;
		let quoteChar = '';

		for (let i = 0; i < cmd.length; i++) {
			const char = cmd[i];

			if ((char === '"' || char === "'") && !inQuotes) {
				inQuotes = true;
				quoteChar = char;
			} else if (char === quoteChar && inQuotes) {
				inQuotes = false;
				quoteChar = '';
			} else if (char === ' ' && !inQuotes) {
				if (current) {
					args.push(current);
					current = '';
				}
			} else {
				current += char;
			}
		}

		if (current) {
			args.push(current);
		}

		return args;
	}

	interface ConfigSet {
		id: number;
		name: string;
		description?: string;
		envVars?: { key: string; value: string }[];
		labels?: { key: string; value: string }[];
		ports?: { hostPort: string; containerPort: string; protocol: string }[];
		volumes?: { hostPath: string; containerPath: string; mode: string }[];
		networkMode: string;
		restartPolicy: string;
	}


	interface Props {
		open: boolean;
		onClose?: () => void;
		onSuccess?: () => void;
		prefilledImage?: string;
		skipPullTab?: boolean;
		autoPull?: boolean;
	}

	let { open = $bindable(), onClose, onSuccess, prefilledImage, skipPullTab = false, autoPull = false }: Props = $props();

	// Track if we've already auto-pulled for this modal session
	let hasAutoPulled = $state(false);

	// Tab state - start on settings if skipping pull tab
	let activeTab = $state<'pull' | 'scan' | 'container'>(skipPullTab ? 'container' : 'pull');

	// Config sets
	let configSets = $state<ConfigSet[]>([]);
	let selectedConfigSetId = $state<string>('');

	// Form state
	let name = $state('');
	let image = $state('');
	let command = $state('');
	let restartPolicy = $state('no');
	let restartMaxRetries = $state<number | ''>('');
	let networkMode = $state('bridge');
	let startAfterCreate = $state(true);

	// Port mappings
	let portMappings = $state<{ hostPort: string; containerPort: string; protocol: string }[]>([
		{ hostPort: '', containerPort: '', protocol: 'tcp' }
	]);

	// Volume mappings
	let volumeMappings = $state<{ hostPath: string; containerPath: string; mode: string }[]>([
		{ hostPath: '', containerPath: '', mode: 'rw' }
	]);

	// Environment variables
	let envVars = $state<{ key: string; value: string }[]>([{ key: '', value: '' }]);

	// Labels
	let labels = $state<{ key: string; value: string }[]>([{ key: '', value: '' }]);

	// Networks
	let selectedNetworks = $state<string[]>([]);
	let networkConfigs = $state<Record<string, { ipv4Address: string; ipv6Address: string; aliases: string }>>({});
	let macAddress = $state('');

	// Auto-update settings
	let autoUpdateEnabled = $state(false);
	let autoUpdateCronExpression = $state('0 3 * * *');
	let vulnerabilityCriteria = $state<VulnerabilityCriteria>('never');


	// User/Group
	let containerUser = $state('');

	// Privileged mode
	let privilegedMode = $state(false);

	// Healthcheck settings
	let healthcheckEnabled = $state(false);
	let healthcheckCommand = $state('');
	let healthcheckInterval = $state(30);
	let healthcheckTimeout = $state(30);
	let healthcheckRetries = $state(3);
	let healthcheckStartPeriod = $state(0);

	// Resource limits
	let memoryLimit = $state('');
	let memoryReservation = $state('');
	let cpuShares = $state('');
	let nanoCpus = $state('');
	let cpuQuota = $state('');
	let cpuPeriod = $state('');

	// Capabilities
	let capAdd = $state<string[]>([]);
	let capDrop = $state<string[]>([]);

	// Devices
	let deviceMappings = $state<{ hostPath: string; containerPath: string; permissions: string }[]>([]);

	// DNS settings
	let dnsServers = $state<string[]>([]);
	let dnsSearch = $state<string[]>([]);
	let dnsOptions = $state<string[]>([]);

	// Security options
	let securityOptions = $state<string[]>([]);

	// Ulimits
	let ulimits = $state<{ name: string; soft: string; hard: string }[]>([]);

	// GPU settings
	let gpuEnabled = $state(false);
	let gpuMode = $state<'all' | 'count' | 'specific'>('all');
	let gpuCount = $state(1);
	let gpuDeviceIds = $state<string[]>([]);
	let gpuDriver = $state('');
	let gpuCapabilities = $state<string[]>(['gpu']);
	let runtime = $state('');

	let loading = $state(false);
	let errors = $state<{ name?: string; image?: string }>({});

	// Component refs
	let pullTabRef: PullTab | undefined;
	let scanTabRef: ScanTab | undefined;

	// Pull & Scan status (tracked via component callbacks)
	let pullStatus = $state<'idle' | 'pulling' | 'complete' | 'error'>('idle');
	let pullStarted = $state(false);
	let scanStatus = $state<'idle' | 'scanning' | 'complete' | 'error'>('idle');
	let scanStarted = $state(false);
	let scanResults = $state<ScanResult[]>([]);

	// Scanner settings - scanning is enabled if a scanner is configured
	let envHasScanning = $state(false);

	// Fetch config sets and networks when modal opens
	$effect(() => {
		if (open) {
			fetchConfigSets();
			fetchScannerSettings();
		}
	});

	// Track previous open state to detect when modal opens
	let wasOpen = $state(false);

	$effect(() => {
		if (open && !wasOpen) {
			// Modal just opened - reset state
			pullStatus = 'idle';
			pullStarted = !skipPullTab;
			scanStatus = 'idle';
			scanStarted = false;
			scanResults = [];
			hasAutoPulled = false;
			autoSwitchedToScan = false;
			autoSwitchedToContainer = false;
			activeTab = skipPullTab ? 'container' : 'pull';

			// Reset components
			pullTabRef?.reset();
			scanTabRef?.reset();

			// Set image from prefilledImage if provided
			if (prefilledImage) {
				image = prefilledImage;
			}
		}
		wasOpen = open;
	});

	// Auto-pull when autoPull is true and modal opens with an image
	$effect(() => {
		if (autoPull && open && prefilledImage && !hasAutoPulled && pullStatus === 'idle') {
			hasAutoPulled = true;
			// Small delay to ensure component is mounted
			setTimeout(() => pullTabRef?.startPull(), 100);
		}
	});

	// Track auto-switch state to prevent re-triggering when user manually clicks tabs
	let autoSwitchedToScan = $state(false);
	let autoSwitchedToContainer = $state(false);

	// Handle pull completion
	function handlePullComplete() {
		pullStatus = 'complete';
		// Auto-start scan if enabled
		if (envHasScanning && !autoSwitchedToScan) {
			autoSwitchedToScan = true;
			scanStarted = true;
			activeTab = 'scan';
			// Start scan with small delay for tab switch
			setTimeout(() => scanTabRef?.startScan(), 100);
		} else if (!envHasScanning && !autoSwitchedToContainer) {
			// Go to container tab if no scan
			autoSwitchedToContainer = true;
			activeTab = 'container';
		}
	}

	function handlePullError(error: string) {
		pullStatus = 'error';
	}

	function handlePullStatusChange(status: 'idle' | 'pulling' | 'complete' | 'error') {
		pullStatus = status;
	}

	function handleScanComplete(results: ScanResult[]) {
		scanStatus = 'complete';
		scanResults = results;
		// Auto-switch to container tab
		if (!autoSwitchedToContainer) {
			autoSwitchedToContainer = true;
			activeTab = 'container';
		}
	}

	function handleScanError(error: string) {
		scanStatus = 'error';
	}

	function handleScanStatusChange(status: 'idle' | 'scanning' | 'complete' | 'error') {
		scanStatus = status;
	}

	async function fetchConfigSets() {
		try {
			const response = await fetch('/api/config-sets');
			if (response.ok) {
				configSets = await response.json();
			}
		} catch (err) {
			console.error('Failed to fetch config sets:', err);
		}
	}

	async function fetchScannerSettings() {
		try {
			const envId = $currentEnvironment?.id;
			const url = envId ? `/api/settings/scanner?env=${envId}&settingsOnly=true` : '/api/settings/scanner?settingsOnly=true';
			const response = await fetch(url);
			if (response.ok) {
				const data = await response.json();
				const scanner = data.settings?.scanner ?? 'none';
				// Scanning is enabled if a scanner is configured
				envHasScanning = scanner !== 'none';
			}
		} catch (err) {
			console.error('Failed to fetch scanner settings:', err);
		}
	}


	function parseMemory(value: string): number | undefined {
		if (!value) return undefined;
		const match = value.trim().toLowerCase().match(/^(\d+(?:\.\d+)?)\s*([kmgt]?b?)?$/);
		if (!match) return undefined;
		const num = parseFloat(match[1]);
		const unit = match[2] || '';
		switch (unit) {
			case 'k': case 'kb': return Math.floor(num * 1024);
			case 'm': case 'mb': return Math.floor(num * 1024 * 1024);
			case 'g': case 'gb': return Math.floor(num * 1024 * 1024 * 1024);
			case 't': case 'tb': return Math.floor(num * 1024 * 1024 * 1024 * 1024);
			default: return Math.floor(num);
		}
	}

	function parseNanoCpus(value: string): number | undefined {
		if (!value) return undefined;
		const num = parseFloat(value);
		if (isNaN(num)) return undefined;
		return Math.floor(num * 1e9);
	}

	async function handleSubmit(e: Event) {
		e.preventDefault();
		errors = {};

		let hasErrors = false;
		if (!name.trim()) {
			errors.name = 'Container name is required';
			hasErrors = true;
		}

		if (!image.trim()) {
			errors.image = 'Image name is required';
			hasErrors = true;
		}

		if (hasErrors) {
			return;
		}

		loading = true;

		try {
			const ports: Record<string, { HostIp?: string; HostPort: string }> = {};
			portMappings
				.filter((p) => p.containerPort)
				.forEach((p) => {
					const parsed = parseHostPort(p.hostPort);
					const bindings = expandPortBindings(parsed.hostPort, p.containerPort, p.protocol, parsed.hostIp);
					Object.assign(ports, bindings);
				});

			const volumeBinds = volumeMappings
				.filter((v) => v.hostPath && v.containerPath)
				.map((v) => `${v.hostPath}:${v.containerPath}:${v.mode}`);

			const env = envVars
				.filter((e) => e.key && e.value)
				.map((e) => `${e.key}=${e.value}`);

			const labelsObj: any = {};
			labels
				.filter((l) => l.key && l.value)
				.forEach((l) => {
					labelsObj[l.key] = l.value;
				});

			const cmd = command.trim() ? parseShellCommand(command.trim()) : undefined;

			let healthcheck: any = undefined;
			if (healthcheckEnabled && healthcheckCommand.trim()) {
				healthcheck = {
					test: ['CMD-SHELL', healthcheckCommand.trim()],
					interval: healthcheckInterval * 1e9,
					timeout: healthcheckTimeout * 1e9,
					retries: healthcheckRetries,
					startPeriod: healthcheckStartPeriod * 1e9
				};
			}

			const devices = deviceMappings
				.filter(d => d.hostPath && d.containerPath)
				.map(d => ({
					hostPath: d.hostPath,
					containerPath: d.containerPath,
					permissions: d.permissions || 'rwm'
				}));

			const ulimitsArray = ulimits
				.filter(u => u.name && u.soft && u.hard)
				.map(u => ({
					name: u.name,
					soft: parseInt(u.soft) || 0,
					hard: parseInt(u.hard) || 0
				}));

			let deviceRequests: any[] | undefined = undefined;
			if (gpuEnabled) {
				const dr: any = {
					capabilities: gpuCapabilities.length > 0 ? [gpuCapabilities] : [['gpu']],
					driver: gpuDriver || undefined
				};
				if (gpuMode === 'all') {
					dr.count = -1;
				} else if (gpuMode === 'count') {
					dr.count = gpuCount || 1;
				} else {
					dr.count = 0;
					dr.deviceIDs = gpuDeviceIds.filter(id => id.trim());
				}
				deviceRequests = [dr];
			}

			// Build per-network configs for the API
			const netConfigs: Record<string, { ipv4Address?: string; ipv6Address?: string; aliases?: string[] }> = {};
			for (const [netName, cfg] of Object.entries(networkConfigs)) {
				if (!selectedNetworks.includes(netName)) continue;
				const entry: { ipv4Address?: string; ipv6Address?: string; aliases?: string[] } = {};
				if (cfg.ipv4Address) entry.ipv4Address = cfg.ipv4Address;
				if (cfg.ipv6Address) entry.ipv6Address = cfg.ipv6Address;
				if (cfg.aliases) entry.aliases = cfg.aliases.split(',').map(a => a.trim()).filter(Boolean);
				if (Object.keys(entry).length > 0) netConfigs[netName] = entry;
			}

			const payload = {
				name: name.trim(),
				image: image.trim(),
				ports: Object.keys(ports).length > 0 ? ports : undefined,
				volumeBinds: volumeBinds.length > 0 ? volumeBinds : undefined,
				env: env.length > 0 ? env : undefined,
				labels: Object.keys(labelsObj).length > 0 ? labelsObj : undefined,
				cmd,
				restartPolicy,
				restartMaxRetries: restartPolicy === 'on-failure' && restartMaxRetries !== '' ? Number(restartMaxRetries) : undefined,
				networkMode,
				additionalNetworks: (() => {
					const isSharedMode = networkMode === 'host' || networkMode === 'none' || networkMode.startsWith('container:');
					if (isSharedMode) return undefined;
					return selectedNetworks.length > 0 ? selectedNetworks : undefined;
				})(),
				networkConfigs: Object.keys(netConfigs).length > 0 ? netConfigs : undefined,
				macAddress: macAddress.trim() || undefined,
				startAfterCreate,
				user: containerUser.trim() || undefined,
				privileged: privilegedMode || undefined,
				healthcheck,
				memory: parseMemory(memoryLimit),
				memoryReservation: parseMemory(memoryReservation),
				cpuShares: cpuShares ? parseInt(cpuShares) : undefined,
				nanoCpus: parseNanoCpus(nanoCpus),
				cpuQuota: cpuQuota ? parseInt(cpuQuota) : undefined,
				cpuPeriod: cpuPeriod ? parseInt(cpuPeriod) : undefined,
				capAdd: capAdd.length > 0 ? capAdd : undefined,
				capDrop: capDrop.length > 0 ? capDrop : undefined,
				devices: devices.length > 0 ? devices : undefined,
				deviceRequests,
				runtime: runtime || undefined,
				dns: dnsServers.length > 0 ? dnsServers : undefined,
				dnsSearch: dnsSearch.length > 0 ? dnsSearch : undefined,
				dnsOptions: dnsOptions.length > 0 ? dnsOptions : undefined,
				securityOpt: securityOptions.length > 0 ? securityOptions : undefined,
				ulimits: ulimitsArray.length > 0 ? ulimitsArray : undefined
			};

			const envParam = $currentEnvironment ? `?env=${$currentEnvironment.id}` : '';
			const response = await fetch(`/api/containers${envParam}`, {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify(payload)
			});

			const result = await response.json();

			if (!response.ok) {
				let errorMsg = result.error || 'Failed to create container';
				if (result.details) {
					errorMsg += ': ' + result.details;
				}
				toast.error(errorMsg);
				return;
			}

			if (autoUpdateEnabled) {
				try {
					const envParam = $currentEnvironment ? `?env=${$currentEnvironment.id}` : '';
					await fetch(`/api/auto-update/${encodeURIComponent(name.trim())}${envParam}`, {
						method: 'POST',
						headers: { 'Content-Type': 'application/json' },
						body: JSON.stringify({
							enabled: autoUpdateEnabled,
							cronExpression: autoUpdateCronExpression,
							vulnerabilityCriteria: vulnerabilityCriteria
						})
					});
				} catch (err) {
					console.error('Failed to save auto-update settings:', err);
				}
			}

			if (result.imagePulled) {
				toast.success(`Container created (image ${image.trim()} was pulled automatically)`);
			} else {
				toast.success('Container created successfully');
			}

			open = false;
			resetForm();
			onSuccess?.();
			onClose?.();
		} catch (err) {
			toast.error('Failed to create container: ' + String(err));
		} finally {
			loading = false;
		}
	}

	function resetForm() {
		name = '';
		image = '';
		command = '';
		restartPolicy = 'no';
		restartMaxRetries = '';
		networkMode = 'bridge';
		startAfterCreate = true;
		portMappings = [{ hostPort: '', containerPort: '', protocol: 'tcp' }];
		volumeMappings = [{ hostPath: '', containerPath: '', mode: 'rw' }];
		envVars = [{ key: '', value: '' }];
		labels = [{ key: '', value: '' }];
		selectedNetworks = [];
		networkConfigs = {};
		macAddress = '';
		autoUpdateEnabled = false;
		autoUpdateCronExpression = '0 3 * * *';
		vulnerabilityCriteria = 'never';
		errors = {};
		selectedConfigSetId = '';
		containerUser = '';
		privilegedMode = false;
		healthcheckEnabled = false;
		healthcheckCommand = '';
		healthcheckInterval = 30;
		healthcheckTimeout = 30;
		healthcheckRetries = 3;
		healthcheckStartPeriod = 0;
		memoryLimit = '';
		memoryReservation = '';
		cpuShares = '';
		nanoCpus = '';
		cpuQuota = '';
		cpuPeriod = '';
		capAdd = [];
		capDrop = [];
		deviceMappings = [];
		dnsServers = [];
		dnsSearch = [];
		dnsOptions = [];
		securityOptions = [];
		ulimits = [];
		gpuEnabled = false;
		gpuMode = 'all';
		gpuCount = 1;
		gpuDeviceIds = [];
		gpuDriver = '';
		gpuCapabilities = ['gpu'];
		runtime = '';
		// Reset pull/scan state
		activeTab = skipPullTab ? 'container' : 'pull';
		pullStatus = 'idle';
		pullStarted = false;
		scanStatus = 'idle';
		scanStarted = false;
		scanResults = [];
		hasAutoPulled = false;
		autoSwitchedToScan = false;
		autoSwitchedToContainer = false;
		// Reset components
		pullTabRef?.reset();
		scanTabRef?.reset();
	}

	function handleClose() {
		open = false;
		resetForm();
		onClose?.();
	}

	const totalVulnerabilities = $derived(
		scanResults.reduce((total, r) => total + r.vulnerabilities.length, 0)
	);

	const hasCriticalOrHigh = $derived(
		scanResults.some(r => r.summary.critical > 0 || r.summary.high > 0)
	);

	const isPulling = $derived(pullStatus === 'pulling');
	const isScanning = $derived(scanStatus === 'scanning');
	const imageReady = $derived(pullStatus === 'complete');
</script>

<Dialog.Root bind:open onOpenChange={(isOpen) => isOpen && focusFirstInput()}>
	<Dialog.Content class="max-w-4xl w-full h-[85vh] p-0 flex flex-col overflow-hidden !zoom-in-0 !zoom-out-0" showCloseButton={false}>
		<Dialog.Header class="px-5 py-4 border-b bg-muted/30 shrink-0 sticky top-0 z-10">
			<Dialog.Title class="text-base font-semibold">Create new container</Dialog.Title>
			<button
				type="button"
				onclick={handleClose}
				disabled={loading || isPulling || isScanning}
				class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-30"
			>
				<X class="h-4 w-4" />
				<span class="sr-only">Close</span>
			</button>
		</Dialog.Header>

		<!-- Tabs (hidden when skipPullTab) -->
		{#if !skipPullTab}
		<div class="flex items-center border-b shrink-0 px-5 bg-muted/10">
			<!-- Pull Tab -->
			<button
				class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors cursor-pointer flex items-center gap-2 {activeTab === 'pull' ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}"
				onclick={() => activeTab = 'pull'}
			>
				<Download class="w-4 h-4" />
				Pull
				{#if pullStatus === 'complete'}
					<CheckCircle2 class="w-3.5 h-3.5 text-green-500" />
				{:else if pullStatus === 'pulling'}
					<Loader2 class="w-3.5 h-3.5 animate-spin" />
				{:else if pullStatus === 'error'}
					<XCircle class="w-3.5 h-3.5 text-red-500" />
				{/if}
			</button>
			{#if envHasScanning}
				<ArrowBigRight class="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />
				<!-- Scan Tab -->
				<button
					class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors cursor-pointer flex items-center gap-2 {activeTab === 'scan' ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}"
					onclick={() => activeTab = 'scan'}
					disabled={pullStatus === 'idle' || pullStatus === 'pulling'}
				>
					<Shield class="w-4 h-4" />
					Scan
					{#if scanStatus === 'complete' && scanResults.length > 0}
						{#if hasCriticalOrHigh}
							<ShieldX class="w-3.5 h-3.5 text-red-500" />
						{:else if totalVulnerabilities > 0}
							<ShieldAlert class="w-3.5 h-3.5 text-yellow-500" />
						{:else}
							<ShieldCheck class="w-3.5 h-3.5 text-green-500" />
						{/if}
					{:else if scanStatus === 'scanning'}
						<Loader2 class="w-3.5 h-3.5 animate-spin" />
					{/if}
				</button>
			{/if}
			<ArrowBigRight class="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />
			<!-- Container Tab -->
			<button
				class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors cursor-pointer flex items-center gap-2 {activeTab === 'container' ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}"
				onclick={() => activeTab = 'container'}
			>
				<Settings2 class="w-4 h-4" />
				Container
			</button>
		</div>
		{/if}

		<!-- Tab Content -->
		<!-- Pull Tab - using PullTab component -->
		<div class="px-5 py-4 flex-1 min-h-0 flex flex-col" class:hidden={activeTab !== 'pull'}>
			<PullTab
				bind:this={pullTabRef}
				imageName={image}
				envId={$currentEnvironment?.id}
				showImageInput={!autoPull}
				autoStart={pullStarted && pullStatus === 'idle' && !!prefilledImage}
				onComplete={handlePullComplete}
				onError={handlePullError}
				onStatusChange={handlePullStatusChange}
				onImageChange={(newImage) => image = newImage}
			/>
		</div>

		<!-- Scan Tab - using ScanTab component -->
		<div class="px-5 py-4 flex-1 min-h-0 flex flex-col" class:hidden={activeTab !== 'scan'}>
			{#if envHasScanning}
				<ScanTab
					bind:this={scanTabRef}
					imageName={image}
					envId={$currentEnvironment?.id}
					autoStart={scanStarted && scanStatus === 'idle'}
					onComplete={handleScanComplete}
					onError={handleScanError}
					onStatusChange={handleScanStatusChange}
				/>
			{:else}
				<!-- Scanning disabled -->
				<div class="flex-1 flex items-center justify-center">
					<div class="text-center">
						<Shield class="w-12 h-12 text-muted-foreground/50 mx-auto mb-2" />
						<p class="text-sm text-muted-foreground">Vulnerability scanning is disabled for this environment.</p>
						<p class="text-xs text-muted-foreground mt-1">Enable it in Settings -> Environments to scan images.</p>
					</div>
				</div>
			{/if}
		</div>

		<!-- Container Settings Tab -->
		<div class="px-5 py-4 flex-1 overflow-y-auto" class:hidden={activeTab !== 'container'}>
			<ContainerSettingsTab
				mode="create"
				bind:name
				bind:image
				bind:command
				bind:restartPolicy
				bind:restartMaxRetries
				bind:networkMode
				bind:startAfterCreate
				bind:portMappings
				bind:volumeMappings
				bind:envVars
				bind:labels
				bind:selectedNetworks
				bind:networkConfigs
				bind:macAddress
				bind:containerUser
				bind:privilegedMode
				bind:healthcheckEnabled
				bind:healthcheckCommand
				bind:healthcheckInterval
				bind:healthcheckTimeout
				bind:healthcheckRetries
				bind:healthcheckStartPeriod
				bind:memoryLimit
				bind:memoryReservation
				bind:cpuShares
				bind:nanoCpus
				bind:cpuQuota
				bind:cpuPeriod
				bind:capAdd
				bind:capDrop
				bind:securityOptions
				bind:deviceMappings
				bind:gpuEnabled
				bind:gpuMode
				bind:gpuCount
				bind:gpuDeviceIds
				bind:gpuDriver
				bind:gpuCapabilities
				bind:runtime
				bind:dnsServers
				bind:dnsSearch
				bind:dnsOptions
				bind:ulimits
				bind:autoUpdateEnabled
				bind:autoUpdateCronExpression
				bind:vulnerabilityCriteria
				{configSets}
				bind:selectedConfigSetId
				bind:errors
				imageSummary={{
					isPulling,
					isScanning,
					imageReady,
					scanResults,
					totalVulnerabilities,
					hasCriticalOrHigh
				}}
			/>
		</div>

		<div class="flex justify-between gap-2 px-5 py-3 border-t bg-muted/30 shrink-0">
			<div>
				{#if activeTab === 'container' && hasCriticalOrHigh}
					<div class="flex items-center gap-2 text-amber-600 text-xs">
						<AlertTriangle class="w-4 h-4" />
						<span>Critical/high vulnerabilities found in image</span>
					</div>
				{/if}
			</div>
			<div class="flex gap-2">
				<Button type="button" variant="outline" onclick={handleClose} disabled={loading || isPulling || isScanning}>
					Cancel
				</Button>
				<Button type="button" disabled={loading || isPulling || isScanning || activeTab !== 'container'} onclick={handleSubmit}>
					{#if loading}
						<Loader2 class="w-4 h-4 animate-spin" />
						Creating...
					{:else}
						<Play class="w-4 h-4" />
						Create container
					{/if}
				</Button>
			</div>
		</div>
	</Dialog.Content>
</Dialog.Root>
