'use client'; import { useEffect, useMemo, useState } from 'react'; import Link from 'next/link'; import { useParams, useRouter } from 'next/navigation'; import { AlertTriangle, CheckCircle2, ChevronLeft, CircleAlert, FileArchive, ImagePlus, Loader2, Package, Plus, Send, Trash2, Upload } from 'lucide-react'; import { api } from '@/lib/api'; type Category = { id: string; name: string }; type Variant = { name: string; price: string; stock: string; inventoryZip: File | null }; const AUTO_ZIP = 'AUTO_ZIP'; const AUTO_TXT = 'AUTO_TXT'; export default function CreateProductPage() { const router = useRouter(); const { locale } = useParams<{ locale: string }>(); const [categories, setCategories] = useState([]); const [name, setName] = useState(''); const [slug, setSlug] = useState(''); const [categoryId, setCategoryId] = useState(''); const [deliveryMethod, setDeliveryMethod] = useState('MANUAL'); const [deliveryTime, setDeliveryTime] = useState('1 - 24 giờ'); const [warranty, setWarranty] = useState('24 giờ'); const [platform, setPlatform] = useState('PC'); const [description, setDescription] = useState(''); const [images, setImages] = useState([]); const [uploadingImages, setUploadingImages] = useState(false); const [variants, setVariants] = useState([{ name: 'Mặc định', price: '', stock: '', inventoryZip: null }]); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const automatic = [AUTO_ZIP, AUTO_TXT].includes(deliveryMethod); const textInventory = deliveryMethod === AUTO_TXT; useEffect(() => { api.get('/categories/flat').then((res) => { const rows = res.data?.data || res.data || []; setCategories(rows); if (!rows.length) setError('Cơ sở dữ liệu chưa có danh mục.'); }).catch(() => setError('Không thể kết nối API danh mục.')); }, []); const slugify = (value: string) => value.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/đ/gi, 'd').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''); const updateVariant = (index: number, key: keyof Variant, value: string | File | null) => { if (key === 'inventoryZip' && value instanceof File) { const valid = textInventory ? value.name.toLowerCase().endsWith('.txt') : value.name.toLowerCase().endsWith('.zip'); if (!valid) { setError(textInventory ? 'Kho TXT chỉ nhận tệp .txt.' : 'Kho ZIP chỉ nhận tệp .zip.'); return; } } setVariants((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, [key]: value } : item)); }; const checks = useMemo(() => [ { label: 'Đã chọn danh mục', ready: Boolean(categoryId) }, { label: 'Tiêu đề sản phẩm rõ ràng', ready: name.trim().length >= 6 }, { label: 'Slug URL hợp lệ', ready: /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug) }, { label: 'Mỗi SKU có giá bán', ready: variants.every((item) => Number(item.price) > 0) }, { label: automatic ? 'Mỗi SKU đã có file kho ZIP hoặc TXT riêng' : 'Đã chọn cách giao hàng', ready: !automatic || variants.every((item) => item.inventoryZip) }, { label: 'Đã thêm mô tả sản phẩm', ready: description.trim().length >= 20 }, ], [categoryId, name, slug, variants, automatic, description]); const progress = Math.round(checks.filter((item) => item.ready).length * 100 / checks.length); const uploadImages = async (files: FileList | null) => { if (!files?.length) return; const selected = [...files]; if (images.length + selected.length > 8) return setError('Mỗi sản phẩm tối đa 8 ảnh.'); if (selected.some((file) => !['image/jpeg', 'image/png', 'image/webp', 'image/gif'].includes(file.type))) return setError('Chỉ nhận ảnh JPG, PNG, WEBP hoặc GIF.'); if (selected.some((file) => file.size > 10 * 1024 * 1024)) return setError('Mỗi ảnh tối đa 10 MB.'); setUploadingImages(true); setError(''); try { for (const file of selected) { const body = new FormData(); body.append('file', file); const url = (await api.post('/upload', body)).data.url as string; setImages((current) => [...current, url]); } } catch (uploadError: any) { setError(uploadError.response?.data?.message || 'Không thể tải ảnh lên.'); } finally { setUploadingImages(false); } }; const submit = async (event: React.FormEvent) => { event.preventDefault(); setError(''); const missing = checks.find((item) => !item.ready); if (missing) return setError(`Chưa thể đăng sản phẩm: ${missing.label.toLowerCase()}.`); setLoading(true); try { const payload = { name: name.trim(), slug, categoryId, description: description.trim(), price: Number(variants[0].price), stock: automatic ? 0 : Number(variants[0].stock) || 0, image: images[0] || '', images, deliveryMethod, deliveryTime, warranty, platform, variants: variants.map((item) => ({ name: item.name.trim() || 'Mặc định', price: Number(item.price), stock: automatic ? 0 : Number(item.stock) || 0 })) }; const created = await api.post('/products', payload); if (automatic) for (const [index, variant] of variants.entries()) { const body = new FormData(); const file = variant.inventoryZip as File; body.append('file', file); await api.post(`/seller/products/${created.data.id}/${textInventory ? 'inventory-txt' : 'inventory-zip'}`, body, { params: { variantId: created.data.variants[index].id } }); } router.push(`/${locale}/seller/products`); } catch (requestError: any) { const message = requestError.response?.data?.message; setError(Array.isArray(message) ? message.join(', ') : message || 'Không thể đăng sản phẩm.'); } finally { setLoading(false); } }; return

Tạo sản phẩm mới

Thiết lập thông tin bán hàng, SKU và kho ZIP riêng theo từng biến thể.

{ setName(event.target.value); setSlug(slugify(event.target.value)); }} placeholder="Ví dụ: Key bản quyền Windows 11 Pro" />

Dữ liệu lấy trực tiếp từ MySQL.

shopmmo.vn/ setSlug(slugify(event.target.value))} />
{['PC', 'Android', 'iOS', 'VN'].map((item) => )}

{deliveryMethod === AUTO_ZIP ? 'ZIP gồm các thư mục; mỗi thư mục là một tài khoản.' : deliveryMethod === AUTO_TXT ? 'TXT: mỗi dòng abc|pass|thông tin là một tài khoản.' : 'Seller xác nhận bàn giao đơn hàng.'}

 setWarranty(event.target.value)} />
{deliveryMethod === AUTO_ZIP ? 'Kho ZIP theo SKU' : deliveryMethod === AUTO_TXT ? 'Kho TXT theo SKU' : 'Tồn kho thủ công'}

Mỗi SKU có giá và kho tách biệt.

Tên biến thểGiá (VND)Tồn khoKho ZIP / TXT riêng
{variants.map((variant, index) =>
updateVariant(index, 'name', event.target.value)} placeholder="Tên biến thể" /> updateVariant(index, 'price', event.target.value)} placeholder="49000" /> updateVariant(index, 'stock', event.target.value)} placeholder={automatic ? 'Theo kho' : '0'} />{automatic ? : Kho thủ công}
)}