'use client'; import { useState } from 'react'; import { useParams, useRouter } from 'next/navigation'; import { motion, AnimatePresence } from 'framer-motion'; import { ArrowLeft, Edit2, Trash2, Package, TrendingUp, ShoppingCart, AlertTriangle, ChevronLeft, ChevronRight, Loader2, Copy, Check, BarChart3, Tag, Layers, ExternalLink, Sparkles, ChevronDown, } from 'lucide-react'; import { cn, formatIDR } from '@/lib/utils'; import { useAdminProductBySlug, useDeleteProduct } from '@/hooks'; import type { Product, ProductVariant } from '@/lib/services/product.service'; import { useUpdateProductStatus } from '@/hooks/useProducts'; import Image from 'next/image'; // ── Copy button ──────────────────────────────────────────────────────── function CopyButton({ text }: { text: string }) { const [copied, setCopied] = useState(false); const copy = () => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return ( ); } // ── Glass card ───────────────────────────────────────────────────────── function GlassCard({ children, className, delay = 0, }: { children: React.ReactNode; className?: string; delay?: number; }) { return ( {children} ); } // ── Section header ───────────────────────────────────────────────────── function SectionHeader({ icon: Icon, label, action, }: { icon: React.ElementType; label: string; action?: React.ReactNode; }) { return (
{label}
{action}
); } // ── Stat card ────────────────────────────────────────────────────────── function StatCard({ icon: Icon, label, value, sub, iconColor, glowColor, }: { icon: React.ElementType; label: string; value: string | number; sub?: string; iconColor: string; glowColor: string; }) { return (

{label}

{value}

{sub && (

{sub}

)}
); } // ── Info row ─────────────────────────────────────────────────────────── function InfoRow({ label, children, }: { label: string; children: React.ReactNode; }) { return (
{label}
{children}
); } // ── Status badge ─────────────────────────────────────────────────────── function Badge({ children, variant = 'default', }: { children: React.ReactNode; variant?: 'green' | 'red' | 'amber' | 'yellow' | 'default'; }) { return ( {children} ); } // ── Image gallery ────────────────────────────────────────────────────── function ImageGallery({ product }: { product: Product }) { const [active, setActive] = useState(0); const images: string[] = product.primary_image_url ? [product.primary_image_url] : []; if (images.length === 0) { return (
Tidak ada gambar
); } return (
{/* Main image */}
{} {product.name} {images.length > 1 && ( <> )} {/* Image count pill */} {images.length > 1 && (
{active + 1} / {images.length}
)}
{/* Thumbnails */} {images.length > 1 && (
{images.map((img, i) => ( ))}
)}
); } // ── Variant table ────────────────────────────────────────────────────── function VariantTable({ variants }: { variants: ProductVariant[] }) { return (
{[ 'Varian', 'SKU', 'Harga', 'Harga Dist.', 'Stok', 'Berat', 'Status', ].map((h) => ( ))} {variants.map((v) => ( ))}
{h}
{v.name}
{v.sku}
{formatIDR(Number(v.price))} {v.price_distributor ? formatIDR(Number(v.price_distributor)) : '-'} {v.stock.toLocaleString('id-ID')} {v.weight}g {v.is_out_of_stock ? ( Habis ) : v.is_low_stock ? ( Terbatas ) : ( Tersedia )}
); } // ── Delete dialog ────────────────────────────────────────────────────── function DeleteDialog({ product, onConfirm, onCancel, isLoading, }: { product: Product; onConfirm: () => void; onCancel: () => void; isLoading: boolean; }) { return (

Hapus Produk?

Tindakan permanen

Produk{' '} {product.name}{' '} beserta semua varian dan gambar akan dihapus dari sistem.

); } // ── Page ─────────────────────────────────────────────────────────────── export default function AdminProductDetailPage() { const router = useRouter(); const params = useParams(); const slug = params.slug as string; const { data: product, isLoading } = useAdminProductBySlug(slug); const deleteMutation = useDeleteProduct(); const updateStatusMutation = useUpdateProductStatus(); const [showDelete, setShowDelete] = useState(false); const handleDelete = () => { if (!product) return; deleteMutation.mutate(product.id, { onSuccess: () => router.push('/dashboard/admin/products'), }); }; if (isLoading) { return (
{Array.from({ length: 4 }).map((_, i) => (
))}
); } if (!product) { return (

Produk Tidak Ditemukan

Mungkin URL salah atau produk telah dihapus.

); } const isOutOfStock = product.variants.every((v) => v.is_out_of_stock); const priceLabel = product.min_price === product.max_price ? formatIDR(product.min_price) : `${formatIDR(product.min_price)} – ${formatIDR(product.max_price)}`; return (
{/* Background Glow Blobs */}
{/* ── Header ── */}

{product.name}

SKU: {product.sku}
Lihat di Toko
{/* ── Main grid ── */}
{/* ── LEFT ── */}
{/* ── SELECT STATUS INTERAKTIF ── */}
{updateStatusMutation.isPending && ( )}
{isOutOfStock ? ( Habis ) : ( Tersedia )} {product.is_featured ? ( Unggulan ) : ( — )} {product.category.name} {priceLabel} {new Date(product.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric', })}
{product.category.image_url ? ( {product.category.name} ) : (
)}

{product.category.name}

/{product.category.slug}

{/* ── RIGHT ── */}
{(product.description || product.short_description) && (
{product.short_description && (

{product.short_description}

)} {product.description && (

{product.description}

)}
)}
{showDelete && ( setShowDelete(false)} isLoading={deleteMutation.isPending} /> )}
); }