import React from 'react';
import { Link } from '@inertiajs/react';
import { Box, Barcode, Layers, Printer, Check, Loader2, MessageCircle, FileDown } from 'lucide-react';
import { formatRupiah } from '@/Utils/format';
import { openSingleProductBarcodeWa } from '@/Utils/supplierBarcodeNotifier';

const PACKAGING_OPTIONS = [
    {
        value: 'PACKAGED_UNLABELED',
        label: 'Wajib Stiker',
        shortDesc: 'Kemasan polos UMKM',
        icon: Box,
        activeClass: 'bg-amber-600 text-white shadow-xs font-semibold',
        inactiveClass: 'text-slate-600 hover:text-amber-700 hover:bg-amber-50/70',
    },
    {
        value: 'PACKAGED_BARCODED',
        label: 'Barcode Pabrik',
        shortDesc: 'Scan bawaan pabrik',
        icon: Barcode,
        activeClass: 'bg-blue-600 text-white shadow-xs font-semibold',
        inactiveClass: 'text-slate-600 hover:text-blue-700 hover:bg-blue-50/70',
    },
    {
        value: 'UNPACKAGED',
        label: 'Tanpa Kemasan',
        shortDesc: 'Gorengan / etalase',
        icon: Layers,
        activeClass: 'bg-emerald-600 text-white shadow-xs font-semibold',
        inactiveClass: 'text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/70',
    },
];

export default function SupplierPackagingProductRow({
    product,
    onSelectPackaging,
    onOpenPrint,
    onNotifyWa,
    isUpdating = false,
    isNotifying = false,
    isNotified = false,
}) {
    const isUnclassified = !product.packaging_type || product.packaging_type === 'UNCLASSIFIED';
    const supplierWa = product.supplier?.phone_wa || product.supplier?.phone;

    const handleShareWa = () => {
        if (onNotifyWa) {
            onNotifyWa(product);
        } else {
            openSingleProductBarcodeWa(product.supplier, product);
        }
    };

    return (
        <tr className={`transition-colors text-xs ${isUnclassified ? 'bg-amber-50/30 hover:bg-amber-50/50' : 'hover:bg-slate-50/70'}`}>
            {/* SKU & Status Indicator */}
            <td className="px-4 py-3.5 align-middle">
                <div className="flex items-center gap-2">
                    <span className="font-mono font-bold text-slate-900 px-2 py-0.5 rounded-lg bg-slate-100 border border-slate-200/70 text-[11px] shrink-0">
                        {product.sku || '-'}
                    </span>
                    {isUnclassified && (
                        <span className="px-1.5 py-0.5 rounded text-[9.5px] font-bold uppercase bg-rose-600 text-white shrink-0 shadow-2xs">
                            Perlu Cek
                        </span>
                    )}
                </div>
            </td>

            {/* Product & Supplier Details */}
            <td className="px-4 py-3.5 align-middle">
                <div className="space-y-0.5">
                    <div className="font-semibold text-slate-900 leading-snug">
                        {product.name}
                    </div>
                    <div className="flex items-center gap-2 text-[11px] text-slate-500 flex-wrap">
                        {product.supplier ? (
                            <Link
                                href={`/admin/suppliers/${product.supplier.id}`}
                                className="font-medium text-slate-700 hover:text-slate-900 underline decoration-slate-300 underline-offset-2"
                            >
                                {product.supplier.code} &bull; {product.supplier.name}
                            </Link>
                        ) : (
                            <span className="text-slate-400">Tanpa Supplier</span>
                        )}
                        {product.category && (
                            <span className="text-slate-400">&bull; {product.category}</span>
                        )}
                        <span className={`px-1.5 py-0.2 rounded font-bold text-[10px] ${
                            product.is_perishable
                                ? 'bg-teal-700 text-white'
                                : 'bg-slate-700 text-white'
                        }`}>
                            {product.is_perishable ? 'Harian' : 'Berkala'}
                        </span>
                    </div>
                </div>
            </td>

            {/* Price & Stock */}
            <td className="px-4 py-3.5 align-middle text-right font-mono">
                <div className="text-slate-900 font-bold">
                    {formatRupiah(product.selling_price || 0)}
                </div>
                <div className="text-[10.5px] text-slate-400">
                    Stok: <strong className="text-slate-700">{product.stock || 0}</strong> {product.unit || 'pcs'}
                </div>
            </td>

            {/* 1-Click Tactile Apple HIG Segmented Control */}
            <td className="px-4 py-3.5 align-middle text-center">
                <div className="inline-flex items-center p-0.5 bg-slate-100/90 rounded-xl border border-slate-200/80 shadow-2xs">
                    {PACKAGING_OPTIONS.map((opt) => {
                        const Icon = opt.icon;
                        const isCurrent = product.packaging_type === opt.value;

                        return (
                            <button
                                key={opt.value}
                                type="button"
                                disabled={isUpdating}
                                onClick={() => onSelectPackaging(product, opt.value)}
                                title={opt.shortDesc}
                                className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-all select-none cursor-pointer disabled:opacity-50 ${
                                    isCurrent ? opt.activeClass : opt.inactiveClass
                                }`}
                            >
                                {isUpdating && isCurrent ? (
                                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
                                ) : (
                                    <Icon className="w-3.5 h-3.5" />
                                )}
                                <span className="font-medium text-[11px] whitespace-nowrap">{opt.label}</span>
                            </button>
                        );
                    })}
                </div>
            </td>

            {/* Fast Actions */}
            <td className="px-4 py-3.5 align-middle text-right">
                <div className="flex items-center justify-end gap-1.5">
                    {product.packaging_type === 'PACKAGED_UNLABELED' && supplierWa && (
                        <button
                            type="button"
                            disabled={isNotifying}
                            onClick={handleShareWa}
                            title={
                                isNotifying
                                    ? 'Mengirim notifikasi via bot...'
                                    : isNotified
                                      ? 'Notifikasi stiker barcode sudah terkirim'
                                      : 'Kirim otomatis info wajib stiker ke WhatsApp supplier'
                            }
                            className={`p-1.5 rounded-lg transition-all duration-200 shadow-2xs select-none disabled:opacity-60 cursor-pointer ${
                                isNotified
                                    ? 'bg-emerald-700 text-white'
                                    : 'bg-emerald-700 hover:bg-emerald-800 text-white active:scale-95'
                            }`}
                        >
                            {isNotifying ? (
                                <Loader2 className="w-3.5 h-3.5 animate-spin" />
                            ) : isNotified ? (
                                <Check className="w-3.5 h-3.5 stroke-[2.5]" />
                            ) : (
                                <MessageCircle className="w-3.5 h-3.5" />
                            )}
                        </button>
                    )}
                    <a
                        href={`/admin/products/${product.id}/single-barcode-pdf`}
                        target="_blank"
                        rel="noopener noreferrer"
                        title="Unduh PDF Barcode Label Kemasan (55x25mm Vektor Resolusi Tinggi)"
                        className="inline-flex items-center gap-1 px-2 py-1.5 rounded-lg border border-teal-200/80 bg-teal-50/80 text-teal-800 hover:bg-teal-100 transition-colors text-[11px] font-semibold shadow-2xs"
                    >
                        <FileDown className="w-3.5 h-3.5 text-teal-700" />
                        <span className="hidden xl:inline">PDF Kemasan</span>
                    </a>
                    <button
                        type="button"
                        onClick={() => onOpenPrint(product)}
                        title="Cetak stiker barcode / label kemasan / sheet kasir"
                        className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-slate-200/80 bg-white text-slate-700 hover:bg-slate-50 transition-colors text-[11px] font-medium shadow-2xs"
                    >
                        <Printer className="w-3.5 h-3.5 text-slate-500" />
                        <span>Cetak</span>
                    </button>
                </div>
            </td>
        </tr>
    );
}