// 【重要】必须使用 const Component 作为组件变量名
// 数据集管理 - 模仿 GitLab 项目列表风格（纯 React，不依赖 antd，兼容 Axhub）

const Component = function () {
	var useState = React.useState;
	var useCallback = React.useCallback;
	var useMemo = React.useMemo;

	// GitLab 风格色值（Pajamas 近似）
	var colors = {
		pageBg: '#fafafa',
		cardBg: '#ffffff',
		border: '#e5e5e5',
		borderLight: '#ebebeb',
		text: '#333333',
		textSecondary: '#666666',
		textMuted: '#999999',
		primary: '#1f75cb',
		primaryHover: '#1068bf',
		link: '#1f75cb',
		success: '#108548',
		warning: '#c17d10',
		danger: '#dd2b0e',
		hoverBg: '#f5f5f5',
		tabActive: '#333333',
		tabInactive: '#666666'
	};

	var filterState = useState({
		keyword: '',
		datasetType: '',
		status: ''
	});
	var filters = filterState[0];
	var setFilters = filterState[1];

	var activeTabState = useState('all');
	var activeTab = activeTabState[0];
	var setActiveTab = activeTabState[1];

	var sortState = useState('updated_desc');
	var sortBy = sortState[0];
	var setSortBy = sortState[1];

	var listState = useState([
		{ id: '1', name: '销售数据集', type: '表格', recordCount: 12000, createTime: '2025-02-20 10:00', updateTime: '2025-02-24 14:00', status: '已发布', remark: '销售业务数据', isStarred: true, owner: '当前用户' },
		{ id: '2', name: '客户画像数据集', type: '表格', recordCount: 8500, createTime: '2025-02-19 14:30', updateTime: '2025-02-23 09:00', status: '草稿', remark: '客户标签与画像', isStarred: false, owner: '当前用户' },
		{ id: '3', name: '订单明细数据集', type: '表格', recordCount: 25600, createTime: '2025-02-18 09:15', updateTime: '2025-02-22 16:30', status: '已发布', remark: '订单明细与物流', isStarred: true, owner: '当前用户' },
		{ id: '4', name: '库存数据集', type: '文件', recordCount: 5200, createTime: '2025-02-17 11:00', updateTime: '2025-02-21 10:00', status: '已下线', remark: '仓库库存快照', isStarred: false, owner: '其他用户' }
	]);
	var dataList = listState[0];
	var setDataList = listState[1];

	var pageState = useState(1);
	var page = pageState[0];
	var setPage = pageState[1];
	var pageSizeState = useState(20);
	var pageSize = pageSizeState[0];

	var modalState = useState({ open: false, record: null, mode: 'view' });
	var modalOpen = modalState[0].open;
	var modalRecord = modalState[0].record;
	var modalMode = modalState[0].mode;
	var setModalState = modalState[1];

	var dropdownOpenIdState = useState(null);
	var dropdownOpenId = dropdownOpenIdState[0];
	var setDropdownOpenId = dropdownOpenIdState[1];

	var confirmState = useState({ open: false, record: null });
	var confirmOpen = confirmState[0].open;
	var confirmRecord = confirmState[0].record;
	var setConfirmState = confirmState[1];

	var toastState = useState({ show: false, text: '' });
	var toastShow = toastState[0].show;
	var toastText = toastState[0].text;
	var setToastState = toastState[1];

	var typeOptions = useMemo(function () {
		return [
			{ value: '表格', label: '表格' },
			{ value: '文件', label: '文件' },
			{ value: 'API', label: 'API' }
		];
	}, []);

	var statusOptions = useMemo(function () {
		return [
			{ value: '草稿', label: '草稿' },
			{ value: '已发布', label: '已发布' },
			{ value: '已下线', label: '已下线' }
		];
	}, []);

	var sortOptions = useMemo(function () {
		return [
			{ value: 'updated_desc', label: '最近更新' },
			{ value: 'created_desc', label: '最近创建' },
			{ value: 'name_asc', label: '名称 A-Z' },
			{ value: 'name_desc', label: '名称 Z-A' }
		];
	}, []);

	var filteredList = useMemo(function () {
		var list = dataList.slice();
		if (activeTab === 'mine') list = list.filter(function (r) { return r.owner === '当前用户'; });
		if (activeTab === 'published') list = list.filter(function (r) { return r.status === '已发布'; });
		if (activeTab === 'draft') list = list.filter(function (r) { return r.status === '草稿'; });
		if (activeTab === 'starred') list = list.filter(function (r) { return r.isStarred; });
		if (filters.keyword) {
			var kw = filters.keyword.trim().toLowerCase();
			list = list.filter(function (r) {
				return (r.name && r.name.toLowerCase().indexOf(kw) !== -1) ||
					(r.remark && r.remark.toLowerCase().indexOf(kw) !== -1);
			});
		}
		if (filters.datasetType) list = list.filter(function (r) { return r.type === filters.datasetType; });
		if (filters.status) list = list.filter(function (r) { return r.status === filters.status; });
		if (sortBy === 'updated_desc') list.sort(function (a, b) { return (b.updateTime || b.createTime || '').localeCompare(a.updateTime || a.createTime || ''); });
		else if (sortBy === 'created_desc') list.sort(function (a, b) { return (b.createTime || '').localeCompare(a.createTime || ''); });
		else if (sortBy === 'name_asc') list.sort(function (a, b) { return (a.name || '').localeCompare(b.name || ''); });
		else if (sortBy === 'name_desc') list.sort(function (a, b) { return (b.name || '').localeCompare(a.name || ''); });
		return list;
	}, [dataList, activeTab, filters, sortBy]);

	var displayList = useMemo(function () {
		var start = (page - 1) * pageSize;
		return filteredList.slice(start, start + pageSize);
	}, [filteredList, page, pageSize]);

	var totalCount = filteredList.length;

	var handleQuery = useCallback(function () { setPage(1); }, []);
	var handleReset = useCallback(function () {
		setFilters({ keyword: '', datasetType: '', status: '' });
		setPage(1);
	}, []);

	var openModal = useCallback(function (record, mode) {
		setModalState({ open: true, record: record || null, mode: mode || 'view' });
		setDropdownOpenId(null);
	}, []);
	var closeModal = useCallback(function () {
		setModalState({ open: false, record: null, mode: 'view' });
	}, []);

	var showToast = useCallback(function (text) {
		setToastState({ show: true, text: text });
		setTimeout(function () { setToastState({ show: false, text: '' }); }, 2000);
	}, []);

	var toggleStar = useCallback(function (record, e) {
		if (e) e.stopPropagation();
		setDataList(dataList.map(function (r) {
			if (r.id === record.id) return Object.assign({}, r, { isStarred: !r.isStarred });
			return r;
		}));
	}, [dataList]);

	var openConfirm = useCallback(function (record) {
		setConfirmState({ open: true, record: record });
		setDropdownOpenId(null);
	}, []);
	var closeConfirm = useCallback(function () {
		setConfirmState({ open: false, record: null });
	}, []);
	var handleDelete = useCallback(function (record) {
		setDataList(dataList.filter(function (r) { return r.id !== record.id; }));
		closeConfirm();
		showToast('已删除');
	}, [dataList]);

	function statusTag(status) {
		var bg = status === '已发布' ? '#e7f5ec' : (status === '草稿' ? '#f0f0f0' : '#fdf3e6');
		var color = status === '已发布' ? colors.success : (status === '草稿' ? colors.textSecondary : colors.warning);
		return React.createElement('span', {
			style: {
				display: 'inline-block',
				padding: '2px 8px',
				borderRadius: 4,
				fontSize: 12,
				background: bg,
				color: color
			}
		}, status);
	}

	var tabs = [
		{ key: 'all', label: '全部' },
		{ key: 'mine', label: '我创建的' },
		{ key: 'starred', label: '已加星' },
		{ key: 'published', label: '已发布' },
		{ key: 'draft', label: '草稿' }
	];

	return React.createElement('div', {
		style: { minHeight: '100vh', background: colors.pageBg, padding: '24px 24px 48px', position: 'relative' }
	},
		// 标题栏
		React.createElement('div', {
			style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12 }
		},
			React.createElement('h1', { style: { margin: 0, fontSize: 24, fontWeight: 600, color: colors.text } }, '数据集'),
			React.createElement('button', {
				type: 'button',
				onClick: function () { openModal(null, 'add'); },
				style: {
					padding: '6px 16px',
					border: 'none',
					borderRadius: 6,
					background: colors.primary,
					color: '#fff',
					fontSize: 14,
					cursor: 'pointer',
					fontWeight: 500
				}
			}, '新建数据集')
		),

		// 搜索与筛选
		React.createElement('div', {
			style: { background: colors.cardBg, border: '1px solid ' + colors.border, borderRadius: 6, padding: '12px 16px', marginBottom: 0 }
		},
			React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12 } },
				React.createElement('div', { style: { display: 'flex', width: 280 } },
					React.createElement('input', {
						type: 'text',
						placeholder: '搜索数据集…',
						value: filters.keyword,
						onChange: function (e) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.keyword = e.target.value; return g; }); },
						onKeyDown: function (e) { if (e.key === 'Enter') handleQuery(); },
						style: {
							flex: 1,
							padding: '6px 12px',
							border: '1px solid ' + colors.border,
							borderRight: 'none',
							borderRadius: '6px 0 0 6px',
							fontSize: 14,
							outline: 'none'
						}
					}),
					React.createElement('button', {
						type: 'button',
						onClick: handleQuery,
						style: {
							padding: '6px 12px',
							border: '1px solid ' + colors.border,
							borderRadius: '0 6px 6px 0',
							background: colors.pageBg,
							cursor: 'pointer',
							fontSize: 14
						}
					}, '搜索')
				),
				React.createElement('select', {
					value: filters.datasetType,
					onChange: function (e) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.datasetType = e.target.value; return g; }); },
					style: { width: 100, padding: '6px 8px', border: '1px solid ' + colors.border, borderRadius: 6, fontSize: 14 }
				},
					React.createElement('option', { value: '' }, '类型'),
					typeOptions.map(function (o) { return React.createElement('option', { key: o.value, value: o.value }, o.label); })
				),
				React.createElement('select', {
					value: filters.status,
					onChange: function (e) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.status = e.target.value; return g; }); },
					style: { width: 100, padding: '6px 8px', border: '1px solid ' + colors.border, borderRadius: 6, fontSize: 14 }
				},
					React.createElement('option', { value: '' }, '状态'),
					statusOptions.map(function (o) { return React.createElement('option', { key: o.value, value: o.value }, o.label); })
				),
				React.createElement('button', { type: 'button', onClick: handleQuery, style: { padding: '6px 14px', border: '1px solid ' + colors.border, borderRadius: 6, background: colors.cardBg, cursor: 'pointer', fontSize: 14 } }, '搜索'),
				React.createElement('button', { type: 'button', onClick: handleReset, style: { padding: '6px 14px', border: '1px solid ' + colors.border, borderRadius: 6, background: colors.cardBg, cursor: 'pointer', fontSize: 14 } }, '重置'),
				React.createElement('span', { style: { marginLeft: 'auto', color: colors.textMuted, fontSize: 12 } },
					'排序：',
					React.createElement('select', {
						value: sortBy,
						onChange: function (e) { setSortBy(e.target.value); },
						style: { width: 120, marginLeft: 4, padding: '4px 8px', border: 'none', background: 'transparent', fontSize: 12, color: colors.textSecondary, cursor: 'pointer' }
					},
						sortOptions.map(function (o) { return React.createElement('option', { key: o.value, value: o.value }, o.label); })
					)
				)
			)
		),

		// Tab
		React.createElement('div', {
			style: { background: colors.cardBg, border: '1px solid ' + colors.border, borderTop: 'none', borderRadius: '0 0 6px 6px', padding: '0 16px', marginBottom: 16, display: 'flex', gap: 8 }
		},
			tabs.map(function (t) {
				var isActive = activeTab === t.key;
				return React.createElement('button', {
					key: t.key,
					type: 'button',
					onClick: function () { setActiveTab(t.key); setPage(1); },
					style: {
						padding: '12px 4px',
						margin: 0,
						border: 'none',
						background: 'none',
						cursor: 'pointer',
						fontSize: 14,
						color: isActive ? colors.tabActive : colors.tabInactive,
						fontWeight: isActive ? 600 : 400,
						borderBottom: '2px solid ' + (isActive ? colors.primary : 'transparent'),
						marginBottom: -1
					}
				}, t.label);
			})
		),

		// 列表
		React.createElement('div', {
			style: { background: colors.cardBg, border: '1px solid ' + colors.border, borderRadius: 6, overflow: 'hidden' }
		},
			displayList.length === 0
				? React.createElement('div', { style: { padding: 48, textAlign: 'center', color: colors.textMuted } }, activeTab === 'all' && !filters.keyword ? '暂无数据集，点击「新建数据集」创建' : '没有匹配的数据集')
				: displayList.map(function (row) {
					var menuOpen = dropdownOpenId === row.id;
					return React.createElement('div', {
						key: row.id,
						style: {
							display: 'flex',
							alignItems: 'flex-start',
							padding: '12px 16px',
							borderBottom: '1px solid ' + colors.borderLight,
							cursor: 'pointer',
							transition: 'background 0.15s'
						},
						onMouseEnter: function (e) { e.currentTarget.style.background = colors.hoverBg; },
						onMouseLeave: function (e) { e.currentTarget.style.background = 'transparent'; },
						onClick: function (e) {
							if (e.target.closest('button') || e.target.closest('[data-dropdown]')) return;
							openModal(row, 'view');
						}
					},
						React.createElement('div', {
							style: {
								width: 40, height: 40, borderRadius: 6, background: colors.pageBg, border: '1px solid ' + colors.border,
								marginRight: 12, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: colors.primary
							}
						}, '\uD83D\uDCCA'),
						React.createElement('div', { style: { flex: 1, minWidth: 0 } },
							React.createElement('div', { style: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8, marginBottom: 4 } },
								React.createElement('span', { style: { fontSize: 14, fontWeight: 600, color: colors.link } }, row.name),
								statusTag(row.status),
								React.createElement('span', { style: { fontSize: 12, color: colors.textMuted } }, row.type + ' · ' + (row.recordCount != null ? row.recordCount.toLocaleString() + ' 条' : '-'))
							),
							row.remark ? React.createElement('div', { style: { fontSize: 13, color: colors.textSecondary, marginBottom: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, row.remark) : null,
							React.createElement('div', { style: { fontSize: 12, color: colors.textMuted } }, '更新于 ' + (row.updateTime || row.createTime || '-'))
						),
						React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }, onClick: function (e) { e.stopPropagation(); } },
							React.createElement('button', {
								type: 'button',
								title: row.isStarred ? '取消加星' : '加星',
								onClick: function (e) { toggleStar(row, e); },
								style: { border: 'none', background: 'none', cursor: 'pointer', padding: 4, fontSize: 16, color: row.isStarred ? '#c17d10' : colors.textMuted }
							}, '\u2605'),
							React.createElement('div', { style: { position: 'relative' }, 'data-dropdown': true },
								React.createElement('button', {
									type: 'button',
									onClick: function (e) { e.stopPropagation(); setDropdownOpenId(menuOpen ? null : row.id); },
									style: { border: 'none', background: 'none', cursor: 'pointer', padding: '2px 8px', fontSize: 16, color: colors.textSecondary }
								}, '\u22EE'),
								menuOpen ? React.createElement('div', {
									style: {
										position: 'absolute',
										right: 0,
										top: '100%',
										marginTop: 4,
										background: colors.cardBg,
										border: '1px solid ' + colors.border,
										borderRadius: 6,
										boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
										minWidth: 100,
										zIndex: 10
									}
								},
									React.createElement('div', { style: { padding: '6px 12px', cursor: 'pointer', fontSize: 13 }, onClick: function () { openModal(row, 'view'); setDropdownOpenId(null); } }, '查看'),
									React.createElement('div', { style: { padding: '6px 12px', cursor: 'pointer', fontSize: 13 }, onClick: function () { openModal(row, 'edit'); setDropdownOpenId(null); } }, '编辑'),
									React.createElement('div', { style: { borderTop: '1px solid ' + colors.borderLight } }),
									React.createElement('div', { style: { padding: '6px 12px', cursor: 'pointer', fontSize: 13, color: colors.danger }, onClick: function () { openConfirm(row); } }, '删除')
								) : null
							)
						)
					);
				})
		),

		// 分页
		totalCount > 0 ? React.createElement('div', {
			style: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center', padding: '16px 0', gap: 16, fontSize: 13, color: colors.textSecondary }
		},
			React.createElement('span', null, '共 ' + totalCount + ' 项'),
			React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
				React.createElement('button', {
					type: 'button',
					disabled: page <= 1,
					onClick: function () { setPage(page - 1); },
					style: { padding: '4px 10px', border: '1px solid ' + colors.border, borderRadius: 4, background: colors.cardBg, cursor: page <= 1 ? 'not-allowed' : 'pointer', opacity: page <= 1 ? 0.6 : 1 }
				}, '上一页'),
				React.createElement('span', null, page + ' / ' + Math.max(1, Math.ceil(totalCount / pageSize))),
				React.createElement('button', {
					type: 'button',
					disabled: page >= Math.ceil(totalCount / pageSize),
					onClick: function () { setPage(page + 1); },
					style: { padding: '4px 10px', border: '1px solid ' + colors.border, borderRadius: 4, background: colors.cardBg, cursor: page >= Math.ceil(totalCount / pageSize) ? 'not-allowed' : 'pointer', opacity: page >= Math.ceil(totalCount / pageSize) ? 0.6 : 1 }
				}, '下一页')
			)
		) : null,

		// 弹窗（查看/编辑/新增）
		modalOpen && React.createElement('div', {
			style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' },
			onClick: function (e) { if (e.target === e.currentTarget) closeModal(); }
		},
			React.createElement('div', {
				style: { background: colors.cardBg, borderRadius: 8, width: 520, maxWidth: '90vw', maxHeight: '90vh', overflow: 'auto', boxShadow: '0 6px 16px rgba(0,0,0,0.2)' },
				onClick: function (e) { e.stopPropagation(); }
			},
				React.createElement('div', { style: { padding: '16px 24px', borderBottom: '1px solid ' + colors.border, fontSize: 16, fontWeight: 600 } },
					modalMode === 'view' ? '查看数据集' : (modalMode === 'edit' ? '编辑数据集' : '新建数据集')
				),
				(modalRecord || modalMode === 'add') && React.createElement('div', { style: { padding: 24 } },
					React.createElement('div', { style: { marginBottom: 16 } },
						React.createElement('div', { style: { marginBottom: 4, color: colors.textSecondary, fontSize: 13 } }, '数据集名称'),
						modalMode === 'view' ? (modalRecord && modalRecord.name) : React.createElement('input', {
							type: 'text',
							placeholder: '请输入名称',
							defaultValue: modalRecord && modalRecord.name,
							style: { width: '100%', padding: '8px 12px', border: '1px solid ' + colors.border, borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }
						})
					),
					React.createElement('div', { style: { marginBottom: 16 } },
						React.createElement('div', { style: { marginBottom: 4, color: colors.textSecondary, fontSize: 13 } }, '类型'),
						modalMode === 'view' ? (modalRecord && modalRecord.type) : React.createElement('select', {
							defaultValue: modalRecord && modalRecord.type,
							style: { width: '100%', padding: '8px 12px', border: '1px solid ' + colors.border, borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }
						}, typeOptions.map(function (o) { return React.createElement('option', { key: o.value, value: o.value }, o.label); }))
					),
					React.createElement('div', { style: { marginBottom: 16 } },
						React.createElement('div', { style: { marginBottom: 4, color: colors.textSecondary, fontSize: 13 } }, '备注'),
						modalMode === 'view' ? (modalRecord && modalRecord.remark) || '-' : React.createElement('textarea', {
							placeholder: '选填',
							defaultValue: modalRecord && modalRecord.remark,
							rows: 3,
							style: { width: '100%', padding: '8px 12px', border: '1px solid ' + colors.border, borderRadius: 6, fontSize: 14, boxSizing: 'border-box', resize: 'vertical' }
						})
					)
				),
				React.createElement('div', { style: { padding: '12px 24px', borderTop: '1px solid ' + colors.border, display: 'flex', justifyContent: 'flex-end', gap: 8 } },
					modalMode === 'view'
						? React.createElement('button', { type: 'button', onClick: closeModal, style: { padding: '6px 16px', border: '1px solid ' + colors.border, borderRadius: 6, background: colors.cardBg, cursor: 'pointer', fontSize: 14 } }, '关闭')
						: [
							React.createElement('button', { key: 'cancel', type: 'button', onClick: closeModal, style: { padding: '6px 16px', border: '1px solid ' + colors.border, borderRadius: 6, background: colors.cardBg, cursor: 'pointer', fontSize: 14 } }, '取消'),
							React.createElement('button', {
								key: 'save',
								type: 'button',
								onClick: function () { showToast(modalMode === 'add' ? '创建成功' : '已保存'); closeModal(); },
								style: { padding: '6px 16px', border: 'none', borderRadius: 6, background: colors.primary, color: '#fff', cursor: 'pointer', fontSize: 14 }
							}, modalMode === 'add' ? '创建' : '保存')
						]
				)
			)
		),

		// 删除确认弹窗
		confirmOpen && confirmRecord && React.createElement('div', {
			style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1001, display: 'flex', alignItems: 'center', justifyContent: 'center' },
			onClick: function (e) { if (e.target === e.currentTarget) closeConfirm(); }
		},
			React.createElement('div', {
				style: { background: colors.cardBg, borderRadius: 8, padding: 24, width: 400, maxWidth: '90vw', boxShadow: '0 6px 16px rgba(0,0,0,0.2)' },
				onClick: function (e) { e.stopPropagation(); }
			},
				React.createElement('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 8 } }, '删除数据集'),
				React.createElement('div', { style: { color: colors.textSecondary, marginBottom: 24 } }, '确定要删除「' + (confirmRecord.name || '') + '」吗？此操作不可恢复。'),
				React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
					React.createElement('button', { type: 'button', onClick: closeConfirm, style: { padding: '6px 16px', border: '1px solid ' + colors.border, borderRadius: 6, background: colors.cardBg, cursor: 'pointer', fontSize: 14 } }, '取消'),
					React.createElement('button', {
						type: 'button',
						onClick: function () { handleDelete(confirmRecord); },
						style: { padding: '6px 16px', border: 'none', borderRadius: 6, background: colors.danger, color: '#fff', cursor: 'pointer', fontSize: 14 }
					}, '删除')
				)
			)
		),

		// 轻提示
		toastShow && React.createElement('div', {
			style: {
				position: 'fixed',
				left: '50%',
				bottom: 48,
				transform: 'translateX(-50%)',
				padding: '8px 16px',
				background: 'rgba(0,0,0,0.75)',
				color: '#fff',
				borderRadius: 6,
				fontSize: 14,
				zIndex: 1002
			}
		}, toastText)
	);
};