import { Head, router, useForm } from '@inertiajs/react'
import { useRef, useState } from 'react'
import { LimsAppLayout } from '@/layouts/lims-app-layout'
import { Button } from '@ui/components/ui/button'
import { Badge } from '@ui/components/ui/badge'
import { Input } from '@ui/components/ui/input'
import { Label } from '@ui/components/ui/label'
import { Textarea } from '@ui/components/ui/textarea'
import { Checkbox } from '@ui/components/ui/checkbox'
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@ui/components/ui/sheet'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@ui/components/ui/dropdown-menu'
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@ui/components/ui/alert-dialog'
import { type SalesOrder, type SalesOrderPayment } from '@/types/glims'
import SalesOrderController from '@/actions/App/Modules/SalesOrder/Infrastructure/Controllers/SalesOrderController'
import SalesOrderStatusController from '@/actions/App/Modules/SalesOrder/Infrastructure/Controllers/SalesOrderStatusController'
import SalesOrderPaymentController from '@/actions/App/Modules/SalesOrder/Infrastructure/Controllers/SalesOrderPaymentController'
import { CheckCircle2, ChevronLeft, Copy, Download, Ellipsis, Pencil, Plus, Printer, RotateCcw, Save, Send, Trash2, X, XCircle } from 'lucide-react'
import { toast } from 'sonner'

interface SelectOption {
    id: number
    code: string
    name: string
    short_name?: string | null
    default_unit?: string | null
}

interface SampleItemOption {
    id: number
    code: string
    name: string
    item_id?: number | null
    item_category?: string | null
    item_type?: string | null
}

interface AppendixOption {
    id: number
    regulation_id: number
    code: string
    name: string
    appendix_number?: string | null
}

interface WizardParam {
    key: string
    parameter_id: number | null
    parameter_name: string
    method_id: number | null
    test_method: string | null
    unit: string | null
    specification: string | null
    unit_price: number
    cou: number
    selected: boolean
    is_additional: boolean
}

interface Props {
    salesOrder: SalesOrder
    stage: 'quotation' | 'sales_order'
    sampleItemOptions: SampleItemOption[]
    regulationOptions: SelectOption[]
    appendixOptions: AppendixOption[]
    parameterOptions?: SelectOption[]
    methodOptions?: SelectOption[]
}

interface ParameterRow {
    id: string | number
    itemId: number
    paramId: number | null
    sampleType: string
    appendix: string
    parameter: string
    isAdditional: boolean
    category: string
    method: string
    regulation: string
    parameterUnitPrice: string
    isPlaceholderParam: boolean
    sampleCount: number
    quantity: number
    itemUnitPrice: string
    discountPercent: string
    discountAmount: string
    samplingDate: string
}

interface ParameterRowDraft {
    quantity: string
    unit_price: string
}

const STATUS_LABELS: Record<string, string> = {
    draft: 'Draft',
    submitted: 'Diajukan',
    in_review: 'Dalam Review',
    in_progress: 'Dalam Proses',
    completed: 'Selesai',
    cancelled: 'Dibatalkan',
}

const QUOTATION_LABELS: Record<string, string> = {
    draft: 'Draft',
    sent: 'Terkirim',
    accepted: 'Diterima',
    rejected: 'Ditolak',
    revised: 'Direvisi',
}

const QUOTATION_CLASS: Record<string, string> = {
    draft: 'bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-300',
    sent: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
    accepted: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
    rejected: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
    revised: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
}

function formatCurrency(value: string | number) {
    return Number(value).toLocaleString('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 })
}

function formatDate(value: string | null) {
    if (!value) return '-'
    return new Date(value).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' })
}

function formatShortDate(value: string | null) {
    if (!value) return '-'
    return new Date(value).toLocaleDateString('id-ID', { day: '2-digit', month: 'short' })
}

function formatDateRange(start: string, end: string) {
    if (!start && !end) return '-'
    if (start && end) return `${formatDate(start)} s/d ${formatDate(end)}`
    return formatDate(start || end || null)
}

function getFirstErrorMessage(errors: Record<string, unknown>): string {
    const first = Object.values(errors)[0]
    if (typeof first === 'string') return `Gagal: ${first}`
    if (Array.isArray(first) && typeof first[0] === 'string') return `Gagal: ${first[0]}`
    return 'Gagal: terjadi kesalahan. Silakan coba lagi.'
}

function buildInlineFormData(salesOrder: SalesOrder) {
    return {
        transaction_date: salesOrder.transaction_date?.substring(0, 10) ?? '',
        sample_type_id: salesOrder.sample_type_id ?? null,
        branch_id: salesOrder.branch_id ?? null,
        customer_segment_id: salesOrder.customer_segment_id ?? null,
        mou_id: salesOrder.mou_id ?? null,
        contract_period: Number(salesOrder.contract_period ?? 0),
        is_sample_sent: Boolean(salesOrder.is_sample_sent),
        is_repeat: Boolean(salesOrder.is_repeat),
        is_plan_sampling: Boolean(salesOrder.is_plan_sampling),
        is_gmp_sampling: Boolean(salesOrder.is_gmp_sampling),
        is_recheck: Boolean(salesOrder.is_recheck),
        is_acceleration: Boolean(salesOrder.is_acceleration),
        sampling_proposed_start: salesOrder.sampling_proposed_start?.substring(0, 10) ?? '',
        sampling_proposed_end: salesOrder.sampling_proposed_end?.substring(0, 10) ?? '',
        deadline_date: salesOrder.deadline_date?.substring(0, 10) ?? '',
        quotation_number: salesOrder.quotation_number ?? '',
        priority: salesOrder.priority ?? 'normal',
        tax_percentage: String(salesOrder.tax_percentage ?? 0),
        technical_note: salesOrder.technical_note ?? '',
        admin_note: salesOrder.admin_note ?? '',
        internal_marketing_note: salesOrder.internal_marketing_note ?? '',
        notes: salesOrder.notes ?? '',
        lhu_contact_name: salesOrder.lhu_contact_name ?? '',
        lhu_contact_phone: salesOrder.lhu_contact_phone ?? '',
        lhu_delivery_address: salesOrder.lhu_delivery_address ?? '',
        document_delivery_address: salesOrder.document_delivery_address ?? '',
    }
}

function AddPaymentForm({ salesOrder }: { salesOrder: SalesOrder }) {
    const { data, setData, post, processing, errors, reset } = useForm({
        payment_date: new Date().toISOString().substring(0, 10),
        payment_method: 'transfer',
        amount: '',
        discount_amount: '0',
        tax_withheld: '0',
        notes: '',
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()
        post(SalesOrderPaymentController.store(salesOrder).url, {
            onSuccess: () => reset(),
        })
    }

    return (
        <form onSubmit={submit} className='grid grid-cols-2 gap-3 md:grid-cols-4'>
            <div className='space-y-1'>
                <Label className='text-xs'>Tgl Pembayaran</Label>
                <Input type='date' className='h-8' value={data.payment_date} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData('payment_date', e.target.value)} />
            </div>
            <div className='space-y-1'>
                <Label className='text-xs'>Metode</Label>
                <select
                    value={data.payment_method}
                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setData('payment_method', e.target.value)}
                    className='flex h-8 w-full rounded-md border border-input bg-transparent px-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring'
                >
                    <option value='cash'>Cash</option>
                    <option value='transfer'>Transfer</option>
                    <option value='giro'>Giro</option>
                    <option value='cheque'>Cek</option>
                </select>
            </div>
            <div className='space-y-1'>
                <Label className='text-xs'>Jumlah *</Label>
                <Input type='number' min='0.01' step='0.01' className='h-8' value={data.amount} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData('amount', e.target.value)} />
                {errors.amount && <p className='text-xs text-destructive'>{errors.amount}</p>}
            </div>
            <div className='flex items-end'>
                <Button type='submit' size='sm' disabled={processing} className='w-full'>
                    {processing ? 'Menyimpan...' : 'Catat Pembayaran'}
                </Button>
            </div>
        </form>
    )
}

export default function SalesOrderShow({
    salesOrder,
    stage,
    sampleItemOptions = [],
    regulationOptions,
    appendixOptions = [],
    parameterOptions = [],
    methodOptions = [],
}: Props) {
    const [activeTab, setActiveTab] = useState<'parameter' | 'transport' | 'attachment' | 'notes' | 'payment'>('parameter')
    const [searchTerm, setSearchTerm] = useState('')
    const [activeRegulationFilter, setActiveRegulationFilter] = useState<'all' | string>('all')
    const [isInlineEditing, setIsInlineEditing] = useState(false)
    const [editingRowKey, setEditingRowKey] = useState<string | null>(null)
    const [editingRowDraft, setEditingRowDraft] = useState<ParameterRowDraft | null>(null)
    const [rowSaving, setRowSaving] = useState(false)
    const [cancelDialogOpen, setCancelDialogOpen] = useState(false)
    const [cancelReason, setCancelReason] = useState('')
    const [cancelSubmitting, setCancelSubmitting] = useState(false)
    const [editingPaymentId, setEditingPaymentId] = useState<number | null>(null)
    const [paymentDraft, setPaymentDraft] = useState<{
        payment_date: string
        payment_method: string
        amount: string
        notes: string
    } | null>(null)
    const [paymentSaving, setPaymentSaving] = useState(false)
    const [sampleDrawerOpen, setSampleDrawerOpen] = useState(false)
    const [sampleDrawerMode, setSampleDrawerMode] = useState<'create' | 'edit'>('create')
    const [sampleDrawerSaving, setSampleDrawerSaving] = useState(false)
    const [sampleDrawerLoadingParams, setSampleDrawerLoadingParams] = useState(false)
    const [sampleDrawerLoadingRegulations, setSampleDrawerLoadingRegulations] = useState(false)
    const [sampleDrawerItemId, setSampleDrawerItemId] = useState<number | null>(null)
    const [expandedParameterRows, setExpandedParameterRows] = useState<Record<number, boolean>>({})
    const [otherCostDrawerOpen, setOtherCostDrawerOpen] = useState(false)
    const [sampleDrawerData, setSampleDrawerData] = useState({
        sample_item_id: null as number | null,
        sample_type_snapshot: '',
        regulation_id: null as number | null,
        regulation_appendix_id: null as number | null,
        quantity: 1,
    })
    const [sampleDrawerParams, setSampleDrawerParams] = useState<WizardParam[]>([])
    const [sampleDrawerRegulationOptions, setSampleDrawerRegulationOptions] = useState<SelectOption[]>([])
    const [sampleDrawerAdditionalParam, setSampleDrawerAdditionalParam] = useState({
        parameter_id: '',
        parameter_name: '',
        method_id: '',
        test_method: '',
        unit_price: '0',
    })
    const sampleTypeFieldRef = useRef<HTMLDivElement | null>(null)
    const regulationFieldRef = useRef<HTMLDivElement | null>(null)
    const appendixFieldRef = useRef<HTMLDivElement | null>(null)
    const {
        data: inlineData,
        setData: setInlineData,
        put: saveInlineEdit,
        processing: inlineSaving,
        errors: inlineErrors,
        reset: resetInlineEdit,
    } = useForm(buildInlineFormData(salesOrder))
    const {
        data: otherCostData,
        setData: setOtherCostData,
        processing: otherCostSaving,
        errors: otherCostErrors,
        reset: resetOtherCostForm,
    } = useForm({
        sample_item_option_id: '',
        description: '',
        quantity: '1',
        unit: 'PAKET',
        unit_price: '0',
        discount_amount: '0',
        notes: '',
    })

    const quotationStatus = salesOrder.quotation_status || 'draft'
    const canApprove = ['submitted', 'in_review'].includes(salesOrder.status)
    const canSubmit = salesOrder.status === 'draft' && quotationStatus === 'accepted'
    const canPay = !['completed', 'cancelled'].includes(salesOrder.status)
    const canQuotationSend = ['draft', 'revised', 'rejected'].includes(quotationStatus)
    const canQuotationDecision = ['sent', 'revised'].includes(quotationStatus)
    const canDuplicate = salesOrder.status !== 'cancelled'
    const canRevise = salesOrder.status !== 'cancelled'
    const canCancel = !['completed', 'cancelled'].includes(salesOrder.status)
    const canInlineEdit = !['completed', 'cancelled'].includes(salesOrder.status)
    const canItemInlineEdit = ['draft', 'submitted', 'in_review'].includes(salesOrder.status)

    const indexUrl = `${SalesOrderController.index().url}?stage=${stage}`

    function handleSubmit() {
        if (!confirm('Ajukan SO ini untuk diproses?')) return
        router.post(SalesOrderStatusController.submit(salesOrder).url, {}, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil mengajukan Sales Order.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleSendQuotation() {
        if (!confirm('Kirim quotation ini ke customer?')) return
        router.post(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/quotation/send?stage=${stage}`, {}, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil mengirim quotation.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleAcceptQuotation() {
        if (!confirm('Tandai quotation ini sebagai diterima?')) return
        router.post(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/quotation/accept?stage=${stage}`, {}, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil menandai quotation sebagai diterima.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleRejectQuotation() {
        if (!confirm('Tandai quotation ini sebagai ditolak?')) return
        router.post(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/quotation/reject?stage=${stage}`, {}, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil menandai quotation sebagai ditolak.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleApprove() {
        if (!confirm('Setujui dan proses SO ini?')) return
        router.post(SalesOrderStatusController.approve(salesOrder).url, {}, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil menyetujui Sales Order.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleDuplicate() {
        if (!confirm('Duplikat sales order ini?')) return
        router.post(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/duplicate?stage=${stage}`, {}, {
            onSuccess: () => toast.success('Berhasil menduplikat Sales Order.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleRevise() {
        if (!confirm('Buat revisi baru dari sales order ini?')) return
        router.post(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/revise?stage=${stage}`, {}, {
            onSuccess: () => toast.success('Berhasil membuat revisi Sales Order.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleCancel() {
        setCancelDialogOpen(true)
    }

    function handleVerifyPayment(payment: SalesOrderPayment) {
        if (!confirm('Verifikasi pembayaran ini?')) return
        router.patch(
            SalesOrderPaymentController.verify({
                so: salesOrder.uuid ?? salesOrder.id,
                payment: payment.uuid ?? payment.id,
            }).url,
            {},
            {
                preserveScroll: true,
                onSuccess: () => toast.success('Berhasil memverifikasi pembayaran.'),
                onError: (errors) => toast.error(getFirstErrorMessage(errors)),
            }
        )
    }

    function handleInlineEditSave() {
        saveInlineEdit(`${SalesOrderController.update({ so: salesOrder.uuid ?? salesOrder.id }).url}?stage=${stage}`, {
            preserveScroll: true,
            onSuccess: () => {
                setIsInlineEditing(false)
                toast.success('Berhasil memperbarui data header.')
            },
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleInlineEditCancel() {
        resetInlineEdit()
        setIsInlineEditing(false)
    }

    function handleStartRowEdit(row: ParameterRow) {
        setEditingRowKey(`${row.itemId}-${row.paramId ?? 'no-param'}`)
        setEditingRowDraft({
            quantity: String(row.quantity || 1),
            unit_price: row.itemUnitPrice || '0',
        })
    }

    function handleCancelRowEdit() {
        setEditingRowKey(null)
        setEditingRowDraft(null)
    }

    function handleSaveRowEdit(row: ParameterRow) {
        if (!editingRowDraft) return
        setRowSaving(true)
        const soId = salesOrder.uuid ?? salesOrder.id

        router.put(
            `/sales-orders/${soId}/items/${row.itemId}?stage=${stage}`,
            {
                quantity: Number(editingRowDraft.quantity || 1),
                sample_points: Number(editingRowDraft.quantity || 1),
                unit_price: Number(editingRowDraft.unit_price || 0),
                discount_percent: Number(row.discountPercent || 0),
                discount_amount: Number(row.discountAmount || 0),
            },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setEditingRowKey(null)
                    setEditingRowDraft(null)
                    setRowSaving(false)
                    toast.success('Berhasil memperbarui qty dan harga item.')
                },
                onError: (errors) => {
                    setRowSaving(false)
                    toast.error(getFirstErrorMessage(errors))
                },
            }
        )
    }

    function handleConfirmCancel() {
        setCancelSubmitting(true)
        router.post(
            `/sales-orders/${salesOrder.uuid ?? salesOrder.id}/cancel?stage=${stage}`,
            { reason: cancelReason },
            {
                preserveScroll: true,
                onFinish: () => {
                    setCancelSubmitting(false)
                    setCancelDialogOpen(false)
                    setCancelReason('')
                },
                onSuccess: () => toast.success('Berhasil membatalkan Sales Order.'),
                onError: (errors) => toast.error(getFirstErrorMessage(errors)),
            }
        )
    }

    function handleStartPaymentEdit(payment: SalesOrderPayment) {
        if (payment.verified_at) return
        setEditingPaymentId(payment.id)
        setPaymentDraft({
            payment_date: payment.payment_date?.substring(0, 10) ?? new Date().toISOString().substring(0, 10),
            payment_method: payment.payment_method || 'transfer',
            amount: String(payment.amount || ''),
            notes: payment.notes || '',
        })
    }

    function handleCancelPaymentEdit() {
        setEditingPaymentId(null)
        setPaymentDraft(null)
    }

    function handleSavePaymentEdit(payment: SalesOrderPayment) {
        if (!paymentDraft) return
        setPaymentSaving(true)
        router.put(
            `/sales-orders/${salesOrder.uuid ?? salesOrder.id}/payments/${payment.uuid ?? payment.id}?stage=${stage}`,
            {
                payment_date: paymentDraft.payment_date,
                payment_method: paymentDraft.payment_method,
                amount: Number(paymentDraft.amount || 0),
                discount_amount: Number(payment.discount_amount || 0),
                tax_withheld: Number(payment.tax_withheld || 0),
                notes: paymentDraft.notes || null,
            },
            {
                preserveScroll: true,
                onSuccess: () => toast.success('Berhasil memperbarui pembayaran.'),
                onError: (errors) => toast.error(getFirstErrorMessage(errors)),
                onFinish: () => {
                    setPaymentSaving(false)
                    setEditingPaymentId(null)
                    setPaymentDraft(null)
                },
            }
        )
    }

    function handleDeletePayment(payment: SalesOrderPayment) {
        if (payment.verified_at) return
        if (!confirm('Hapus pembayaran ini?')) return
        router.delete(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/payments/${payment.uuid ?? payment.id}?stage=${stage}`, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil menghapus pembayaran.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function handleDeleteItem(itemId: number) {
        if (!confirm('Hapus sampel ini beserta seluruh parameternya?')) return
        router.delete(`/sales-orders/${salesOrder.uuid ?? salesOrder.id}/items/${itemId}?stage=${stage}`, {
            preserveScroll: true,
            onSuccess: () => toast.success('Berhasil menghapus sampel.'),
            onError: (errors) => toast.error(getFirstErrorMessage(errors)),
        })
    }

    function resetSampleDrawerState() {
        setSampleDrawerItemId(null)
        setSampleDrawerData({
            sample_item_id: null,
            sample_type_snapshot: '',
            regulation_id: null,
            regulation_appendix_id: null,
            quantity: 1,
        })
        setSampleDrawerParams([])
        setSampleDrawerRegulationOptions([])
        setSampleDrawerAdditionalParam({
            parameter_id: '',
            parameter_name: '',
            method_id: '',
            test_method: '',
            unit_price: '0',
        })
    }

    function openCreateSampleDrawer() {
        setSampleDrawerMode('create')
        resetSampleDrawerState()
        setSampleDrawerOpen(true)
    }

    function openCreateOtherCostDrawer() {
        resetOtherCostForm()
        setOtherCostData('unit', 'PAKET')
        setOtherCostData('quantity', '1')
        setOtherCostData('unit_price', '0')
        setOtherCostData('discount_amount', '0')
        setOtherCostDrawerOpen(true)
    }

    function handleSaveOtherCost() {
        const selected = sampleItemOptions.find((option) => String(option.id) === String(otherCostData.sample_item_option_id))
        if (!selected?.item_id) {
            toast.error('Pilih jenis biaya lainnya terlebih dahulu.')
            return
        }

        router.post(
            `/sales-orders/${salesOrder.uuid ?? salesOrder.id}/items?stage=${stage}`,
            {
                item_id: selected.item_id,
                test_type_id: null,
                regulation_id: null,
                regulation_appendix_id: null,
                sample_type_snapshot: otherCostData.description.trim() || selected.name,
                is_client_provided: false,
                sample_points: 1,
                quantity: Number(otherCostData.quantity || 1),
                unit: otherCostData.unit || 'PAKET',
                unit_price: Number(otherCostData.unit_price || 0),
                discount_percent: 0,
                discount_amount: Number(otherCostData.discount_amount || 0),
                is_subcontract: false,
                is_hidden: false,
                notes: otherCostData.notes || null,
                params: [],
            },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setOtherCostDrawerOpen(false)
                    resetOtherCostForm()
                    toast.success('Biaya lainnya berhasil ditambahkan.')
                },
                onError: (errors) => toast.error(getFirstErrorMessage(errors)),
            },
        )
    }

    function focusRegulationField() {
        window.requestAnimationFrame(() => {
            const focusable = regulationFieldRef.current?.querySelector<HTMLElement>('button, input, [role="combobox"]')
            focusable?.focus()
        })
    }

    async function loadRegulationsBySampleType(
        sampleTypeId: number | null,
        preferredRegulationId: number | null = null,
    ) {
        if (!sampleTypeId) {
            setSampleDrawerRegulationOptions([])
            return
        }

        setSampleDrawerLoadingRegulations(true)
        try {
            const query = new URLSearchParams({ sample_type_id: String(sampleTypeId) })
            const response = await fetch(`/sales-orders/quality-standard-regulations?${query.toString()}`, {
                method: 'GET',
                headers: { Accept: 'application/json' },
                credentials: 'same-origin',
            })

            if (!response.ok) {
                toast.error('Gagal memuat regulasi terkait jenis sampel.')
                setSampleDrawerRegulationOptions([])
                return
            }

            const payload = await response.json() as { regulations?: SelectOption[] }
            const nextOptions = payload.regulations ?? []
            setSampleDrawerRegulationOptions(nextOptions)

            if (!preferredRegulationId) return
            const hasPreferred = nextOptions.some((option) => option.id === preferredRegulationId)
            if (!hasPreferred) {
                setSampleDrawerData((prev) => ({
                    ...prev,
                    regulation_id: null,
                    regulation_appendix_id: null,
                }))
            }
        } catch {
            toast.error('Gagal memuat regulasi terkait jenis sampel.')
            setSampleDrawerRegulationOptions([])
        } finally {
            setSampleDrawerLoadingRegulations(false)
        }
    }

    function openEditSampleDrawer(itemId: number) {
        const item = salesOrder.items.find((candidate) => candidate.id === itemId)
        if (!item) return

        const matchedSampleOption = sampleItemOptions.find((option) => option.name === item.sample_type_snapshot)
        const initialParams = item.params.map((param, index) => ({
            key: `existing-${item.id}-${param.id}-${index}`,
            parameter_id: param.parameter_id,
            parameter_name: param.parameter_name,
            method_id: param.method_id,
            test_method: param.test_method,
            unit: param.unit,
            specification: param.specification,
            unit_price: Number(param.unit_price || 0),
            cou: Number(param.cou || 0),
            selected: true,
            is_additional: Boolean(param.is_additional),
        }))

        setSampleDrawerMode('edit')
        setSampleDrawerItemId(item.id)
        setSampleDrawerData({
            sample_item_id: matchedSampleOption?.id ?? salesOrder.sample_type_id ?? null,
            sample_type_snapshot: item.sample_type_snapshot || '',
            regulation_id: item.regulation_id,
            regulation_appendix_id: item.regulation_appendix_id ?? null,
            quantity: Number(item.quantity || 1),
        })
        setSampleDrawerParams(initialParams)
        void loadRegulationsBySampleType(
            matchedSampleOption?.id ?? salesOrder.sample_type_id ?? null,
            item.regulation_id,
        )
        setSampleDrawerOpen(true)
    }

    async function loadMasterParameters(
        overrides?: Partial<typeof sampleDrawerData>,
        keepExistingSelection = true,
    ) {
        const effectiveData = {
            ...sampleDrawerData,
            ...overrides,
        }

        if (!effectiveData.sample_item_id || !effectiveData.regulation_id) {
            toast.error('Pilih jenis sampel dan regulasi terlebih dahulu.')
            return false
        }
        const regulationAppendices = appendixOptions.filter((appendix) => appendix.regulation_id === effectiveData.regulation_id)
        if (regulationAppendices.length === 0) {
            toast.error('Regulasi ini belum memiliki lampiran. Silakan lengkapi lampiran regulasi terlebih dahulu.')
            appendixFieldRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
            return false
        }
        if (!effectiveData.regulation_appendix_id) {
            toast.error('Pilih lampiran regulasi terlebih dahulu.')
            appendixFieldRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
            return false
        }

        setSampleDrawerLoadingParams(true)
        try {
            const query = new URLSearchParams({
                sample_type_id: String(effectiveData.sample_item_id),
                regulation_id: String(effectiveData.regulation_id),
            })
            if (effectiveData.regulation_appendix_id) {
                query.set('regulation_appendix_id', String(effectiveData.regulation_appendix_id))
            }

            const response = await fetch(`/sales-orders/quality-standard-params?${query.toString()}`, {
                method: 'GET',
                headers: { Accept: 'application/json' },
                credentials: 'same-origin',
            })

            if (!response.ok) {
                toast.error('Gagal memuat parameter dari master.')
                return false
            }

            const payload = await response.json() as {
                params?: Array<{
                    parameter_id: number | null
                    parameter_name: string | null
                    method_id: number | null
                    test_method: string | null
                    unit: string | null
                    specification: string | null
                    unit_price?: number | string | null
                    cou_price?: number | string | null
                }>
            }

            const existingByName = new Map(
                (keepExistingSelection ? sampleDrawerParams : []).map((param) => [param.parameter_name.trim().toLowerCase(), param]),
            )

            const mappedParams = (payload.params ?? []).map((param, index) => {
                const key = `${param.parameter_id ?? 'no-param'}-${param.method_id ?? 'no-method'}-${index}`
                const existing = existingByName.get((param.parameter_name ?? '').trim().toLowerCase())
                return {
                    key,
                    parameter_id: param.parameter_id ?? null,
                    parameter_name: param.parameter_name || 'Parameter',
                    method_id: param.method_id ?? null,
                    test_method: param.test_method ?? null,
                    unit: param.unit ?? null,
                    specification: param.specification ?? null,
                    // Always refresh prices from the cost matrix payload.
                    unit_price: Number(param.unit_price ?? 0),
                    cou: Number(param.cou_price ?? 0),
                    selected: existing ? existing.selected : true,
                    is_additional: false,
                } satisfies WizardParam
            })

            if (mappedParams.length === 0 && sampleDrawerMode === 'edit' && sampleDrawerParams.length > 0) {
                toast.info('Master parameter tidak ditemukan, menggunakan parameter item saat ini.')
                return true
            }

            setSampleDrawerParams(mappedParams)
            return true
        } catch {
            toast.error('Gagal memuat parameter dari master.')
            return false
        } finally {
            setSampleDrawerLoadingParams(false)
        }
    }

    function toggleSampleDrawerParam(key: string, checked: boolean) {
        setSampleDrawerParams((prev) => prev.map((param) => (param.key === key ? { ...param, selected: checked } : param)))
    }

    function updateSampleDrawerParamPrice(key: string, nextPrice: string) {
        setSampleDrawerParams((prev) => prev.map((param) => (
            param.key === key
                ? { ...param, unit_price: Number(nextPrice || 0) }
                : param
        )))
    }

    function handleAddAdditionalDrawerParam() {
        const parameterId = sampleDrawerAdditionalParam.parameter_id ? Number(sampleDrawerAdditionalParam.parameter_id) : null
        const methodId = sampleDrawerAdditionalParam.method_id ? Number(sampleDrawerAdditionalParam.method_id) : null
        const parameterName = sampleDrawerAdditionalParam.parameter_name.trim()
        if (!parameterId || !parameterName) {
            toast.error('Nama parameter tambahan wajib diisi.')
            return
        }

        const price = Number(sampleDrawerAdditionalParam.unit_price || 0)
        const key = `additional-${Date.now()}-${parameterName.toLowerCase().replace(/\s+/g, '-')}`
        setSampleDrawerParams((prev) => ([
            ...prev,
            {
                key,
                parameter_id: parameterId,
                parameter_name: parameterName,
                method_id: methodId,
                test_method: sampleDrawerAdditionalParam.test_method.trim() || null,
                unit: null,
                specification: null,
                unit_price: price,
                cou: 0,
                selected: true,
                is_additional: true,
            },
        ]))
        setSampleDrawerAdditionalParam({
            parameter_id: '',
            parameter_name: '',
            method_id: '',
            test_method: '',
            unit_price: '0',
        })
        toast.success('Parameter tambahan ditambahkan.')
    }

    function handleSampleDrawerSubmit() {
        if (!sampleDrawerData.sample_item_id) {
            toast.error('Pilih jenis sampel.')
            sampleTypeFieldRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
            return
        }
        if (!sampleDrawerData.regulation_id) {
            toast.error('Regulasi wajib dipilih.')
            regulationFieldRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
            return
        }
        const regulationAppendices = appendixOptions.filter((appendix) => appendix.regulation_id === sampleDrawerData.regulation_id)
        if (regulationAppendices.length === 0) {
            toast.error('Regulasi ini belum memiliki lampiran. Silakan pilih regulasi yang memiliki lampiran.')
            appendixFieldRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
            return
        }
        if (!sampleDrawerData.regulation_appendix_id) {
            toast.error('Lampiran regulasi wajib dipilih.')
            appendixFieldRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
            return
        }
        if (sampleDrawerParams.length === 0) {
            toast.error('Muat parameter master terlebih dahulu.')
            return
        }
        const selectedParams = sampleDrawerParams.filter((param) => param.selected)
        if (selectedParams.length === 0) {
            toast.error('Pilih minimal satu parameter.')
            return
        }

        const unitPrice = selectedParams.reduce((sum, param) => sum + Number(param.unit_price || 0), 0)
        const payload = {
            test_type_id: sampleDrawerData.sample_item_id,
            regulation_id: sampleDrawerData.regulation_id,
            regulation_appendix_id: sampleDrawerData.regulation_appendix_id,
            sample_type_snapshot: sampleItemOptions.find((item) => item.id === sampleDrawerData.sample_item_id)?.name ?? sampleDrawerData.sample_type_snapshot ?? null,
            sample_points: Number(sampleDrawerData.quantity || 1),
            quantity: Number(sampleDrawerData.quantity || 1),
            unit: 'PAKET',
            unit_price: unitPrice,
            discount_percent: 0,
            discount_amount: 0,
            params: selectedParams.map((param) => ({
                parameter_id: param.parameter_id,
                method_id: param.method_id,
                parameter_name: param.parameter_name,
                test_method: param.test_method,
                unit: param.unit,
                specification: param.specification,
                unit_price: Number(param.unit_price || 0),
                cou: Number(param.cou || 0),
                is_additional: Boolean(param.is_additional),
            })),
        }

        setSampleDrawerSaving(true)
        const soId = salesOrder.uuid ?? salesOrder.id
        const endpoint = sampleDrawerMode === 'edit' && sampleDrawerItemId
            ? `/sales-orders/${soId}/items/${sampleDrawerItemId}?stage=${stage}`
            : `/sales-orders/${soId}/items?stage=${stage}`

        const requestOptions = {
            preserveScroll: true,
            onSuccess: () => {
                toast.success(sampleDrawerMode === 'edit' ? 'Sampel berhasil diperbarui.' : 'Sampel berhasil ditambahkan.')
                setSampleDrawerOpen(false)
                resetSampleDrawerState()
            },
            onError: (errors: Record<string, unknown>) => toast.error(getFirstErrorMessage(errors)),
            onFinish: () => setSampleDrawerSaving(false),
        }

        if (sampleDrawerMode === 'edit' && sampleDrawerItemId) {
            router.put(endpoint, payload, requestOptions)
            return
        }
        router.post(endpoint, payload, requestOptions)
    }

    const orderNumber = stage === 'quotation'
        ? (salesOrder.quotation_number || salesOrder.so_number)
        : salesOrder.so_number

    const discountTotal = salesOrder.items.reduce((sum, item) => {
        const base = Number(item.quantity || 0) * Number(item.unit_price || 0)
        const subtotal = Number(item.subtotal || 0)
        return sum + Math.max(0, base - subtotal)
    }, 0)

    const totalSamplingPoints = salesOrder.items.reduce((sum, item) => {
        return sum + Number(item.quantity || 0)
    }, 0)
    const hasSummaryData = salesOrder.items.some((item) => (
        Number(item.subtotal || 0) > 0
        || Number(item.unit_price || 0) > 0
        || Number(item.quantity || 0) > 0
        || item.params.length > 0
        || Boolean(item.regulation_id)
        || Boolean(item.sample_type_snapshot)
    ))
    const summaryTotalSamples = hasSummaryData ? totalSamplingPoints : 0
    const summarySubtotal = hasSummaryData ? Number(salesOrder.subtotal || 0) : 0
    const summaryDiscount = hasSummaryData ? discountTotal : 0
    const summaryTaxAmount = hasSummaryData ? Number(salesOrder.tax_amount || 0) : 0
    const summaryPphAmount = hasSummaryData
        ? salesOrder.payments.reduce((sum, payment) => sum + Number(payment.tax_withheld || 0), 0)
        : 0
    const summaryGrandTotal = hasSummaryData ? Number(salesOrder.grand_total || 0) : 0
    const paymentTermsDays = Number(salesOrder.contract_period ?? 14) || 14
    const paymentTermsValue = `${paymentTermsDays} Hari`
    const quoteReferenceValue = hasSummaryData
        ? (salesOrder.quotation_number || '-')
        : '-'

    const regulationNameById = new Map(
        regulationOptions.map((reg) => [reg.id, reg.short_name || reg.code || reg.name]),
    )
    const appendixNameById = new Map(
        appendixOptions.map((appendix) => [appendix.id, appendix.appendix_number ? `${appendix.appendix_number} - ${appendix.name}` : `${appendix.code} - ${appendix.name}`]),
    )

    const regulationPills = [...new Set(
        salesOrder.items
            .map((item) => item.regulation_id)
            .filter((value): value is number => typeof value === 'number')
            .map((id) => regulationNameById.get(id) ?? `Regulasi #${id}`),
    )]

    const parameterRows: ParameterRow[] = salesOrder.items.flatMap((item) => {
        const regulationLabel = item.regulation_id
            ? (regulationNameById.get(item.regulation_id) ?? `Regulasi #${item.regulation_id}`)
            : 'Non-reg.'
        const appendixId = item.regulation_appendix_id ?? null
        const appendixLabel = appendixId ? (appendixNameById.get(appendixId) ?? `Lampiran #${appendixId}`) : '-'
        const samplingDate = formatShortDate(salesOrder.transaction_date)
        if (item.params.length === 0) {
            return [{
                id: `item-${item.id}-no-param`,
                itemId: item.id,
                paramId: null,
                sampleType: item.sample_type_snapshot || 'Item sampel',
                appendix: appendixLabel,
                parameter: '-',
                isAdditional: false,
                category: item.sample_type_snapshot || 'Item sampel',
                method: '-',
                regulation: regulationLabel,
                parameterUnitPrice: '0',
                isPlaceholderParam: true,
                sampleCount: Number(item.quantity || 0),
                quantity: Number(item.quantity || 1),
                itemUnitPrice: String(item.unit_price || '0'),
                discountPercent: String(item.discount_percent || '0'),
                discountAmount: String(item.discount_amount || '0'),
                samplingDate,
            }]
        }

        return item.params.map((param) => ({
            id: param.id,
            itemId: item.id,
            paramId: param.id,
            sampleType: item.sample_type_snapshot || 'Item sampel',
            appendix: appendixLabel,
            parameter: param.parameter_name || '-',
            isAdditional: Boolean(param.is_additional),
            category: item.sample_type_snapshot || 'Item sampel',
            method: param.test_method || '-',
            regulation: regulationLabel,
            parameterUnitPrice: String(param.unit_price || 0),
            isPlaceholderParam: false,
            sampleCount: Number(item.quantity || 0),
            quantity: Number(item.quantity || 1),
            itemUnitPrice: String(item.unit_price || '0'),
            discountPercent: String(item.discount_percent || '0'),
            discountAmount: String(item.discount_amount || '0'),
            samplingDate,
        }))
    })
    const groupedParameterRows = parameterRows.reduce<Array<{
        itemId: number
        sampleType: string
        bakuMutuRows: ParameterRow[]
        additionalRows: ParameterRow[]
        quantity: number
        itemUnitPrice: string
        subtotal: number
    }>>((acc, row) => {
        const existingGroup = acc.find((group) => group.itemId === row.itemId)
        if (existingGroup) {
            if (row.isAdditional) {
                existingGroup.additionalRows.push(row)
            } else {
                existingGroup.bakuMutuRows.push(row)
            }
            return acc
        }

        acc.push({
            itemId: row.itemId,
            sampleType: row.sampleType,
            bakuMutuRows: row.isAdditional ? [] : [row],
            additionalRows: row.isAdditional ? [row] : [],
            quantity: Number(row.quantity || 0),
            itemUnitPrice: row.itemUnitPrice,
            subtotal: Number(row.quantity || 0) * Number(row.itemUnitPrice || 0),
        })
        return acc
    }, [])
    const groupedFilteredParameterRows = groupedParameterRows.filter((group) => {
        const keyword = searchTerm.trim().toLowerCase()
        const allRows = [...group.bakuMutuRows, ...group.additionalRows]
        const matchesKeyword = keyword === ''
            || group.sampleType.toLowerCase().includes(keyword)
            || allRows.some((row) => (
                row.parameter.toLowerCase().includes(keyword)
                || row.method.toLowerCase().includes(keyword)
                || row.regulation.toLowerCase().includes(keyword)
                || row.appendix.toLowerCase().includes(keyword)
                || row.category.toLowerCase().includes(keyword)
            ))
        const matchesRegulation = activeRegulationFilter === 'all'
            || allRows.some((row) => row.regulation === activeRegulationFilter)
        return matchesKeyword && matchesRegulation
    })
    const filteredAppendixOptions = appendixOptions.filter((appendix) => appendix.regulation_id === sampleDrawerData.regulation_id)
    const hasAppendixOptions = filteredAppendixOptions.length > 0
    const additionalCostOptions = sampleItemOptions.filter((option) => option.item_category === 'additional_cost')
    const additionalCostComboboxOptions = additionalCostOptions.map((option) => ({
        value: String(option.id),
        label: `${option.code} - ${option.name}`,
    }))
    const sampleItemComboboxOptions = sampleItemOptions.map((option) => ({
        value: String(option.id),
        label: `${option.code} - ${option.name}`,
    }))
    const regulationComboboxOptions = sampleDrawerRegulationOptions.map((option) => ({
        value: String(option.id),
        label: option.short_name || option.name,
    }))
    const appendixComboboxOptions = filteredAppendixOptions.map((appendix) => ({
        value: String(appendix.id),
        label: appendix.name,
    }))
    const additionalParameterComboboxOptions = parameterOptions.map((option) => ({
        value: String(option.id),
        label: `${option.code} - ${option.name}`,
    }))
    const additionalMethodComboboxOptions = methodOptions.map((option) => ({
        value: String(option.id),
        label: option.code,
    }))
    const hasSelectedRegulationInOptions = sampleDrawerData.regulation_id != null
        && sampleDrawerRegulationOptions.some((option) => option.id === sampleDrawerData.regulation_id)
    const safeRegulationId = hasSelectedRegulationInOptions ? sampleDrawerData.regulation_id : null
    const hasSelectedAppendixInOptions = sampleDrawerData.regulation_appendix_id != null
        && filteredAppendixOptions.some((appendix) => appendix.id === sampleDrawerData.regulation_appendix_id)
    const safeAppendixId = hasSelectedAppendixInOptions ? sampleDrawerData.regulation_appendix_id : null
    const selectedDrawerParams = sampleDrawerParams.filter((param) => param.selected)
    const selectedDrawerMasterParams = selectedDrawerParams.filter((param) => !param.is_additional)
    const selectedDrawerAdditionalParams = selectedDrawerParams.filter((param) => param.is_additional)
    const drawerMasterUnitPrice = selectedDrawerMasterParams.reduce((sum, param) => sum + Number(param.unit_price || 0), 0)
    const drawerAdditionalUnitPrice = selectedDrawerAdditionalParams.reduce((sum, param) => sum + Number(param.unit_price || 0), 0)
    const drawerUnitPrice = drawerMasterUnitPrice + drawerAdditionalUnitPrice
    const drawerEstimateTotal = drawerUnitPrice * Number(sampleDrawerData.quantity || 1)
    const stepErrors: Record<number, string | null> = {
        1: !sampleDrawerData.sample_item_id ? 'Pilih jenis sampel' : null,
        2: !sampleDrawerData.sample_item_id
            ? null
                : sampleDrawerLoadingRegulations
                ? null
                : regulationComboboxOptions.length === 0
                    ? 'Tidak ada regulasi terkait jenis sampel ini'
                    : !safeRegulationId
                        ? 'Regulasi wajib dipilih'
                        : null,
        3: !safeRegulationId
            ? 'Pilih regulasi dulu'
            : !hasAppendixOptions
                ? 'Regulasi ini belum memiliki lampiran'
                : !safeAppendixId
                    ? 'Pilih lampiran regulasi'
                    : null,
        4: selectedDrawerParams.length === 0 ? 'Pilih minimal 1 parameter' : null,
    }
    const stepCompletion: Record<number, boolean> = {
        1: stepErrors[1] === null,
        2: stepErrors[2] === null,
        3: stepErrors[3] === null,
        4: stepErrors[4] === null,
    }

    const orderProgress = [
        { label: 'Draft', done: true, active: salesOrder.status === 'draft' },
        { label: 'Submitted', done: ['submitted', 'in_review', 'in_progress', 'completed'].includes(salesOrder.status), active: ['submitted', 'in_review'].includes(salesOrder.status) },
        { label: 'In Progress', done: ['in_progress', 'completed'].includes(salesOrder.status), active: salesOrder.status === 'in_progress' },
        { label: 'Completed', done: salesOrder.status === 'completed', active: salesOrder.status === 'completed' },
    ]

    const statusNote = (() => {
        if (salesOrder.status === 'submitted' || salesOrder.status === 'in_review') {
            return 'Menunggu approval Manager'
        }
        if (canApprove) {
            return 'Menunggu approval final'
        }
        if (canSubmit || canQuotationSend) {
            return 'Siap dikirim untuk approval'
        }
        return STATUS_LABELS[salesOrder.status] ?? salesOrder.status
    })()

    function handleCopyOrderNumber() {
        navigator.clipboard?.writeText(orderNumber)
            .then(() => toast.success('Nomor dokumen disalin.'))
            .catch(() => toast.error('Gagal menyalin nomor dokumen.'))
    }

    const primaryAction = canApprove
        ? handleApprove
        : (stage === 'quotation' ? handleSendQuotation : handleSubmit)
    const canRunPrimaryAction = canApprove || (stage === 'quotation' ? canQuotationSend : canSubmit)
    const primaryLabel = canApprove ? 'Setujui SO' : 'Kirim untuk approval'

    return (
        <LimsAppLayout>
            <Head title={`SO ${salesOrder.so_number}`} />
            <div className='flex h-full flex-1 flex-col gap-3 p-3 md:p-4'>
                <div className='rounded-2xl border bg-card shadow-sm'>
                    <div className='flex flex-wrap items-center justify-between gap-2 border-b px-3 py-2.5 md:px-4 md:py-3'>
                        <div>
                            <h1 className='text-xl font-bold tracking-tight md:text-2xl'>{orderNumber}</h1>
                            <div className='flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground'>
                                <span>Rev. {salesOrder.revision_number ?? 0}</span>
                                <span>Dibuat: <span className='font-bold text-foreground'>{formatDate(salesOrder.transaction_date)}</span></span>
                                <span>Prioritas:</span>
                                <span className='inline-flex items-center rounded-md bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800'>
                                    {salesOrder.priority || 'normal'}
                                </span>
                            </div>
                        </div>
                        <div className='flex flex-wrap items-center gap-2'>
                            <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${QUOTATION_CLASS[quotationStatus] ?? QUOTATION_CLASS.draft}`}>
                                {canApprove ? 'Pending approval' : (QUOTATION_LABELS[quotationStatus] ?? quotationStatus)}
                            </span>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button size='sm' variant='outline' className='h-8 gap-1.5'>
                                        <Printer className='h-3.5 w-3.5' />
                                        Print
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align='end' className='w-56'>
                                    <DropdownMenuItem onClick={() => toast.info('Fitur print Sales Order sedang disiapkan.')}>
                                        Print Sales Order
                                    </DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => toast.info('Fitur print Surat Jalan sedang disiapkan.')}>
                                        Print Surat Jalan
                                    </DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => toast.info('Fitur print Sales Order (PPC) sedang disiapkan.')}>
                                        Print Sales Order (PPC)
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                            <Button
                                size='sm'
                                variant='outline'
                                className='h-8 gap-1.5'
                                onClick={() => toast.info('Fitur export sedang disiapkan.')}
                            >
                                <Download className='h-3.5 w-3.5' />
                                Export
                            </Button>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button size='sm' variant='outline' className='h-8 gap-1.5'>
                                        <Ellipsis className='h-3.5 w-3.5' />
                                        More
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align='end' className='w-56'>
                                    <DropdownMenuItem onClick={() => toast.info(statusNote)}>
                                        Detail status
                                    </DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => toast.info(`Total order: ${formatCurrency(salesOrder.grand_total)}`)}>
                                        Ringkasan nilai
                                    </DropdownMenuItem>
                                    <DropdownMenuItem onClick={handleCopyOrderNumber}>
                                        Salin nomor dokumen
                                    </DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem onClick={() => setIsInlineEditing(true)} disabled={!canInlineEdit || isInlineEditing}>
                                        Edit cepat
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                            {isInlineEditing ? (
                                <Button size='sm' className='h-8 gap-2' onClick={handleInlineEditSave} disabled={inlineSaving}>
                                    {inlineSaving ? 'Menyimpan...' : 'Simpan perubahan'} <Send className='h-4 w-4' />
                                </Button>
                            ) : (
                                <Button size='sm' className='h-8 gap-1.5' onClick={() => setIsInlineEditing(true)} disabled={!canInlineEdit || !!editingRowKey || !!editingPaymentId}>
                                    <Pencil className='h-3.5 w-3.5' />
                                    Edit Order
                                </Button>
                            )}
                            <Button size='sm' className='h-8 gap-2' onClick={primaryAction} disabled={!canRunPrimaryAction || isInlineEditing || !!editingRowKey || !!editingPaymentId}>
                                {primaryLabel} <Send className='h-4 w-4' />
                            </Button>
                        </div>
                    </div>

                    <div className='grid gap-2.5 p-2.5 md:gap-3 md:p-3 lg:grid-cols-[minmax(0,1fr)_280px]'>
                        <section className='rounded-xl border bg-card p-2.5'>
                                <div className='grid gap-2 text-[13px] lg:grid-cols-3 lg:divide-x'>
                                    <div className='space-y-1.5 lg:pr-3'>
                                        <p className='text-xs text-muted-foreground'>Customer</p>
                                        <p className='font-semibold text-primary'>Customer #{salesOrder.customer_id}</p>
                                        <div>
                                            <p className='text-xs text-muted-foreground'>Tanggal Sampling</p>
                                            <p className='font-semibold'>{formatDateRange(inlineData.sampling_proposed_start, inlineData.sampling_proposed_end)}</p>
                                        </div>
                                        <div className='flex items-center justify-between'>
                                            <span className='text-xs text-muted-foreground'>Narahubung</span>
                                            {isInlineEditing ? (
                                                <Input
                                                    className='h-8 w-[180px]'
                                                    value={inlineData.lhu_contact_name}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInlineData('lhu_contact_name', e.target.value)}
                                                />
                                            ) : (
                                                <span className='font-semibold text-right'>{salesOrder.lhu_contact_name || '-'}</span>
                                            )}
                                        </div>
                                        <div className='flex items-center justify-between'>
                                            <span className='text-xs text-muted-foreground'>No Telp</span>
                                            {isInlineEditing ? (
                                                <Input
                                                    className='h-8 w-[180px]'
                                                    value={inlineData.lhu_contact_phone}
                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInlineData('lhu_contact_phone', e.target.value)}
                                                />
                                            ) : (
                                                <span className='font-semibold text-right'>{salesOrder.lhu_contact_phone || '-'}</span>
                                            )}
                                        </div>
                                        <div className='flex items-center justify-between'>
                                            <span className='text-xs text-muted-foreground'>Kategori Industri (Segmen)</span>
                                            <span className='font-semibold text-right'>{salesOrder.customer_segment_id ? `Segmen #${salesOrder.customer_segment_id}` : '-'}</span>
                                        </div>
                                    </div>

                                    <div className='space-y-1.5 lg:px-3'>
                                        <p className='pt-1 text-xs text-muted-foreground'>Alamat</p>
                                        {isInlineEditing ? (
                                            <Textarea
                                                rows={2}
                                                value={inlineData.lhu_delivery_address}
                                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInlineData('lhu_delivery_address', e.target.value)}
                                            />
                                        ) : (
                                            <p className='leading-relaxed text-foreground'>{salesOrder.lhu_delivery_address || '-'}</p>
                                        )}
                                        <p className='pt-1 text-xs text-muted-foreground'>Alamat kirim dokumen</p>
                                        <p className='leading-relaxed text-foreground'>{salesOrder.document_delivery_address || '-'}</p>
                                        <p className='pt-1 text-xs text-muted-foreground'>Lokasi sampling</p>
                                        <p className='leading-relaxed text-foreground'>{salesOrder.document_delivery_address || salesOrder.lhu_delivery_address || '-'}</p>
                                    </div>

                                    <div className='space-y-1.5 lg:px-3'>
                                        <p className='text-xs text-muted-foreground'>Status & Progress</p>
                                        <div className='space-y-1.5'>
                                            {orderProgress.map((step) => (
                                                <div key={step.label} className='flex items-center gap-2'>
                                                    <span
                                                        className={`h-3.5 w-3.5 rounded-full border-2 ${
                                                            step.done
                                                                ? 'border-emerald-500 bg-emerald-500'
                                                                : step.active
                                                                    ? 'border-primary bg-primary'
                                                                    : 'border-muted-foreground/30 bg-background'
                                                        }`}
                                                    />
                                                    <span className={`text-[12px] ${step.active ? 'font-semibold text-primary' : 'text-foreground'}`}>{step.label}</span>
                                                </div>
                                            ))}
                                        </div>
                                        {canQuotationDecision && (
                                            <div className='pt-1 space-y-1.5'>
                                                <p className='text-[11px] text-muted-foreground'>Aksi quotation</p>
                                                <div className='flex gap-2'>
                                                <Button size='sm' className='flex-1 bg-emerald-600 hover:bg-emerald-700' onClick={handleAcceptQuotation}>
                                                    <CheckCircle2 className='h-3.5 w-3.5' /> Terima
                                                </Button>
                                                <Button size='sm' variant='destructive' className='flex-1' onClick={handleRejectQuotation}>
                                                    <XCircle className='h-3.5 w-3.5' /> Tolak
                                                </Button>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                </div>
                                {isInlineEditing && inlineErrors.transaction_date && (
                                    <p className='mt-2 text-xs text-destructive'>{inlineErrors.transaction_date}</p>
                                )}
                        </section>

                        <aside className='self-stretch'>
                            <div className='h-full rounded-xl border bg-card p-3'>
                                <p className='mb-2 text-base font-semibold'>Order Summary</p>
                                <div className='space-y-1.5 text-[13px]'>
                                    <div className='flex items-center justify-between'>
                                        <span className='text-muted-foreground'>Total Sampel</span>
                                        <span className='font-medium'>{summaryTotalSamples}</span>
                                    </div>
                                    <div className='flex items-center justify-between'>
                                        <span className='text-muted-foreground'>Subtotal</span>
                                        <span className='font-medium'>{formatCurrency(summarySubtotal)}</span>
                                    </div>
                                    <div className='flex items-center justify-between'>
                                        <span className='text-muted-foreground'>Discount</span>
                                        <span className='font-medium'>- {formatCurrency(summaryDiscount)}</span>
                                    </div>
                                    <div className='flex items-center justify-between'>
                                        <span className='text-muted-foreground'>Tax ({Number(salesOrder.tax_percentage || 0)}%)</span>
                                        <span className='font-medium'>{formatCurrency(summaryTaxAmount)}</span>
                                    </div>
                                    <div className='flex items-center justify-between'>
                                        <span className='text-muted-foreground'>PPH</span>
                                        <span className='font-medium'>- {formatCurrency(summaryPphAmount)}</span>
                                    </div>
                                    <div className='mt-2 border-t pt-2'>
                                        <div className='flex items-center justify-between'>
                                            <span className='font-semibold'>Total Amount</span>
                                            <span className='text-[22px] font-bold text-primary'>{formatCurrency(summaryGrandTotal)}</span>
                                        </div>
                                    </div>
                                    <div className='mt-2 border-t pt-2 text-sm'>
                                        <div className='flex items-center justify-between'>
                                            <span className='text-muted-foreground'>Payment Terms</span>
                                            <span>{paymentTermsValue}</span>
                                        </div>
                                        <div className='mt-1 flex items-center justify-between'>
                                            <span className='text-muted-foreground'>Quote Reference</span>
                                            <span>{quoteReferenceValue}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </aside>

                        <section className='rounded-xl border bg-card p-2 lg:col-span-2'>
                                <div className='mb-1.5 flex items-center gap-2.5 border-b px-1 text-[12px]'>
                                    <button type='button' onClick={() => setActiveTab('parameter')} className={`pb-1.5 ${activeTab === 'parameter' ? 'border-b-2 border-primary font-semibold text-primary' : 'text-muted-foreground hover:text-foreground'}`}>Samples</button>
                                    <button type='button' onClick={() => setActiveTab('transport')} className={`pb-1.5 ${activeTab === 'transport' ? 'border-b-2 border-primary font-semibold text-primary' : 'text-muted-foreground hover:text-foreground'}`}>Tests</button>
                                    <button type='button' onClick={() => setActiveTab('attachment')} className={`pb-1.5 ${activeTab === 'attachment' ? 'border-b-2 border-primary font-semibold text-primary' : 'text-muted-foreground hover:text-foreground'}`}>Attachments</button>
                                    <button type='button' onClick={() => setActiveTab('notes')} className={`pb-1.5 ${activeTab === 'notes' ? 'border-b-2 border-primary font-semibold text-primary' : 'text-muted-foreground hover:text-foreground'}`}>Notes</button>
                                    <button type='button' onClick={() => setActiveTab('payment')} className={`pb-1.5 ${activeTab === 'payment' ? 'border-b-2 border-primary font-semibold text-primary' : 'text-muted-foreground hover:text-foreground'}`}>Pembayaran</button>
                                </div>
                                {activeTab === 'parameter' && (
                                <div className='mb-2 flex flex-wrap items-center gap-1.5 px-1'>
                                    <Button
                                        size='sm'
                                        className='h-7 gap-1'
                                        onClick={openCreateSampleDrawer}
                                        disabled={!canItemInlineEdit || isInlineEditing || !!editingRowKey}
                                    >
                                        <Plus className='h-3.5 w-3.5' />
                                        Tambah Sampel
                                    </Button>
                                    <Button
                                        size='sm'
                                        variant='outline'
                                        className='h-7 gap-1'
                                        onClick={openCreateOtherCostDrawer}
                                        disabled={!canItemInlineEdit || isInlineEditing || !!editingRowKey || additionalCostComboboxOptions.length === 0}
                                    >
                                        <Plus className='h-3.5 w-3.5' />
                                        Tambah Biaya Lainnya
                                    </Button>
                                </div>
                                )}
                                {activeTab === 'parameter' && (
                                <div className='mb-2 flex flex-wrap items-center gap-1.5 px-1'>
                                    <Input
                                        className='h-7 w-[190px]'
                                        placeholder='Cari parameter / metode...'
                                        value={searchTerm}
                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
                                    />
                                    <div className='flex flex-wrap gap-1'>
                                        {[
                                            'all',
                                            ...new Set(parameterRows.map((row) => row.regulation)),
                                        ].map((filter) => (
                                            <Button
                                                key={filter}
                                                size='sm'
                                                variant={activeRegulationFilter === filter ? 'default' : 'outline'}
                                                className='h-6 px-2 text-[10px]'
                                                onClick={() => setActiveRegulationFilter(filter)}
                                            >
                                                {filter === 'all' ? 'Semua regulasi' : filter}
                                            </Button>
                                        ))}
                                    </div>
                                </div>
                                )}
                                {activeTab === 'parameter' && (
                                <div className='overflow-x-auto rounded-md border bg-muted/10'>
                                    <table className='w-full min-w-[860px] text-[12px]'>
                                        <thead className='text-muted-foreground'>
                                            <tr className='border-b bg-muted/40'>
                                                <th className='w-10 px-2 py-1 text-left'>#</th>
                                                <th className='min-w-[180px] px-2 py-1 text-left'>Jenis Sampel</th>
                                                <th className='min-w-[200px] px-2 py-1 text-left'>Regulasi + Lampiran</th>
                                                <th className='min-w-[200px] px-2 py-1 text-left'>Parameter</th>
                                                <th className='w-16 px-2 py-1 text-center'>Qty</th>
                                                <th className='w-32 px-2 py-1 text-right'>Harga</th>
                                                <th className='w-36 px-2 py-1 text-right'>Subtotal</th>
                                                <th className='w-[170px] px-2 py-1 text-right'>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {groupedFilteredParameterRows.length > 0 ? (
                                                (() => {
                                                    return groupedFilteredParameterRows.map((group, index) => {
                                                        const regulationValues = [...new Set([...group.bakuMutuRows, ...group.additionalRows].map((row) => row.regulation).filter((value) => value && value !== '-'))]
                                                        const appendixValues = [...new Set([...group.bakuMutuRows, ...group.additionalRows].map((row) => row.appendix).filter((value) => value && value !== '-'))]
                                                        const visibleBakuMutuRows = group.bakuMutuRows.filter((row) => !row.isPlaceholderParam)
                                                        const visibleAdditionalRows = group.additionalRows.filter((row) => !row.isPlaceholderParam)
                                                        const totalParams = visibleBakuMutuRows.length + visibleAdditionalRows.length
                                                        const isExpanded = Boolean(expandedParameterRows[group.itemId])
                                                        const representativeRow = group.bakuMutuRows[0] ?? group.additionalRows[0]
                                                        const rowKey = `${group.itemId}-${representativeRow?.paramId ?? 'no-param'}`
                                                        const isEditing = editingRowKey === rowKey && editingRowDraft

                                                        return (
                                                            <tr key={`sample-group-${group.itemId}`} className='border-b align-top last:border-b-0'>
                                                                <td className='px-2 py-2 text-muted-foreground'>{index + 1}</td>
                                                                <td className='px-2 py-2'>
                                                                    <p className='max-w-[220px] whitespace-normal break-words text-[12px] font-semibold' title={group.sampleType}>
                                                                        {group.sampleType}
                                                                    </p>
                                                                </td>
                                                                <td className='px-2 py-2'>
                                                                    <div className='space-y-1'>
                                                                        {regulationValues.length > 0 ? regulationValues.map((reg) => (
                                                                            <p key={`reg-${group.itemId}-${reg}`} className='max-w-[240px] whitespace-normal break-words text-[12px] font-semibold'>
                                                                                {reg}
                                                                            </p>
                                                                        )) : (
                                                                            <p className='text-[11px] text-muted-foreground'>-</p>
                                                                        )}
                                                                        {appendixValues.length > 0 ? appendixValues.map((appendix) => (
                                                                            <p key={`appendix-${group.itemId}-${appendix}`} className='max-w-[240px] whitespace-normal break-words text-[11px] text-muted-foreground'>
                                                                                {appendix}
                                                                            </p>
                                                                        )) : (
                                                                            <p className='text-[11px] text-muted-foreground'>-</p>
                                                                        )}
                                                                    </div>
                                                                </td>
                                                                <td className='px-2 py-2'>
                                                                    <div className='space-y-1'>
                                                                        <div className='flex items-center justify-between gap-2'>
                                                                            <p className='text-[11px] text-muted-foreground'>{totalParams} parameter</p>
                                                                            <Button
                                                                                type='button'
                                                                                size='sm'
                                                                                variant='outline'
                                                                                className='h-6 px-2 text-[10px]'
                                                                                onClick={() => setExpandedParameterRows((prev) => ({ ...prev, [group.itemId]: !isExpanded }))}
                                                                            >
                                                                                {isExpanded ? 'Sembunyikan' : 'Lihat'}
                                                                            </Button>
                                                                        </div>
                                                                        {isExpanded && (
                                                                            <div className='space-y-1.5'>
                                                                                {visibleBakuMutuRows.length > 0 && (
                                                                                    <div>
                                                                                        <p className='text-[10px] font-semibold uppercase tracking-wide text-muted-foreground'>Parameter Baku Mutu</p>
                                                                                        <div className='mt-0.5 space-y-0.5'>
                                                                                            {visibleBakuMutuRows.map((row) => (
                                                                                                <div key={`param-baku-${row.id}`} className='flex items-start justify-between gap-2'>
                                                                                                    <p className='max-w-[180px] whitespace-normal break-words text-[12px] font-semibold'>
                                                                                                        {row.parameter}
                                                                                                    </p>
                                                                                                    <p className='text-[11px] text-muted-foreground whitespace-nowrap'>{formatCurrency(row.parameterUnitPrice)}</p>
                                                                                                </div>
                                                                                            ))}
                                                                                        </div>
                                                                                    </div>
                                                                                )}
                                                                                {visibleAdditionalRows.length > 0 && (
                                                                                    <div>
                                                                                        <p className='text-[10px] font-semibold uppercase tracking-wide text-amber-700'>Parameter Tambahan</p>
                                                                                        <div className='mt-0.5 space-y-0.5'>
                                                                                            {visibleAdditionalRows.map((row) => (
                                                                                                <div key={`param-additional-${row.id}`} className='flex items-start justify-between gap-2'>
                                                                                                    <p className='max-w-[180px] whitespace-normal break-words text-[12px] font-semibold'>
                                                                                                        {row.parameter}
                                                                                                    </p>
                                                                                                    <p className='text-[11px] text-muted-foreground whitespace-nowrap'>{formatCurrency(row.parameterUnitPrice)}</p>
                                                                                                </div>
                                                                                            ))}
                                                                                        </div>
                                                                                    </div>
                                                                                )}
                                                                                {totalParams === 0 && (
                                                                                    <p className='text-[11px] text-muted-foreground'>Item biaya lainnya tanpa parameter.</p>
                                                                                )}
                                                                            </div>
                                                                        )}
                                                                    </div>
                                                                </td>
                                                                <td className='px-2 py-2 text-center'>
                                                                    {isEditing ? (
                                                                        <Input
                                                                            type='number'
                                                                            min='1'
                                                                            className='mx-auto h-8 w-16 text-center'
                                                                            value={editingRowDraft.quantity}
                                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                                                setEditingRowDraft((prev) => prev ? { ...prev, quantity: e.target.value } : prev)
                                                                            }
                                                                        />
                                                                    ) : group.quantity}
                                                                </td>
                                                                <td className='px-2 py-2 text-right tabular-nums'>
                                                                    {isEditing ? (
                                                                        <Input
                                                                            type='number'
                                                                            min='0'
                                                                            step='0.01'
                                                                            className='ml-auto h-8 w-28 text-right'
                                                                            value={editingRowDraft.unit_price}
                                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                                                setEditingRowDraft((prev) => prev ? { ...prev, unit_price: e.target.value } : prev)
                                                                            }
                                                                        />
                                                                    ) : formatCurrency(group.itemUnitPrice)}
                                                                </td>
                                                                <td className='px-2 py-2 text-right tabular-nums'>
                                                                    {formatCurrency(
                                                                        Number(isEditing ? editingRowDraft.quantity || 0 : group.quantity || 0)
                                                                        * Number(isEditing ? editingRowDraft.unit_price || 0 : group.itemUnitPrice || 0),
                                                                    )}
                                                                </td>
                                                                <td className='px-2 py-2'>
                                                                    <div className='flex justify-end gap-1 md:flex-nowrap'>
                                                                        {isEditing && representativeRow ? (
                                                                            <>
                                                                                <Button size='sm' className='h-7 gap-1 px-2 text-[11px]' onClick={() => handleSaveRowEdit(representativeRow)} disabled={rowSaving}>
                                                                                    <Save className='h-3.5 w-3.5' /> Simpan
                                                                                </Button>
                                                                                <Button size='sm' variant='outline' className='h-7 gap-1 px-2 text-[11px]' onClick={handleCancelRowEdit} disabled={rowSaving}>
                                                                                    <X className='h-3.5 w-3.5' /> Batal
                                                                                </Button>
                                                                            </>
                                                                        ) : (
                                                                            <>
                                                                                <Button
                                                                                    size='sm'
                                                                                    variant='outline'
                                                                                    className='h-7 gap-1 px-2 text-[11px]'
                                                                                    onClick={() => openEditSampleDrawer(group.itemId)}
                                                                                    disabled={!canItemInlineEdit || isInlineEditing || !!editingRowKey}
                                                                                >
                                                                                    <Pencil className='h-3.5 w-3.5' /> Ubah Sampel
                                                                                </Button>
                                                                                <Button
                                                                                    size='sm'
                                                                                    variant='outline'
                                                                                    className='h-7 gap-1 px-2 text-[11px]'
                                                                                    onClick={() => representativeRow && handleStartRowEdit(representativeRow)}
                                                                                    disabled={!canItemInlineEdit || isInlineEditing || !!editingRowKey || !representativeRow}
                                                                                >
                                                                                    <Pencil className='h-3.5 w-3.5' /> Edit
                                                                                </Button>
                                                                                <Button
                                                                                    size='sm'
                                                                                    variant='outline'
                                                                                    className='h-7 gap-1 px-2 text-[11px] text-destructive hover:text-destructive'
                                                                                    onClick={() => handleDeleteItem(group.itemId)}
                                                                                    disabled={!canItemInlineEdit || isInlineEditing || !!editingRowKey}
                                                                                >
                                                                                    <Trash2 className='h-3.5 w-3.5' /> Hapus
                                                                                </Button>
                                                                            </>
                                                                        )}
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        )
                                                    })
                                                })()
                                            ) : (
                                                <tr>
                                                    <td colSpan={8} className='px-2 py-4 text-center text-sm text-muted-foreground'>
                                                        Tidak ada parameter yang cocok dengan filter.
                                                    </td>
                                                </tr>
                                            )}
                                        </tbody>
                                    </table>
                                </div>
                                )}

                                {activeTab === 'transport' && (
                                    <div className='rounded-md border bg-muted/20 p-4 text-sm'>
                                        <p className='font-medium'>Transportasi &amp; Alat Sampling</p>
                                        <p className='text-muted-foreground'>Total titik sampling: {totalSamplingPoints}</p>
                                        {isInlineEditing ? (
                                            <div className='mt-3 grid grid-cols-1 gap-3 md:grid-cols-2'>
                                                <div className='space-y-1'>
                                                    <Label className='text-xs'>Prioritas order</Label>
                                                    <select
                                                        value={inlineData.priority}
                                                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setInlineData('priority', e.target.value)}
                                                        className='flex h-8 w-full rounded-md border border-input bg-transparent px-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring'
                                                    >
                                                        <option value='normal'>Normal</option>
                                                        <option value='urgent'>Urgent</option>
                                                        <option value='very_urgent'>Very Urgent</option>
                                                    </select>
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='text-xs'>PPN (%)</Label>
                                                    <Input
                                                        type='number'
                                                        min='0'
                                                        max='100'
                                                        step='0.01'
                                                        className='h-8'
                                                        value={inlineData.tax_percentage}
                                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInlineData('tax_percentage', e.target.value)}
                                                    />
                                                    {inlineErrors.tax_percentage && (
                                                        <p className='text-xs text-destructive'>{inlineErrors.tax_percentage}</p>
                                                    )}
                                                </div>
                                                <div className='col-span-full flex flex-wrap gap-4'>
                                                    {(
                                                        [
                                                            ['is_repeat', 'Repeat Order'],
                                                            ['is_plan_sampling', 'Plan Sampling'],
                                                            ['is_gmp_sampling', 'GMP Sampling'],
                                                            ['is_recheck', 'Recheck'],
                                                            ['is_acceleration', 'Percepatan'],
                                                        ] as const
                                                    ).map(([key, label]) => (
                                                        <div key={key} className='flex items-center gap-2'>
                                                            <Checkbox
                                                                id={`inline-${key}`}
                                                                checked={inlineData[key]}
                                                                onCheckedChange={(value: boolean | 'indeterminate') => setInlineData(key, value === true)}
                                                            />
                                                            <Label htmlFor={`inline-${key}`}>{label}</Label>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        ) : (
                                            <p className='text-muted-foreground'>Prioritas order: {salesOrder.priority || 'normal'}</p>
                                        )}
                                    </div>
                                )}

                                {activeTab === 'attachment' && (
                                    <div className='rounded-md border bg-muted/20 p-4 text-sm'>
                                        <p className='font-medium'>Attachment</p>
                                        {isInlineEditing ? (
                                            <Textarea
                                                rows={3}
                                                value={inlineData.document_delivery_address}
                                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInlineData('document_delivery_address', e.target.value)}
                                            />
                                        ) : (
                                            <p className='text-muted-foreground'>{salesOrder.document_delivery_address || 'Belum ada attachment'}</p>
                                        )}
                                    </div>
                                )}

                                {activeTab === 'notes' && (
                                    <div className='rounded-md border bg-muted/20 p-4 text-sm space-y-2'>
                                        {isInlineEditing ? (
                                            <>
                                                <div className='space-y-1'>
                                                    <Label className='text-xs'>Catatan teknis</Label>
                                                    <Textarea
                                                        rows={2}
                                                        value={inlineData.technical_note}
                                                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInlineData('technical_note', e.target.value)}
                                                    />
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='text-xs'>Catatan admin</Label>
                                                    <Textarea
                                                        rows={2}
                                                        value={inlineData.admin_note}
                                                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInlineData('admin_note', e.target.value)}
                                                    />
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='text-xs'>Catatan umum</Label>
                                                    <Textarea
                                                        rows={2}
                                                        value={inlineData.notes}
                                                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInlineData('notes', e.target.value)}
                                                    />
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='text-xs'>Alamat pengiriman LHU</Label>
                                                    <Textarea
                                                        rows={2}
                                                        value={inlineData.lhu_delivery_address}
                                                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInlineData('lhu_delivery_address', e.target.value)}
                                                    />
                                                </div>
                                            </>
                                        ) : (
                                            <>
                                                <p><span className='font-medium'>Catatan teknis:</span> <span className='text-muted-foreground'>{salesOrder.technical_note || '-'}</span></p>
                                                <p><span className='font-medium'>Catatan admin:</span> <span className='text-muted-foreground'>{salesOrder.admin_note || '-'}</span></p>
                                                <p><span className='font-medium'>Catatan umum:</span> <span className='text-muted-foreground'>{salesOrder.notes || '-'}</span></p>
                                            </>
                                        )}
                                    </div>
                                )}

                                {activeTab === 'payment' && (
                                    <div className='space-y-4 rounded-md border bg-muted/20 p-4 text-sm'>
                                        {salesOrder.payments.length > 0 ? (
                                            <div className='overflow-x-auto'>
                                                <table className='w-full min-w-[760px] text-[13px]'>
                                                    <thead>
                                                        <tr className='border-b text-xs uppercase text-muted-foreground'>
                                                            <th className='py-1.5 text-left font-medium'>Tanggal</th>
                                                            <th className='py-1.5 text-left font-medium'>Metode</th>
                                                            <th className='py-1.5 text-right font-medium'>Jumlah</th>
                                                            <th className='py-1.5 text-center font-medium'>Status</th>
                                                            <th className='py-1.5 text-right font-medium'>Aksi</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {salesOrder.payments.map((payment) => (
                                                            <tr key={payment.id} className='border-b'>
                                                                <td className='py-1.5'>
                                                                    {editingPaymentId === payment.id && paymentDraft ? (
                                                                        <Input
                                                                            type='date'
                                                                            className='h-8 w-[150px]'
                                                                            value={paymentDraft.payment_date}
                                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                                                setPaymentDraft((prev) => prev ? { ...prev, payment_date: e.target.value } : prev)
                                                                            }
                                                                        />
                                                                    ) : (
                                                                        formatDate(payment.payment_date)
                                                                    )}
                                                                </td>
                                                                <td className='py-1.5 capitalize'>
                                                                    {editingPaymentId === payment.id && paymentDraft ? (
                                                                        <select
                                                                            value={paymentDraft.payment_method}
                                                                            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                                                                                setPaymentDraft((prev) => prev ? { ...prev, payment_method: e.target.value } : prev)
                                                                            }
                                                                            className='flex h-8 w-[140px] rounded-md border border-input bg-transparent px-2 text-sm focus:outline-none focus:ring-1 focus:ring-ring'
                                                                        >
                                                                            <option value='cash'>Cash</option>
                                                                            <option value='transfer'>Transfer</option>
                                                                            <option value='giro'>Giro</option>
                                                                            <option value='cheque'>Cheque</option>
                                                                            <option value='credit_card'>Credit Card</option>
                                                                            <option value='other'>Other</option>
                                                                        </select>
                                                                    ) : (
                                                                        payment.payment_method
                                                                    )}
                                                                </td>
                                                                <td className='py-1.5 text-right tabular-nums'>
                                                                    {editingPaymentId === payment.id && paymentDraft ? (
                                                                        <Input
                                                                            type='number'
                                                                            min='0.01'
                                                                            step='0.01'
                                                                            className='ml-auto h-8 w-[140px] text-right'
                                                                            value={paymentDraft.amount}
                                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                                                setPaymentDraft((prev) => prev ? { ...prev, amount: e.target.value } : prev)
                                                                            }
                                                                        />
                                                                    ) : (
                                                                        formatCurrency(payment.amount)
                                                                    )}
                                                                </td>
                                                                <td className='py-1.5 text-center'>
                                                                    {payment.verified_at ? (
                                                                        <Badge variant='default' className='bg-emerald-600'>Terverifikasi</Badge>
                                                                    ) : (
                                                                        <Badge variant='outline'>Menunggu</Badge>
                                                                    )}
                                                                </td>
                                                                <td className='py-1.5 text-right'>
                                                                    <div className='flex justify-end gap-1'>
                                                                        {editingPaymentId === payment.id ? (
                                                                            <>
                                                                                <Button size='sm' className='h-7 gap-1 text-xs' onClick={() => handleSavePaymentEdit(payment)} disabled={paymentSaving}>
                                                                                    <Save className='h-3.5 w-3.5' /> Simpan
                                                                                </Button>
                                                                                <Button size='sm' variant='outline' className='h-7 gap-1 text-xs' onClick={handleCancelPaymentEdit} disabled={paymentSaving}>
                                                                                    <X className='h-3.5 w-3.5' /> Batal
                                                                                </Button>
                                                                            </>
                                                                        ) : (
                                                                            <>
                                                                                {!payment.verified_at && (
                                                                                    <>
                                                                                        <Button
                                                                                            size='sm'
                                                                                            variant='outline'
                                                                                            className='h-7 gap-1 text-xs'
                                                                                            onClick={() => handleStartPaymentEdit(payment)}
                                                                                            disabled={!!editingPaymentId}
                                                                                        >
                                                                                            <Pencil className='h-3.5 w-3.5' /> Edit
                                                                                        </Button>
                                                                                        <Button
                                                                                            size='sm'
                                                                                            variant='outline'
                                                                                            className='h-7 gap-1 text-xs text-destructive hover:text-destructive'
                                                                                            onClick={() => handleDeletePayment(payment)}
                                                                                            disabled={!!editingPaymentId}
                                                                                        >
                                                                                            <Trash2 className='h-3.5 w-3.5' /> Hapus
                                                                                        </Button>
                                                                                    </>
                                                                                )}
                                                                                {!payment.verified_at && (
                                                                                    <Button size='sm' variant='ghost' className='h-7 text-xs' onClick={() => handleVerifyPayment(payment)}>
                                                                                        Verifikasi
                                                                                    </Button>
                                                                                )}
                                                                            </>
                                                                        )}
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        ))}
                                                    </tbody>
                                                </table>
                                            </div>
                                        ) : (
                                            <p className='text-muted-foreground'>Belum ada pembayaran tercatat.</p>
                                        )}

                                        {canPay && (
                                            <div className='border-t pt-3'>
                                                <p className='mb-3 text-sm font-medium'>Catat Pembayaran Baru</p>
                                                <AddPaymentForm salesOrder={salesOrder} />
                                            </div>
                                        )}
                                    </div>
                                )}

                        </section>

                    </div>

                    <div className='sticky bottom-0 z-10 flex flex-wrap items-center justify-between gap-2 border-t bg-card/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-card/80 md:px-3.5 md:py-2'>
                        <div className='flex flex-wrap items-center gap-2'>
                            <Button variant='outline' className='gap-2' asChild>
                                <a href={indexUrl}><ChevronLeft className='h-4 w-4' /> Kembali</a>
                            </Button>
                            <Button variant='outline' onClick={handleDuplicate} disabled={!canDuplicate || isInlineEditing || !!editingRowKey || !!editingPaymentId}>
                                <Copy className='h-3.5 w-3.5' />
                                Duplikat
                            </Button>
                            <Button variant='outline' onClick={handleRevise} disabled={!canRevise || isInlineEditing || !!editingRowKey || !!editingPaymentId}>
                                <RotateCcw className='h-3.5 w-3.5' />
                                Revisi
                            </Button>
                            <Button variant='outline' onClick={handleCancel} disabled={!canCancel || isInlineEditing || !!editingRowKey || !!editingPaymentId}>
                                <XCircle className='h-3.5 w-3.5' />
                                Batalkan
                            </Button>
                            <p className='ml-1 text-sm text-muted-foreground'>{statusNote}</p>
                        </div>

                        <div className='flex flex-wrap items-center gap-2'>
                            {isInlineEditing ? (
                                <>
                                    <Button variant='outline' onClick={handleInlineEditCancel} disabled={inlineSaving}>
                                        Batal edit
                                    </Button>
                                    <Button onClick={handleInlineEditSave} disabled={inlineSaving}>
                                        {inlineSaving ? 'Menyimpan...' : 'Simpan perubahan'}
                                    </Button>
                                </>
                            ) : (
                                <Button onClick={() => setIsInlineEditing(true)} disabled={!canInlineEdit || !!editingRowKey || !!editingPaymentId}>
                                    <Pencil className='h-3.5 w-3.5' /> Edit Order
                                </Button>
                            )}
                            <Button
                                className='gap-2'
                                onClick={primaryAction}
                                disabled={!canRunPrimaryAction || isInlineEditing || !!editingRowKey || !!editingPaymentId}
                            >
                                {primaryLabel} <Send className='h-4 w-4' />
                            </Button>
                        </div>

                    </div>
                </div>

            </div>

            <Sheet open={otherCostDrawerOpen} onOpenChange={setOtherCostDrawerOpen}>
                <SheetContent side='right' className='w-[95vw] overflow-y-auto sm:max-w-[520px]'>
                    <SheetHeader>
                        <SheetTitle>Tambah Biaya Lainnya</SheetTitle>
                        <SheetDescription>
                            Tambahkan biaya non-parameter seperti transport, akomodasi, atau biaya pendukung lainnya.
                        </SheetDescription>
                    </SheetHeader>

                    <div className='space-y-3 py-3'>
                        <div className='space-y-1'>
                            <Label className='text-xs'>Jenis Biaya *</Label>
                            <ComboboxDropdown
                                value={otherCostData.sample_item_option_id || undefined}
                                onValueChange={(value) => {
                                    setOtherCostData('sample_item_option_id', value ?? '')
                                    const selected = additionalCostOptions.find((option) => String(option.id) === String(value))
                                    if (selected?.name && !otherCostData.description) {
                                        setOtherCostData('description', selected.name)
                                    }
                                }}
                                placeholder='Pilih jenis biaya...'
                                searchPlaceholder='Cari jenis biaya...'
                                emptyText='Jenis biaya tidak ditemukan.'
                                options={additionalCostComboboxOptions}
                            />
                            {otherCostErrors.sample_item_option_id && <p className='text-xs text-destructive'>{otherCostErrors.sample_item_option_id}</p>}
                        </div>

                        <div className='space-y-1'>
                            <Label className='text-xs'>Deskripsi / Nama Biaya</Label>
                            <Input
                                className='h-9'
                                value={otherCostData.description}
                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOtherCostData('description', e.target.value)}
                                placeholder='Contoh: Transport sampling area luar kota'
                            />
                            {otherCostErrors.description && <p className='text-xs text-destructive'>{otherCostErrors.description}</p>}
                        </div>

                        <div className='grid grid-cols-2 gap-2'>
                            <div className='space-y-1'>
                                <Label className='text-xs'>Qty *</Label>
                                <Input
                                    type='number'
                                    min='1'
                                    className='h-9'
                                    value={otherCostData.quantity}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOtherCostData('quantity', e.target.value)}
                                />
                                {otherCostErrors.quantity && <p className='text-xs text-destructive'>{otherCostErrors.quantity}</p>}
                            </div>
                            <div className='space-y-1'>
                                <Label className='text-xs'>Unit</Label>
                                <Input
                                    className='h-9'
                                    value={otherCostData.unit}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOtherCostData('unit', e.target.value)}
                                />
                                {otherCostErrors.unit && <p className='text-xs text-destructive'>{otherCostErrors.unit}</p>}
                            </div>
                        </div>

                        <div className='grid grid-cols-2 gap-2'>
                            <div className='space-y-1'>
                                <Label className='text-xs'>Harga *</Label>
                                <Input
                                    type='number'
                                    min='0'
                                    step='0.01'
                                    className='h-9 text-right'
                                    value={otherCostData.unit_price}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOtherCostData('unit_price', e.target.value)}
                                />
                                {otherCostErrors.unit_price && <p className='text-xs text-destructive'>{otherCostErrors.unit_price}</p>}
                            </div>
                            <div className='space-y-1'>
                                <Label className='text-xs'>Diskon Nominal</Label>
                                <Input
                                    type='number'
                                    min='0'
                                    step='0.01'
                                    className='h-9 text-right'
                                    value={otherCostData.discount_amount}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOtherCostData('discount_amount', e.target.value)}
                                />
                                {otherCostErrors.discount_amount && <p className='text-xs text-destructive'>{otherCostErrors.discount_amount}</p>}
                            </div>
                        </div>

                        <div className='space-y-1'>
                            <Label className='text-xs'>Catatan</Label>
                            <Textarea
                                rows={3}
                                value={otherCostData.notes}
                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setOtherCostData('notes', e.target.value)}
                            />
                            {otherCostErrors.notes && <p className='text-xs text-destructive'>{otherCostErrors.notes}</p>}
                        </div>
                    </div>

                    <SheetFooter className='sticky bottom-0 mt-2 gap-2 border-t bg-background/95 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/85'>
                        <Button type='button' variant='outline' onClick={() => setOtherCostDrawerOpen(false)} disabled={otherCostSaving}>
                            Batal
                        </Button>
                        <Button type='button' onClick={handleSaveOtherCost} disabled={otherCostSaving}>
                            {otherCostSaving ? 'Menyimpan...' : 'Tambah Biaya'}
                        </Button>
                    </SheetFooter>
                </SheetContent>
            </Sheet>

            <Sheet open={sampleDrawerOpen} onOpenChange={(open: boolean) => {
                setSampleDrawerOpen(open)
                if (!open) resetSampleDrawerState()
            }}>
                <SheetContent side='right' className='w-[95vw] overflow-y-auto sm:max-w-[980px]'>
                    <SheetHeader>
                        <SheetTitle>{sampleDrawerMode === 'edit' ? 'Edit Sampel (Wizard)' : 'Tambah Sampel (Wizard)'}</SheetTitle>
                        <SheetDescription>
                            Alur vertikal: isi jenis sampel, regulasi, lampiran, lalu checklist parameter dan harga dalam satu halaman.
                        </SheetDescription>
                    </SheetHeader>

                    <div className='grid gap-3 py-3 lg:grid-cols-[210px_minmax(0,1fr)]'>
                        <aside className='space-y-2.5'>
                            {[
                                { step: 1, title: 'Jenis Sampel' },
                                { step: 2, title: 'Regulasi' },
                                { step: 3, title: 'Lampiran' },
                                { step: 4, title: 'Parameter & Harga' },
                            ].map((item) => (
                                <div
                                    key={item.step}
                                    className={`rounded-md border px-2.5 py-2 ${
                                        stepErrors[item.step]
                                            ? 'border-destructive/40 bg-destructive/5'
                                            : stepCompletion[item.step]
                                                ? 'border-emerald-200 bg-emerald-50'
                                                : 'border-border bg-background'
                                    }`}
                                >
                                    <p className='text-[10px] uppercase tracking-wide text-muted-foreground'>Step {item.step}</p>
                                    <p className='text-[13px] font-semibold leading-tight'>{item.title}</p>
                                    {stepErrors[item.step] && (
                                        <p className='mt-0.5 text-[10px] text-destructive'>{stepErrors[item.step]}</p>
                                    )}
                                </div>
                            ))}

                            <div className='rounded-md border bg-muted/20 p-2.5 text-xs'>
                                <p className='mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-foreground'>Ringkasan</p>
                                <p>Jenis: <span className='font-medium'>{sampleDrawerData.sample_type_snapshot || '-'}</span></p>
                                <p>Regulasi: <span className='font-medium'>{regulationOptions.find((r) => r.id === sampleDrawerData.regulation_id)?.short_name || '-'}</span></p>
                                <p>Lampiran: <span className='font-medium'>{filteredAppendixOptions.find((a) => a.id === sampleDrawerData.regulation_appendix_id)?.name || '-'}</span></p>
                                <p>Selected param: <span className='font-medium'>{selectedDrawerParams.length}</span></p>
                                <p>Estimasi: <span className='font-semibold text-primary'>{formatCurrency(drawerEstimateTotal)}</span></p>
                            </div>
                        </aside>

                        <div className='overflow-hidden rounded-md border bg-background'>
                            <section className='px-4 py-3'>
                                <div>
                                    <p className='text-base font-semibold'>Step 1. Jenis Sampel</p>
                                    <p className='text-xs text-muted-foreground'>Tentukan jenis sampel utama dan jumlah pengujian.</p>
                                </div>
                                {stepErrors[1] && (
                                    <p className='mt-3 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive'>
                                        {stepErrors[1]}
                                    </p>
                                )}
                                <div className='mt-2.5 grid gap-2.5 md:grid-cols-2'>
                                    <div ref={sampleTypeFieldRef} className='space-y-1'>
                                        <Label className='text-xs'>Master jenis sampel</Label>
                                        <ComboboxDropdown
                                            value={sampleDrawerData.sample_item_id ? String(sampleDrawerData.sample_item_id) : undefined}
                                            onValueChange={(value) => {
                                                const nextId = value ? Number(value) : null
                                                const option = sampleItemOptions.find((item) => item.id === nextId)
                                                setSampleDrawerData((prev) => ({
                                                    ...prev,
                                                    sample_item_id: nextId,
                                                    sample_type_snapshot: option?.name ?? '',
                                                    regulation_id: null,
                                                    regulation_appendix_id: null,
                                                }))
                                                setSampleDrawerParams([])
                                                if (!nextId) {
                                                    setSampleDrawerRegulationOptions([])
                                                    return
                                                }
                                                focusRegulationField()
                                                void loadRegulationsBySampleType(nextId)
                                            }}
                                            placeholder='Pilih jenis sampel...'
                                            searchPlaceholder='Cari jenis sampel...'
                                            emptyText='Jenis sampel tidak ditemukan.'
                                            options={sampleItemComboboxOptions}
                                        />
                                    </div>
                                    <div className='space-y-1'>
                                        <Label className='text-xs'>Qty</Label>
                                        <Input
                                            type='number'
                                            min='1'
                                            className='h-9'
                                            value={sampleDrawerData.quantity}
                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSampleDrawerData((prev) => ({ ...prev, quantity: Number(e.target.value || 1) }))}
                                        />
                                    </div>
                                </div>
                            </section>

                            <section className='border-t px-4 py-3'>
                                <div>
                                    <p className='text-base font-semibold'>Step 2. Regulasi</p>
                                    <p className='text-xs text-muted-foreground'>Regulasi menentukan master parameter yang ditawarkan.</p>
                                </div>
                                {stepErrors[2] && (
                                    <p className='mt-3 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive'>
                                        {stepErrors[2]}
                                    </p>
                                )}
                                <div ref={regulationFieldRef} className='mt-2.5 space-y-1'>
                                    <Label className='text-xs'>Regulasi</Label>
                                    <ComboboxDropdown
                                        value={safeRegulationId ? String(safeRegulationId) : undefined}
                                        onValueChange={(value) => {
                                            const nextRegulationId = value ? Number(value) : null
                                            setSampleDrawerData((prev) => ({
                                                ...prev,
                                                regulation_id: nextRegulationId,
                                                regulation_appendix_id: null,
                                            }))
                                            setSampleDrawerParams([])
                                        }}
                                        placeholder='Pilih regulasi...'
                                        searchPlaceholder='Cari regulasi...'
                                        emptyText='Regulasi tidak ditemukan.'
                                        isPending={sampleDrawerLoadingRegulations}
                                        options={regulationComboboxOptions}
                                    />
                                    {!sampleDrawerData.sample_item_id && (
                                        <p className='text-[11px] text-muted-foreground'>Pilih jenis sampel terlebih dahulu untuk menampilkan daftar regulasi terkait.</p>
                                    )}
                                </div>
                            </section>

                            <section className='border-t px-4 py-3'>
                                <div>
                                    <p className='text-base font-semibold'>Step 3. Lampiran</p>
                                    <p className='text-xs text-muted-foreground'>Wajib dipilih karena parameter baku mutu mengacu ke lampiran regulasi.</p>
                                </div>
                                <div ref={appendixFieldRef} className='mt-2.5 space-y-1'>
                                    <Label className='text-xs'>Lampiran regulasi *</Label>
                                    <ComboboxDropdown
                                        value={safeAppendixId ? String(safeAppendixId) : undefined}
                                        onValueChange={(value) => {
                                            const nextAppendixId = value ? Number(value) : null

                                            setSampleDrawerData((prev) => ({
                                                ...prev,
                                                regulation_appendix_id: nextAppendixId,
                                            }))
                                            setSampleDrawerParams([])

                                            const canAutoload = Boolean(sampleDrawerData.sample_item_id && sampleDrawerData.regulation_id)
                                            if (!canAutoload) return
                                            if (!nextAppendixId) return

                                            void loadMasterParameters(
                                                { regulation_appendix_id: nextAppendixId },
                                                false,
                                            )
                                        }}
                                        placeholder='Pilih lampiran...'
                                        searchPlaceholder='Cari lampiran...'
                                        emptyText='Lampiran tidak ditemukan.'
                                        options={appendixComboboxOptions}
                                    />
                                    {!hasAppendixOptions && sampleDrawerData.regulation_id && (
                                        <div className='space-y-1'>
                                            <p className='text-xs text-destructive'>Regulasi ini belum memiliki lampiran di master.</p>
                                            <a
                                                href='/master-data/regulation-appendices'
                                                className='inline-flex text-xs font-medium text-primary underline underline-offset-4 hover:text-primary/80'
                                            >
                                                Buka Master Lampiran Regulasi
                                            </a>
                                        </div>
                                    )}
                                </div>
                            </section>

                            <section className='border-t px-4 py-3'>
                                <div className='flex flex-wrap items-center justify-between gap-2'>
                                    <div>
                                        <p className='text-base font-semibold'>Step 4. Parameter & Kalkulasi Harga</p>
                                        <p className='text-xs text-muted-foreground'>Checklist parameter, sesuaikan harga, lalu simpan.</p>
                                    </div>
                                    <Button
                                        variant='outline'
                                        className='h-8'
                                        onClick={loadMasterParameters}
                                        disabled={sampleDrawerSaving || sampleDrawerLoadingParams || !!stepErrors[1] || !!stepErrors[2] || !!stepErrors[3]}
                                    >
                                        {sampleDrawerLoadingParams ? 'Memuat...' : 'Muat Parameter Master'}
                                    </Button>
                                </div>
                                {stepErrors[4] && !sampleDrawerLoadingParams && (
                                    <p className='mt-3 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive'>
                                        {stepErrors[4]}
                                    </p>
                                )}
                                {sampleDrawerLoadingParams ? (
                                    <p className='mt-3 text-sm text-muted-foreground'>Memuat parameter master...</p>
                                ) : (
                                    <>
                                        <div className='mt-2.5 max-h-[360px] space-y-1.5 overflow-y-auto rounded-md border p-2'>
                                            {sampleDrawerParams.length > 0 ? sampleDrawerParams.map((param) => (
                                                <div key={param.key} className='grid gap-2 rounded-md border p-2 md:grid-cols-[auto_minmax(0,1fr)_130px]'>
                                                    <div className='pt-1'>
                                                        <Checkbox checked={param.selected} onCheckedChange={(value: boolean | 'indeterminate') => toggleSampleDrawerParam(param.key, value === true)} />
                                                    </div>
                                                    <div className='min-w-0'>
                                                        <div className='flex items-center gap-1.5'>
                                                            <p className='truncate text-[13px] font-semibold'>{param.parameter_name}</p>
                                                            {param.is_additional && (
                                                                <Badge variant='secondary' className='h-5 px-1.5 text-[10px] uppercase tracking-wide'>
                                                                    Tambahan
                                                                </Badge>
                                                            )}
                                                        </div>
                                                        <p className='text-xs text-muted-foreground'>{param.test_method || '-'}</p>
                                                        <p className='text-xs text-muted-foreground'>{param.specification || '-'}</p>
                                                    </div>
                                                    <div className='space-y-1'>
                                                        <Label className='text-[11px]'>Harga</Label>
                                                        <Input
                                                            type='number'
                                                            min='0'
                                                            step='0.01'
                                                            className='h-8 text-right'
                                                            value={String(param.unit_price)}
                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateSampleDrawerParamPrice(param.key, e.target.value)}
                                                        />
                                                    </div>
                                                </div>
                                            )) : (
                                                <p className='px-2 py-5 text-center text-sm text-muted-foreground'>Belum ada parameter dari master untuk kombinasi ini.</p>
                                            )}
                                        </div>
                                        <div className='mt-2.5 rounded-md border bg-muted/20 p-2.5'>
                                            <p className='mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground'>Tambah Parameter Tambahan</p>
                                            <div className='grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_140px_auto]'>
                                                <div className='space-y-1'>
                                                    <Label className='text-[11px]'>Nama parameter tambahan</Label>
                                                    <ComboboxDropdown
                                                        className='h-8'
                                                        value={sampleDrawerAdditionalParam.parameter_id || undefined}
                                                        onValueChange={(value: string | undefined) => {
                                                            const selected = parameterOptions.find((option) => option.id === Number(value))
                                                            setSampleDrawerAdditionalParam((prev) => ({
                                                                ...prev,
                                                                parameter_id: value ?? '',
                                                                parameter_name: selected?.name ?? '',
                                                            }))
                                                        }}
                                                        placeholder='Pilih parameter...'
                                                        searchPlaceholder='Cari parameter...'
                                                        emptyText='Parameter tidak ditemukan.'
                                                        options={additionalParameterComboboxOptions}
                                                    />
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='text-[11px]'>Metode</Label>
                                                    <ComboboxDropdown
                                                        className='h-8'
                                                        value={sampleDrawerAdditionalParam.method_id || undefined}
                                                        onValueChange={(value: string | undefined) => {
                                                            const selected = methodOptions.find((option) => option.id === Number(value))
                                                            setSampleDrawerAdditionalParam((prev) => ({
                                                                ...prev,
                                                                method_id: value ?? '',
                                                                test_method: selected?.name ?? '',
                                                            }))
                                                        }}
                                                        placeholder='Pilih metode (opsional)...'
                                                        searchPlaceholder='Cari metode...'
                                                        emptyText='Metode tidak ditemukan.'
                                                        options={additionalMethodComboboxOptions}
                                                    />
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='text-[11px]'>Biaya</Label>
                                                    <Input
                                                        type='number'
                                                        min='0'
                                                        step='0.01'
                                                        className='h-8 text-right'
                                                        placeholder='Harga'
                                                        value={sampleDrawerAdditionalParam.unit_price}
                                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                            setSampleDrawerAdditionalParam((prev) => ({ ...prev, unit_price: e.target.value }))
                                                        }
                                                    />
                                                </div>
                                                <div className='space-y-1'>
                                                    <Label className='invisible text-[11px]'>Aksi</Label>
                                                    <Button type='button' variant='outline' className='h-8 w-full' onClick={handleAddAdditionalDrawerParam}>
                                                        Tambah
                                                    </Button>
                                                </div>
                                            </div>
                                        </div>
                                        <div className='mt-2.5 grid gap-2 rounded-md border bg-muted/20 p-2.5 text-sm md:grid-cols-2'>
                                            <p>Parameter terpilih: <span className='font-semibold'>{selectedDrawerParams.length}</span></p>
                                            <p>Total unit price: <span className='font-semibold'>{formatCurrency(drawerUnitPrice)}</span></p>
                                            <p>Unit price parameter master: <span className='font-semibold'>{formatCurrency(drawerMasterUnitPrice)}</span></p>
                                            <p>Unit price parameter tambahan: <span className='font-semibold'>{formatCurrency(drawerAdditionalUnitPrice)}</span></p>
                                            <p>Qty: <span className='font-semibold'>{sampleDrawerData.quantity}</span></p>
                                            <p className='md:col-span-2'>Estimasi subtotal: <span className='font-semibold text-primary'>{formatCurrency(drawerEstimateTotal)}</span></p>
                                        </div>
                                    </>
                                )}
                            </section>
                        </div>
                    </div>

                    <SheetFooter className='sticky bottom-0 mt-2 gap-2 border-t bg-background/95 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/85'>
                        <Button variant='outline' onClick={() => {
                            setSampleDrawerOpen(false)
                            resetSampleDrawerState()
                        }} disabled={sampleDrawerSaving}>
                            Batal
                        </Button>
                        <Button onClick={handleSampleDrawerSubmit} disabled={sampleDrawerSaving || sampleDrawerLoadingParams}>
                            {sampleDrawerSaving ? 'Menyimpan...' : (sampleDrawerMode === 'edit' ? 'Simpan Perubahan Sampel' : 'Tambah Sampel')}
                        </Button>
                    </SheetFooter>
                </SheetContent>
            </Sheet>

            <AlertDialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Batalkan Sales Order?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Order akan berubah status menjadi dibatalkan. Tambahkan alasan agar tim lain mendapat konteks.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <div className='space-y-2'>
                        <Label htmlFor='cancel-reason'>Alasan pembatalan</Label>
                        <Textarea
                            id='cancel-reason'
                            rows={3}
                            placeholder='Contoh: customer menunda project sampai bulan depan.'
                            value={cancelReason}
                            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setCancelReason(e.target.value)}
                        />
                    </div>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={cancelSubmitting}>Kembali</AlertDialogCancel>
                        <AlertDialogAction
                            disabled={cancelSubmitting}
                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                                e.preventDefault()
                                handleConfirmCancel()
                            }}
                            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
                        >
                            {cancelSubmitting ? 'Memproses...' : 'Ya, batalkan'}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </LimsAppLayout>
    )
}