'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, Save, Trash2, Upload } from 'lucide-react'; import { api } from '@/lib/api'; type Category = { id: string; name: string }; type Variant = { id?: string; name: string; price: string; stock: string; inventoryZip: File | null }; const AUTO = 'AUTO_ZIP'; const AUTO_TXT = 'AUTO_TXT'; export default function EditProductPage() { const router = useRouter(); const { locale, id } = useParams<{ locale: string; id: string }>(); const [categories, setCategories] = useState([]); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [uploadingImages, setUploadingImages] = useState(false); const [error, setError] = useState(''); const [name, setName] = useState(''); const [slug, setSlug] = useState(''); const [categoryId, setCategoryId] = useState(''); const [status, setStatus] = useState('ACTIVE'); 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 [variants, setVariants] = useState([]); const automatic = [AUTO, AUTO_TXT].includes(deliveryMethod); const textInventory = deliveryMethod === AUTO_TXT; useEffect(() => { Promise.all([api.get('/categories/flat'), api.get(`/products/my/${id}`)]).then(([categoryResponse, productResponse]) => { setCategories(categoryResponse.data?.data || categoryResponse.data || []); const product = productResponse.data; setName(product.name || ''); setSlug(product.slug || ''); setCategoryId(product.categoryId || ''); setStatus(product.status || 'ACTIVE'); setDeliveryMethod(product.deliveryMethod === 'AUTO' ? AUTO : (product.deliveryMethod || 'MANUAL')); setDeliveryTime(product.deliveryTime || '1 - 24 giờ'); setWarranty(product.warranty || '24 giờ'); setPlatform(product.platform || 'PC'); setDescription(product.description || ''); setImages(product.images?.map((item: any) => item.url) || []); setVariants(product.variants?.map((item: any) => ({ id: item.id, name: item.name, price: String(item.price), stock: String(item.stock || 0), inventoryZip: null })) || [{ name: 'Mặc định', price: '', stock: '', inventoryZip: null }]); }).catch((requestError: any) => setError(requestError.response?.data?.message || 'Không thể tải sản phẩm.')).finally(() => setLoading(false)); }, [id]); 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.length > 0 && variants.every((item) => Number(item.price) > 0) }, { label: 'Đã thêm mô tả sản phẩm', ready: description.trim().length >= 20 }], [categoryId, name, slug, variants, 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 (requestError: any) { setError(requestError.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ể lưu: ${missing.label.toLowerCase()}.`); setSaving(true); try { const payload = { name: name.trim(), slug, categoryId, status, 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) => ({ id: item.id, name: item.name.trim() || 'Mặc định', price: Number(item.price), stock: automatic ? 0 : Number(item.stock) || 0 })) }; const updated = await api.patch(`/products/${id}`, payload); if (automatic) for (const variant of variants) if (variant.inventoryZip) { const savedVariant = variant.id ? updated.data.variants.find((item: { id: string }) => item.id === variant.id) : updated.data.variants.find((item: { name: string }) => item.name === variant.name); if (!savedVariant) throw new Error(`Không tìm thấy SKU ${variant.name} sau khi lưu.`); const body = new FormData(); body.append('file', variant.inventoryZip); await api.post(`/seller/products/${id}/${textInventory ? 'inventory-txt' : 'inventory-zip'}`, body, { params: { variantId: savedVariant.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ể cập nhật sản phẩm.'); } finally { setSaving(false); } }; if (loading) return
; return

Chỉnh sửa sản phẩm

Cùng bố cục với tạo sản phẩm. Kho ZIP hoặc TXT hiện có được giữ nguyên khi lưu.

{ setName(event.target.value); setSlug(slugify(event.target.value)); }} />
shopmmo.vn/ setSlug(slugify(event.target.value))} />
setWarranty(event.target.value)} /> setPlatform(event.target.value)} />
{automatic &&

{textInventory ? 'TXT: mỗi dòng abc|pass|thông tin là một tài khoản.' : 'ZIP: mỗi thư mục cấp một là một tài khoản.'} Kho cũ không bị ghi đè.

}

SKU cũ giữ nguyên liên kết kho; chỉ SKU chưa có hàng mới có thể xóa.

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