<script lang="ts">

	import type { CreateDeviceRequest, Options } from '$lib/types/api.ts';
	import { log } from '$lib/log.ts';

	let {
		deviceTypeOptions = [],
		open = $bindable(false)
	} = $props<{ deviceTypeOptions: Options[] , open: boolean}>();


	log.info('device type options',deviceTypeOptions);
	let formData = $state<CreateDeviceRequest>({
		name: '',
		typeId: null,
		model: '',
		manufacturer: '',
		purchaseDate: '',
		interfaces: []
	});

	// 错误信息状态
	let errors = $state<Record<string, string>>({});


	function addInterface() {
		formData.interfaces.push({
			name: '',
			type: 1,
			addressConfigs: []
		});
	}

	function removeInterface(index: number) {
		formData.interfaces.splice(index, 1);
	}

	function addAddressConfig(interfaceIndex: number) {
		formData.interfaces[interfaceIndex].addressConfigs.push({
			isPrimary: false,
			isDhcp: false,
			ipAddress: ''
		});
	}

	function removeAddressConfig(interfaceIndex: number, configIndex: number) {
		formData.interfaces[interfaceIndex].addressConfigs.splice(configIndex, 1);
	}


	function validate(): boolean {
		let newErrors: Record<string, string> = {};
		let isValid = true;
		const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
		const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

		// 基础字段验证
		if (!formData.name) newErrors['name'] = '设备名称不能为空';
		if (!formData.typeId) newErrors['typeId'] = '设备类型ID不能为空';
		if (!formData.model) newErrors['model'] = '设备型号不能为空';
		if (!formData.manufacturer) newErrors['manufacturer'] = '厂商不能为空';

		// 嵌套验证
		formData.interfaces.forEach((iface, i) => {
			if (!iface.name) newErrors[`iface_${i}_name`] = '接口名称不能为空';
			if (iface.macAddress && !macRegex.test(iface.macAddress)) {
				newErrors[`iface_${i}_mac`] = 'MAC地址格式错误';
			}

			iface.addressConfigs.forEach((addr, j) => {
				if (addr.ipAddress && !ipRegex.test(addr.ipAddress)) {
					newErrors[`iface_${i}_addr_${j}_ip`] = 'IP地址格式错误';
				}
			});
		});

		if (Object.keys(newErrors).length > 0) {
			errors = newErrors;
			isValid = false;
		} else {
			errors = {};
		}
		return isValid;
	}

	// --- 【关键】导出方法供父组件调用 ---

	export function submitAndGetPayload(): CreateDeviceRequest | null {
		if (validate()) {
			const snapshot = $state.snapshot(formData);

			fetch('/api/devices', {
					method: 'POST',
					headers: {},
					body: JSON.stringify(snapshot)
			}).then(res => res.json())
			.then(res => {
				if (res.ok) {
					log.info('设备创建成功', res);
					open = false;
				} else {
					log.error('设备创建失败', res);
				}
			})
			.catch(err => {
				log.error('设备创建失败', err);
			});
			return snapshot;
		}

		return null; // 验证失败


	}

	const handleSubmit = () => {
		const payload = submitAndGetPayload();
		if (payload) {
			log.info('设备创建成功', payload);
			open = false;
		}
	};
</script>

<div class="space-y-8">
	<div class="card bg-base-100 shadow-md border border-base-200">
		<div class="card-body">
			<h2 class="card-title text-primary">基础信息</h2>

			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<label class="form-control w-full">
					<div class="label"><span class="label-text">设备名称 *</span></div>
					<input type="text" bind:value={formData.name} class="input input-bordered w-full {errors.name ? 'input-error' : ''}" />
					{#if errors.name}<div class="label"><span class="label-text-alt text-error">{errors.name}</span></div>{/if}
				</label>

				<label class="form-control w-full">
					<div class="label"><span class="label-text">厂商 *</span></div>
					<input type="text" bind:value={formData.manufacturer} class="input input-bordered w-full {errors.manufacturer ? 'input-error' : ''}" />
				</label>

				<label class="form-control w-full">
					<div class="label"><span class="label-text">型号 *</span></div>
					<input type="text" bind:value={formData.model} class="input input-bordered w-full {errors.model ? 'input-error' : ''}" />
				</label>

				<label class="form-control w-full">
					<div class="label"><span class="label-text">设备类型 *</span></div>

					<select
						bind:value={formData.typeId}
						class="select select-bordered w-full {errors.typeId ? 'select-error' : ''}"
					>
						<option disabled selected value={null}>请选择设备类型</option>

						{#each deviceTypeOptions as opt (opt.value)}
							<option value={Number(opt.value)}>{opt.label}</option>
						{/each}
					</select>

					{#if errors.typeId}
						<div class="label"><span class="label-text-alt text-error">{errors.typeId}</span></div>
					{/if}
				</label>

				<label class="form-control w-full">
					<div class="label"><span class="label-text">采购日期</span></div>
					<input type="date" bind:value={formData.purchaseDate} class="input input-bordered w-full" />
				</label>
			</div>
		</div>
	</div>

	<div class="card bg-base-100 shadow-md border border-base-200">
		<div class="card-body">
			<div class="flex justify-between items-center mb-4">
				<h2 class="card-title text-secondary">网络接口 (Interfaces)</h2>
				<button class="btn btn-sm btn-outline btn-secondary" onclick={addInterface}>+ 添加接口</button>
			</div>

			{#each formData.interfaces as iface, i (i)}
				<div class="collapse collapse-arrow border border-base-300 bg-base-100 mb-2">
					<input type="checkbox" checked={true} />
					<div class="collapse-title text-lg font-medium flex justify-between pr-12">
						<span>接口 #{i + 1}: {iface.name || '(未命名)'}</span>
						<button class="btn btn-xs btn-error z-10" onclick={() => removeInterface(i)}>删除</button>
					</div>

					<div class="collapse-content space-y-4">
						<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
							<label class="form-control">
								<span class="label-text mb-1">接口名称 *</span>
								<input type="text" bind:value={iface.name} class="input input-bordered input-sm {errors[`iface_${i}_name`] ? 'input-error' : ''}" />
								{#if errors[`iface_${i}_name`]}<span class="text-xs text-error mt-1">{errors[`iface_${i}_name`]}</span>{/if}
							</label>

							<label class="form-control">
								<span class="label-text mb-1">接口类型</span>
								<select bind:value={iface.type} class="select select-bordered select-sm">
									<option value={1}>物理口</option>
									<option value={2}>聚合口</option>
									<option value={3}>虚拟口</option>
								</select>
							</label>

							<label class="form-control">
								<span class="label-text mb-1">MAC 地址</span>
								<input type="text" bind:value={iface.macAddress} placeholder="XX:XX:XX..." class="input input-bordered input-sm {errors[`iface_${i}_mac`] ? 'input-error' : ''}" />
								{#if errors[`iface_${i}_mac`]}<span class="text-xs text-error mt-1">{errors[`iface_${i}_mac`]}</span>{/if}
							</label>
						</div>

						<div class="bg-base-200 p-4 rounded-lg">
							<div class="flex justify-between items-center mb-2">
								<h4 class="text-sm font-bold opacity-70">IP / VLAN 配置</h4>
								<button class="btn btn-xs btn-neutral" onclick={() => addAddressConfig(i)}>+ 添加 IP</button>
							</div>

							{#if iface.addressConfigs.length === 0}
								<div class="text-xs text-center opacity-50 py-2">暂无 IP 配置</div>
							{/if}

							{#each iface.addressConfigs as addr, j (j)}
								<div class="grid grid-cols-1 md:grid-cols-12 gap-2 items-end mb-2 border-b border-base-300 pb-2 last:border-0">
									<div class="md:col-span-1">
										<label class="label-text text-xs">VLAN</label>
										<input type="number" bind:value={addr.vlanId} class="input input-bordered input-xs w-full" />
									</div>
									<div class="md:col-span-3">
										<label class="label-text text-xs">IP地址</label>
										<input type="text" bind:value={addr.ipAddress} class="input input-bordered input-xs w-full {errors[`iface_${i}_addr_${j}_ip`] ? 'input-error' : ''}" />
									</div>
									<div class="md:col-span-3">
										<label class="label-text text-xs">子网掩码</label>
										<input type="text" bind:value={addr.subnetMask} class="input input-bordered input-xs w-full" />
									</div>
									<div class="md:col-span-2 flex flex-col gap-1">
										<label class="label cursor-pointer justify-start gap-2 p-0 h-6">
											<input type="checkbox" bind:checked={addr.isPrimary} class="checkbox checkbox-xs" />
											<span class="label-text text-xs">主IP</span>
										</label>
										<label class="label cursor-pointer justify-start gap-2 p-0 h-6">
											<input type="checkbox" bind:checked={addr.isDhcp} class="checkbox checkbox-xs" />
											<span class="label-text text-xs">DHCP</span>
										</label>
									</div>
									<div class="md:col-span-1 flex justify-end">
										<button class="btn btn-square btn-xs btn-ghost text-error" onclick={() => removeAddressConfig(i, j)}>✕</button>
									</div>
								</div>
							{/each}
						</div>
					</div>
				</div>
			{/each}
		</div>
	</div>


	<div class="join flex justify-center" >
		<button class="btn btn-error join-item" onclick={onreset}>重置</button>
		<button class="btn join-item" onclick={draft}>保存草稿</button>
		<button class="btn btn-primary btn-wide join-item" onclick={handleSubmit}>提交</button>
	</div>
</div>