accounted/components/supplier-invoices/NewSupplierInvoiceForm.tsx

'use client'

import { Fragment, useState, useEffect, useRef } from 'react'
import { useRouter } from 'next/navigation'
import { useTranslations } from 'next-intl'
import { useForm, Controller, useFieldArray } from 'react-hook-form'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import AiFilledIndicator from '@/components/ui/ai-filled-indicator'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Checkbox } from '@/components/ui/checkbox'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
import { useToast } from '@/components/ui/use-toast'
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog'
import { SupplierInvoiceReviewContent } from '@/components/suppliers/SupplierInvoiceReviewContent'
import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
import { getAccountDescription } from '@/lib/bookkeeping/account-descriptions'
import { formatCounterpartyName } from '@/lib/bookkeeping/counterparty-templates'
import { getErrorMessage } from '@/lib/errors/get-error-message'
import { cn, formatCurrency } from '@/lib/utils'
import { getDisplayTotal } from '@/lib/invoices/rounding'
import { useUnsavedChanges } from '@/lib/hooks/use-unsaved-changes'
import { useCanWrite } from '@/lib/hooks/use-can-write'
import BankTransactionPicker from '@/components/transactions/BankTransactionPicker'
import AccrualPeriodControl from '@/components/bookkeeping/AccrualPeriodControl'
import LineDimensionFields from '@/components/dimensions/LineDimensionFields'
import DocumentUploadZone, { type UploadedFile } from '@/components/bookkeeping/DocumentUploadZone'
import { suggestBalanceAccount } from '@/lib/bookkeeping/accruals/account-suggestions'
import { countCalendarMonths } from '@/lib/bookkeeping/accruals/compute'
import {
  LEGAL_VAT_RATES,
  findIllegalVatRateRow,
  findReverseChargeAccountWarningRows,
  findUnflaggedForeignZeroVatRows,
} from '@/lib/vat/supplier-invoice-line-checks'
import { ArrowLeft, Plus, Trash2, ChevronDown, Loader2, Lock, AlertCircle, AlertTriangle, MessageCircle, Link2, CalendarClock, Tags, Paperclip } from 'lucide-react'
import type { Supplier, BASAccount, VatTreatment, EntityType, InvoiceExtractionResult, FiscalPeriod } from '@/types'

interface LineItem {
  description: string
  amount: number
  account_number: string
  vat_rate: number
  // Self-assessed VAT rate for omvänd skattskyldighet (0.25/0.12/0.06). Only
  // meaningful when reverse_charge is on; the line's vat_rate is then 0.
  reverse_charge_rate?: number
  // Periodisering (förutbetald kostnad): both dates + 17xx interim account.
  // Present only while the row's periodisering panel is active.
  accrual_period_start?: string
  accrual_period_end?: string
  accrual_balance_account?: string
  // Per-item dimensions bag ({sie_dim_no: code}, dimensions PR7). Defined
  // (possibly empty) while the row's dimensions panel is open; the server
  // merges it over the invoice's default_dimensions at booking time.
  dimensions?: Record<string, string>
}

// The existing invoice surfaced on a duplicate-number conflict, used to drive
// the resolution dialog (open it / uncredit-and-retry).
interface ExistingSupplierInvoice {
  id: string
  supplier_invoice_number: string
  status: string
  credit_note_id: string | null
}

// Canonical create/convert response. On failure `error` is the structured
// envelope's inner object ({ code, message, details }); a few legacy convert
// paths still return a flat string, so accept both.
interface CreateResult {
  data?: { id: string; arrival_number: number }
  warnings?: Array<{ code: string; message: string }>
  error?:
    | string
    | {
        code?: string
        message?: string
        message_en?: string
        details?: { existing?: ExistingSupplierInvoice | null }
      }
}

interface FormData {
  supplier_id: string
  supplier_invoice_number: string
  invoice_date: string
  due_date: string
  delivery_date: string
  currency: string
  exchange_rate: string
  reverse_charge: boolean
  payment_reference: string
  notes: string
  paid_with_private_funds: boolean
  items: LineItem[]
}

interface NewSupplierForm {
  name: string
  supplier_type: string
  org_number: string
  vat_number: string
  address_line1: string
  bankgiro: string
  plusgiro: string
  default_expense_account: string
}

function RequiredMark() {
  return <span className="text-destructive ml-0.5" aria-hidden="true">*</span>
}

function formatAmount(amount: number): string {
  return amount.toLocaleString('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

function inferVatTreatment(items: LineItem[], reverseCharge: boolean): VatTreatment {
  if (reverseCharge) return 'reverse_charge'

  const rates = new Set(items.map((i) => i.vat_rate))
  if (rates.size === 1) {
    const rate = rates.values().next().value!
    if (rate === 0.25) return 'standard_25'
    if (rate === 0.12) return 'reduced_12'
    if (rate === 0.06) return 'reduced_6'
    if (rate === 0) return 'exempt'
  }

  return 'standard_25'
}

// AI returns VAT as integer percent (25, 12, 6, 0). The form stores decimals.
function vatRateFromAi(rate: number | null | undefined): number {
  if (rate == null) return 0.25
  if (rate === 25) return 0.25
  if (rate === 12) return 0.12
  if (rate === 6) return 0.06
  return 0
}

function rateToPctString(rate: number): string {
  const pct = Math.round(rate * 10000) / 100
  return Number.isFinite(pct) ? String(pct) : ''
}

function VatRateCell({ value, onChange }: { value: number; onChange: (v: number) => void }) {
  const t = useTranslations('supplier_invoice_editor')
  const inputRef = useRef<HTMLInputElement>(null)
  // Local draft so the user can type "12," or "12." mid-keystroke without the
  // controlled input snapping back to a parsed integer.
  const [draft, setDraft] = useState(() => rateToPctString(value))

  // Re-sync from form value only when the field isn't focused: keeps AI
  // prefill / supplier defaults / dropdown picks flowing in without clobbering
  // active typing.
  useEffect(() => {
    if (document.activeElement !== inputRef.current) {
      setDraft(rateToPctString(value))
    }
  }, [value])

  return (
    <div className="flex items-center gap-1">
      <div className="relative flex-1">
        <Input
          ref={inputRef}
          type="text"
          inputMode="decimal"
          value={draft}
          onFocus={(e) => e.currentTarget.select()}
          onBlur={() => setDraft(rateToPctString(value))}
          onChange={(e) => {
            const raw = e.target.value
            // Strict whitelist: digits with at most one decimal separator.
            // Blocks "2-22", "100-2", "1.2.3", letters, signs: the keystroke
            // is dropped before reaching the draft.
            if (raw !== '' && !/^\d*[.,]?\d*$/.test(raw)) return
            const normalized = raw.replace(',', '.')
            if (normalized === '' || normalized === '.') {
              setDraft(raw)
              onChange(0)
              return
            }
            const parsed = parseFloat(normalized)
            if (!Number.isFinite(parsed)) {
              setDraft(raw)
              return
            }
            const clamped = Math.min(100, Math.max(0, parsed))
            // Snap the draft back when the parsed value falls outside [0, 100]
            // so the input can never display a rate the form won't apply.
            setDraft(clamped === parsed ? raw : String(clamped))
            onChange(clamped / 100)
          }}
          className="text-right tabular-nums pr-6"
          aria-label={t('col_vat_rate')}
        />
        <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
          %
        </span>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-8 w-8 shrink-0"
            aria-label={t('vat_rate_presets_aria')}
          >
            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="min-w-[6rem]">
          {LEGAL_VAT_RATES.map((preset) => (
            <DropdownMenuItem
              key={preset}
              onSelect={() => onChange(preset)}
              className="justify-end tabular-nums"
            >
              {Math.round(preset * 100)} %
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

// Self-assessment rate picker shown in place of the Momssats cell when an
// invoice is reverse charge. The supplier charges no VAT (the line vat_rate is
// 0); this is the Swedish statutory rate the buyer self-assesses at: 25%
// huvudregeln for EU services, 12%/6% for reduced-rated services (ML 6 kap 34 §).
function RcRateSelect({ value, onChange }: { value: number; onChange: (v: number) => void }) {
  const t = useTranslations('supplier_invoice_editor')
  return (
    <Select value={String(value ?? 0.25)} onValueChange={(v) => onChange(parseFloat(v))}>
      <SelectTrigger className="h-9 tabular-nums" aria-label={t('col_rc_vat_rate')}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="0.25" className="tabular-nums">25 %</SelectItem>
        <SelectItem value="0.12" className="tabular-nums">12 %</SelectItem>
        <SelectItem value="0.06" className="tabular-nums">6 %</SelectItem>
      </SelectContent>
    </Select>
  )
}

const EMPTY_NEW_SUPPLIER: NewSupplierForm = {
  name: '',
  supplier_type: 'swedish_business',
  org_number: '',
  vat_number: '',
  address_line1: '',
  bankgiro: '',
  plusgiro: '',
  default_expense_account: '',
}

export interface NewSupplierInvoiceFormProps {
  /** Invoice-inbox item to convert; prefills the form from its AI extraction. */
  inboxItemId?: string | null
  /**
   * Render without page chrome (back button + h1) for use inside
   * NewSupplierInvoiceDialog: the same convention as JournalEntryForm's
   * `bare`.
   */
  bare?: boolean
  /**
   * Called after a successful create instead of the standalone page's
   * navigation, so a dialog host can close itself and refresh in place.
   * Receives the new invoice id when the natural next step is its detail
   * page, undefined when the flow is fully done (e.g. expense registered).
   */
  onCreated?: (invoiceId?: string) => void
  /** Called by the Avbryt button instead of navigating (dialog mode). */
  onCancel?: () => void
}

export default function NewSupplierInvoiceForm({
  inboxItemId = null,
  bare = false,
  onCreated,
  onCancel,
}: NewSupplierInvoiceFormProps = {}) {
  const router = useRouter()
  const { canWrite } = useCanWrite()
  const { toast } = useToast()
  const t = useTranslations('supplier_invoice_editor')
  const ta = useTranslations('accruals')

  // When opened from an invoice-inbox item, every redirect should land the
  // user back in the inbox so they can pick the next document. Outside the
  // inbox flow, preserve the original behavior (detail page when we have an
  // invoice id, otherwise the list).
  const afterCreate = (invoiceId?: string) =>
    inboxItemId
      ? '/e/general/invoice-inbox'
      : invoiceId
        ? `/supplier-invoices/${invoiceId}`
        : '/supplier-invoices'

  // After a successful create: hand control back to the host when mounted
  // with onCreated (dialog mode), otherwise navigate like the old standalone
  // page did.
  const finishCreate = (invoiceId?: string) => {
    createFinishedRef.current = true
    if (onCreated) onCreated(invoiceId)
    else router.push(afterCreate(invoiceId))
  }

  const [suppliers, setSuppliers] = useState<Supplier[]>([])
  const [suppliersLoaded, setSuppliersLoaded] = useState(false)
  const [accounts, setAccounts] = useState<BASAccount[]>([])
  const [entityType, setEntityType] = useState<EntityType>('enskild_firma')
  const [accountingMethod, setAccountingMethod] = useState<'accrual' | 'cash'>('accrual')
  // Öresavrundning is display-only; defaults to the company-wide setting and is
  // overridable per invoice via the toggle in the totals section.
  const [oreRounding, setOreRounding] = useState<boolean>(true)
  // Dimension tagging (kostnadsställe/projekt). Affordances render only when
  // company_settings.dimensions_enabled: the same UI-visibility gate as
  // JournalEntryForm. defaultDims is the invoice-level default bag; per-item
  // bags live on the form's items and merge over it server-side.
  const [dimensionsEnabled, setDimensionsEnabled] = useState(false)
  const [defaultDims, setDefaultDims] = useState<Record<string, string>>({})
  const [periods, setPeriods] = useState<FiscalPeriod[]>([])
  const [periodsLoaded, setPeriodsLoaded] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showReview, setShowReview] = useState(false)
  const [pendingData, setPendingData] = useState<FormData | null>(null)
  const [showNewSupplier, setShowNewSupplier] = useState(false)
  const [isCreatingSupplier, setIsCreatingSupplier] = useState(false)
  const [pendingSupplierSelect, setPendingSupplierSelect] = useState<string | null>(null)
  const [advancedOpen, setAdvancedOpen] = useState(false)
  const [newSupplier, setNewSupplier] = useState<NewSupplierForm>(EMPTY_NEW_SUPPLIER)
  const [documentFiles, setDocumentFiles] = useState<UploadedFile[]>([])
  const documentFilesRef = useRef<UploadedFile[]>([])
  const createFinishedRef = useRef(false)

  // Inbox/AI state
  const [extractedData, setExtractedData] = useState<InvoiceExtractionResult | null>(null)
  const [originalExtracted, setOriginalExtracted] = useState<InvoiceExtractionResult | null>(null)
  const [hasMatchedSupplier, setHasMatchedSupplier] = useState(false)
  const [isLoadingInbox, setIsLoadingInbox] = useState(!!inboxItemId)
  const [hasPrefilled, setHasPrefilled] = useState(false)

  // Match-on-create state
  const [showBankPicker, setShowBankPicker] = useState(false)
  const [pendingTransactionId, setPendingTransactionId] = useState<string | null>(null)
  // The button's onClick and the form's onSubmit run in the same React event
  // batch, so a `useState`-backed submitMode would still hold the previous
  // render's value when onSubmit reads it. A ref bridges the two synchronous
  // handlers; the matching state mirror only drives the review-dialog UI.
  const submitModeRef = useRef<'register' | 'register_and_match'>('register')

  // Conflict state for duplicate-supplier-invoice-number
  const [conflict, setConflict] = useState<{
    message: string
    existing: ExistingSupplierInvoice | null
  } | null>(null)
  const [isResolvingConflict, setIsResolvingConflict] = useState(false)
  const invoiceNumberInputRef = useRef<HTMLInputElement | null>(null)

  const { register, control, handleSubmit, watch, setValue, getValues, reset, formState: { isDirty } } = useForm<FormData>({
    defaultValues: {
      supplier_id: '',
      supplier_invoice_number: '',
      invoice_date: new Date().toISOString().split('T')[0],
      due_date: '',
      delivery_date: '',
      currency: 'SEK',
      exchange_rate: '',
      reverse_charge: false,
      payment_reference: '',
      notes: '',
      paid_with_private_funds: false,
      // account_number is deliberately empty: a silent prefilled expense
      // account (the old '5010' Lokalhyra seed) produced legally wrong
      // verifikat whenever the user didn't notice it. An explicit choice is
      // required; the supplier's default_expense_account fills it when set.
      items: [{ description: '', amount: 0, account_number: '', vat_rate: 0.25, reverse_charge_rate: 0.25 }],
    },
  })

  useUnsavedChanges(isDirty)

  useEffect(() => {
    documentFilesRef.current = documentFiles
  }, [documentFiles])

  useEffect(() => () => {
    if (inboxItemId || createFinishedRef.current) return
    for (const file of documentFilesRef.current) {
      if (file.status === 'uploaded' && file.id) {
        void fetch(`/api/documents/${file.id}`, { method: 'DELETE', keepalive: true })
      }
    }
  }, [inboxItemId])

  const { fields, append, remove, replace } = useFieldArray({ control, name: 'items' })
  const watchedItems = watch('items')
  const watchedSupplierId = watch('supplier_id')
  const watchedCurrency = watch('currency')
  const watchedExchangeRate = watch('exchange_rate')
  const watchedPaidPrivately = watch('paid_with_private_funds')
  const watchedReverseCharge = watch('reverse_charge')
  // Watched values used to decide whether the AI-filled indicator should
  // still be visible. Once the user edits a field, its value no longer
  // matches what the extractor wrote, and the dot fades out.
  const watchedInvoiceNumber = watch('supplier_invoice_number')
  const watchedInvoiceDate = watch('invoice_date')
  const watchedDueDate = watch('due_date')
  const watchedPaymentReference = watch('payment_reference')
  const documentUploadInProgress = documentFiles.some((file) => file.status === 'uploading')
  const documentUploadFailed = documentFiles.some((file) => file.status === 'error')
  const uploadedDocumentId = documentFiles.find((file) => file.status === 'uploaded')?.id
  // Returns true when the field currently matches whatever the AI wrote
  // when the form first loaded. Edits diverge it, hiding the dot.
  function stillFromAi(value: string | null | undefined, original: string | null | undefined): boolean {
    if (!original) return false
    return (value ?? '') === (original ?? '')
  }
  const aiFlags = {
    invoiceNumber: stillFromAi(watchedInvoiceNumber, originalExtracted?.invoice?.invoiceNumber ?? null),
    invoiceDate: stillFromAi(watchedInvoiceDate, originalExtracted?.invoice?.invoiceDate ?? null),
    dueDate: stillFromAi(watchedDueDate, originalExtracted?.invoice?.dueDate ?? null),
    paymentReference: stillFromAi(
      watchedPaymentReference,
      originalExtracted?.invoice?.paymentReference ?? null,
    ),
  }

  const isEF = entityType === 'enskild_firma'

  // Out-of-period guard (mirrors the manual voucher form). A registration JE is
  // only posted at registration time under the accrual method or when the
  // invoice is marked paid privately: cash method books at payment, so an
  // out-of-period date is fine there and we stay quiet. periodsLoaded gates the
  // warning so it never flashes before the fiscal periods have been fetched.
  const willBookAtRegistration = accountingMethod === 'accrual' || watchedPaidPrivately
  const invoiceDateOutsidePeriod =
    periodsLoaded &&
    !!watchedInvoiceDate &&
    !periods.some((p) => watchedInvoiceDate >= p.period_start && watchedInvoiceDate <= p.period_end)
  const showNoPeriodWarning = willBookAtRegistration && invoiceDateOutsidePeriod

  // Advisory nudge (#863 item 2): reverse charge purchases are normally booked
  // on cost accounts (4xxx/5xxx), so flag lines sitting on a class 1 or 6
  // account while omvand skattskyldighet is on. Never blocks submission: class
  // 6 has legitimate reverse charge uses (e.g. 6540 for EU cloud services).
  const rcAccountWarningRows = watchedReverseCharge
    ? findReverseChargeAccountWarningRows(watchedItems ?? [])
    : []

  // Advisory nudge (#1042): a foreign supplier charging no Swedish VAT is
  // normally omvand skattskyldighet. With the switch off no 26x4 leg and no
  // 44xx/45xx basis is booked, so ruta 20-24, 30-32 and 48 stay empty. Silent
  // for Swedish suppliers, where 0 % is a genuine exemption. Never blocks:
  // a non-EU goods purchase cleared at customs is legitimately 0 % without
  // reverse charge, and forcing the switch there would book a wrong verifikat.
  const foreignZeroVatRows = findUnflaggedForeignZeroVatRows(
    watchedItems ?? [],
    watchedReverseCharge,
    suppliers.find((s) => s.id === watchedSupplierId)?.supplier_type,
  )

  useEffect(() => {
    fetchSuppliers()
    fetchAccounts()
    fetchEntityType()
    fetchPeriods()
  }, [])

  // One-shot: load inbox item and prefill form. Runs after suppliers are
  // loaded so we can resolve matched_supplier_id to a real picker value.
  // Gate on `suppliersLoaded`, not `suppliers.length > 0`: otherwise the
  // effect never fires for users who haven't booked a supplier yet and
  // the "Laddar uppgifter från inkorgen…" spinner sticks forever.
  useEffect(() => {
    if (!inboxItemId || hasPrefilled || !suppliersLoaded) return
    let cancelled = false

    ;(async () => {
      try {
        const res = await fetch(`/api/extensions/ext/invoice-inbox/items/${inboxItemId}`)
        const json = await res.json()
        if (cancelled) return
        if (!res.ok) {
          toast({
            title: t('inbox_load_failed_title'),
            description: json?.error || t('inbox_load_failed_description'),
            variant: 'destructive',
          })
          setIsLoadingInbox(false)
          return
        }

        const item = json.data as {
          id: string
          extracted_data: InvoiceExtractionResult | null
          matched_supplier_id: string | null
          document_id: string | null
        }
        const extracted = item.extracted_data
        if (!extracted) {
          setIsLoadingInbox(false)
          setHasPrefilled(true)
          return
        }

        setExtractedData(extracted)
        setOriginalExtracted(extracted)

        // Supplier
        if (item.matched_supplier_id && suppliers.find((s) => s.id === item.matched_supplier_id)) {
          setValue('supplier_id', item.matched_supplier_id)
          setHasMatchedSupplier(true)
        }

        // Scalar invoice fields
        if (extracted.invoice?.invoiceNumber) {
          setValue('supplier_invoice_number', extracted.invoice.invoiceNumber)
        }
        if (extracted.invoice?.invoiceDate) {
          setValue('invoice_date', extracted.invoice.invoiceDate)
        }
        if (extracted.invoice?.dueDate) {
          setValue('due_date', extracted.invoice.dueDate)
        }
        if (extracted.invoice?.paymentReference) {
          setValue('payment_reference', extracted.invoice.paymentReference)
        }
        if (extracted.invoice?.currency) {
          setValue('currency', extracted.invoice.currency)
        }

        // Line items: keep the single empty default if AI returned nothing,
        // otherwise replace it with the extracted lines. When the document
        // states a service window of 2+ calendar months (insurance period,
        // license term), pre-fill periodisering on every positive line: the
        // user sees the panel and can remove it before booking.
        if (extracted.lineItems && extracted.lineItems.length > 0) {
          // AI-extracted values are untrusted input: only accept strict
          // ISO-8601 dates before they reach form state (and later the API).
          const isIsoDate = (v: unknown): v is string =>
            typeof v === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(v)
          const spsRaw = extracted.invoice?.servicePeriodStart
          const speRaw = extracted.invoice?.servicePeriodEnd
          const sps = isIsoDate(spsRaw) ? spsRaw : null
          const spe = isIsoDate(speRaw) ? speRaw : null
          let prefillAccrual = false
          if (sps && spe && spe >= sps) {
            try {
              prefillAccrual = countCalendarMonths(sps, spe) >= 2
            } catch {
              prefillAccrual = false
            }
          }
          replace(
            extracted.lineItems.map((li) => {
              const amount = typeof li.lineTotal === 'number' ? li.lineTotal : 0
              const withAccrual = prefillAccrual && amount > 0
              return {
                description: li.description || '',
                amount,
                // Extraction never suggests accounts (forcibly nulled at parse
                // time) and a silent default misbooks: leave empty so the user
                // (or the supplier default) makes the call.
                account_number: '',
                vat_rate: vatRateFromAi(li.vatRate),
                accrual_period_start: withAccrual ? (sps as string) : undefined,
                accrual_period_end: withAccrual ? (spe as string) : undefined,
                // No account yet → generic 1790; toggleAccrual re-suggests the
                // same way once the user picks one.
                accrual_balance_account: withAccrual
                  ? suggestBalanceAccount('expense', '')
                  : undefined,
              }
            }),
          )
        }

        // Treat the AI prefill as the new baseline: otherwise the unsaved-
        // changes prompt fires the moment the user navigates away, even if
        // they didn't touch anything.
        reset(getValues())
        setHasPrefilled(true)
      } catch (err) {
        if (cancelled) return
        toast({
          title: t('inbox_load_failed_title'),
          description: err instanceof Error ? getErrorMessage(err) : t('unknown_error'),
          variant: 'destructive',
        })
      } finally {
        if (!cancelled) setIsLoadingInbox(false)
      }
    })()

    return () => {
      cancelled = true
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inboxItemId, suppliersLoaded, suppliers])

  // Auto-fill due date and defaults when supplier is selected: but never
  // overwrite a value the AI already filled in for us.
  const [templateAccountNote, setTemplateAccountNote] = useState<{ account: string; counterparty: string } | null>(null)
  // Rows planted by the counterparty-history prefill, so a supplier SWITCH can
  // un-plant them: without this, supplier A's history account survives into
  // supplier B's invoice and silently blocks B's own default_expense_account
  // (the fill branches only touch empty rows).
  const plantedRef = useRef<{ account: string; rows: number[] } | null>(null)
  // Automatic fill is requested, not applied inline: handleAccountChange
  // needs the loaded BAS chart to apply the konto's default moms, and the
  // requests originate in closures (the supplier effect and its async
  // template fetch) that may hold a stale empty `accounts`. The applying
  // effect below re-runs on both the request tick and the chart load with
  // fresh closures, so whichever arrives last triggers the fill. Filling
  // early would leave a VAT-free konto on the 25% row default, the exact
  // mis-booking the fill exists to prevent.
  const pendingAccountFillRef = useRef<{ account: string; plant: boolean; counterparty?: string } | null>(null)
  const [accountFillTick, setAccountFillTick] = useState(0)

  function requestAccountFill(account: string, plant: boolean, counterparty?: string) {
    pendingAccountFillRef.current = { account, plant, counterparty }
    setAccountFillTick((t) => t + 1)
  }

  useEffect(() => {
    if (accounts.length === 0 || !pendingAccountFillRef.current) return
    const { account, plant, counterparty } = pendingAccountFillRef.current
    pendingAccountFillRef.current = null
    const items = getValues('items')
    const appliedRows: number[] = []
    items.forEach((row, i) => {
      if (!row.account_number) {
        // Same path as a manual pick: konto default moms rides along.
        handleAccountChange(i, account)
        appliedRows.push(i)
      }
    })
    if (appliedRows.length > 0 && plant && counterparty) {
      plantedRef.current = { account, rows: appliedRows }
      setTemplateAccountNote({ account, counterparty })
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [accounts, accountFillTick])

  useEffect(() => {
    if (!watchedSupplierId) return
    const supplier = suppliers.find((s) => s.id === watchedSupplierId)
    if (!supplier) return
    setTemplateAccountNote(null)
    pendingAccountFillRef.current = null
    if (plantedRef.current) {
      const { account, rows } = plantedRef.current
      const planted = getValues('items')
      rows.forEach((i) => {
        if (planted[i]?.account_number === account) {
          // Clear only the account; the rate is left for the next fill or
          // manual pick to settle (handleAccountChange reapplies konto
          // defaults), so an AI-extracted rate is never clobbered here.
          setValue(`items.${i}.account_number`, '')
        }
      })
      plantedRef.current = null
    }

    const invoiceDate = watch('invoice_date')
    const currentDue = watch('due_date')
    if (invoiceDate && !currentDue) {
      const due = new Date(invoiceDate)
      due.setDate(due.getDate() + supplier.default_payment_terms)
      setValue('due_date', due.toISOString().split('T')[0])
    }
    if (supplier.default_expense_account && fields.length > 0) {
      // Fill every row the user hasn't assigned yet: an empty account is the
      // only signal needed (rows start empty by design, no seeded default).
      // Routed through the fill request so it waits for the BAS chart and the
      // konto's default moms comes along exactly like a manual pick.
      requestAccountFill(supplier.default_expense_account, false)
    }
    if (supplier.default_currency && watch('currency') === 'SEK') {
      setValue('currency', supplier.default_currency)
    }
    if (supplier.supplier_type === 'eu_business') {
      setValue('reverse_charge', true)
    }

    // No supplier default: fall back to the company's own booking history for
    // this counterparty (the same tiered matcher the booking flows use). Fills
    // empty rows only, never a generic seed, and only from expense-shaped
    // templates (P&L cost on debit, settlement on credit; the 4-8 gate keeps
    // private/balance-sheet templates like 2013 or 1630 out). Best-effort: on
    // any miss the rows simply stay blank, exactly as before.
    if (!supplier.default_expense_account && fields.length > 0 && supplier.name?.trim()) {
      let cancelled = false
      ;(async () => {
        try {
          const res = await fetch(
            `/api/settings/counterparty-templates?counterparty=${encodeURIComponent(supplier.name.trim())}`
          )
          if (!res.ok) return
          const json = await res.json()
          if (cancelled) return
          const match = json?.data
          const debit: string | undefined = match?.template?.debit_account
          const credit: string | undefined = match?.template?.credit_account
          if (!match || (match.confidence ?? 0) < 0.5) return
          if (!debit || !/^[4-8]/.test(debit) || !credit || !credit.startsWith('19')) return
          requestAccountFill(debit, true, match.template.counterparty_name)
        } catch {
          // Prefill is best-effort; the rows stay blank.
        }
      })()
      return () => { cancelled = true }
    }
    return undefined
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [watchedSupplierId, suppliers])

  // Auto-fetch Riksbanken exchange rate when currency switches to non-SEK and
  // the user hasn't typed a custom rate yet. Re-fetches when the invoice
  // date changes too. Never overwrites a user-entered rate. Reuses the
  // watchedInvoiceDate declared above for the AI-filled-indicator flag.
  // The "user has manually edited the rate" flag is scoped *per currency*.
  // Switching from EUR (rate 11.8 edited by hand) to USD must re-fetch: the
  // EUR rate is meaningless for a USD invoice. Tracking last-fetched currency
  // lets us reset the touched flag on a currency switch while still honoring
  // a manual edit when only the invoice date changes within the same currency.
  const userTouchedRateRef = useRef(false)
  const lastFxCurrencyRef = useRef<string | null>(null)
  useEffect(() => {
    if (watchedCurrency === 'SEK') {
      setValue('exchange_rate', '')
      userTouchedRateRef.current = false
      lastFxCurrencyRef.current = null
      return
    }
    if (lastFxCurrencyRef.current !== watchedCurrency) {
      // Currency switched: drop the previous currency's manual-edit flag.
      userTouchedRateRef.current = false
      lastFxCurrencyRef.current = watchedCurrency
    }
    if (userTouchedRateRef.current) return
    let cancelled = false
    ;(async () => {
      try {
        const url = `/api/currency/rate?currency=${watchedCurrency}${
          watchedInvoiceDate ? `&date=${watchedInvoiceDate}` : ''
        }`
        const res = await fetch(url)
        if (!res.ok) return
        const { data } = await res.json()
        if (cancelled || !data?.rate) return
        // Don't clobber a value the user typed while we were fetching.
        if (userTouchedRateRef.current) return
        setValue('exchange_rate', String(Math.round(data.rate * 10000) / 10000))
      } catch {
        // Non-critical: user can type the rate manually.
      }
    })()
    return () => { cancelled = true }
  }, [watchedCurrency, watchedInvoiceDate, setValue])

  // Auto-select newly created supplier once it shows up in the list
  useEffect(() => {
    if (pendingSupplierSelect && suppliers.find((s) => s.id === pendingSupplierSelect)) {
      setValue('supplier_id', pendingSupplierSelect, { shouldDirty: true, shouldValidate: true })
      setPendingSupplierSelect(null)
    }
  }, [suppliers, pendingSupplierSelect, setValue])

  async function fetchSuppliers() {
    try {
      const res = await fetch('/api/suppliers')
      const { data } = await res.json()
      setSuppliers(data || [])
    } finally {
      setSuppliersLoaded(true)
    }
  }

  async function fetchAccounts() {
    const res = await fetch('/api/bookkeeping/accounts')
    const { data } = await res.json()
    setAccounts(data || [])
  }

  async function fetchEntityType() {
    try {
      const res = await fetch('/api/settings')
      const { data } = await res.json()
      if (data?.entity_type) setEntityType(data.entity_type)
      // Cash method books at payment, not registration: drives whether the
      // out-of-period warning is relevant (see willBookAtRegistration below).
      if (data?.accounting_method === 'cash' || data?.accounting_method === 'accrual') {
        setAccountingMethod(data.accounting_method)
      }
      if (typeof data?.ore_rounding === 'boolean') setOreRounding(data.ore_rounding)
      setDimensionsEnabled(data?.dimensions_enabled === true)
    } catch {
      // Default to enskild_firma / accrual, dimension affordances hidden
    }
  }

  async function fetchPeriods() {
    try {
      const res = await fetch('/api/bookkeeping/fiscal-periods')
      const { data } = await res.json()
      setPeriods(data || [])
    } catch {
      // Non-critical: the server still hard-blocks an out-of-period booking.
    } finally {
      setPeriodsLoaded(true)
    }
  }

  function handleAccountChange(index: number, accountNumber: string) {
    setValue(`items.${index}.account_number`, accountNumber)
    const currentDesc = watch(`items.${index}.description`)
    if (!currentDesc && accountNumber.length === 4) {
      const desc = getAccountDescription(accountNumber)
      if (desc) setValue(`items.${index}.description`, desc.name)
    }
    // Auto-fill the rad's moms from the konto's configured default (e.g.
    // öresavrundning 3740 = ingen moms), so a rounding line stops inheriting
    // the 25 % rad-default. Only when the konto carries an explicit default;
    // otherwise the user's current rate stands. Reverse charge uses its own
    // rate field, so leave that flow untouched. PostgREST serialises numeric
    // columns as strings, so coerce: strict === comparisons on vat_rate
    // (inferVatTreatment) expect a number.
    const acct = accounts.find((a) => a.account_number === accountNumber)
    const defaultRate = acct?.default_vat_rate == null ? null : Number(acct.default_vat_rate)
    if (!watchedReverseCharge && defaultRate != null && Number.isFinite(defaultRate)) {
      setValue(`items.${index}.vat_rate`, defaultRate, { shouldDirty: true })
    }
  }

  // Periodisering per rad: kräver faktureringsmetoden; eget utlägg bokar
  // kostnaden direkt mot ägarkontot och kan inte periodiseras. Omvänd
  // skattskyldighet kan inte heller periodiseras: kostnadsraden utgör
  // momsunderlaget (ruta 20-32) och får inte flyttas till ett interimskonto.
  const canUseAccrual =
    accountingMethod === 'accrual' && !watchedPaidPrivately && !watchedReverseCharge

  // When reverse charge is switched on, clear any per-line periodisering so a
  // stale AI prefill (or fields set before the toggle) can never reach the
  // API, which rejects the combination with SI_CREATE_ACCRUAL_REVERSE_CHARGE.
  useEffect(() => {
    if (!watchedReverseCharge) return
    const items = getValues('items') ?? []
    items.forEach((item, index) => {
      if (
        item.accrual_period_start !== undefined ||
        item.accrual_period_end !== undefined ||
        item.accrual_balance_account !== undefined
      ) {
        setValue(`items.${index}.accrual_period_start`, undefined, { shouldDirty: true })
        setValue(`items.${index}.accrual_period_end`, undefined, { shouldDirty: true })
        setValue(`items.${index}.accrual_balance_account`, undefined, { shouldDirty: true })
      }
    })
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [watchedReverseCharge])

  function isAccrualOpen(index: number): boolean {
    return watchedItems?.[index]?.accrual_balance_account != null
  }

  function toggleAccrual(index: number) {
    if (isAccrualOpen(index)) {
      setValue(`items.${index}.accrual_period_start`, undefined, { shouldDirty: true })
      setValue(`items.${index}.accrual_period_end`, undefined, { shouldDirty: true })
      setValue(`items.${index}.accrual_balance_account`, undefined, { shouldDirty: true })
    } else {
      const account = watch(`items.${index}.account_number`) || ''
      setValue(`items.${index}.accrual_period_start`, watch('invoice_date') || '', { shouldDirty: true })
      setValue(`items.${index}.accrual_period_end`, '', { shouldDirty: true })
      setValue(
        `items.${index}.accrual_balance_account`,
        suggestBalanceAccount('expense', account),
        { shouldDirty: true },
      )
    }
  }

  // --- Dimension tagging (kostnadsställe/projekt, dimensions PR7) ---
  // Mirrors the accrual pattern: a defined (possibly empty) bag on the item
  // means the row's panel is open; closing clears the bag entirely so the
  // payload never carries a stale override.
  function setDefaultDimension(dimNo: string, code: string | null) {
    setDefaultDims((prev) => {
      const next = { ...prev }
      const trimmed = code?.trim()
      if (trimmed) next[dimNo] = trimmed
      else delete next[dimNo]
      return next
    })
  }

  function isDimOpen(index: number): boolean {
    return watchedItems?.[index]?.dimensions != null
  }

  function toggleDimensions(index: number) {
    if (isDimOpen(index)) {
      setValue(`items.${index}.dimensions`, undefined, { shouldDirty: true })
    } else {
      setValue(`items.${index}.dimensions`, {}, { shouldDirty: true })
    }
  }

  function updateItemDimension(index: number, dimNo: string, code: string | null) {
    const current = { ...(getValues(`items.${index}.dimensions`) ?? {}) }
    const trimmed = code?.trim()
    if (trimmed) current[dimNo] = trimmed
    else delete current[dimNo]
    setValue(`items.${index}.dimensions`, current, { shouldDirty: true })
  }

  // Compact display of the invoice default, e.g. "KS01 · P001" (dim-number order).
  const defaultDimsSummary = Object.entries(defaultDims)
    .filter(([, v]) => v)
    .sort(([a], [b]) => Number(a) - Number(b))
    .map(([, v]) => v)
    .join(' · ')

  function renderDimensionsPanel(index: number) {
    const item = watchedItems?.[index]
    if (!item || item.dimensions == null) return null
    return (
      <div className="rounded-lg border bg-muted/30 p-3 space-y-1">
        <div className="max-w-md">
          <LineDimensionFields
            dimensions={item.dimensions}
            onChange={(dimNo, code) => updateItemDimension(index, dimNo, code)}
            inputClassName="h-8"
          />
        </div>
        {defaultDimsSummary && (
          <p className="text-xs text-muted-foreground">
            {t('row_dimensions_inherit_hint', { dims: defaultDimsSummary })}
          </p>
        )}
      </div>
    )
  }

  function renderAccrualPanel(index: number, idPrefix: string) {
    const item = watchedItems?.[index]
    if (!item || item.accrual_balance_account == null) return null
    return (
      <AccrualPeriodControl
        direction="expense"
        amount={item.amount || 0}
        // Line amounts are in the invoice's currency; the K2 5 000 kr limit is
        // in SEK. The rate is the Riksbanken/manual one already on the form.
        // An empty field parses to NaN, which the control reads as "unknown"
        // and then hides the hint instead of comparing the wrong unit.
        currency={watchedCurrency}
        exchangeRate={parseFloat(watchedExchangeRate)}
        idPrefix={idPrefix}
        value={{
          start: item.accrual_period_start ?? '',
          end: item.accrual_period_end ?? '',
          balanceAccount: item.accrual_balance_account || '1790',
        }}
        onChange={(next) => {
          setValue(`items.${index}.accrual_period_start`, next.start, { shouldDirty: true })
          setValue(`items.${index}.accrual_period_end`, next.end, { shouldDirty: true })
          setValue(`items.${index}.accrual_balance_account`, next.balanceAccount, { shouldDirty: true })
        }}
        onRemove={() => toggleAccrual(index)}
      />
    )
  }

  const itemTotals = (watchedItems || []).map((item) => {
    const lineTotal = Math.round((item.amount || 0) * 100) / 100
    // Reverse charge: VAT is self-assessed at reverse_charge_rate (25% default),
    // not the line's vat_rate (which is 0: the supplier charged nothing).
    const effectiveRate = watchedReverseCharge ? (item.reverse_charge_rate ?? 0.25) : (item.vat_rate || 0)
    const vatAmount = Math.round(lineTotal * effectiveRate * 100) / 100
    return { lineTotal, vatAmount }
  })
  const subtotal = itemTotals.reduce((sum, t) => sum + t.lineTotal, 0)
  const totalVat = itemTotals.reduce((sum, t) => sum + t.vatAmount, 0)
  // Reverse charge: supplier never invoices VAT, so it doesn't roll into the
  // payable total. The VAT is still accounted for via 2614 / 2645 in
  // bookkeeping: the line stays in the breakdown for transparency.
  const payableVat = watchedReverseCharge ? 0 : totalVat
  const total = Math.round((subtotal + payableVat) * 100) / 100

  // Öresavrundning live preview: same helper as the detail page. Display-only;
  // the registered amount and the booked verifikat keep the exact öre.
  const displayRounding = getDisplayTotal(
    { total, currency: watchedCurrency || 'SEK', ore_rounding: oreRounding },
    { ore_rounding: false },
  )

  // Show the AI-suggested supplier card when we have an inbox item, the AI
  // surfaced a supplier name, and we couldn't match it to an existing record.
  const showAISupplierHint =
    !!extractedData?.supplier?.name &&
    !hasMatchedSupplier &&
    !watchedSupplierId

  function openSupplierDialogPrefilled() {
    setNewSupplier({
      name: extractedData?.supplier?.name || '',
      supplier_type: 'swedish_business',
      org_number: extractedData?.supplier?.orgNumber || '',
      vat_number: extractedData?.supplier?.vatNumber || '',
      address_line1: extractedData?.supplier?.address || '',
      bankgiro: extractedData?.supplier?.bankgiro || '',
      plusgiro: extractedData?.supplier?.plusgiro || '',
      default_expense_account: '',
    })
    setShowNewSupplier(true)
  }

  function openSupplierDialogBlank() {
    setNewSupplier(EMPTY_NEW_SUPPLIER)
    setShowNewSupplier(true)
  }

  async function handleCreateSupplier() {
    if (!newSupplier.name.trim()) {
      toast({ title: t('name_missing_title'), description: t('name_missing_description'), variant: 'destructive' })
      return
    }
    setIsCreatingSupplier(true)

    const payload: Record<string, unknown> = {
      name: newSupplier.name,
      supplier_type: newSupplier.supplier_type,
    }
    if (newSupplier.org_number) payload.org_number = newSupplier.org_number
    if (newSupplier.vat_number) payload.vat_number = newSupplier.vat_number
    if (newSupplier.address_line1) payload.address_line1 = newSupplier.address_line1
    if (newSupplier.bankgiro) payload.bankgiro = newSupplier.bankgiro
    if (newSupplier.plusgiro) payload.plusgiro = newSupplier.plusgiro
    if (newSupplier.default_expense_account) payload.default_expense_account = newSupplier.default_expense_account

    const res = await fetch('/api/suppliers', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
    const result = await res.json()

    if (!res.ok) {
      toast({ title: t('create_supplier_failed_title'), description: getErrorMessage(result, { context: 'supplier' }), variant: 'destructive' })
    } else {
      const created = result.data as Supplier
      setSuppliers((prev) => [...prev, created].sort((a, b) => a.name.localeCompare(b.name)))
      setPendingSupplierSelect(created.id)
      setHasMatchedSupplier(true)
      setShowNewSupplier(false)
      setNewSupplier(EMPTY_NEW_SUPPLIER)
      toast({ title: t('supplier_created_title'), description: created.name })
    }

    setIsCreatingSupplier(false)
  }

  function buildPayload(data: FormData) {
    const vatTreatment = inferVatTreatment(data.items, data.reverse_charge)
    // When paid privately, due_date is irrelevant: but the API still requires
    // a YYYY-MM-DD value. Default to invoice_date so the field passes validation.
    const dueDate = data.paid_with_private_funds && !data.due_date
      ? data.invoice_date
      : data.due_date
    return {
      supplier_id: data.supplier_id,
      ...(!inboxItemId && uploadedDocumentId ? { document_id: uploadedDocumentId } : {}),
      supplier_invoice_number: data.supplier_invoice_number,
      invoice_date: data.invoice_date,
      due_date: dueDate,
      delivery_date: data.delivery_date || undefined,
      currency: data.currency,
      exchange_rate: data.exchange_rate ? parseFloat(data.exchange_rate) : undefined,
      vat_treatment: vatTreatment,
      reverse_charge: data.reverse_charge,
      payment_reference: data.payment_reference || undefined,
      notes: data.notes || undefined,
      paid_with_private_funds: data.paid_with_private_funds,
      ore_rounding: oreRounding,
      // Invoice-level default dimensions (kostnadsställe/projekt): only sent
      // when the user actually picked something.
      ...(Object.keys(defaultDims).length > 0 ? { default_dimensions: defaultDims } : {}),
      items: data.items.map((item) => ({
        description: item.description,
        amount: item.amount,
        account_number: item.account_number,
        // Reverse charge: the supplier charges no VAT, so the line rate is 0 and
        // the self-assessed rate travels on reverse_charge_rate (25% default).
        vat_rate: data.reverse_charge ? 0 : item.vat_rate,
        reverse_charge_rate: data.reverse_charge ? (item.reverse_charge_rate ?? 0.25) : undefined,
        // Periodisering: only sent when the row has a complete period AND the
        // flow supports it (kontantmetod/eget utlägg would be rejected by the
        // API: an AI prefill must never block those submits).
        ...(canUseAccrual && item.accrual_period_start && item.accrual_period_end
          ? {
              accrual_period_start: item.accrual_period_start,
              accrual_period_end: item.accrual_period_end,
              accrual_balance_account: item.accrual_balance_account || undefined,
            }
          : {}),
        // Per-item dimensions override: only when the bag carries values
        // (an open-but-empty panel means "inherit the invoice default").
        ...(item.dimensions && Object.keys(item.dimensions).length > 0
          ? { dimensions: item.dimensions }
          : {}),
      })),
    }
  }

  // Persist user edits back into the inbox item's extracted_data so the
  // inbox stays in sync with what was actually booked. Best-effort: a
  // failed PATCH never blocks the registration.
  async function patchInboxFieldsIfChanged(data: FormData) {
    if (!inboxItemId || !originalExtracted) return
    const supplierField: Record<string, unknown> = {}
    const invoiceField: Record<string, unknown> = {}

    if (originalExtracted.invoice?.invoiceNumber !== data.supplier_invoice_number) {
      invoiceField.invoiceNumber = data.supplier_invoice_number || null
    }
    if (originalExtracted.invoice?.invoiceDate !== data.invoice_date) {
      invoiceField.invoiceDate = data.invoice_date || null
    }
    if (originalExtracted.invoice?.dueDate !== data.due_date) {
      invoiceField.dueDate = data.due_date || null
    }
    if ((originalExtracted.invoice?.paymentReference || null) !== (data.payment_reference || null)) {
      invoiceField.paymentReference = data.payment_reference || null
    }
    if (originalExtracted.invoice?.currency !== data.currency) {
      invoiceField.currency = data.currency
    }

    if (Object.keys(supplierField).length === 0 && Object.keys(invoiceField).length === 0) return

    try {
      await fetch(`/api/extensions/ext/invoice-inbox/items/${inboxItemId}/fields`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...(Object.keys(supplierField).length ? { supplier: supplierField } : {}),
          ...(Object.keys(invoiceField).length ? { invoice: invoiceField } : {}),
        }),
      })
    } catch {
      // Best-effort sync; don't block registration on this.
    }
  }

  // Single submit endpoint chooser: convert when we came from inbox, plain
  // POST otherwise. Both endpoints validate the same CreateSupplierInvoiceSchema
  // and return the same canonical error envelope ({ error: { code, message,
  // details } }): including the recoverable duplicate-number 409.
  async function postCreate(data: FormData): Promise<{
    ok: boolean
    status: number
    result: CreateResult
  }> {
    const url = inboxItemId
      ? `/api/extensions/ext/invoice-inbox/items/${inboxItemId}/convert`
      : '/api/supplier-invoices'

    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(buildPayload(data)),
    })
    const result = await res.json()
    if (
      res.ok &&
      (result as CreateResult).warnings?.some((warning) => warning.code === 'DOCUMENT_LINK_FAILED')
    ) {
      toast({
        title: t('document_link_warning_title'),
        description: t('document_link_warning_description'),
        variant: 'destructive',
      })
    }
    return { ok: res.ok, status: res.status, result }
  }

  function onSubmit(data: FormData) {
    if (documentUploadInProgress) {
      toast({
        title: t('document_upload_in_progress_title'),
        description: t('document_upload_in_progress_description'),
        variant: 'destructive',
      })
      return
    }
    if (documentUploadFailed) {
      toast({
        title: t('document_upload_failed_title'),
        description: t('document_upload_failed_description'),
        variant: 'destructive',
      })
      return
    }
    // Hard block: under faktureringsmetoden (and for privately-paid kvitton) a
    // verifikation is posted at registration, and BFL 5 kap kräver att
    // verifikationsnumret ligger i en obruten serie inom ett räkenskapsår. No
    // räkenskapsår for the invoice date → no compliant voucher can exist, so we
    // refuse rather than register an unbooked invoice. Kontantmetoden books at
    // payment, so it is intentionally not blocked here (see showNoPeriodWarning).
    if (showNoPeriodWarning) {
      toast({
        title: t('warning_title'),
        description: t('no_period_warning', { date: data.invoice_date }),
        variant: 'destructive',
      })
      return
    }
    if (!data.supplier_id) {
      toast({ title: t('supplier_missing_title'), description: t('supplier_missing_description'), variant: 'destructive' })
      return
    }
    if (!data.supplier_invoice_number) {
      toast({ title: t('invoice_number_missing_title'), description: t('invoice_number_missing_description'), variant: 'destructive' })
      return
    }
    const rowWithoutAccount = data.items.findIndex((item) => !item.account_number)
    if (rowWithoutAccount !== -1) {
      toast({
        title: t('account_missing_title'),
        description: t('account_missing_description', { row: rowWithoutAccount + 1 }),
        variant: 'destructive',
      })
      return
    }
    // Only 25/12/6/0 % are legal Swedish VAT rates (ML 2023:200). The free-text
    // VatRateCell clamps to [0, 100] but accepts anything in between, so block
    // illegal rates here. Reverse-charge invoices skip this: their line vat_rate
    // is forced to 0 and RcRateSelect already restricts the self-assessed rate.
    if (!data.reverse_charge) {
      const rowWithIllegalRate = findIllegalVatRateRow(data.items)
      if (rowWithIllegalRate !== -1) {
        toast({
          title: t('illegal_vat_rate_title'),
          description: t('illegal_vat_rate_description', {
            row: rowWithIllegalRate + 1,
            rate: rateToPctString(data.items[rowWithIllegalRate].vat_rate),
          }),
          variant: 'destructive',
        })
        return
      }
    }
    // A row with an open periodisering panel must carry a complete period of
    // at least two calendar months before the invoice can be booked.
    const invalidAccrual = canUseAccrual && data.items.some((item) => {
      if (item.accrual_balance_account == null) return false
      if (!item.accrual_period_start || !item.accrual_period_end) return true
      if (item.accrual_period_end < item.accrual_period_start) return true
      return countCalendarMonths(item.accrual_period_start, item.accrual_period_end) < 2
    })
    if (invalidAccrual) {
      toast({
        title: ta('incomplete_toast_title'),
        description: ta('incomplete_toast_description'),
        variant: 'destructive',
      })
      return
    }

    if (submitModeRef.current === 'register_and_match') {
      // Open the bank-transaction picker; actual create happens on pick.
      // For AB the review dialog is shown after a transaction is picked.
      setPendingData(data)
      setShowBankPicker(true)
      return
    }

    // Privately-paid skips the AB review dialog: the toggle itself is the
    // explicit user intent, and the resulting verifikat is just expense + VAT
    // against the owner account (2893/2018). Same path for EF.
    if (isEF || data.paid_with_private_funds) {
      setPendingData(data)
      handleDirectSubmit(data)
    } else {
      setPendingData(data)
      setShowReview(true)
    }
  }

  // EF: create + auto-approve, no review dialog. Privately-paid invoices land
  // here too and skip auto-approve since they're already in status='paid'.
  async function handleDirectSubmit(data: FormData) {
    setIsSubmitting(true)
    await patchInboxFieldsIfChanged(data)
    const { ok, status, result } = await postCreate(data)

    if (!ok) {
      // EF/direct path also hits the duplicate-number 409 (e.g. converting an
      // inbox receipt whose number was already registered): offer recovery
      // instead of a dead-end toast.
      if (!tryHandleDuplicateConflict(status, result)) {
        handleCreateError(status, result)
      }
      setIsSubmitting(false)
      return
    }
    if (!result.data) {
      setIsSubmitting(false)
      return
    }

    // Clear dirty state so useUnsavedChanges doesn't fire the
    // beforeunload prompt while we navigate away on a successful submit.
    reset(data)

    if (data.paid_with_private_funds) {
      toast({
        title: t('expense_registered_title'),
        description: t('arrival_number_label', { number: result.data.arrival_number }),
      })
      finishCreate()
      setIsSubmitting(false)
      return
    }

    // Auto-approve for EF
    const approveRes = await fetch(`/api/supplier-invoices/${result.data.id}/approve`, { method: 'POST' })
    if (!approveRes.ok) {
      toast({
        title: t('warning_title'),
        description: t('auto_approve_failed_description'),
        variant: 'destructive',
      })
      finishCreate(result.data.id)
    } else {
      toast({ title: t('invoice_registered_title'), description: t('arrival_number_label', { number: result.data.arrival_number }) })
      finishCreate()
    }
    setIsSubmitting(false)
  }

  // AB: create after review dialog. If a bank transaction was picked first
  // (register-and-match flow), also match the new invoice to it.
  async function handleConfirm() {
    if (!pendingData) return
    setIsSubmitting(true)
    await patchInboxFieldsIfChanged(pendingData)
    const { ok, status, result } = await postCreate(pendingData)

    if (ok && result.data) {
      const invoiceId = result.data.id
      const arrivalNumber = result.data.arrival_number
      setShowReview(false)
      // Clear dirty state: see comment in handleDirectSubmit.
      reset(pendingData)

      if (pendingTransactionId) {
        const matchRes = await fetch(`/api/transactions/${pendingTransactionId}/match-supplier-invoice`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ supplier_invoice_id: invoiceId }),
        })
        const matchResult = await matchRes.json()
        setPendingTransactionId(null)
        submitModeRef.current = 'register'

        if (matchRes.ok) {
          toast({
            title: t('invoice_registered_and_matched_title'),
            description: t('invoice_registered_and_matched_description', { number: arrivalNumber }),
          })
        } else {
          toast({
            title: t('invoice_registered_match_failed_title'),
            description: getErrorMessage(matchResult, { context: 'supplier_invoice', statusCode: matchRes.status }),
            variant: 'destructive',
          })
        }
      } else {
        toast({ title: t('invoice_registered_title'), description: t('arrival_number_label', { number: arrivalNumber }) })
      }

      finishCreate(invoiceId)
    } else {
      // Treat duplicate-number as a recoverable conflict; everything else as a hard error.
      if (!tryHandleDuplicateConflict(status, result)) {
        handleCreateError(status, result)
      }
    }
    setIsSubmitting(false)
  }

  // Detect the recoverable duplicate-supplier-invoice-number conflict and open
  // the resolution dialog. Both the inbox `convert` route and the plain create
  // route return the same structured 409 envelope, so this works for every
  // submit path. Returns true when handled (caller should skip the error toast).
  function tryHandleDuplicateConflict(status: number, result: CreateResult): boolean {
    const err = result.error
    if (
      status !== 409 ||
      typeof err !== 'object' ||
      err === null ||
      err.code !== 'SI_CREATE_DUPLICATE_INVOICE_NUMBER'
    ) {
      return false
    }
    // Close the review dialog if it was the path that triggered the conflict;
    // a no-op for the EF/direct paths where it was never opened.
    setShowReview(false)
    setConflict({
      message: err.message || t('duplicate_default_message'),
      existing: err.details?.existing ?? null,
    })
    return true
  }

  // Shared error toast for non-conflict failures.
  function handleCreateError(status: number, result: CreateResult) {
    toast({
      title: t('register_invoice_failed_title'),
      description: getErrorMessage(result, { context: 'supplier_invoice', statusCode: status }),
      variant: 'destructive',
    })
  }

  async function handleUncreditAndRetry() {
    if (!conflict?.existing) return
    const existingId = conflict.existing.id
    const existingNumber = conflict.existing.supplier_invoice_number
    setIsResolvingConflict(true)

    const uncreditRes = await fetch(
      `/api/supplier-invoices/${existingId}/uncredit`,
      { method: 'POST' },
    )
    const uncreditResult = await uncreditRes.json()
    if (!uncreditRes.ok) {
      toast({
        title: t('uncredit_failed_title'),
        description: getErrorMessage(uncreditResult, { context: 'supplier_invoice', statusCode: uncreditRes.status }),
        variant: 'destructive',
      })
      setIsResolvingConflict(false)
      return
    }

    setConflict(null)

    if (!pendingData) {
      setIsResolvingConflict(false)
      return
    }

    const { ok, status, result } = await postCreate(pendingData)
    setIsResolvingConflict(false)

    if (ok && result.data) {
      toast({
        title: t('uncredit_and_register_success_title'),
        description: t('arrival_number_label', { number: result.data.arrival_number }),
      })
      reset(pendingData)
      finishCreate(result.data.id)
      return
    }

    toast({
      title: t('uncredit_but_register_failed_title'),
      description: t('uncredit_but_register_failed_description', {
        number: existingNumber,
        reason: getErrorMessage(result, { context: 'supplier_invoice', statusCode: status }),
      }),
      variant: 'destructive',
    })
  }

  function handlePickNewNumber() {
    setConflict(null)
    setTimeout(() => invoiceNumberInputRef.current?.focus(), 0)
  }

  function handleDocumentFilesChange(nextFiles: UploadedFile[]) {
    const retainedKeys = new Set(nextFiles.map((file) => file.uploadKey))
    const removedDocuments = documentFiles.filter(
      (file) => file.id && !retainedKeys.has(file.uploadKey),
    )

    setDocumentFiles(nextFiles)
    for (const document of removedDocuments) {
      void fetch(`/api/documents/${document.id}`, { method: 'DELETE' })
    }
  }

  async function discardUploadedDocument() {
    const ids = documentFiles
      .filter((file) => file.status === 'uploaded' && file.id)
      .map((file) => file.id as string)
    await Promise.allSettled(
      ids.map((documentId) => fetch(`/api/documents/${documentId}`, { method: 'DELETE' })),
    )
  }

  function handleCancel() {
    void discardUploadedDocument().finally(() => {
      if (onCancel) onCancel()
      else router.push(inboxItemId ? '/e/general/invoice-inbox' : '/supplier-invoices')
    })
  }

  // Match-on-create: register the invoice, then match the picked transaction.
  // EF goes straight through (auto-approve included). AB stores the picked
  // transaction and routes through the same review dialog as the plain
  // register flow: handleConfirm picks up the match step on confirmation.
  async function handlePickTransaction(transactionId: string) {
    if (!pendingData) return
    setShowBankPicker(false)

    if (!isEF) {
      setPendingTransactionId(transactionId)
      setShowReview(true)
      return
    }

    setIsSubmitting(true)
    await patchInboxFieldsIfChanged(pendingData)
    const { ok, status, result } = await postCreate(pendingData)

    if (!ok || !result.data) {
      if (!tryHandleDuplicateConflict(status, result)) {
        handleCreateError(status, result)
      }
      setIsSubmitting(false)
      return
    }

    const invoiceId = result.data.id
    const arrivalNumber = result.data.arrival_number

    // Auto-approve before matching, so the invoice is in the 'approved' state
    // that match-supplier-invoice expects (it accepts registered too, but
    // EF's expectation is fully-booked).
    await fetch(`/api/supplier-invoices/${invoiceId}/approve`, { method: 'POST' })

    const matchRes = await fetch(`/api/transactions/${transactionId}/match-supplier-invoice`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ supplier_invoice_id: invoiceId }),
    })
    const matchResult = await matchRes.json()
    setIsSubmitting(false)
    submitModeRef.current = 'register'

    if (matchRes.ok) {
      toast({
        title: t('invoice_registered_and_matched_title'),
        description: t('invoice_registered_and_matched_description', { number: arrivalNumber }),
      })
    } else {
      toast({
        title: t('invoice_registered_match_failed_title'),
        description: getErrorMessage(matchResult, { context: 'supplier_invoice', statusCode: matchRes.status }),
        variant: 'destructive',
      })
    }
    reset(pendingData)
    finishCreate(invoiceId)
  }

  return (
    <div className={bare ? 'space-y-6' : 'space-y-6 max-w-4xl'}>
      {/* In bare (dialog) mode the dialog renders the title. */}
      {!bare && (
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => router.push(inboxItemId ? '/e/general/invoice-inbox' : '/supplier-invoices')}
            aria-label={inboxItemId ? t('back_aria_inbox') : t('back_aria')}
          >
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div>
            <h1 className="font-display text-2xl leading-8 tracking-tight">{t('page_title')}</h1>
          </div>
        </div>
      )}

      {isLoadingInbox && (
        <Card>
          <CardContent className="py-4 flex items-center gap-3 text-sm text-muted-foreground">
            <Loader2 className="h-4 w-4 animate-spin" />
            {t('loading_inbox')}
          </CardContent>
        </Card>
      )}

      {showAISupplierHint && (
        <Card className="border-primary/30 bg-primary/[0.02]">
          <CardContent className="py-4">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div className="flex items-start gap-3">
                <MessageCircle className="h-5 w-5 text-primary shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm font-medium">
                    {t('ai_suggested_supplier', { name: extractedData?.supplier?.name ?? '' })}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {extractedData?.supplier?.orgNumber
                      ? t('ai_org_number', { orgNumber: extractedData.supplier.orgNumber })
                      : t('ai_no_org_number')}
                    {t('ai_supplier_not_in_system')}
                  </p>
                </div>
              </div>
              <Button type="button" size="sm" onClick={openSupplierDialogPrefilled}>
                <Plus className="mr-2 h-4 w-4" />
                {t('create_and_select')}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        {/* Section 1: Faktura */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t('section_invoice')}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Eget utlägg-toggle. När den är på bokas verifikatet direkt mot
                skuld till ägare (2893/2018) istället för leverantörsskuld (2440),
                och fakturan får status "Betalad" direkt. */}
            <div className="flex items-start gap-3 p-3 rounded-md border bg-muted/30">
              <Controller
                name="paid_with_private_funds"
                control={control}
                render={({ field }) => (
                  <Checkbox
                    id="paid_with_private_funds"
                    checked={field.value}
                    onCheckedChange={field.onChange}
                    className="mt-0.5"
                  />
                )}
              />
              <Label htmlFor="paid_with_private_funds" className="cursor-pointer flex-1">
                <span className="text-sm font-medium">{t('paid_privately_label')}</span>
                <span className="block text-[11px] text-muted-foreground font-normal mt-0.5">
                  {isEF ? t('paid_privately_help_ef') : t('paid_privately_help_ab')}
                </span>
              </Label>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>{t('supplier_label')}<RequiredMark /></Label>
                <Controller
                  name="supplier_id"
                  control={control}
                  render={({ field }) => (
                    <Select
                      value={field.value}
                      onValueChange={(v) => {
                        if (v === '__new__') {
                          openSupplierDialogBlank()
                        } else {
                          field.onChange(v)
                        }
                      }}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder={t('supplier_placeholder')} />
                      </SelectTrigger>
                      <SelectContent>
                        {suppliers.map((s) => (
                          <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
                        ))}
                        <SelectItem value="__new__" className="text-primary font-medium">
                          {t('add_new_supplier')}
                        </SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>{t('supplier_invoice_number_label')}<RequiredMark /></Label>
                  <AiFilledIndicator active={aiFlags.invoiceNumber} label="AI-fyllt" />
                </div>
                {(() => {
                  const { ref: rhfRef, ...rest } = register('supplier_invoice_number')
                  return (
                    <Input
                      placeholder={t('supplier_invoice_number_placeholder')}
                      {...rest}
                      ref={(el) => {
                        rhfRef(el)
                        invoiceNumberInputRef.current = el
                      }}
                    />
                  )
                })()}
              </div>
            </div>
            <div className={cn(
              'grid grid-cols-1 gap-4',
              watchedPaidPrivately ? 'sm:grid-cols-1' : 'sm:grid-cols-3',
            )}>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>{t('invoice_date_label')}<RequiredMark /></Label>
                  <AiFilledIndicator active={aiFlags.invoiceDate} label="AI-fyllt" />
                </div>
                <Input type="date" {...register('invoice_date')} />
              </div>
              {!watchedPaidPrivately && (
                <>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label>{t('due_date_label')}<RequiredMark /></Label>
                      <AiFilledIndicator active={aiFlags.dueDate} label="AI-fyllt" />
                    </div>
                    <Input type="date" {...register('due_date')} />
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label>{t('payment_reference_label')}</Label>
                      <AiFilledIndicator
                        active={aiFlags.paymentReference}
                        label="AI-fyllt"
                      />
                    </div>
                    <Input placeholder={t('payment_reference_placeholder')} {...register('payment_reference')} />
                  </div>
                </>
              )}
            </div>

            {!inboxItemId && (
              <div className="space-y-3 rounded-lg border border-border p-4">
                <div className="flex items-start gap-3">
                  <Paperclip className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
                  <div>
                    <Label>{t('document_label')}</Label>
                    <p className="text-xs text-muted-foreground">{t('document_help')}</p>
                  </div>
                </div>
                <DocumentUploadZone
                  files={documentFiles}
                  onFilesChange={handleDocumentFilesChange}
                  maxFiles={1}
                  disabled={isSubmitting}
                  compact
                />
              </div>
            )}

            {/* Invoice-level default dims (kostnadsställe/projekt): applied to
                every generated journal line; per-row bags in Kontering merge on
                top. Renders only when dimensions are enabled for the company. */}
            {dimensionsEnabled && (
              <div className="space-y-1">
                <div className="max-w-md">
                  <LineDimensionFields
                    dimensions={defaultDims}
                    onChange={setDefaultDimension}
                    inputClassName="h-9"
                  />
                </div>
                <p className="text-xs text-muted-foreground">{t('dimensions_default_hint')}</p>
              </div>
            )}

            {showNoPeriodWarning && (
              <div
                role="alert"
                className="flex items-start gap-3 rounded-lg border border-destructive/40 bg-destructive/10 p-3"
              >
                <AlertCircle className="h-5 w-5 text-destructive mt-0.5 shrink-0" />
                <div className="flex-1 text-sm text-destructive">
                  <p className="font-medium">{t('no_period_warning', { date: watchedInvoiceDate })}</p>
                  <p className="mt-0.5">{t('no_period_help')}</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Section 2: Kontering */}
        <Card>
          <CardHeader className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <CardTitle className="text-base">{t('section_accounting')}</CardTitle>
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="w-full sm:w-auto"
              onClick={() =>
                append({ description: '', amount: 0, account_number: '', vat_rate: 0.25, reverse_charge_rate: 0.25 })
              }
            >
              <Plus className="mr-2 h-4 w-4" />
              {t('add_row')}
            </Button>
          </CardHeader>
          <CardContent>
            {templateAccountNote &&
              (watchedItems ?? []).some((r) => r.account_number === templateAccountNote.account) && (
                <p className="mb-4 flex items-center gap-1.5 text-[11px] text-muted-foreground">
                  <span aria-hidden className="inline-block h-1.5 w-1.5 rounded-full bg-success" />
                  {t('account_from_history', {
                    account: templateAccountNote.account,
                    counterparty: formatCounterpartyName(templateAccountNote.counterparty),
                  })}
                </p>
              )}
            {/* Valuta & moms: kept inline with the line items because they
                drive how each row is interpreted. Hidden defaults (SEK +
                normal moms) collapse to nothing so most users don't see this. */}
            <div className="mb-4 pb-4 border-b grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs">{t('currency_label')}</Label>
                <Controller
                  name="currency"
                  control={control}
                  render={({ field }) => (
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="h-9">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="SEK">SEK</SelectItem>
                        <SelectItem value="EUR">EUR</SelectItem>
                        <SelectItem value="USD">USD</SelectItem>
                        <SelectItem value="GBP">GBP</SelectItem>
                        <SelectItem value="NOK">NOK</SelectItem>
                        <SelectItem value="DKK">DKK</SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
              </div>
              {watchedCurrency !== 'SEK' && (
                <div className="space-y-1.5">
                  <Label className="text-xs">
                    {t('exchange_rate_label')} <span className="text-muted-foreground">{t('exchange_rate_to_sek')}</span>
                  </Label>
                  <Input
                    type="number"
                    step="0.0001"
                    inputMode="decimal"
                    placeholder={t('exchange_rate_placeholder')}
                    className="h-9 text-right tabular-nums"
                    {...register('exchange_rate', {
                      onChange: () => { userTouchedRateRef.current = true },
                    })}
                  />
                </div>
              )}
              <div
                className={cn(
                  'flex items-center gap-2',
                  watchedCurrency === 'SEK' ? 'sm:col-span-2' : ''
                )}
              >
                <Controller
                  name="reverse_charge"
                  control={control}
                  render={({ field }) => (
                    <Checkbox
                      id="reverse_charge"
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  )}
                />
                <Label htmlFor="reverse_charge" className="text-xs cursor-pointer">
                  {t('reverse_charge_label')}
                  <span className="block text-[11px] text-muted-foreground font-normal mt-0.5">
                    {t('reverse_charge_help')}
                  </span>
                </Label>
              </div>
            </div>

            {/* Non-blocking account-range hint for reverse charge (#863 item 2) */}
            {rcAccountWarningRows.length > 0 && (
              <div
                role="status"
                className="mb-4 flex items-start gap-2 rounded-lg border border-warning/30 bg-warning/10 p-3"
              >
                <AlertTriangle className="h-4 w-4 text-warning-foreground mt-0.5 shrink-0" />
                <p className="text-sm text-warning-foreground">
                  {t('rc_account_warning', {
                    count: rcAccountWarningRows.length,
                    rows: rcAccountWarningRows.map((i) => i + 1).join(', '),
                  })}
                </p>
              </div>
            )}

            {/* Non-blocking omvand-skattskyldighet hint for foreign suppliers
                invoiced at 0 % VAT (#1042). Mutually exclusive with the banner
                above: that one needs the switch on, this one needs it off. */}
            {foreignZeroVatRows.length > 0 && (
              <div
                role="status"
                className="mb-4 flex items-start gap-2 rounded-lg border border-warning/30 bg-warning/10 p-3"
              >
                <AlertTriangle className="h-4 w-4 text-warning-foreground mt-0.5 shrink-0" />
                <p className="text-sm text-warning-foreground">
                  {t('foreign_zero_vat_warning', {
                    count: foreignZeroVatRows.length,
                    rows: foreignZeroVatRows.map((i) => i + 1).join(', '),
                  })}
                </p>
              </div>
            )}

            {/* Desktop table */}
            <div className="hidden sm:block">
              <table className="w-full text-sm">
                <thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
                  <tr className="border-b text-left">
                    <th className="pb-2 w-28">{t('col_account')}</th>
                    <th className="pb-2">{t('col_description')}</th>
                    <th className="pb-2 w-32">{t('col_amount_excl')}</th>
                    <th className="pb-2 w-36">{watchedReverseCharge ? t('col_rc_vat_rate') : t('col_vat_rate')}</th>
                    <th className="pb-2 w-24 text-right">{watchedReverseCharge ? t('col_rc_vat') : t('col_vat')}</th>
                    <th className="pb-2 w-8"></th>
                  </tr>
                </thead>
                <tbody>
                  {fields.map((field, index) => (
                    <Fragment key={field.id}>
                    <tr className={cn('align-top', (canUseAccrual && isAccrualOpen(index)) || (dimensionsEnabled && isDimOpen(index)) ? 'border-0' : 'border-b last:border-0')}>
                      <td className="py-2 pr-2">
                        <Controller
                          name={`items.${index}.account_number`}
                          control={control}
                          render={({ field: f }) => (
                            <AccountCombobox
                              value={f.value}
                              accounts={accounts}
                              onChange={(val) => handleAccountChange(index, val)}
                            />
                          )}
                        />
                      </td>
                      <td className="py-2 pr-2">
                        <Controller
                          name={`items.${index}.description`}
                          control={control}
                          render={({ field }) => (
                            <Input
                              placeholder={t('description_placeholder')}
                              ref={field.ref}
                              value={field.value ?? ''}
                              onChange={field.onChange}
                              onBlur={field.onBlur}
                            />
                          )}
                        />
                      </td>
                      <td className="py-2 pr-2">
                        <Controller
                          name={`items.${index}.amount`}
                          control={control}
                          render={({ field }) => (
                            <Input
                              type="number"
                              step="0.01"
                              inputMode="decimal"
                              placeholder="0,00"
                              className="text-right tabular-nums"
                              value={field.value || ''}
                              onChange={(e) => field.onChange(e.target.value === '' ? 0 : parseFloat(e.target.value) || 0)}
                            />
                          )}
                        />
                      </td>
                      <td className="py-2 pr-2">
                        {watchedReverseCharge ? (
                          <Controller
                            name={`items.${index}.reverse_charge_rate`}
                            control={control}
                            render={({ field: f }) => (
                              <RcRateSelect value={f.value ?? 0.25} onChange={f.onChange} />
                            )}
                          />
                        ) : (
                          <Controller
                            name={`items.${index}.vat_rate`}
                            control={control}
                            render={({ field: f }) => (
                              <VatRateCell value={f.value} onChange={f.onChange} />
                            )}
                          />
                        )}
                      </td>
                      <td className="py-2 pr-2 text-right tabular-nums text-muted-foreground">
                        {formatAmount(itemTotals[index]?.vatAmount ?? 0)}
                      </td>
                      <td className="py-2 pt-3">
                        <div className="flex items-center">
                          {dimensionsEnabled && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              onClick={() => toggleDimensions(index)}
                              aria-label={t('row_dimensions_aria', { index: index + 1 })}
                              aria-pressed={isDimOpen(index)}
                              title={t('row_dimensions_title')}
                            >
                              <Tags
                                className={cn(
                                  'h-4 w-4',
                                  isDimOpen(index) ? 'text-foreground' : 'text-muted-foreground',
                                )}
                              />
                            </Button>
                          )}
                          {canUseAccrual && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              onClick={() => toggleAccrual(index)}
                              aria-label={ta('row_toggle_aria', { index: index + 1 })}
                              aria-pressed={isAccrualOpen(index)}
                              title={ta('row_toggle')}
                            >
                              <CalendarClock
                                className={cn(
                                  'h-4 w-4',
                                  isAccrualOpen(index) ? 'text-foreground' : 'text-muted-foreground',
                                )}
                              />
                            </Button>
                          )}
                          {fields.length > 1 && (
                            <Button type="button" variant="ghost" size="icon" onClick={() => remove(index)} aria-label={t('remove_row_aria', { index: index + 1 })}>
                              <Trash2 className="h-4 w-4 text-muted-foreground" />
                            </Button>
                          )}
                        </div>
                      </td>
                    </tr>
                    {canUseAccrual && isAccrualOpen(index) && (
                      <tr className={cn(dimensionsEnabled && isDimOpen(index) ? 'border-0' : 'border-b last:border-0')}>
                        <td colSpan={6} className="pb-3">
                          {renderAccrualPanel(index, `accrual-desktop-${index}`)}
                        </td>
                      </tr>
                    )}
                    {dimensionsEnabled && isDimOpen(index) && (
                      <tr className="border-b last:border-0">
                        <td colSpan={6} className="pb-3">
                          {renderDimensionsPanel(index)}
                        </td>
                      </tr>
                    )}
                    </Fragment>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile cards */}
            <div className="sm:hidden space-y-4">
              {fields.map((field, index) => (
                <div key={field.id} className="border rounded-lg p-3 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-muted-foreground">{t('row_label', { index: index + 1 })}</span>
                    <div className="flex items-center">
                      {dimensionsEnabled && (
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          onClick={() => toggleDimensions(index)}
                          aria-label={t('row_dimensions_aria', { index: index + 1 })}
                          aria-pressed={isDimOpen(index)}
                          title={t('row_dimensions_title')}
                        >
                          <Tags
                            className={cn(
                              'h-4 w-4',
                              isDimOpen(index) ? 'text-foreground' : 'text-muted-foreground',
                            )}
                          />
                        </Button>
                      )}
                      {canUseAccrual && (
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          onClick={() => toggleAccrual(index)}
                          aria-label={ta('row_toggle_aria', { index: index + 1 })}
                          aria-pressed={isAccrualOpen(index)}
                          title={ta('row_toggle')}
                        >
                          <CalendarClock
                            className={cn(
                              'h-4 w-4',
                              isAccrualOpen(index) ? 'text-foreground' : 'text-muted-foreground',
                            )}
                          />
                        </Button>
                      )}
                      {fields.length > 1 && (
                        <Button type="button" variant="ghost" size="icon" onClick={() => remove(index)} aria-label={t('remove_row_aria', { index: index + 1 })}>
                          <Trash2 className="h-4 w-4 text-muted-foreground" />
                        </Button>
                      )}
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label className="text-xs text-muted-foreground">{t('col_account')}</Label>
                    <Controller
                      name={`items.${index}.account_number`}
                      control={control}
                      render={({ field: f }) => (
                        <AccountCombobox value={f.value} accounts={accounts} onChange={(val) => handleAccountChange(index, val)} />
                      )}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-xs text-muted-foreground">{t('col_description')}</Label>
                    <Controller
                      name={`items.${index}.description`}
                      control={control}
                      render={({ field }) => (
                        <Input
                          placeholder={t('description_placeholder')}
                          ref={field.ref}
                          value={field.value ?? ''}
                          onChange={field.onChange}
                          onBlur={field.onBlur}
                        />
                      )}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">{t('col_amount_excl')}</Label>
                      <Controller
                        name={`items.${index}.amount`}
                        control={control}
                        render={({ field }) => (
                          <Input
                            type="number"
                            step="0.01"
                            inputMode="decimal"
                            placeholder="0,00"
                            className="text-right tabular-nums"
                            value={field.value || ''}
                            onChange={(e) => field.onChange(e.target.value === '' ? 0 : parseFloat(e.target.value) || 0)}
                          />
                        )}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label className="text-xs text-muted-foreground">{watchedReverseCharge ? t('col_rc_vat_rate') : t('col_vat_rate')}</Label>
                      {watchedReverseCharge ? (
                        <Controller
                          name={`items.${index}.reverse_charge_rate`}
                          control={control}
                          render={({ field: f }) => (
                            <RcRateSelect value={f.value ?? 0.25} onChange={f.onChange} />
                          )}
                        />
                      ) : (
                        <Controller
                          name={`items.${index}.vat_rate`}
                          control={control}
                          render={({ field: f }) => (
                            <VatRateCell value={f.value} onChange={f.onChange} />
                          )}
                        />
                      )}
                    </div>
                  </div>
                  <div className="pt-1 border-t flex items-center justify-between">
                    <span className="text-xs text-muted-foreground">{watchedReverseCharge ? t('col_rc_vat') : t('col_vat')}</span>
                    <span className="tabular-nums text-muted-foreground">
                      {formatAmount(itemTotals[index]?.vatAmount ?? 0)}
                    </span>
                  </div>
                  {canUseAccrual && isAccrualOpen(index) &&
                    renderAccrualPanel(index, `accrual-mobile-${index}`)}
                  {dimensionsEnabled && isDimOpen(index) && renderDimensionsPanel(index)}
                </div>
              ))}
            </div>

            {/* AI totals comparison: only when extracted */}
            {extractedData?.totals && (extractedData.totals.subtotal != null || extractedData.totals.total != null) && (
              <div className="mt-4 pt-4 border-t flex flex-wrap gap-2 text-xs">
                <span className="text-muted-foreground">{t('ai_totals_label')}</span>
                {extractedData.totals.subtotal != null && (
                  <span className="px-2 py-1 rounded bg-muted tabular-nums">
                    {t('ai_net', { amount: formatAmount(extractedData.totals.subtotal) })}
                  </span>
                )}
                {extractedData.totals.vatAmount != null && (
                  <span className="px-2 py-1 rounded bg-muted tabular-nums">
                    {t('ai_vat', { amount: formatAmount(extractedData.totals.vatAmount) })}
                  </span>
                )}
                {extractedData.totals.total != null && (
                  <span className="px-2 py-1 rounded bg-muted tabular-nums">
                    {t('ai_total', { amount: formatAmount(extractedData.totals.total) })}
                  </span>
                )}
              </div>
            )}

            {/* Computed totals */}
            <div className="mt-4 pt-4 border-t space-y-2">
              <div className="flex justify-between sm:justify-end sm:gap-8">
                <span className="text-muted-foreground">{t('net_excl_vat')}</span>
                <span className="tabular-nums sm:w-32 text-right">{formatCurrency(subtotal, watchedCurrency)}</span>
              </div>
              <div className="flex justify-between sm:justify-end sm:gap-8">
                <span className="text-muted-foreground">
                  {watchedReverseCharge ? t('vat_reverse_charge') : t('vat_label_short')}
                </span>
                <span className="tabular-nums sm:w-32 text-right">{formatCurrency(totalVat, watchedCurrency)}</span>
              </div>
              {displayRounding.applies && (
                <div className="flex justify-between sm:justify-end sm:gap-8">
                  <span className="text-muted-foreground">{t('ore_rounding_label')}</span>
                  <span className="tabular-nums sm:w-32 text-right">{formatCurrency(displayRounding.roundingDelta, watchedCurrency)}</span>
                </div>
              )}
              <div className="flex justify-between sm:justify-end sm:gap-8 font-bold text-lg">
                <span>{t('total_label')}</span>
                <span className="tabular-nums sm:w-32 text-right">{formatCurrency(displayRounding.displayed, watchedCurrency)}</span>
              </div>
              {/* Öresavrundning: display-only rounding of the displayed total to
                  whole kronor (SEK only). The registered amount and the booked
                  verifikat keep the exact öre; this only changes what's shown. */}
              {(watchedCurrency || 'SEK') === 'SEK' && (
                <div className="flex items-center justify-between gap-4 pt-3 mt-1 border-t">
                  <div className="space-y-0.5">
                    <Label htmlFor="ore-rounding" className="text-sm">{t('ore_rounding_label')}</Label>
                    <p className="text-xs text-muted-foreground">{t('ore_rounding_help')}</p>
                  </div>
                  <Switch
                    id="ore-rounding"
                    checked={oreRounding}
                    onCheckedChange={setOreRounding}
                    aria-label={t('ore_rounding_label')}
                  />
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Section 3: Övrigt (collapsible) */}
        <Card>
          <CardHeader
            className="cursor-pointer hover:bg-muted/30 transition-colors"
            onClick={() => setAdvancedOpen(!advancedOpen)}
          >
            <div className="flex items-center justify-between">
              <CardTitle className="text-base">{t('section_other')}</CardTitle>
              <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform ${advancedOpen ? 'rotate-180' : ''}`} />
            </div>
          </CardHeader>
          {advancedOpen && (
            <CardContent className="space-y-4 pt-0">
              <div className="space-y-2">
                <Label>{t('delivery_date_label')}</Label>
                <Input type="date" {...register('delivery_date')} />
              </div>
              <div className="space-y-2">
                <Label>{t('notes_label')}</Label>
                <Textarea placeholder={t('notes_placeholder')} {...register('notes')} />
              </div>
            </CardContent>
          )}
        </Card>

        {/* Submit */}
        <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 sm:gap-4">
          <Button
            type="button"
            variant="outline"
            className="w-full sm:w-auto"
            onClick={handleCancel}
            disabled={isSubmitting || documentUploadInProgress}
          >
            {t('cancel')}
          </Button>
          {!watchedPaidPrivately && (
            <Button
              type="submit"
              variant="outline"
              className="w-full sm:w-auto"
              disabled={isSubmitting || documentUploadInProgress || !canWrite || showNoPeriodWarning}
              onClick={() => { submitModeRef.current = 'register_and_match' }}
              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
            >
              <Link2 className="mr-2 h-4 w-4" />
              {t('register_and_mark_paid')}
            </Button>
          )}
          <Button
            type="submit"
            disabled={isSubmitting || documentUploadInProgress || !canWrite || showNoPeriodWarning}
            className="w-full sm:w-auto"
            onClick={() => { submitModeRef.current = 'register' }}
            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                {t('registering')}
              </>
            ) : !canWrite ? (
              <>
                <Lock className="mr-2 h-4 w-4" />
                {watchedPaidPrivately ? t('register_expense') : isEF ? t('register_invoice') : t('review_and_register')}
              </>
            ) : watchedPaidPrivately ? (
              t('register_expense')
            ) : isEF ? (
              t('register_invoice')
            ) : (
              t('review_and_register')
            )}
          </Button>
        </div>
      </form>

      {/* Review dialog (AB only: also shown after a bank transaction is picked
          in the register-and-match flow). */}
      {pendingData && !isEF && showReview && (() => {
        const selectedSupplier = suppliers.find((s) => s.id === pendingData.supplier_id)
        if (!selectedSupplier) return null
        return (
          <ConfirmationDialog
            open={showReview}
            onOpenChange={setShowReview}
            onConfirm={handleConfirm}
            isSubmitting={isSubmitting}
            title={t('review_dialog_title')}
            warningText={t('review_dialog_warning')}
            confirmLabel={t('review_dialog_confirm')}
          >
            <SupplierInvoiceReviewContent
              supplier={selectedSupplier}
              invoiceNumber={pendingData.supplier_invoice_number}
              invoiceDate={pendingData.invoice_date}
              dueDate={pendingData.due_date}
              deliveryDate={pendingData.delivery_date || undefined}
              currency={pendingData.currency}
              exchangeRate={pendingData.exchange_rate || undefined}
              reverseCharge={pendingData.reverse_charge}
              paymentReference={pendingData.payment_reference || undefined}
              items={pendingData.items}
              subtotal={subtotal}
              totalVat={totalVat}
              total={total}
            />
          </ConfirmationDialog>
        )
      })()}

      {/* Bank transaction picker for "Registrera & markera som betald" */}
      <BankTransactionPicker
        open={showBankPicker}
        onOpenChange={(open) => {
          setShowBankPicker(open)
          if (!open) {
            submitModeRef.current = 'register'
            setPendingTransactionId(null)
          }
        }}
        targetAmount={total}
        targetCurrency={watchedCurrency}
        onPick={handlePickTransaction}
      />

      {/* New supplier dialog */}
      <Dialog open={showNewSupplier} onOpenChange={setShowNewSupplier}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{t('new_supplier_dialog_title')}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>{t('new_supplier_name_label')}<RequiredMark /></Label>
              <Input
                placeholder={t('new_supplier_name_placeholder')}
                value={newSupplier.name}
                onChange={(e) => setNewSupplier((p) => ({ ...p, name: e.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label>{t('new_supplier_type_label')}</Label>
              <Select
                value={newSupplier.supplier_type}
                onValueChange={(v) => setNewSupplier((p) => ({ ...p, supplier_type: v }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="swedish_business">{t('supplier_type_swedish')}</SelectItem>
                  <SelectItem value="eu_business">{t('supplier_type_eu')}</SelectItem>
                  <SelectItem value="non_eu_business">{t('supplier_type_non_eu')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>{t('new_supplier_org_number_label')}</Label>
                <Input
                  placeholder="XXXXXX-XXXX"
                  value={newSupplier.org_number}
                  onChange={(e) => setNewSupplier((p) => ({ ...p, org_number: e.target.value }))}
                />
              </div>
              <div className="space-y-2">
                <Label>{t('new_supplier_vat_number_label')}</Label>
                <Input
                  placeholder="SE..."
                  value={newSupplier.vat_number}
                  onChange={(e) => setNewSupplier((p) => ({ ...p, vat_number: e.target.value }))}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label>{t('new_supplier_address_label')}</Label>
              <Input
                placeholder={t('new_supplier_address_placeholder')}
                value={newSupplier.address_line1}
                onChange={(e) => setNewSupplier((p) => ({ ...p, address_line1: e.target.value }))}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>{t('new_supplier_bankgiro_label')}</Label>
                <Input
                  placeholder="XXX-XXXX"
                  value={newSupplier.bankgiro}
                  onChange={(e) => setNewSupplier((p) => ({ ...p, bankgiro: e.target.value }))}
                />
              </div>
              <div className="space-y-2">
                <Label>{t('new_supplier_plusgiro_label')}</Label>
                <Input
                  placeholder="XXXXXX-X"
                  value={newSupplier.plusgiro}
                  onChange={(e) => setNewSupplier((p) => ({ ...p, plusgiro: e.target.value }))}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label>{t('new_supplier_default_account_label')}</Label>
              <Input
                placeholder={t('new_supplier_default_account_placeholder')}
                value={newSupplier.default_expense_account}
                onChange={(e) => setNewSupplier((p) => ({ ...p, default_expense_account: e.target.value }))}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowNewSupplier(false)}>
              {t('cancel')}
            </Button>
            <Button onClick={handleCreateSupplier} disabled={isCreatingSupplier}>
              {isCreatingSupplier ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  {t('creating')}
                </>
              ) : (
                t('create_supplier_button')
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Duplicate-number conflict dialog */}
      <Dialog open={!!conflict} onOpenChange={(open) => !open && setConflict(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertCircle className="h-5 w-5 text-destructive" />
              {t('duplicate_dialog_title')}
            </DialogTitle>
            <DialogDescription>{conflict?.message}</DialogDescription>
          </DialogHeader>
          <div className="flex flex-col gap-2">
            {conflict?.existing && (
              <Button
                variant="outline"
                onClick={() => router.push(`/supplier-invoices/${conflict.existing!.id}`)}
                disabled={isResolvingConflict}
              >
                {t('show_existing_invoice')}
              </Button>
            )}
            {conflict?.existing?.status === 'credited' && (
              <Button onClick={handleUncreditAndRetry} disabled={isResolvingConflict}>
                {isResolvingConflict ? t('processing') : t('uncredit_and_retry')}
              </Button>
            )}
            <Button variant="ghost" onClick={handlePickNewNumber} disabled={isResolvingConflict}>
              {t('use_different_number')}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}