import { Head, Link, router, usePage } from '@inertiajs/react'
import { DatePicker } from '@ui/components/date-picker'
import { Main } from '@ui/components/layout/main'
import { Badge } from '@ui/components/ui/badge'
import { Button } from '@ui/components/ui/button'
import { Card, CardContent, CardHeader } from '@ui/components/ui/card'
import { Input } from '@ui/components/ui/input'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ui/components/ui/table'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@ui/components/ui/tooltip'
import { format, parseISO } from 'date-fns'
import { useEffect, useState } from 'react'
import { FinanceAppLayout } from '@/layouts/finance-app-layout'
import { useAppText } from '@/lib/app-text'
import { FieldWithStatus, InlineAlert, Modal, StepHeading } from './components/ManagePoShared'

type DetailRow = {
  id: number
  m_jenis_pengujian: number | null
  nama_jenis: string | null
  titik: number | null
  tarif: number | null
  disc_rupiah: number | null
  accurate_item_id: number | null
  accurate_item_no: string | null
}

type OptionRow = { id: number; nama: string }

type AccurateCustomer = {
  id?: number
  customer_no?: string
  name?: string
  raw?: Record<string, unknown>
}

type CustomerAccurateInfo = {
  id: string
  customer_no: string
  name: string
  category: string
  bill_street: string
  bill_city: string
  bill_province: string
  bill_zip_code: string
  bill_country: string
  phone: string
  mobile_phone: string
  whatsapp: string
  email: string
  npwp_no: string
  tax_type: string
  tax_name: string
  payment_terms: string
  branch: string
  currency: string
  account_receivable: string
  account_down_payment: string
  account_sales: string
}

type CustomerContactInfo = {
  name: string
  position: string
  email: string
  handphone: string
}

type AccurateItem = {
  id?: number
  no?: string
  name?: string
}

type PageProps = {
  po_context: {
    po: {
      id: number
      nomor: string
      customer_id: number
      customer_name: string
      branch_id: number
      nominal: number
    }
    details: DetailRow[]
    customer_keyword?: string
    sample_keyword?: string
    local_customers?: Array<{ id?: number; nama?: string }>
    accurate_customers?: AccurateCustomer[]
    accurate_items?: AccurateItem[]
    accurate_items_meta?: {
      raw_count?: number
      displayed_count?: number
    }
    customer_error?: string | null
    sample_error?: string | null
  }
  jenis_sampel_teknis_options: OptionRow[]
  flash?: {
    success?: string
    error?: string
  }
}

const ROUTE_BASE = '/monitoring/integrasi-accurate'

const formatRupiah = (value: number) =>
  new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR',
    maximumFractionDigits: 0,
  }).format(value || 0)

export default function ManagePoPage() {
  const { t } = useAppText()
  const { po_context, jenis_sampel_teknis_options, flash } = usePage<PageProps>().props
  const po = po_context?.po
  const details = po_context?.details ?? []

  const [submitting, setSubmitting] = useState(false)
  const [openCreateCustomer, setOpenCreateCustomer] = useState(false)
  const [openEditCustomerName, setOpenEditCustomerName] = useState(false)
  const [openSearchCustomer, setOpenSearchCustomer] = useState(false)
  const [openSearchSample, setOpenSearchSample] = useState(false)
  const [openCreateSample, setOpenCreateSample] = useState(false)
  const [selectedSampleId, setSelectedSampleId] = useState('')
  const [actionLoading, setActionLoading] = useState<'customer-search' | 'sample-search' | 'submit' | null>(null)
  const [loadingCustomerDetail, setLoadingCustomerDetail] = useState(false)

  const [customerKeyword, setCustomerKeyword] = useState(po_context.customer_keyword ?? po.customer_name ?? '')
  const [sampleKeyword, setSampleKeyword] = useState(po_context.sample_keyword ?? '')

  const [localCustomerId] = useState(String(po.customer_id || ''))
  const [localCustomerName] = useState(po.customer_name || '')
  const [accurateCustomerId, setAccurateCustomerId] = useState('')
  const [accurateCustomerNo, setAccurateCustomerNo] = useState('')
  const [accurateCustomerLabel, setAccurateCustomerLabel] = useState('')

  const [localJenisId, setLocalJenisId] = useState('')
  const [localJenisName, setLocalJenisName] = useState('')
  const [accurateItemId, setAccurateItemId] = useState('')
  const [accurateItemNo, setAccurateItemNo] = useState('')
  const [accurateItemLabel, setAccurateItemLabel] = useState('')
  const [jenisTeknisId, setJenisTeknisId] = useState('')

  const [createCustomer, setCreateCustomer] = useState({
    accurate_id: '',
    trans_date: new Date().toISOString().slice(0, 10),
    customer_no: '',
    name: '',
    bill_street: '',
    bill_city: '',
    bill_province: '',
    bill_zip_code: '',
    bill_country: 'Indonesia',
    npwp_no: '',
    phone: '',
    email: '',
    description: '',
    branch_id: String(po.branch_id ?? 0),
    default_inc_tax: false,
    suspended: false,
  })

  const [editCustomerName, setEditCustomerName] = useState({
    accurate_id: '',
    customer_no: '',
    name: '',
    trans_date: new Date().toISOString().slice(0, 10),
  })

  const [editCustomerInfo, setEditCustomerInfo] = useState<CustomerAccurateInfo>({
    id: '-',
    customer_no: '-',
    name: '-',
    category: '-',
    bill_street: '-',
    bill_city: '-',
    bill_province: '-',
    bill_zip_code: '-',
    bill_country: '-',
    phone: '-',
    mobile_phone: '-',
    whatsapp: '-',
    email: '-',
    npwp_no: '-',
    tax_type: '-',
    tax_name: '-',
    payment_terms: '-',
    branch: '-',
    currency: '-',
    account_receivable: '-',
    account_down_payment: '-',
    account_sales: '-',
  })

  const [editCustomerContacts, setEditCustomerContacts] = useState<CustomerContactInfo[]>([])

  const [createItem, setCreateItem] = useState({
    accurate_id: '',
    item_no: '',
    item_type: 'INVENTORY',
    item_category_name: '',
    name: '',
    unit1_name: 'PCS',
    upc_no: '',
    unit_price: '',
    vendor_price: '',
    default_discount: '',
    vendor_unit_name: '',
    notes: '',
    use_ppn: false,
    control_quantity: false,
    suspended: false,
  })

  const selectedTransDate = createCustomer.trans_date
    ? parseISO(createCustomer.trans_date)
    : undefined

  const formInputClassName = 'text-foreground placeholder:text-muted-foreground'

  const toDisplayValue = (value: unknown) => {
    const text = String(value ?? '').trim()

    return text === '' ? '-' : text
  }

  const toDisplayObject = (value: unknown) => {
    if (value === null || value === undefined) {
      return '-'
    }

    if (Array.isArray(value)) {
      if (value.length === 0) {
        return '-'
      }

      return toDisplayObject(value[0])
    }

    if (typeof value === 'object') {
      const objectValue = value as Record<string, unknown>
      const merged = [
        objectValue.name,
        objectValue.no,
        objectValue.number,
        objectValue.code,
        objectValue.customerNo,
        objectValue.customer_no,
      ]
        .map((item) => String(item ?? '').trim())
        .filter((item) => item !== '')

      if (merged.length > 0) {
        return merged.join(' - ')
      }
    }

    return toDisplayValue(value)
  }

  const pickRawField = (row: AccurateCustomer, keys: string[]) => {
    const raw = row.raw ?? {}

    for (const key of keys) {
      const value = raw[key]

      if (value !== undefined && value !== null && String(value).trim() !== '') {
        return String(value).trim()
      }
    }

    return ''
  }

  const buildCustomerInfoFromRow = (row: AccurateCustomer): CustomerAccurateInfo => ({
    id: toDisplayValue(row.id),
    customer_no: toDisplayValue(row.customer_no),
    name: toDisplayValue(row.name),
    category: toDisplayValue(pickRawField(row, ['customerCategoryName', 'customerCategory', 'categoryName', 'category'])),
    bill_street: toDisplayValue(pickRawField(row, ['billStreet', 'address', 'bill_street', 'street'])),
    bill_city: toDisplayValue(pickRawField(row, ['billCity', 'city', 'bill_city'])),
    bill_province: toDisplayValue(pickRawField(row, ['billProvince', 'province', 'bill_province'])),
    bill_zip_code: toDisplayValue(pickRawField(row, ['billZipCode', 'zipCode', 'bill_zip_code'])),
    bill_country: toDisplayValue(pickRawField(row, ['billCountry', 'country', 'bill_country'])),
    phone: toDisplayValue(pickRawField(row, ['phone', 'businessPhone', 'telp'])),
    mobile_phone: toDisplayValue(pickRawField(row, ['mobilePhone', 'handphone', 'hp'])),
    whatsapp: toDisplayValue(pickRawField(row, ['whatsapp', 'wa', 'noWhatsapp'])),
    email: toDisplayValue(pickRawField(row, ['email'])),
    npwp_no: toDisplayValue(pickRawField(row, ['npwpNo', 'npwp', 'taxNo'])),
    tax_type: toDisplayValue(pickRawField(row, ['taxType', 'typeTax', 'tax_type'])),
    tax_name: toDisplayValue(pickRawField(row, ['taxName', 'nameTax', 'tax_name'])),
    payment_terms: toDisplayValue(pickRawField(row, ['paymentTerm', 'paymentTerms', 'term'])),
    branch: toDisplayValue(pickRawField(row, ['branchName', 'branch'])),
    currency: toDisplayValue(pickRawField(row, ['currencyName', 'currency'])),
    account_receivable: toDisplayValue(pickRawField(row, ['accountReceivable', 'accountPiutang'])),
    account_down_payment: toDisplayValue(pickRawField(row, ['accountDownPayment', 'accountUangMuka'])),
    account_sales: toDisplayValue(pickRawField(row, ['accountSales', 'accountPenjualan'])),
  })

  const normalizeContact = (contact: unknown): CustomerContactInfo => {
    const row = (contact ?? {}) as Record<string, unknown>

    return {
      name: toDisplayValue(row.name ?? row.contactName ?? row.fullName),
      position: toDisplayValue(row.position ?? row.jobTitle ?? row.title),
      email: toDisplayValue(row.email ?? row.contactEmail),
      handphone: toDisplayValue(row.mobilePhone ?? row.handphone ?? row.phone ?? row.contactPhone),
    }
  }

  const buildCustomerInfoFromDetail = (detail: Record<string, unknown>): CustomerAccurateInfo => ({
    id: toDisplayValue(detail.id),
    customer_no: toDisplayValue(detail.customerNo ?? detail.customer_no ?? detail.no),
    name: toDisplayValue(detail.name ?? detail.customerName),
    category: toDisplayObject(detail.category ?? detail.customerCategory ?? detail.customerCategoryName),
    bill_street: toDisplayValue(detail.billStreet ?? detail.address),
    bill_city: toDisplayValue(detail.billCity ?? detail.city),
    bill_province: toDisplayValue(detail.billProvince ?? detail.province),
    bill_zip_code: toDisplayValue(detail.billZipCode ?? detail.zipCode),
    bill_country: toDisplayValue(detail.billCountry ?? detail.country),
    phone: toDisplayValue(detail.phone ?? detail.businessPhone ?? detail.workPhone),
    mobile_phone: toDisplayValue(detail.mobilePhone ?? detail.handphone ?? detail.workPhone),
    whatsapp: toDisplayValue(detail.whatsapp ?? detail.wa ?? detail.bbmPin),
    email: toDisplayValue(detail.email),
    npwp_no: toDisplayValue(detail.npwpNo ?? detail.npwp),
    tax_type: toDisplayObject(detail.customerTaxTypeName ?? detail.taxType ?? detail.typeTax),
    tax_name: toDisplayValue(detail.wpName ?? detail.taxName ?? detail.nameTax),
    payment_terms: toDisplayObject(detail.paymentTerm ?? detail.paymentTerms),
    branch: toDisplayObject(detail.customerBranchName ?? detail.branch ?? detail.branchName),
    currency: toDisplayObject(detail.currency ?? detail.currencyName),
    account_receivable: toDisplayObject(detail.customerReceivableAccountList ?? detail.accountReceivable ?? detail.accountPiutang),
    account_down_payment: toDisplayObject(detail.customerDownPaymentAccountList ?? detail.accountDownPayment ?? detail.accountUangMuka),
    account_sales: toDisplayObject(detail.salesAccount ?? detail.accountSales ?? detail.accountPenjualan),
  })

  const fetchAccurateCustomerDetail = async (accurateId: number) => {
    if (!accurateId || Number.isNaN(accurateId)) {
      return
    }

    setLoadingCustomerDetail(true)

    try {
      const response = await fetch(`${ROUTE_BASE}/accurate-customer/detail/${accurateId}`)

      if (!response.ok) {
        return
      }

      const payload = (await response.json()) as {
        ok?: boolean
        data?: {
          detail?: Record<string, unknown>
          contacts?: unknown[]
        }
      }

      const detail = payload?.data?.detail ?? {}
      const contacts = Array.isArray(payload?.data?.contacts)
        ? payload?.data?.contacts
        : []

      setEditCustomerInfo(buildCustomerInfoFromDetail(detail))
      setEditCustomerContacts(contacts.map(normalizeContact))
    } finally {
      setLoadingCustomerDetail(false)
    }
  }

  useEffect(() => {
    if (typeof window === 'undefined') {
return
}

    const params = new URLSearchParams(window.location.search)
    const open = params.get('open_modal')
    setSelectedSampleId(params.get('selected_local_jenis_id') ?? '')

    if (open === 'customer') {
setOpenSearchCustomer(true)
}

    if (open === 'sample') {
setOpenSearchSample(true)
}
  }, [])

  const canSaveCustomerMapping = localCustomerId.trim() !== '' && accurateCustomerId.trim() !== ''
  const canSaveSampleMapping = localJenisId.trim() !== '' && accurateItemId.trim() !== ''

  const selectLocalJenis = (id: string | number | null | undefined, nama: string | null | undefined) => {
    const idValue = String(id ?? '')
    const namaValue = String(nama ?? '')
    setLocalJenisId(idValue)
    setLocalJenisName(namaValue)
  }

  const submitPost = (url: string, payload: Record<string, string | number | boolean>) => {
    setSubmitting(true)
    setActionLoading('submit')
    router.post(url, payload, {
      preserveScroll: true,
      only: ['po_context', 'flash'],
      onFinish: () => {
        setSubmitting(false)
        setActionLoading(null)
      },
    })
  }

  const refreshCustomerSearchModal = () => {
    setSubmitting(true)
    setActionLoading('customer-search')
    setOpenSearchCustomer(true)
    router.get(
      `${ROUTE_BASE}/po/${po.id}`,
      {
        customer_keyword: customerKeyword,
        sample_keyword: sampleKeyword,
        open_modal: 'customer',
        selected_local_jenis_id: localJenisId,
        selected_local_jenis_name: localJenisName,
      },
      {
        preserveState: true,
        preserveScroll: true,
        replace: true,
        only: ['po_context', 'flash'],
        onFinish: () => {
          setSubmitting(false)
          setActionLoading(null)
        },
      }
    )
  }

  const submitEditCustomerName = () => {
    const accurateId = Number(editCustomerName.accurate_id)
    const name = editCustomerName.name.trim()

    if (!accurateId || !name) {
return
}

    let didRefreshAfterSuccess = false

    setSubmitting(true)
    setActionLoading('submit')
    router.post(
      `${ROUTE_BASE}/accurate-customer/save`,
      {
        accurate_id: accurateId,
        customer_no: editCustomerName.customer_no,
        name,
        trans_date: editCustomerName.trans_date,
      },
      {
        preserveScroll: true,
        only: ['po_context', 'flash'],
        onSuccess: () => {
          didRefreshAfterSuccess = true
          setOpenEditCustomerName(false)
          refreshCustomerSearchModal()
        },
        onFinish: () => {
          if (!didRefreshAfterSuccess) {
            setSubmitting(false)
            setActionLoading(null)
          }
        },
      }
    )
  }

  const searchCustomer = () => {
    refreshCustomerSearchModal()
  }

  const searchSample = () => {
    setSubmitting(true)
    setActionLoading('sample-search')
    router.get(
      `${ROUTE_BASE}/po/${po.id}`,
      {
        customer_keyword: customerKeyword,
        sample_keyword: sampleKeyword,
        open_modal: 'sample',
        selected_local_jenis_id: localJenisId,
        selected_local_jenis_name: localJenisName,
      },
      {
        preserveState: true,
        preserveScroll: true,
        replace: true,
        only: ['po_context', 'flash'],
        onFinish: () => {
          setSubmitting(false)
          setActionLoading(null)
        },
      }
    )
  }

  return (
    <FinanceAppLayout>
      <Head title={t('accurate_integration_monitoring.manage_po_page_title', { nomor: po.nomor })} />

      <Main>
        <div className='mx-auto w-full max-w-[1180px]'>
        <div className='mb-3 flex items-center justify-between gap-3 rounded-lg border bg-card px-4 py-2.5'>
          <div>
            <h1 className='text-2xl font-bold tracking-tight text-foreground'>Kelola Integrasi PO</h1>
            <p className='text-sm text-muted-foreground'>Sinkronisasi customer dan jenis sampel ke Accurate.</p>
          </div>
          <Button asChild variant='outline' className='text-foreground'>
            <Link href={ROUTE_BASE}>Kembali ke Monitoring</Link>
          </Button>
        </div>

        {flash?.success && <InlineAlert tone='success'>{flash.success}</InlineAlert>}
        {flash?.error && <InlineAlert tone='error'>{flash.error}</InlineAlert>}

        <Card className='mb-3 border-slate-200'>
          <CardContent className='grid gap-1.5 px-4 pb-3 pt-3 text-sm sm:grid-cols-2 lg:grid-cols-4'>
            <div><span className='font-medium'>Nomor PO:</span> {po.nomor || '-'}</div>
            <div><span className='font-medium'>Customer:</span> {po.customer_name || '-'}</div>
            <div><span className='font-medium'>Branch ID:</span> {po.branch_id ?? '-'}</div>
            <div><span className='font-medium'>Nominal:</span> {formatRupiah(po.nominal || 0)}</div>
          </CardContent>
        </Card>

        <Card className='mb-3 border-slate-200'>
          <CardHeader className='flex flex-row items-center justify-between px-4 pb-2 pt-3'>
            <StepHeading step='Langkah 1' title='Mapping Customer' />
            <div className='flex gap-2'>
              <Button type='button' variant='secondary' className='text-foreground' onClick={() => setOpenCreateCustomer(true)}>Create Customer Baru</Button>
              <Button type='button' className='text-primary-foreground' onClick={() => setOpenSearchCustomer(true)}>Cari Customer</Button>
            </div>
          </CardHeader>
          <CardContent className='px-4 pb-3 pt-0'>
            {po_context.customer_error && <InlineAlert tone='error'>{po_context.customer_error}</InlineAlert>}
            <div className='grid gap-2.5 md:grid-cols-2'>
              <FieldWithStatus
                label='Customer PO (terpilih)'
                value={localCustomerName || '-'}
                picked={localCustomerId.trim() !== ''}
              />
              <FieldWithStatus
                label='Customer di Accurate (terpilih)'
                value={accurateCustomerLabel}
                placeholder='Pilih dari modal Cari Customer'
                picked={accurateCustomerId.trim() !== ''}
              />
            </div>
            <div className='mt-2.5'>
              <Button
                type='button'
                disabled={!canSaveCustomerMapping || submitting}
                onClick={() => submitPost(`${ROUTE_BASE}/local-customer/save`, {
                  local_customer_id: localCustomerId,
                  nama: localCustomerName,
                  accurate_customer_id: accurateCustomerId,
                  accurate_customer_no: accurateCustomerNo,
                  branch_id: po.branch_id,
                })}
              >
                Simpan Mapping Customer
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card className='border-slate-200'>
          <CardHeader className='flex flex-row items-center justify-between px-4 pb-2 pt-3'>
            <StepHeading step='Langkah 2' title='Mapping Jenis Sampel' />
            <Button type='button' variant='secondary' className='text-foreground' onClick={() => setOpenCreateSample(true)}>Create Jenis Sampel Baru</Button>
          </CardHeader>
          <CardContent className='px-4 pb-3 pt-0'>
            {po_context.sample_error && <InlineAlert tone='error'>{po_context.sample_error}</InlineAlert>}
            <InlineAlert tone='info'>
              Pilih jenis sampel dari daftar PO, cari padanan di Accurate, lalu simpan.
            </InlineAlert>

            <div className='overflow-x-auto rounded-md border'>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Jenis Sampel</TableHead>
                    <TableHead className='w-[90px]'>Titik</TableHead>
                    <TableHead className='w-[160px]'>Tarif</TableHead>
                    <TableHead className='w-[200px]'>Status Mapping Accurate</TableHead>
                    <TableHead className='w-[220px]'>Aksi</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {details.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={5} className='text-center text-muted-foreground'>Tidak ada detail jenis sampel.</TableCell>
                    </TableRow>
                  ) : (
                    details.map((row) => {
                      const rowId = String(row.m_jenis_pengujian ?? '')
                      const active = rowId !== '' && (rowId === localJenisId || rowId === selectedSampleId)

                      return (
                        <TableRow key={row.id} className={active ? 'bg-blue-50/80' : ''}>
                          <TableCell>{row.nama_jenis || '-'}</TableCell>
                          <TableCell>{row.titik ?? 0}</TableCell>
                          <TableCell>{formatRupiah(Number(row.tarif ?? 0))}</TableCell>
                          <TableCell>
                            {row.accurate_item_no ? (
                              <Badge variant='default'>Sudah Mapping</Badge>
                            ) : (
                              <Badge variant='secondary'>Belum Mapping</Badge>
                            )}
                          </TableCell>
                          <TableCell>
                            <div className='flex gap-2'>
                              <Button size='sm' variant='outline' onClick={() => selectLocalJenis(row.m_jenis_pengujian, row.nama_jenis)}>Pilih Jenis Ini</Button>
                              <Button
                                size='sm'
                                onClick={() => {
                                  selectLocalJenis(row.m_jenis_pengujian, row.nama_jenis)
                                  setOpenSearchSample(true)
                                }}
                              >
                                Cari di Accurate
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      )
                    })
                  )}
                </TableBody>
              </Table>
            </div>

            <div className='mt-3 grid gap-2.5 md:grid-cols-12'>
              <div className='md:col-span-5'>
                <FieldWithStatus
                  label='Jenis Sampel PO (terpilih)'
                  value={localJenisName}
                  placeholder='Pilih dari tabel detail PO'
                  picked={localJenisId.trim() !== ''}
                />
              </div>
              <div className='md:col-span-5'>
                <FieldWithStatus
                  label='Jenis Sampel di Accurate (terpilih)'
                  value={accurateItemLabel}
                  placeholder='Pilih dari modal Cari Jenis Sampel Accurate'
                  picked={accurateItemId.trim() !== ''}
                />
              </div>
              <div className='md:col-span-2'>
                <p className='mb-1 text-sm font-medium text-foreground'>Jenis Teknis</p>
                <select
                  className='h-9 w-full rounded-md border border-input bg-background px-3 text-sm'
                  value={jenisTeknisId}
                  onChange={(e) => setJenisTeknisId(e.target.value)}
                >
                  <option value=''>Pilih</option>
                  {jenis_sampel_teknis_options.map((opt) => (
                    <option key={opt.id} value={opt.id}>{opt.nama}</option>
                  ))}
                </select>
              </div>
            </div>

            <div className='mt-2.5'>
              <Button
                type='button'
                disabled={!canSaveSampleMapping || submitting}
                onClick={() => submitPost(`${ROUTE_BASE}/local-jenis-sampel/save`, {
                  local_jenis_id: localJenisId,
                  nama: localJenisName,
                  accurate_item_id: accurateItemId,
                  accurate_item_no: accurateItemNo,
                  m_jenis_pengujian_teknis: jenisTeknisId,
                })}
              >
                Simpan Mapping Jenis Sampel
              </Button>
            </div>
          </CardContent>
        </Card>

        <Modal open={openSearchCustomer} title='Cari Customer' onClose={() => setOpenSearchCustomer(false)}>
          <InlineAlert tone='info'>
            Customer acuan dari PO: <strong>{po.customer_name || '-'}</strong>
          </InlineAlert>
          <div className='mb-3 flex flex-wrap gap-2'>
            <Input value={customerKeyword} onChange={(e) => setCustomerKeyword(e.target.value)} placeholder='Contoh: PLN UP3' className={`max-w-md ${formInputClassName}`} />
            <Button type='button' className='text-primary-foreground' onClick={searchCustomer} disabled={submitting}>
              {actionLoading === 'customer-search' ? 'Mencari...' : 'Cari'}
            </Button>
          </div>
          <div className='overflow-x-auto rounded-md border'>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>No Customer</TableHead>
                  <TableHead>Nama Customer</TableHead>
                  <TableHead className='w-[220px]'>Aksi</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {(po_context.accurate_customers ?? []).length === 0 ? (
                  <TableRow><TableCell colSpan={3} className='text-center text-muted-foreground'>Tidak ada data.</TableCell></TableRow>
                ) : (
                  (po_context.accurate_customers ?? []).map((row, idx) => (
                    <TableRow key={`${row.id ?? idx}`}>
                      <TableCell>{row.customer_no || '-'}</TableCell>
                      <TableCell>{row.name || '-'}</TableCell>
                      <TableCell>
                        <div className='flex gap-2'>
                          <Button
                            size='sm'
                            onClick={() => {
                              setAccurateCustomerId(String(row.id ?? ''))
                              setAccurateCustomerNo(String(row.customer_no ?? ''))
                              setAccurateCustomerLabel(`${row.customer_no || '-'} - ${row.name || '-'}`)
                              setOpenSearchCustomer(false)
                            }}
                          >
                            Pilih
                          </Button>
                          <Button
                            size='sm'
                            variant='secondary'
                            onClick={() => {
                              setEditCustomerInfo(buildCustomerInfoFromRow(row))
                              setEditCustomerContacts([])
                              setEditCustomerName({
                                accurate_id: String(row.id ?? ''),
                                customer_no: String(row.customer_no ?? ''),
                                name: String(row.name ?? ''),
                                trans_date: new Date().toISOString().slice(0, 10),
                              })
                              setOpenSearchCustomer(false)
                              setOpenEditCustomerName(true)

                              const accurateId = Number(row.id ?? 0)

                              if (accurateId > 0) {
                                void fetchAccurateCustomerDetail(accurateId)
                              }
                            }}
                          >
                            Edit Nama
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </Modal>

        <Modal open={openEditCustomerName} title='Edit Nama Customer Accurate' onClose={() => setOpenEditCustomerName(false)}>
          <InlineAlert tone='info'>
            Yang bisa diubah hanya nama customer. Data lain tidak diubah.
          </InlineAlert>
          <div className='grid gap-3 text-foreground md:grid-cols-2'>
            <div>
              <p className='mb-1 text-sm'>Accurate ID</p>
              <Input value={editCustomerName.accurate_id} readOnly className={formInputClassName} />
            </div>
            <div>
              <p className='mb-1 text-sm'>No Customer</p>
              <Input value={editCustomerName.customer_no} readOnly className={formInputClassName} />
            </div>
            <div className='md:col-span-2'>
              <p className='mb-1 text-sm'>Nama Customer</p>
              <Input
                value={editCustomerName.name}
                onChange={(e) => setEditCustomerName((prev) => ({ ...prev, name: e.target.value }))}
                className={formInputClassName}
              />
            </div>
            <div className='md:col-span-2'>
              <div className='rounded-md border bg-muted/30 p-3'>
                <p className='mb-2 text-sm font-semibold text-foreground'>Info Customer dari Accurate</p>
                {loadingCustomerDetail && (
                  <p className='mb-2 text-xs text-muted-foreground'>Memuat detail customer dari Accurate...</p>
                )}
                <div className='grid gap-x-4 gap-y-1 text-sm md:grid-cols-3'>
                  <p><span className='font-medium text-foreground'>ID:</span> <span className='text-muted-foreground'>{editCustomerInfo.id}</span></p>
                  <p><span className='font-medium text-foreground'>ID Pelanggan:</span> <span className='text-muted-foreground'>{editCustomerInfo.customer_no}</span></p>
                  <p><span className='font-medium text-foreground'>Kategori:</span> <span className='text-muted-foreground'>{editCustomerInfo.category}</span></p>
                  <p><span className='font-medium text-foreground'>No. Telp. Bisnis:</span> <span className='text-muted-foreground'>{editCustomerInfo.phone}</span></p>
                  <p><span className='font-medium text-foreground'>Handphone:</span> <span className='text-muted-foreground'>{editCustomerInfo.mobile_phone}</span></p>
                  <p><span className='font-medium text-foreground'>No. WhatsApp:</span> <span className='text-muted-foreground'>{editCustomerInfo.whatsapp}</span></p>
                  <p><span className='font-medium text-foreground'>Email:</span> <span className='text-muted-foreground'>{editCustomerInfo.email}</span></p>
                  <p><span className='font-medium text-foreground'>Nama Wajib Pajak:</span> <span className='text-muted-foreground'>{editCustomerInfo.tax_name}</span></p>
                  <p><span className='font-medium text-foreground'>Tipe Pajak:</span> <span className='text-muted-foreground'>{editCustomerInfo.tax_type}</span></p>
                  <p><span className='font-medium text-foreground'>NPWP:</span> <span className='text-muted-foreground'>{editCustomerInfo.npwp_no}</span></p>
                  <p className='md:col-span-3'><span className='font-medium text-foreground'>Alamat Penagihan:</span> <span className='text-muted-foreground'>{editCustomerInfo.bill_street}</span></p>
                  <p><span className='font-medium text-foreground'>Kota:</span> <span className='text-muted-foreground'>{editCustomerInfo.bill_city}</span></p>
                  <p><span className='font-medium text-foreground'>Provinsi:</span> <span className='text-muted-foreground'>{editCustomerInfo.bill_province}</span></p>
                  <p><span className='font-medium text-foreground'>Kode Pos:</span> <span className='text-muted-foreground'>{editCustomerInfo.bill_zip_code}</span></p>
                  <p><span className='font-medium text-foreground'>Negara:</span> <span className='text-muted-foreground'>{editCustomerInfo.bill_country}</span></p>
                  <p><span className='font-medium text-foreground'>Mata Uang:</span> <span className='text-muted-foreground'>{editCustomerInfo.currency}</span></p>
                  <p><span className='font-medium text-foreground'>Syarat Pembayaran:</span> <span className='text-muted-foreground'>{editCustomerInfo.payment_terms}</span></p>
                  <p><span className='font-medium text-foreground'>Cabang:</span> <span className='text-muted-foreground'>{editCustomerInfo.branch}</span></p>
                  <p><span className='font-medium text-foreground'>Akun Piutang:</span> <span className='text-muted-foreground'>{editCustomerInfo.account_receivable}</span></p>
                  <p><span className='font-medium text-foreground'>Akun Uang Muka:</span> <span className='text-muted-foreground'>{editCustomerInfo.account_down_payment}</span></p>
                  <p><span className='font-medium text-foreground'>Akun Penjualan:</span> <span className='text-muted-foreground'>{editCustomerInfo.account_sales}</span></p>
                </div>

                <div className='mt-3'>
                  <p className='mb-2 text-sm font-semibold text-foreground'>Kontak</p>
                  <div className='overflow-x-auto rounded-md border'>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Nama</TableHead>
                          <TableHead>Posisi</TableHead>
                          <TableHead>Email</TableHead>
                          <TableHead>Handphone</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {editCustomerContacts.length === 0 ? (
                          <TableRow>
                            <TableCell colSpan={4} className='text-center text-muted-foreground'>Tidak ada data kontak.</TableCell>
                          </TableRow>
                        ) : (
                          editCustomerContacts.map((contact, idx) => (
                            <TableRow key={`${contact.name}-${idx}`}>
                              <TableCell>{contact.name}</TableCell>
                              <TableCell>{contact.position}</TableCell>
                              <TableCell>{contact.email}</TableCell>
                              <TableCell>{contact.handphone}</TableCell>
                            </TableRow>
                          ))
                        )}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className='mt-4'>
            <Button
              type='button'
              className='text-primary-foreground'
              disabled={
                submitting
                || editCustomerName.accurate_id.trim() === ''
                || editCustomerName.name.trim() === ''
              }
              onClick={submitEditCustomerName}
            >
              {actionLoading === 'submit' ? 'Menyimpan...' : 'Simpan Perubahan Nama'}
            </Button>
          </div>
        </Modal>

        <Modal open={openSearchSample} title='Cari Jenis Sampel Accurate' onClose={() => setOpenSearchSample(false)}>
          <InlineAlert tone='info'>
            Jenis sampel acuan dari PO: <strong>{localJenisName || '-'}</strong>
          </InlineAlert>
          <div className='mb-3 flex flex-wrap gap-2'>
            <Input value={sampleKeyword} onChange={(e) => setSampleKeyword(e.target.value)} placeholder='Contoh: Air Limbah' className={`max-w-md ${formInputClassName}`} />
            <Button type='button' className='text-primary-foreground' onClick={searchSample} disabled={submitting}>
              {actionLoading === 'sample-search' ? 'Mencari...' : 'Cari'}
            </Button>
          </div>
          {sampleKeyword.trim() !== '' && (
            <div className='mb-2 flex items-center gap-2 text-xs text-muted-foreground'>
              <span>
                Menampilkan {po_context.accurate_items_meta?.displayed_count ?? (po_context.accurate_items ?? []).length} dari{' '}
                {po_context.accurate_items_meta?.raw_count ?? (po_context.accurate_items ?? []).length} hasil API.
              </span>
              <TooltipProvider delayDuration={100}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button type='button' className='rounded px-1 text-[11px] text-primary hover:underline'>
                      Kenapa?
                    </button>
                  </TooltipTrigger>
                  <TooltipContent side='top' className='max-w-xs'>
                    Sebagian hasil API tidak menampilkan No Item/Nama Item, jadi otomatis disaring agar daftar tetap bersih.
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          )}
          <div className='overflow-x-auto rounded-md border'>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>No Item</TableHead>
                  <TableHead>Nama Item</TableHead>
                  <TableHead className='w-[120px]'>Aksi</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {(po_context.accurate_items ?? []).length === 0 ? (
                  <TableRow><TableCell colSpan={3} className='text-center text-muted-foreground'>Tidak ada data.</TableCell></TableRow>
                ) : (
                  (po_context.accurate_items ?? []).map((row, idx) => (
                    <TableRow key={`${row.id ?? idx}`}>
                      <TableCell>{row.no || '-'}</TableCell>
                      <TableCell>{row.name || '-'}</TableCell>
                      <TableCell>
                        <Button
                          size='sm'
                          onClick={() => {
                            setAccurateItemId(String(row.id ?? ''))
                            setAccurateItemNo(String(row.no ?? ''))
                            setAccurateItemLabel(`${row.no || '-'} - ${row.name || '-'}`)
                            setCreateItem((prev) => ({
                              ...prev,
                              accurate_id: String(row.id ?? ''),
                              item_no: String(row.no ?? ''),
                              name: String(row.name ?? ''),
                            }))
                            setOpenSearchSample(false)
                          }}
                        >
                          Pilih
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </Modal>

        <Modal open={openCreateCustomer} title='Create Customer Baru' onClose={() => setOpenCreateCustomer(false)}>
          <div className='grid gap-3 text-foreground md:grid-cols-2'>
            <div>
              <p className='mb-1 text-sm'>Tanggal Transaksi</p>
              <DatePicker
                selected={selectedTransDate}
                onSelect={(date) =>
                  setCreateCustomer((p) => ({
                    ...p,
                    trans_date: date ? format(date, 'yyyy-MM-dd') : '',
                  }))
                }
                placeholder='Pilih tanggal transaksi'
                className='w-full'
              />
            </div>
            <div>
              <p className='mb-1 text-sm'>No Customer</p>
              <Input value={createCustomer.customer_no} onChange={(e) => setCreateCustomer((p) => ({ ...p, customer_no: e.target.value }))} className={formInputClassName} />
            </div>
            <div className='md:col-span-2'>
              <p className='mb-1 text-sm'>Nama Customer</p>
              <Input value={createCustomer.name} onChange={(e) => setCreateCustomer((p) => ({ ...p, name: e.target.value }))} className={formInputClassName} />
            </div>
            <div className='md:col-span-2'>
              <p className='mb-1 text-sm'>Alamat Tagihan</p>
              <Input value={createCustomer.bill_street} onChange={(e) => setCreateCustomer((p) => ({ ...p, bill_street: e.target.value }))} className={formInputClassName} />
            </div>
            <div><p className='mb-1 text-sm'>Kota</p><Input value={createCustomer.bill_city} onChange={(e) => setCreateCustomer((p) => ({ ...p, bill_city: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Provinsi</p><Input value={createCustomer.bill_province} onChange={(e) => setCreateCustomer((p) => ({ ...p, bill_province: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Kode Pos</p><Input value={createCustomer.bill_zip_code} onChange={(e) => setCreateCustomer((p) => ({ ...p, bill_zip_code: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Negara</p><Input value={createCustomer.bill_country} onChange={(e) => setCreateCustomer((p) => ({ ...p, bill_country: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>NPWP</p><Input value={createCustomer.npwp_no} onChange={(e) => setCreateCustomer((p) => ({ ...p, npwp_no: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Telepon</p><Input value={createCustomer.phone} onChange={(e) => setCreateCustomer((p) => ({ ...p, phone: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Email</p><Input value={createCustomer.email} onChange={(e) => setCreateCustomer((p) => ({ ...p, email: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Branch ID</p><Input type='number' value={createCustomer.branch_id} onChange={(e) => setCreateCustomer((p) => ({ ...p, branch_id: e.target.value }))} className={formInputClassName} /></div>
            <div className='md:col-span-2'><p className='mb-1 text-sm'>Deskripsi</p><Input value={createCustomer.description} onChange={(e) => setCreateCustomer((p) => ({ ...p, description: e.target.value }))} className={formInputClassName} /></div>
            <label className='flex items-center gap-2 text-sm text-foreground'><input type='checkbox' checked={createCustomer.default_inc_tax} onChange={(e) => setCreateCustomer((p) => ({ ...p, default_inc_tax: e.target.checked }))} /> {t('accurate_integration_monitoring.manage_po_label_default_inc_tax')}</label>
            <label className='flex items-center gap-2 text-sm text-foreground'><input type='checkbox' checked={createCustomer.suspended} onChange={(e) => setCreateCustomer((p) => ({ ...p, suspended: e.target.checked }))} /> Nonaktifkan Customer</label>
          </div>
          <div className='mt-4'>
            <Button
              type='button'
              className='text-primary-foreground'
              disabled={submitting || !createCustomer.name || !createCustomer.trans_date}
              onClick={() => submitPost(`${ROUTE_BASE}/accurate-customer/save`, createCustomer)}
            >
              Simpan Customer Accurate
            </Button>
          </div>
        </Modal>

        <Modal open={openCreateSample} title='Create Jenis Sampel Baru' onClose={() => setOpenCreateSample(false)}>
          <div className='grid gap-3 text-foreground md:grid-cols-2'>
            <div>
              <p className='mb-1 text-sm'>Tipe Item</p>
              <select
                className='h-9 w-full rounded-md border border-input bg-background px-3 text-sm'
                value={createItem.item_type}
                onChange={(e) => setCreateItem((p) => ({ ...p, item_type: e.target.value }))}
              >
                <option value='INVENTORY'>INVENTORY</option>
                <option value='NON_INVENTORY'>NON_INVENTORY</option>
                <option value='SERVICE'>SERVICE</option>
                <option value='GROUP'>GROUP</option>
              </select>
            </div>
            <div>
              <p className='mb-1 text-sm'>Kategori Item</p>
              <Input value={createItem.item_category_name} onChange={(e) => setCreateItem((p) => ({ ...p, item_category_name: e.target.value }))} className={formInputClassName} />
            </div>
            <div className='md:col-span-2'>
              <p className='mb-1 text-sm'>Nama Item Accurate</p>
              <Input value={createItem.name} onChange={(e) => setCreateItem((p) => ({ ...p, name: e.target.value }))} className={formInputClassName} />
            </div>
            <div><p className='mb-1 text-sm'>Satuan Utama</p><Input value={createItem.unit1_name} onChange={(e) => setCreateItem((p) => ({ ...p, unit1_name: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Kode UPC</p><Input value={createItem.upc_no} onChange={(e) => setCreateItem((p) => ({ ...p, upc_no: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Harga Jual</p><Input type='number' value={createItem.unit_price} onChange={(e) => setCreateItem((p) => ({ ...p, unit_price: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Harga Beli</p><Input type='number' value={createItem.vendor_price} onChange={(e) => setCreateItem((p) => ({ ...p, vendor_price: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Diskon Default</p><Input type='number' value={createItem.default_discount} onChange={(e) => setCreateItem((p) => ({ ...p, default_discount: e.target.value }))} className={formInputClassName} /></div>
            <div><p className='mb-1 text-sm'>Satuan Vendor</p><Input value={createItem.vendor_unit_name} onChange={(e) => setCreateItem((p) => ({ ...p, vendor_unit_name: e.target.value }))} className={formInputClassName} /></div>
            <div className='md:col-span-2'><p className='mb-1 text-sm'>Catatan</p><Input value={createItem.notes} onChange={(e) => setCreateItem((p) => ({ ...p, notes: e.target.value }))} className={formInputClassName} /></div>
            <label className='flex items-center gap-2 text-sm text-foreground'><input type='checkbox' checked={createItem.use_ppn} onChange={(e) => setCreateItem((p) => ({ ...p, use_ppn: e.target.checked }))} /> Kena PPN</label>
            <label className='flex items-center gap-2 text-sm text-foreground'><input type='checkbox' checked={createItem.control_quantity} onChange={(e) => setCreateItem((p) => ({ ...p, control_quantity: e.target.checked }))} /> Kontrol Qty</label>
            <label className='flex items-center gap-2 text-sm text-foreground'><input type='checkbox' checked={createItem.suspended} onChange={(e) => setCreateItem((p) => ({ ...p, suspended: e.target.checked }))} /> Nonaktifkan Item</label>
          </div>
          <div className='mt-4'>
            <Button
              type='button'
              className='text-primary-foreground'
              disabled={submitting || !createItem.name || !createItem.item_type || !createItem.item_category_name || !createItem.unit1_name}
              onClick={() => submitPost(`${ROUTE_BASE}/accurate-jenis-sampel/save`, createItem)}
            >
              Simpan Jenis Sampel Accurate
            </Button>
          </div>
        </Modal>

        {submitting && (
          <div className='fixed inset-0 z-[60] flex items-center justify-center bg-black/30'>
            <div className='rounded-md border bg-background px-4 py-3 text-sm shadow'>
              {actionLoading === 'customer-search' || actionLoading === 'sample-search'
                ? 'Mencari data... mohon tunggu'
                : 'Menyimpan data... mohon tunggu'}
            </div>
          </div>
        )}
        </div>
      </Main>
    </FinanceAppLayout>
  )
}