import { useState, useMemo } from 'react'
import { useApp } from '../context/AppContext'
import { formatRupiah } from '../utils/formatRupiah'
import { terbilang } from '../utils/terbilang'
import { formatTanggalIndo } from '../utils/generateNomorKW'
import PageHeader from '../components/PageHeader'
import Modal from '../components/Modal'
import { Save, Eye, RotateCcw, Calculator, Package, ChevronDown, Info } from 'lucide-react'
import ConfirmDialog from '../components/ConfirmDialog'

// ─── Hitung selisih hari ──────────────────────────────────────────────────────
function hitungHari(tglMasuk, tglKeluar) {
  if (!tglMasuk || !tglKeluar) return 0
  const masuk  = new Date(tglMasuk)
  const keluar = new Date(tglKeluar)
  const diff   = Math.ceil((keluar - masuk) / (1000 * 60 * 60 * 24))
  return diff > 0 ? diff : 0
}

// ─── Reusable UI ─────────────────────────────────────────────────────────────
function Field({ label, required, children, hint }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <label style={{ fontSize: 12.5, fontWeight: 600, color: '#374151' }}>
        {label}{required && <span style={{ color: '#ef4444', marginLeft: 2 }}>*</span>}
      </label>
      {children}
      {hint && <span style={{ fontSize: 11, color: '#9ca3af' }}>{hint}</span>}
    </div>
  )
}

function Input({ value, onChange, placeholder, type = 'text', disabled }) {
  return (
    <input
      type={type} value={value} onChange={onChange}
      placeholder={placeholder} disabled={disabled}
      style={{
        padding: '9px 12px', borderRadius: 8, fontSize: 13.5,
        border: '1.5px solid #e2e8f0', outline: 'none',
        background: disabled ? '#f8fafc' : 'white',
        color: disabled ? '#94a3b8' : '#1a2332',
        fontFamily: 'inherit', width: '100%', boxSizing: 'border-box',
        transition: 'border-color 0.15s',
      }}
      onFocus={e => { if (!disabled) e.target.style.borderColor = '#8b5cf6' }}
      onBlur={e => { e.target.style.borderColor = '#e2e8f0' }}
    />
  )
}

function Select({ value, onChange, options }) {
  return (
    <div style={{ position: 'relative' }}>
      <select value={value} onChange={onChange} style={{
        padding: '9px 36px 9px 12px', borderRadius: 8, fontSize: 13.5,
        border: '1.5px solid #e2e8f0', outline: 'none',
        background: 'white', color: '#1a2332',
        width: '100%', boxSizing: 'border-box',
        cursor: 'pointer', appearance: 'none', fontFamily: 'inherit',
      }}
        onFocus={e => { e.target.style.borderColor = '#8b5cf6' }}
        onBlur={e => { e.target.style.borderColor = '#e2e8f0' }}
      >
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <ChevronDown size={14} color="#94a3b8" style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
    </div>
  )
}

function SectionTitle({ children }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
      textTransform: 'uppercase', color: '#94a3b8',
      borderBottom: '1px solid #f1f5f9', paddingBottom: 8, marginBottom: 4,
    }}>
      {children}
    </div>
  )
}

// ─── Checkbox komponen biaya ──────────────────────────────────────────────────
function BiayaToggle({ label, tarif, checked, onChange, color = '#8b5cf6' }) {
  return (
    <div
      onClick={() => onChange(!checked)}
      style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 14px', borderRadius: 10, cursor: 'pointer',
        border: `1.5px solid ${checked ? color : '#e2e8f0'}`,
        background: checked ? color + '10' : '#fafafa',
        transition: 'all 0.15s', userSelect: 'none',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 18, height: 18, borderRadius: 5, flexShrink: 0,
          border: `2px solid ${checked ? color : '#cbd5e1'}`,
          background: checked ? color : 'white',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 0.15s',
        }}>
          {checked && <span style={{ color: 'white', fontSize: 11, fontWeight: 800, lineHeight: 1 }}>✓</span>}
        </div>
        <span style={{ fontSize: 13.5, fontWeight: 600, color: checked ? '#1a2332' : '#94a3b8' }}>{label}</span>
      </div>
      <span style={{ fontSize: 13, fontWeight: 700, color: checked ? color : '#cbd5e1' }}>
        {formatRupiah(tarif)}
      </span>
    </div>
  )
}

// ─── Preview Invoice ──────────────────────────────────────────────────────────
function PreviewInvoice({ data }) {
  if (!data) return null
  const { form, kalkulasi, nomorKW, tanggalInvoice } = data

  return (
    <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 13 }}>
      <div style={{ textAlign: 'center', marginBottom: 16, paddingBottom: 14, borderBottom: '2px solid #0f1f3d' }}>
        <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '0.05em', color: '#0f1f3d' }}>KWITANSI</div>
        <div style={{ fontSize: 13, fontWeight: 600, color: '#374151' }}>LCL — {form.jenisKegiatan?.toUpperCase()}</div>
        <div style={{ fontSize: 12, color: '#64748b' }}>No. : {nomorKW}</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '5px 8px', marginBottom: 16 }}>
        {[
          ['Consignee', form.consignee],
          ['Alamat', form.alamat],
          ['NPWP', form.npwp],
          ['No. HBL/AWB', form.nomorHBL],
          ['Kapal / Voy', [form.kapal, form.voyage].filter(Boolean).join(' / ')],
          ['Uraian Barang', form.uraianBarang],
          ['Jumlah Colli', form.jumlahColli],
          ['Tgl Masuk', form.tglMasuk],
          ['Tgl Keluar', form.tglKeluar],
        ].filter(([, v]) => v).map(([k, v]) => (
          <>
            <div key={k + 'k'} style={{ fontWeight: 600, color: '#374151', fontSize: 12 }}>{k}</div>
            <div key={k + 'v'} style={{ color: '#1a2332', fontSize: 12 }}>: {v}</div>
          </>
        ))}
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5, marginBottom: 8 }}>
        <thead>
          <tr style={{ background: '#0f1f3d', color: 'white' }}>
            {['Uraian Biaya', 'CBM', 'Hari', 'Tarif (Rp)', 'Jumlah'].map(h => (
              <th key={h} style={{
                padding: '6px 10px',
                textAlign: ['Jumlah', 'Tarif (Rp)', 'CBM', 'Hari'].includes(h) ? 'right' : 'left',
                fontWeight: 600, fontSize: 11,
              }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {kalkulasi.baris.map((b, idx) => (
            <tr key={idx} style={{ borderBottom: '1px solid #f1f5f9', background: idx % 2 === 0 ? 'white' : '#fafafa' }}>
              <td style={{ padding: '7px 10px' }}>{b.label}</td>
              <td style={{ padding: '7px 10px', textAlign: 'right', color: '#64748b' }}>{b.cbm || ''}</td>
              <td style={{ padding: '7px 10px', textAlign: 'right', color: '#64748b' }}>{b.hari || ''}</td>
              <td style={{ padding: '7px 10px', textAlign: 'right', color: '#64748b' }}>{b.tarif ? formatRupiah(b.tarif, false) : ''}</td>
              <td style={{ padding: '7px 10px', textAlign: 'right', fontWeight: 500 }}>{formatRupiah(b.jumlah, false)}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <tbody>
          <tr style={{ background: '#f8fafc' }}>
            <td colSpan={4} style={{ padding: '7px 10px', fontWeight: 700, color: '#0f1f3d' }}>Sub Total</td>
            <td style={{ padding: '7px 10px', textAlign: 'right', fontWeight: 700 }}>{formatRupiah(kalkulasi.subTotal, false)}</td>
          </tr>
          <tr style={{ background: '#f8fafc' }}>
            <td colSpan={4} style={{ padding: '5px 10px', color: '#64748b', fontSize: 12 }}>PPN 11%</td>
            <td style={{ padding: '5px 10px', textAlign: 'right', color: '#64748b', fontSize: 12 }}>{formatRupiah(kalkulasi.ppn, false)}</td>
          </tr>
          <tr style={{ background: '#0f1f3d', color: 'white' }}>
            <td colSpan={4} style={{ padding: '9px 10px', fontWeight: 700, fontSize: 14 }}>Grand Total</td>
            <td style={{ padding: '9px 10px', textAlign: 'right', fontWeight: 800, fontSize: 14 }}>{formatRupiah(kalkulasi.grandTotal, false)}</td>
          </tr>
          {kalkulasi.tpsAsal > 0 && (
            <tr style={{ background: '#fffbeb', borderTop: '2px dashed #fcd34d' }}>
              <td colSpan={4} style={{ padding: '7px 10px', color: '#92400e', fontSize: 12.5 }}>
                Tarif TPS Asal <span style={{ fontSize: 11, background: '#fef9c3', padding: '1px 6px', borderRadius: 10, marginLeft: 6 }}>As Receipt — tidak kena PPN</span>
              </td>
              <td style={{ padding: '7px 10px', textAlign: 'right', fontWeight: 600, color: '#92400e' }}>{formatRupiah(kalkulasi.tpsAsal, false)}</td>
            </tr>
          )}
          {kalkulasi.tpsAsal > 0 && (
            <tr style={{ background: '#0f1f3d' }}>
              <td colSpan={4} style={{ padding: '9px 10px', fontWeight: 700, fontSize: 14, color: '#fbbf24' }}>Total Keseluruhan</td>
              <td style={{ padding: '9px 10px', textAlign: 'right', fontWeight: 800, fontSize: 14, color: '#fbbf24' }}>{formatRupiah(kalkulasi.totalAkhir, false)}</td>
            </tr>
          )}
        </tbody>
      </table>

      <div style={{ background: '#f8fafc', borderRadius: 8, padding: '9px 12px', fontSize: 12, color: '#374151', margin: '12px 0', fontStyle: 'italic' }}>
        Terbilang : {terbilang(kalkulasi.totalAkhir)}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 8 }}>
        <div style={{ fontSize: 11.5, color: '#64748b' }}>
          <div style={{ fontWeight: 600, color: '#374151', marginBottom: 2 }}>PT. SARANA GEMILANG</div>
          <div>Jl. Raya Pelabuhan No.1 Belawan I, Medan</div>
          <div style={{ marginTop: 4 }}>a/c 1200080070001 Bank Mandiri Cabang Jakarta</div>
        </div>
        <div style={{ textAlign: 'center', fontSize: 12, color: '#374151' }}>
          <div>Belawan, {formatTanggalIndo(tanggalInvoice)}</div>
          <div style={{ marginTop: 40, borderTop: '1px solid #374151', paddingTop: 4 }}>Administrasi</div>
        </div>
      </div>
    </div>
  )
}

// ─── Initial state ────────────────────────────────────────────────────────────
const initialForm = {
  klienId: '',
  consignee: '',
  alamat: '',
  npwp: '',
  nomorHBL: '',
  kapal: '',
  voyage: '',
  uraianBarang: '',
  jumlahColli: '',
  cbm: '',
  tglMasuk: '',
  tglKeluar: '',
  jenisKegiatan: 'Stripping',
  tarifTPSAsal: '', // As Receipt — input manual
  // Komponen biaya (checkbox)
  pakaiStripping:    true,
  pakaiMekanik:      true,
  pakaiStorage:      true,
  pakaiJasaTPP:      true,
  pakaiAdministrasi: true,
  pakaiBehandle:     true,  // Selalu per shipment, default ON
  pakaiDGDocs:       false, // Opsional, jika ada
  // Override tarif
  overrideStripping: '',
  overrideMekanik:   '',
  overrideStorage:   '',
  overrideJasaTPP:   '',
  overrideAdministrasi: '',
  overrideBehandle:  '',
  overrideDGDocs:    '',
}

// ─── Main Component ───────────────────────────────────────────────────────────
export default function InputLCL() {
  const { tarif, klienList, invoiceList, tambahInvoice, showToast } = useApp()
  const [form, setForm] = useState(initialForm)
  const [showPreview, setShowPreview] = useState(false)
  const [showConfirmSimpan, setShowConfirmSimpan] = useState(false)
  const [showConfirmReset, setShowConfirmReset] = useState(false)
  const [showOverride, setShowOverride] = useState(false)

  const setField = (key, val) => setForm(prev => ({ ...prev, [key]: val }))

  const handleKlienChange = (klienId) => {
    const klien = klienList.find(k => k.id === klienId)
    if (klien) {
      setForm(prev => ({ ...prev, klienId, consignee: klien.nama, alamat: klien.alamat, npwp: klien.npwp }))
    } else {
      setField('klienId', klienId)
    }
  }

  // ── Tarif efektif ────────────────────────────────────────────────────────
  const t = tarif.lcl || {}
  const tStripping    = form.overrideStripping    !== '' ? parseFloat(form.overrideStripping)    || 0 : (t.strippingStuffingPerCBM ?? 200000)
  const tMekanik      = form.overrideMekanik      !== '' ? parseFloat(form.overrideMekanik)      || 0 : (t.mekanikPerCBM ?? 250000)
  const tStorage      = form.overrideStorage      !== '' ? parseFloat(form.overrideStorage)      || 0 : (t.storagePerCBMPerHari ?? 15000)
  const tJasaTPP      = form.overrideJasaTPP      !== '' ? parseFloat(form.overrideJasaTPP)      || 0 : (t.jasaTPP ?? 500000)
  const tAdministrasi = form.overrideAdministrasi !== '' ? parseFloat(form.overrideAdministrasi) || 0 : (t.administrasi ?? 150000)
  const tBehandle     = form.overrideBehandle     !== '' ? parseFloat(form.overrideBehandle)     || 0 : (t.behandle ?? 450000)
  const tDGDocs       = form.overrideDGDocs       !== '' ? parseFloat(form.overrideDGDocs)       || 0 : (t.dgDocs ?? 450000)
  const minCBM        = t.strippingMinCBM ?? 3

  // ── Kalkulasi ────────────────────────────────────────────────────────────
  const kalkulasi = useMemo(() => {
    const cbm  = parseFloat(form.cbm) || 0
    const hari = hitungHari(form.tglMasuk, form.tglKeluar)
    const cbmEfektif = Math.max(cbm, minCBM) // minimum CBM untuk stripping/mekanik

    const baris = []

    if (form.pakaiStripping && cbm > 0) {
      const jumlah = tStripping * cbmEfektif
      baris.push({
        label: `${form.jenisKegiatan}${cbm < minCBM ? ` (min ${minCBM} CBM)` : ''}`,
        cbm: cbmEfektif, tarif: tStripping, jumlah,
      })
    }
    if (form.pakaiMekanik && cbm > 0) {
      const jumlah = tMekanik * cbmEfektif
      baris.push({ label: 'Mekanik', cbm: cbmEfektif, tarif: tMekanik, jumlah })
    }
    if (form.pakaiStorage && cbm > 0 && hari > 0) {
      const jumlah = tStorage * cbm * hari
      baris.push({ label: 'Storage', cbm, hari, tarif: tStorage, jumlah })
    }
    if (form.pakaiJasaTPP) {
      baris.push({ label: 'Jasa TPP', tarif: tJasaTPP, jumlah: tJasaTPP })
    }
    if (form.pakaiAdministrasi) {
      baris.push({ label: 'Administrasi', tarif: tAdministrasi, jumlah: tAdministrasi })
    }
    if (form.pakaiBehandle) {
      baris.push({ label: 'Behandle (per shipment)', tarif: tBehandle, jumlah: tBehandle })
    }
    if (form.pakaiDGDocs) {
      baris.push({ label: 'DG Docs', tarif: tDGDocs, jumlah: tDGDocs })
    }

    const subTotal   = baris.reduce((s, b) => s + b.jumlah, 0)
    const ppn        = Math.round(subTotal * 0.11)
    const grandTotal = subTotal + ppn
    // TPS Asal: pass-through, di luar PPN
    const tpsAsal    = parseFloat(form.tarifTPSAsal) || 0
    const totalAkhir = grandTotal + tpsAsal

    return { baris, subTotal, ppn, grandTotal, tpsAsal, totalAkhir, cbm: parseFloat(form.cbm) || 0, hari }
  }, [form, tStripping, tMekanik, tStorage, tJasaTPP, tAdministrasi, tBehandle, minCBM])

  const previewData = useMemo(() => ({
    form, kalkulasi,
    nomorKW: '(dari server)',
    tanggalInvoice: new Date(),
  }), [form, kalkulasi])

  const isFormValid = form.consignee && form.nomorHBL && form.cbm && parseFloat(form.cbm) > 0

  const handleSimpan = () => setShowConfirmSimpan(true)

  const eksekusiSimpan = async () => {
    try {
      const created = await tambahInvoice({
        jenisLayanan: 'LCL',
        consignee: form.consignee,
        klienId: form.klienId || null,
        subTotal: kalkulasi.subTotal,
        ppn: kalkulasi.ppn,
        grandTotal: kalkulasi.grandTotal,
        tpsAsal: kalkulasi.tpsAsal || 0,
        totalAkhir: kalkulasi.totalAkhir,
        catatan: '',
        detailSnapshot: { form, kalkulasi },
        baris: kalkulasi.baris,
      })
      setShowPreview(false)
      setForm(initialForm)
      showToast(`Invoice LCL ${created.nomorKW} berhasil disimpan!`, 'sukses')
    } catch {
      // Error sudah ditampilkan oleh AppContext
    }
  }

  const cbm = parseFloat(form.cbm) || 0
  const hari = hitungHari(form.tglMasuk, form.tglKeluar)

  return (
    <div style={{ flex: 1 }}>
      <PageHeader
        title="Input LCL"
        subtitle="Input transaksi LCL — 1 HBL / 1 Invoice"
      />



      <div style={{ padding: '24px 32px', display: 'grid', gridTemplateColumns: '1fr 300px', gap: 24, alignItems: 'start' }}>

        {/* ── Kiri ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

          {/* Banner */}
          <div style={{
            background: 'linear-gradient(135deg, #f5f3ff, #ede9fe)',
            border: '1px solid #c4b5fd', borderRadius: 12, padding: '14px 18px',
            fontSize: 13, color: '#5b21b6',
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <Package size={18} color="#8b5cf6" style={{ flexShrink: 0, marginTop: 1 }} />
            <div>
              <strong>LCL (Less than Container Load)</strong> — Tarif dihitung per CBM.
              Storage dihitung dari hari pertama masuk, tidak ada free days.
              Minimum CBM untuk Stripping/Mekanik: <strong>{minCBM} CBM</strong>.
            </div>
          </div>

          {/* Data Consignee */}
          <div style={{ background: 'white', borderRadius: 14, border: '1px solid #e8edf2', padding: '20px 24px' }}>
            <SectionTitle>Data Consignee</SectionTitle>
            <div style={{ display: 'grid', gap: 14, marginTop: 12 }}>
              <Field label="Pilih dari Master Klien">
                <Select
                  value={form.klienId}
                  onChange={e => handleKlienChange(e.target.value)}
                  options={[
                    { value: '', label: '— Pilih klien atau isi manual —' },
                    ...klienList.map(k => ({ value: k.id, label: k.nama })),
                  ]}
                />
              </Field>
              <Field label="Nama Consignee" required>
                <Input value={form.consignee} onChange={e => setField('consignee', e.target.value)} placeholder="PT. NAMA PERUSAHAAN" />
              </Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <Field label="Alamat">
                  <Input value={form.alamat} onChange={e => setField('alamat', e.target.value)} placeholder="Alamat lengkap" />
                </Field>
                <Field label="NPWP">
                  <Input value={form.npwp} onChange={e => setField('npwp', e.target.value)} placeholder="0000 0000 0000 0000" />
                </Field>
              </div>
            </div>
          </div>

          {/* Data Shipment */}
          <div style={{ background: 'white', borderRadius: 14, border: '1px solid #e8edf2', padding: '20px 24px' }}>
            <SectionTitle>Data Shipment</SectionTitle>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 12 }}>
              <Field label="No. HBL / AWB" required>
                <Input value={form.nomorHBL} onChange={e => setField('nomorHBL', e.target.value)} placeholder="HBL-000000" />
              </Field>
              <Field label="Jenis Kegiatan">
                <Select
                  value={form.jenisKegiatan}
                  onChange={e => setField('jenisKegiatan', e.target.value)}
                  options={[
                    { value: 'Stripping', label: 'Stripping (Impor)' },
                    { value: 'Stuffing',  label: 'Stuffing (Ekspor)' },
                  ]}
                />
              </Field>
              <Field label="Nama Kapal">
                <Input value={form.kapal} onChange={e => setField('kapal', e.target.value)} placeholder="MV. INTEGRA" />
              </Field>
              <Field label="Voyage">
                <Input value={form.voyage} onChange={e => setField('voyage', e.target.value)} placeholder="V.163E" />
              </Field>
              <Field label="Uraian Barang">
                <Input value={form.uraianBarang} onChange={e => setField('uraianBarang', e.target.value)} placeholder="ENGINEERED DOORS" />
              </Field>
              <Field label="Jumlah Colli / Packages">
                <Input type="number" value={form.jumlahColli} onChange={e => setField('jumlahColli', e.target.value)} placeholder="22" />
              </Field>
            </div>
          </div>

          {/* Volume & Tanggal */}
          <div style={{ background: 'white', borderRadius: 14, border: '1px solid #e8edf2', padding: '20px 24px' }}>
            <SectionTitle>Volume & Tanggal</SectionTitle>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginTop: 12 }}>
              <Field label="Jumlah CBM" required hint={cbm > 0 && cbm < minCBM ? `⚠ Di bawah minimum, akan dihitung ${minCBM} CBM` : ''}>
                <Input
                  type="number" value={form.cbm}
                  onChange={e => setField('cbm', e.target.value)}
                  placeholder={`min ${minCBM} CBM`}
                />
              </Field>
              <Field label="Tgl Masuk">
                <Input type="date" value={form.tglMasuk} onChange={e => setField('tglMasuk', e.target.value)} />
              </Field>
              <Field label="Tgl Keluar">
                <Input type="date" value={form.tglKeluar} onChange={e => setField('tglKeluar', e.target.value)} />
              </Field>
              <Field label="Tarif TPS Asal (As Receipt)" hint="Isi nominal sesuai kwitansi dari TPS asal">
                <Input
                  type="number" value={form.tarifTPSAsal}
                  onChange={e => setField('tarifTPSAsal', e.target.value)}
                  placeholder="0 (jika tidak ada)"
                />
              </Field>
            </div>
            {hari > 0 && (
              <div style={{ marginTop: 10, fontSize: 12.5, color: '#8b5cf6', fontWeight: 600 }}>
                📅 Durasi storage: <strong>{hari} hari</strong>
                {cbm > 0 && ` × ${cbm} CBM = ${formatRupiah(tStorage * cbm * hari)}`}
              </div>
            )}
          </div>

          {/* Komponen Biaya */}
          <div style={{ background: 'white', borderRadius: 14, border: '1px solid #e8edf2', padding: '20px 24px' }}>
            <SectionTitle>Komponen Biaya</SectionTitle>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
              <BiayaToggle label={`${form.jenisKegiatan} (per CBM)`}  tarif={tStripping * Math.max(cbm, minCBM)}    checked={form.pakaiStripping}    onChange={v => setField('pakaiStripping', v)}    />
              <BiayaToggle label="Mekanik (per CBM)"                  tarif={tMekanik * Math.max(cbm, minCBM)}      checked={form.pakaiMekanik}      onChange={v => setField('pakaiMekanik', v)}      />
              <BiayaToggle label={`Storage (${cbm} CBM × ${hari} hari)`} tarif={tStorage * cbm * hari}             checked={form.pakaiStorage}      onChange={v => setField('pakaiStorage', v)}      color="#0ea5e9" />
              <BiayaToggle label="Jasa TPP (flat)"                    tarif={tJasaTPP}                              checked={form.pakaiJasaTPP}      onChange={v => setField('pakaiJasaTPP', v)}      color="#0ea5e9" />
              <BiayaToggle label="Administrasi (flat)"                tarif={tAdministrasi}                         checked={form.pakaiAdministrasi} onChange={v => setField('pakaiAdministrasi', v)} color="#0ea5e9" />
              <BiayaToggle label="Behandle (per shipment)"              tarif={tBehandle}                             checked={form.pakaiBehandle}     onChange={v => setField('pakaiBehandle', v)}     color="#0ea5e9" />
              <BiayaToggle label="DG Docs (jika ada)"                   tarif={tDGDocs}                               checked={form.pakaiDGDocs}       onChange={v => setField('pakaiDGDocs', v)}       color="#f59e0b" />
            </div>
          </div>

          {/* Override Tarif (collapsible) */}
          <div style={{ background: 'white', borderRadius: 14, border: '1px solid #e8edf2', overflow: 'hidden' }}>
            <button
              onClick={() => setShowOverride(o => !o)}
              style={{
                width: '100%', border: 'none', padding: '14px 20px',
                background: 'white', cursor: 'pointer', fontFamily: 'inherit',
                display: 'flex', alignItems: 'center', gap: 10,
              }}
            >
              <Info size={14} color="#94a3b8" />
              <span style={{ fontSize: 13, fontWeight: 600, color: '#64748b', flex: 1, textAlign: 'left' }}>
                Override Tarif (opsional)
              </span>
              <ChevronDown size={14} color="#94a3b8"
                style={{ transform: showOverride ? 'rotate(180deg)' : 'none', transition: '0.2s' }} />
            </button>
            {showOverride && (
              <div style={{ padding: '0 20px 20px', borderTop: '1px solid #f1f5f9' }}>
                <div style={{ fontSize: 12, color: '#94a3b8', margin: '12px 0 10px' }}>
                  Kosongkan = pakai tarif standar dari Master Tarif
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  {[
                    ['overrideStripping',    `Tarif Stripping/Stuffing /CBM`, tStripping],
                    ['overrideMekanik',      'Tarif Mekanik /CBM', tMekanik],
                    ['overrideStorage',      'Tarif Storage /CBM/hari', tStorage],
                    ['overrideJasaTPP',      'Jasa TPP', tJasaTPP],
                    ['overrideAdministrasi', 'Administrasi', tAdministrasi],
                    ['overrideBehandle',     'Behandle', tBehandle],
                    ['overrideDGDocs',       'DG Docs',  tDGDocs],
                  ].map(([key, label, standar]) => (
                    <Field key={key} label={label}>
                      <Input
                        type="number" value={form[key]}
                        onChange={e => setField(key, e.target.value)}
                        placeholder={`Standar: ${formatRupiah(standar, false)}`}
                      />
                    </Field>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* ── Kanan: Kalkulasi ── */}
        <div style={{ position: 'sticky', top: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>

          {/* Info CBM */}
          <div style={{
            background: 'linear-gradient(135deg, #5b21b6, #6d28d9)',
            borderRadius: 12, padding: '14px 18px',
          }}>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>
              Info Volume
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)' }}>CBM Input</span>
              <span style={{ fontSize: 13, color: 'white', fontWeight: 700 }}>{cbm || 0} CBM</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)' }}>CBM Efektif</span>
              <span style={{ fontSize: 13, color: '#c4b5fd', fontWeight: 700 }}>{Math.max(cbm, minCBM) || minCBM} CBM</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)' }}>Durasi Storage</span>
              <span style={{ fontSize: 13, color: 'white', fontWeight: 700 }}>{hari} hari</span>
            </div>
          </div>

          {/* Total */}
          <div style={{ background: 'white', borderRadius: 14, border: '1px solid #e8edf2', overflow: 'hidden' }}>
            <div style={{ padding: '12px 16px', borderBottom: '1px solid #f1f5f9', display: 'flex', alignItems: 'center', gap: 8 }}>
              <Calculator size={15} color="#8b5cf6" />
              <span style={{ fontSize: 13, fontWeight: 700, color: '#0f1f3d' }}>Total Kalkulasi</span>
            </div>
            <div style={{ padding: '12px 16px' }}>
              {kalkulasi.baris.map((b, idx) => (
                <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontSize: 12, color: '#64748b', flex: 1, paddingRight: 8 }}>{b.label}</span>
                  <span style={{ fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap' }}>{formatRupiah(b.jumlah)}</span>
                </div>
              ))}
              {kalkulasi.baris.length === 0 && (
                <div style={{ fontSize: 12, color: '#94a3b8', textAlign: 'center', padding: '8px 0' }}>Isi form untuk melihat kalkulasi</div>
              )}
              <div style={{ borderTop: '1px solid #f1f5f9', marginTop: 8, paddingTop: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontSize: 12.5, color: '#64748b' }}>Sub Total</span>
                  <span style={{ fontSize: 12.5, fontWeight: 600 }}>{formatRupiah(kalkulasi.subTotal)}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                  <span style={{ fontSize: 12.5, color: '#64748b' }}>PPN 11%</span>
                  <span style={{ fontSize: 12.5, color: '#64748b' }}>{formatRupiah(kalkulasi.ppn)}</span>
                </div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  background: '#0f1f3d', borderRadius: 8, padding: '10px 12px', margin: '0 -4px',
                }}>
                  <span style={{ fontSize: 13, fontWeight: 700, color: 'white' }}>Grand Total</span>
                  <span style={{ fontSize: 14, fontWeight: 800, color: '#c4b5fd' }}>{formatRupiah(kalkulasi.grandTotal)}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Tombol */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button onClick={() => setShowPreview(true)} disabled={!isFormValid} style={{
              padding: '11px 16px', borderRadius: 10, fontSize: 13.5, fontWeight: 600,
              cursor: isFormValid ? 'pointer' : 'not-allowed', fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              border: '1.5px solid #8b5cf6', background: '#f5f3ff', color: '#5b21b6',
              opacity: isFormValid ? 1 : 0.5,
            }}>
              <Eye size={16} /> Preview Invoice
            </button>
            <button onClick={handleSimpan} disabled={!isFormValid} style={{
              padding: '11px 16px', borderRadius: 10, fontSize: 13.5, fontWeight: 600,
              cursor: isFormValid ? 'pointer' : 'not-allowed', fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              border: 'none',
              background: isFormValid ? 'linear-gradient(135deg, #8b5cf6, #5b21b6)' : '#e2e8f0',
              color: isFormValid ? 'white' : '#94a3b8',
            }}>
              <Save size={16} /> Simpan Invoice
            </button>
            <button onClick={() => setShowConfirmReset(true)} style={{
              padding: '9px 16px', borderRadius: 10, fontSize: 13, fontWeight: 500,
              cursor: 'pointer', fontFamily: 'inherit',
              border: '1px solid #e2e8f0', background: 'white', color: '#64748b',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <RotateCcw size={14} /> Reset Form
            </button>
          </div>
        </div>
      </div>

      <ConfirmDialog
        isOpen={showConfirmSimpan}
        onClose={() => setShowConfirmSimpan(false)}
        onConfirm={eksekusiSimpan}
        tipe="simpan"
        judul="Simpan Invoice LCL?"
        pesan="Pastikan semua data sudah benar sebelum disimpan."
        detail={[
          { label: 'Consignee', value: form.consignee || '-' },
          { label: 'No. HBL/AWB', value: form.nomorHBL || '-' },
          { label: 'Jumlah CBM', value: `${form.cbm || 0} CBM` },
          { label: 'Grand Total', value: formatRupiah(kalkulasi.grandTotal) },
          ...(kalkulasi.tpsAsal > 0 ? [{ label: 'TPS Asal', value: formatRupiah(kalkulasi.tpsAsal) }] : []),
        ]}
      />
      <ConfirmDialog
        isOpen={showConfirmReset}
        onClose={() => setShowConfirmReset(false)}
        onConfirm={() => { setForm(initialForm); showToast('Form berhasil direset.', 'info') }}
        tipe="reset"
        judul="Reset semua isian form?"
        pesan="Semua data yang sudah Anda isi akan dihapus dan form kembali kosong."
      />
      <Modal isOpen={showPreview} onClose={() => setShowPreview(false)} title="Preview Invoice LCL" width={680}>
        <PreviewInvoice data={previewData} />
        <div style={{ display: 'flex', gap: 10, marginTop: 20, justifyContent: 'flex-end' }}>
          <button onClick={() => setShowPreview(false)} style={{
            padding: '9px 20px', borderRadius: 8, border: '1px solid #e2e8f0',
            background: 'white', color: '#64748b', fontSize: 13.5, fontWeight: 600,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Tutup</button>
          <button onClick={eksekusiSimpan} style={{
            padding: '9px 20px', borderRadius: 8, border: 'none',
            background: 'linear-gradient(135deg, #8b5cf6, #5b21b6)',
            color: 'white', fontSize: 13.5, fontWeight: 600,
            cursor: 'pointer', fontFamily: 'inherit',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <Save size={15} /> Simpan Invoice
          </button>
        </div>
      </Modal>
    </div>
  )
}