accounted/components/extensions/general/InvoiceInboxWorkspace.tsx

'use client'

import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
import { useCompanySettings } from '@/lib/reference-data/hooks'
import { useTranslations } from 'next-intl'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Skeleton } from '@/components/ui/skeleton'
import { AttnLine } from '@/components/ui/attn-line'
import AiFilledIndicator from '@/components/ui/ai-filled-indicator'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { useToast } from '@/components/ui/use-toast'
import {
  Inbox,
  Upload,
  Mail,
  FileText,
  Copy,
  RotateCcw,
  Trash2,
  Check,
  Loader2,
  AlertTriangle,
  ArrowRight,
  Plus,
  Link2,
  ExternalLink,
  FileQuestion,
  Search,
  ChevronDown,
  ChevronRight,
  Sparkles,
  Maximize2,
  Globe,
} from 'lucide-react'
import Link from 'next/link'
import { cn, formatCurrency, formatDate, formatDateLong } from '@/lib/utils'
import { QUIET_LINK_CLASS } from '@/components/ui/dry-table'
import { GoogleMark, MicrosoftMark } from '@/components/ui/provider-marks'
import { StartCard } from '@/components/dashboard/StartCard'
import EditKonteringDialog from '@/components/extensions/general/EditKonteringDialog'
import InvoiceInboxSkeleton from '@/components/extensions/general/InvoiceInboxSkeleton'
import { WhatsAppMark } from '@/components/extensions/general/WhatsAppMark'
import { useReceiptHunt } from '@/components/extensions/general/use-receipt-hunt'
import { createClient } from '@/lib/supabase/client'
import { fetchWithTimeout } from '@/lib/http/fetch-with-timeout'
import { copyInboxAddress, type AddressCopyState } from '@/components/extensions/general/inbox-address-copy'
import { useCapability, useCompanyOptional } from '@/contexts/CompanyContext'
import { CAPABILITY } from '@/lib/entitlements/keys'
import { useBranding } from '@/lib/branding/brand-context'
import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
import type { InboxChannelContext, InvoiceExtractionResult, InboxItemSource } from '@/types'
import { renderChannelParticipant } from '@/lib/documents/channel-context-notes'
import { selectInboxFields } from '@/lib/documents/inbox-field-visibility'
import BookDirectlyDialog from '@/components/extensions/general/BookDirectlyDialog'
import NewSupplierInvoiceDialog from '@/components/supplier-invoices/NewSupplierInvoiceDialog'
import BulkBookInboxDialog from '@/components/extensions/general/BulkBookInboxDialog'
// InboxCustomDomainDialog (egen domän) is built but gated off: see
// INBOX_CUSTOM_DOMAINS_ENABLED in extensions/general/invoice-inbox/index.ts.
import TransactionMatchPicker from '@/components/inbox/TransactionMatchPicker'
import { useAgentSheet } from '@/components/agent/AgentSheetProvider'
import {
  getErrorMessage as getUserErrorMessage,
  getResponseErrorMessage,
} from '@/lib/errors/get-error-message'
import { notifySessionExpired } from '@/lib/auth/session-timeout-shared'
import { exceedsHostedUploadLimit, tooLargeMessage } from '@/lib/documents/upload-size'
import { shrinkImageForUpload } from '@/lib/documents/shrink-image'

type AccountingMethod = 'accrual' | 'cash'

/**
 * A failure whose message is already the sentence to show the user, resolved
 * where the response was still in hand.
 *
 * The old `throw new Error(json.error ?? '…')` lost two things. A body that
 * is not JSON (an HTML error page, an empty 502, a request rejected before it
 * reached the route) made `res.json()` itself throw, and `error` is an object
 * on the structured envelope, which stringified to "[object Object]". Both
 * ended at the generic "Något gick fel. Försök igen." An expired session on a
 * mobile tab is exactly the second shape, so the one failure the user could
 * have fixed in a tap was also the one that said the least.
 */
class ResolvedFailure extends Error {
  constructor(message: string, readonly status: number) {
    super(message)
  }
}

/**
 * Read a failed response into a displayable message, and let the session
 * controller know if the reason was an expired session (it redirects to
 * /login; the toast below is what the user sees on the way there).
 */
async function resolveFailure(response: Response): Promise<ResolvedFailure> {
  notifySessionExpired(response)
  return new ResolvedFailure(await getResponseErrorMessage(response), response.status)
}

function failureText(err: unknown): string {
  return err instanceof ResolvedFailure ? err.message : getUserErrorMessage(err)
}

/**
 * Leave a server-side trace when an upload fails.
 *
 * A request the middleware or the platform answers before the route runs
 * leaves nothing behind in the function logs, so "uploading from my phone
 * just fails" was untraceable: the successful uploads were all we could see.
 * /api/log is the existing rate-limited, PII-redacting client sink, and it is
 * the one API path exempt from the session-timeout gate, so it still records
 * the report when an expired session is the very thing being reported.
 * Metadata only, never the document.
 */
function reportUploadFailure(report: {
  status: number
  size: number
  type: string
  reason: string
}): void {
  void fetch('/api/log', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ message: 'underlag upload failed', extra: report }),
  }).catch(() => {
    // Reporting the failure must never become a second failure.
  })
}

// ── Types ────────────────────────────────────────────────────

interface InboxItem {
  id: string
  // 'processing' is the staged-upload in-flight state: the row exists (the
  // instant receipt ack) but the deferred AI extraction has not landed;
  // extracted_data is null until the realtime flip to 'received'.
  status: 'received' | 'processing' | 'error'
  source: InboxItemSource
  created_at: string
  email_from: string | null
  email_subject: string | null
  email_received_at: string | null
  // Plain-text body of the received email. Always captured, but only worth
  // showing when the mail carried no usable attachment: that is the case where
  // the body IS the content (a forwarding-confirmation code from Gmail, an
  // invoice pasted inline, a note from the sender).
  email_body_text: string | null
  document_id: string | null
  extracted_data: InvoiceExtractionResult | null
  matched_supplier_id: string | null
  matched_transaction_id: string | null
  created_supplier_invoice_id: string | null
  created_journal_entry_id: string | null
  // The verifikat that anchors the matched transaction when it is already
  // booked (directly or via a bulk-book samlingsverifikat). Server-derived by
  // GET /items: created_journal_entry_id is UNIQUE per verifikat, so on a
  // samlingsverifikat only one of N items can carry the stamp; this field is
  // what lets the rest read as booked. Absent on client-side placeholders.
  matched_transaction_journal_entry_id?: string | null
  error_message: string | null
  // True when AI extraction was skipped: either because the upload caller
  // passed skip_extraction=true (MCP/agent path) or because the server's
  // page-count gate skipped a PDF above the auto-extract limit (issue #553).
  // Distinct from status='error' (extraction failed) and from extracted_data
  // having empty fields (extraction ran but found nothing).
  extraction_skipped: boolean
  // Verified human answers from the delivering chat (source='whatsapp'):
  // photo caption, representation deltagare + syfte, sender note, and the
  // open-question state. Null/absent for email and upload items.
  channel_context?: InboxChannelContext | null
  // Set client-side only while a manual upload is in flight. Replaced by a
  // real server-side row once the AI extraction completes.
  isPlaceholder?: boolean
  fileName?: string
}

interface InboxAddress {
  address: string
  local_part: string
  status: string
}

// How far the underlag behind the selected row got.
//
// `none` is the only state that may claim "Inget underlag bifogat": it means the
// row carries no document_id at all. A failed or hung metadata read is `error`,
// never `none`: the document exists (the row points at it), we just could not
// load it, and telling the user their underlag is missing invites a duplicate
// upload or the conclusion that the receipt is gone (BFL 7 kap 2 § retention).
type DocumentLoadState = 'none' | 'loading' | 'ready' | 'error'

// A signed-URL lookup is one indexed row plus a storage sign call: seconds at
// worst, even on a cold start. 15s leaves several times that headroom while
// still ending the spinner instead of leaving it turning forever.
const DOCUMENT_FETCH_TIMEOUT_MS = 15_000

// ── Helpers ──────────────────────────────────────────────────

function timeAgo(iso: string): string {
  const ms = Date.now() - new Date(iso).getTime()
  const min = Math.floor(ms / 60000)
  if (min < 1) return 'nyss'
  if (min < 60) return `${min} min sedan`
  const h = Math.floor(min / 60)
  if (h < 24) return `${h} h sedan`
  const d = Math.floor(h / 24)
  if (d < 30) return `${d} d sedan`
  return new Date(iso).toLocaleDateString('sv-SE')
}

function pickAmount(item: InboxItem): number | null {
  return item.extracted_data?.totals?.total ?? null
}

function pickCurrency(item: InboxItem): string {
  return item.extracted_data?.invoice?.currency ?? 'SEK'
}

function pickSupplierName(item: InboxItem): string | null {
  return item.extracted_data?.supplier?.name ?? null
}

function pickInvoiceDate(item: InboxItem): string | null {
  return item.extracted_data?.invoice?.invoiceDate ?? null
}

// True when extraction produced at least one usable field. Distinguishes a
// deterministically-parsed underlag (fields present: render the editable
// list) from an item whose extracted_data is null/empty (AI never ran, or ran
// and found nothing). Currency is ignored because emptyExtraction() seeds it
// to 'SEK', so it is never a sign that extraction actually happened.
function hasAnyExtractedField(data: InvoiceExtractionResult | null): boolean {
  if (!data) return false
  const s = data.supplier
  const inv = data.invoice
  const t = data.totals
  return Boolean(
    s?.name || s?.orgNumber || s?.vatNumber || s?.bankgiro || s?.plusgiro ||
    inv?.invoiceNumber || inv?.invoiceDate || inv?.dueDate || inv?.paymentReference ||
    t?.subtotal != null || t?.vatAmount != null || t?.total != null ||
    (data.lineItems?.length ?? 0) > 0 || (data.vatBreakdown?.length ?? 0) > 0
  )
}

/**
 * The fields the extraction is scored against, in the order a person reads
 * them. Deliberately the same list hasAnyExtractedField checks, so the summary
 * cannot claim a field the "is anything here at all" test does not count.
 */
const EXTRACTED_FIELD_ACCESSORS: ((d: InvoiceExtractionResult) => unknown)[] = [
  (d) => d.supplier?.name,
  (d) => d.supplier?.orgNumber,
  (d) => d.supplier?.vatNumber,
  (d) => d.supplier?.bankgiro,
  (d) => d.supplier?.plusgiro,
  (d) => d.invoice?.invoiceNumber,
  (d) => d.invoice?.invoiceDate,
  (d) => d.invoice?.dueDate,
  (d) => d.invoice?.paymentReference,
  (d) => d.totals?.subtotal,
  (d) => d.totals?.vatAmount,
  (d) => d.totals?.total,
]

export const EXTRACTED_FIELD_COUNT = EXTRACTED_FIELD_ACCESSORS.length

/** How many of them the extraction actually filled in. */
function countExtractedFields(data: InvoiceExtractionResult | null): number {
  if (!data) return 0
  return EXTRACTED_FIELD_ACCESSORS.reduce(
    (n, get) => n + (get(data) != null && get(data) !== '' ? 1 : 0),
    0,
  )
}

// Lifecycle stage of an inbox item. Single source of truth shared by the list
// filter, the count pills, and the row icons so they never drift apart.
//
// Precedence mirrors the FieldsRail: a booked item (supplier invoice, a
// direct journal entry, OR a matched transaction that is itself booked) is
// done and drops out of the active inbox. A matched-but-unbooked item is
// "linked": it STAYS in the inbox as its own category because the bank
// payment still needs booking (a document attached to a transaction is not
// the same as a booked one). An extraction failure is "error"; everything
// else needs a first action.
type InboxStatus = 'needs_action' | 'processing' | 'linked' | 'booked' | 'error'

function deriveInboxStatus(item: InboxItem): InboxStatus {
  if (item.created_supplier_invoice_id || item.created_journal_entry_id) return 'booked'
  if (item.matched_transaction_journal_entry_id) return 'booked'
  // Staged upload mid-extraction. Outranks 'linked': a transaction-anchored
  // upload is matched from birth, but offering the booking bridge before the
  // fields exist would book from empty data. Transient (seconds): stays in
  // "Att göra" via the todo bucket rather than earning its own pill.
  if (item.status === 'processing') return 'processing'
  if (item.matched_transaction_id) return 'linked'
  if (item.status === 'error') return 'error'
  return 'needs_action'
}

// ── Skeleton ─────────────────────────────────────────────────
// Shared with app/(dashboard)/e/[sector]/[slug]/loading.tsx so the route
// fallback and this client-fetch shell are one silhouette with no reflow.

const WorkspaceSkeleton = InvoiceInboxSkeleton

// ── Main component ───────────────────────────────────────────

export default function InvoiceInboxWorkspace(_props: WorkspaceComponentProps) {
  const { toast } = useToast()
  const t = useTranslations('inbox_workspace')
  const tStart = useTranslations('start_cards')
  const dismissKeyCompanyId = useCompanyOptional()?.company?.id ?? null
  const fileInputRef = useRef<HTMLInputElement | null>(null)
  // Its own input: sharing the header's would upload without the purchase.
  const purchaseFileInputRef = useRef<HTMLInputElement | null>(null)
  const { openAgentSheet, identity } = useAgentSheet()

  const [items, setItems] = useState<InboxItem[]>([])
  const [isLoading, setIsLoading] = useState(true)
  // The list read failed (non-2xx, unparseable body, or network). Kept apart
  // from "the list is empty": with no list at all we know nothing about the
  // inbox and must not render an authoritative "Inkorgen är tom".
  const [itemsLoadFailed, setItemsLoadFailed] = useState(false)
  const [selectedId, setSelectedId] = useState<string | null>(null)
  // List filter + search (client-side over the already-fetched items list).
  // Defaults to 'todo': the active inbox (everything not yet booked), so
  // booked underlag drop out of the default view while attached-but-unbooked
  // ones stay visible.
  // 'missing' is the odd one out: it lists bank purchases, not inbox items, so
  // the list and both panes branch on it.
  const [filter, setFilter] = useState<
    'todo' | 'linked' | 'booked' | 'error' | 'all' | 'missing' | 'portal'
  >('todo')
  const [searchTerm, setSearchTerm] = useState('')
  // Bulk selection. Items linked to a supplier invoice are skipped at delete
  // time (server returns 409); we still allow them to be selected so the
  // user can see the "X skipped" toast and learn the rule.
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [isBulkDeleting, setIsBulkDeleting] = useState(false)
  // Onboarding card visibility. Hides when all three steps are complete or
  // the user dismissed it. Persisted to localStorage so refresh doesn't
  // revive a dismissed card.
  const [onboardingDismissed, setOnboardingDismissed] = useState(false)
  // Multi-file upload progress. Null when no queue is running. Reflects the
  // sequential progress through a batch ({ total, done }) so the button can
  // show "Laddar X av N…".
  const [uploadQueue, setUploadQueue] = useState<{ total: number; done: number } | null>(null)
  const [selected, setSelected] = useState<InboxItem | null>(null)
  const [docUrl, setDocUrl] = useState<string | null>(null)
  const [docMime, setDocMime] = useState<string | null>(null)
  const [docState, setDocState] = useState<DocumentLoadState>('none')
  // Monotonic tokens for the in-flight detail and document reads. The user
  // can click another row while one is running, but also re-request the SAME
  // item (action refreshes, the processing->received re-select effect), so an
  // id comparison is not enough: only the newest request of each kind may
  // paint its outcome (a detail snapshot, a URL, or an error) onto the pane.
  const detailRequestRef = useRef(0)
  const docRequestRef = useRef(0)
  const [inboxAddress, setInboxAddress] = useState<InboxAddress | null>(null)
  // We asked for the inbox address and did not get an answer we can trust
  // (5xx, network, unparseable). Distinct from a 404, which honestly means no
  // address is provisioned yet.
  const [addressLoadFailed, setAddressLoadFailed] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [isRotating, setIsRotating] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const [bookDirectOpen, setBookDirectOpen] = useState(false)
  // Bulk-book selected underlag (Modell B): the "Bokför valda" selection-bar
  // action. The dialog filters the selection to bookable items itself.
  const [bulkBookOpen, setBulkBookOpen] = useState(false)
  // Match-to-bank-transaction picker (opens when user clicks "Matcha mot
  // transaktion" on an unmatched inbox item).
  const [matchPickerOpen, setMatchPickerOpen] = useState(false)
  // "Skapa leverantörsfaktura" modal for the selected underlag: opens in
  // place (instead of navigating to a form page) so the user lands right back
  // here to pick the next document.
  const [createSupplierInvoiceOpen, setCreateSupplierInvoiceOpen] = useState(false)
  // Cash method users see "Bokför direkt" as the primary CTA; accrual users
  // see "Skapa leverantörsfaktura". Defaults to 'accrual' until we've read
  // the company settings so we don't flicker the CTA order on first paint.
  // The company's bookkeeping method drives the CTA hierarchy; read from the
  // session-cached settings row (lib/reference-data), no request of its own.
  const { settings: companySettings } = useCompanySettings()
  const accountingMethod: AccountingMethod =
    companySettings?.accounting_method === 'cash' ? 'cash' : 'accrual'

  // ── Data loading ───────────────────────────────────────────

  const fetchItems = useCallback(async () => {
    try {
      const res = await fetch('/api/extensions/ext/invoice-inbox/items?limit=500')
      const json = await res.json()
      if (!res.ok) {
        // No list came back, so we cannot say anything about the inbox: the
        // list column renders the failure instead of "Inkorgen är tom".
        setItemsLoadFailed(true)
        return
      }
      const serverItems: InboxItem[] = json.data?.items ?? []
      // Preserve optimistic upload placeholders that haven't resolved to a
      // server row yet. A refetch can now fire mid-upload (a realtime event
      // from an unrelated booking), and a wholesale replace would briefly
      // drop the in-flight placeholder. Placeholders carry a `temp-` id that
      // never collides with a real row, and uploadFile() removes its own
      // placeholder before its fetchItems(), so this never duplicates.
      setItems((prev) => {
        const pending = prev.filter((it) => it.isPlaceholder)
        return pending.length > 0 ? [...pending, ...serverItems] : serverItems
      })
      setItemsLoadFailed(false)
    } catch (err) {
      console.error('[invoice-inbox] fetchItems failed:', err)
      setItemsLoadFailed(true)
    } finally {
      setIsLoading(false)
    }
  }, [])

  const fetchInboxAddress = useCallback(async () => {
    try {
      const res = await fetch('/api/extensions/ext/invoice-inbox/inbox/address')
      if (res.ok) {
        const { data } = await res.json()
        setInboxAddress(data)
        setAddressLoadFailed(false)
        return
      }
      // 404 is the honest "no inbox provisioned yet" answer, so the activate
      // button is the right thing to offer. Anything else (503 without an
      // inbound domain, 500, an HTML error page) leaves us not knowing whether
      // an address exists, and offering "Aktivera inkorgsadress" there is not
      // just wrong copy: handleRotateAddress skips its confirm dialog when
      // inboxAddress is null, so one click would silently retire a live address
      // that suppliers and forwarding rules already point at.
      setInboxAddress(null)
      setAddressLoadFailed(res.status !== 404)
    } catch {
      setAddressLoadFailed(true)
    }
  }, [])

  useEffect(() => {
    fetchItems()
    fetchInboxAddress()
  }, [fetchItems, fetchInboxAddress])

  // Realtime: refetch when any invoice_inbox_items row changes for this
  // company. The inbox is routinely resolved "out of band": the in-app agent
  // sheet commits a staged create_supplier_invoice_from_inbox / book-direct
  // operation, the /pending page approves one, or another tab books it, and
  // none of those paths call this component's fetchItems(). Without this, a
  // booked underlag stayed in "Att göra" until a manual reload (issue #600).
  // RLS scopes the channel to the user's company, so we never receive other
  // tenants' events; we refetch the whole list (rather than patch in place) so
  // the derived status, count pills, and ordering stay authoritative. Mirrors
  // the /pending page subscription (app/(dashboard)/pending/page.tsx).
  useEffect(() => {
    const supabase = createClient()
    const channel = supabase
      .channel('invoice_inbox_items:list')
      .on(
        'postgres_changes',
        { event: '*', schema: 'public', table: 'invoice_inbox_items' },
        () => {
          fetchItems()
        }
      )
      .subscribe()
    return () => {
      void supabase.removeChannel(channel)
    }
  }, [fetchItems])

  // Read the onboarding-dismissed flag from localStorage after mount
  // (SSR-safe: no window access during initial render). Scoped per company:
  // dismissing the card on one company must not hide it on the user's other
  // companies. The legacy unscoped key is honored as "dismissed everywhere"
  // so users who dismissed before the scoping do not get the card back.
  useEffect(() => {
    if (typeof window === 'undefined') return
    try {
      const legacy = window.localStorage.getItem('gnubok.inbox.onboarding.dismissed') === '1'
      const scoped = dismissKeyCompanyId
        ? window.localStorage.getItem(`gnubok.inbox.onboarding.dismissed:${dismissKeyCompanyId}`) === '1'
        : false
      setOnboardingDismissed(legacy || scoped)
    } catch {
      // private browsing: keep default (show card)
    }
  }, [dismissKeyCompanyId])

  const handleDismissOnboarding = useCallback(() => {
    try {
      window.localStorage.setItem(
        dismissKeyCompanyId
          ? `gnubok.inbox.onboarding.dismissed:${dismissKeyCompanyId}`
          : 'gnubok.inbox.onboarding.dismissed',
        '1',
      )
    } catch {
      // ignore; in-memory state is enough for this session
    }
    setOnboardingDismissed(true)
  }, [dismissKeyCompanyId])

  // Onboarding card visibility: derived from real progress so a user who
  // already has a working inbox flow never sees the guide. Once they finish
  // all three steps, the card auto-hides on next render.
  const hasInboxAddress = !!inboxAddress
  const hasAnyItem = items.length > 0
  const hasResolvedItem = items.some(
    (it) =>
      !!it.created_supplier_invoice_id ||
      !!it.matched_transaction_id ||
      !!it.created_journal_entry_id
  )
  // The list read failed and left us with nothing: we do not know whether the
  // inbox is empty. A failed refetch that still has rows on screen is not this.
  const itemsUnknown = itemsLoadFailed && !hasAnyItem
  // Never coach "ladda upp ditt första underlag" off a list we could not read:
  // that step may well be done already.
  const showOnboarding =
    !onboardingDismissed && !itemsUnknown && !(hasInboxAddress && hasAnyItem && hasResolvedItem)

  // ── List filter + search (client-side over the fetched list) ─

  // Purchases with no underlag at all. They are not inbox items and never
  // become them, so they live beside `items` rather than inside it: widening
  // InboxItem to cover a bank row would put a null document, a null extraction
  // and a null status through every consumer of that type.
  const [purchases, setPurchases] = useState<PurchaseWithoutUnderlag[]>([])
  const [selectedPurchaseId, setSelectedPurchaseId] = useState<string | null>(null)

  // Where underlag come from. Three routes in, and the page should say so:
  // the mailboxes we search, WhatsApp for photographed receipts, and the
  // forwarding address that works with nothing connected at all.
  const [mailConnections, setMailConnections] = useState<InboxMailConnection[]>([])
  const [whatsapp, setWhatsapp] = useState<{ linked: boolean; phoneMasked?: string; verifiedAt?: string | null } | null>(null)
  const [sourcesOpen, setSourcesOpen] = useState(false)

  useEffect(() => {
    void (async () => {
      try {
        const res = await fetch('/api/extensions/ext/mail/connections')
        if (!res.ok) return
        const json = (await res.json()) as { data?: { connections?: InboxMailConnection[] } }
        setMailConnections(json.data?.connections ?? [])
      } catch {
        // The extension may not be enabled at all; stay quiet.
      }
    })()
    void (async () => {
      try {
        const res = await fetch('/api/extensions/ext/whatsapp-inbox/link')
        if (!res.ok) return
        // The route answers in camelCase (phoneMasked / verifiedAt); reading
        // snake_case here silently rendered a linked number as "–".
        const json = (await res.json()) as {
          data?: { linked: boolean; phoneMasked?: string; verifiedAt?: string | null }
        }
        if (json.data) setWhatsapp(json.data)
      } catch {
        // Same: not every company has it.
      }
    })()
  }, [])

  // Counting rows would not answer whether anything is searchable: a revoked
  // or expired connection is still a row, and the hunt skips it, so the button
  // would promise a search that returns nothing every pass. A dead mailbox
  // looking healthy is the exact failure this feature exists to surface, so it
  // must not start by doing it in its own header.
  const mailConnected = useMemo(
    () => mailConnections.some((c) => c.status === 'active'),
    [mailConnections],
  )
  const ailingMailbox = useMemo(
    () => mailConnections.find((c) => c.status !== 'active') ?? null,
    [mailConnections],
  )
  const sourceCount = mailConnections.length + (whatsapp?.linked ? 1 : 0) + (inboxAddress ? 1 : 0)

  const fetchPurchases = useCallback(async () => {
    try {
      const res = await fetch('/api/extensions/ext/invoice-inbox/purchases')
      if (!res.ok) return
      const json = (await res.json()) as { data: { purchases: PurchaseWithoutUnderlag[] } }
      setPurchases(json.data.purchases ?? [])
    } catch {
      // A missing count is better than an error beside the user's documents.
    }
  }, [])

  useEffect(() => {
    void fetchPurchases()
  }, [fetchPurchases])

  // A pass can attach a document to a purchase, which moves a row from one
  // list to the other, so both refresh as the run goes rather than at the end.
  const {
    hunt,
    stop: stopHunt,
    hunting,
    progress: huntProgress,
    result: huntResult,
    setResult: setHuntResult,
  } = useReceiptHunt(() => {
    void fetchItems()
    void fetchPurchases()
  })

  // A run that found nothing leaves nothing to act on, so the line has no
  // reason to outlive the glance that reads it. A run that found something,
  // or failed, stays: both name a next step (press again, or a mailbox to
  // check) and both are worth still being on screen a minute later.
  useEffect(() => {
    if (hunting || !huntResult) return
    if (huntResult.failed || huntResult.fetched > 0) return
    const timer = setTimeout(() => setHuntResult(null), 6000)
    return () => clearTimeout(timer)
  }, [hunting, huntResult, setHuntResult])


  const selectedPurchase = useMemo(
    () => purchases.find((p) => p.id === selectedPurchaseId) ?? null,
    [purchases, selectedPurchaseId],
  )

  const portalPurchases = useMemo(() => purchases.filter((p) => p.portal), [purchases])
  const otherPurchases = useMemo(() => purchases.filter((p) => !p.portal), [purchases])

  // Per-status counts for the filter pills. Computed once over the full list.
  const statusCounts = useMemo(() => {
    const counts = { todo: 0, linked: 0, booked: 0, error: 0, all: items.length }
    for (const item of items) {
      const status = deriveInboxStatus(item)
      if (status !== 'booked') counts.todo += 1
      if (status === 'linked') counts.linked += 1
      if (status === 'booked') counts.booked += 1
      if (status === 'error') counts.error += 1
    }
    return counts
  }, [items])

  // Pills, in order. The error pill only appears when there's something errored
  // (or it's the active filter): keeps the happy-path inbox uncluttered.
  const pills = useMemo(() => {
    const list: { key: typeof filter; label: string; count: number }[] = [
      { key: 'todo', label: 'Att göra', count: statusCounts.todo },
      { key: 'linked', label: 'Kopplade', count: statusCounts.linked },
      { key: 'booked', label: 'Bokförda', count: statusCounts.booked },
    ]
    // Two lists, because they are two different jobs. A purchase whose
    // supplier keeps invoices behind a login is one you can settle now by
    // going there; one with nothing known needs somebody to be asked. Mixing
    // them buries the twelve you can act on among the hundred you cannot.
    if (portalPurchases.length > 0 || filter === 'portal') {
      list.push({ key: 'portal', label: t('filter_portal'), count: portalPurchases.length })
    }
    if (otherPurchases.length > 0 || filter === 'missing') {
      list.push({ key: 'missing', label: t('filter_missing'), count: otherPurchases.length })
    }
    if (statusCounts.error > 0 || filter === 'error') {
      list.push({ key: 'error', label: 'Fel', count: statusCounts.error })
    }
    list.push({ key: 'all', label: 'Alla', count: statusCounts.all })
    return list
  }, [statusCounts, filter, portalPurchases.length, otherPurchases.length])

  const activePill = useMemo(() => pills.find((p) => p.key === filter), [pills, filter])

  const filteredPurchases = useMemo(() => {
    const base = filter === 'portal' ? portalPurchases : otherPurchases
    const term = searchTerm.trim().toLowerCase()
    if (term === '') return base
    return base.filter((p) =>
      [p.merchant_name, p.description].some((v) => v?.toLowerCase().includes(term)),
    )
  }, [portalPurchases, otherPurchases, filter, searchTerm])

  const filteredItems = useMemo(() => {
    const term = searchTerm.trim().toLowerCase()
    if (filter === 'missing' || filter === 'portal') return []
    return items.filter((item) => {
      // Status filter. "todo" is the active inbox: everything except booked.
      const status = deriveInboxStatus(item)
      if (filter === 'todo' && status === 'booked') return false
      if (filter === 'linked' && status !== 'linked') return false
      if (filter === 'booked' && status !== 'booked') return false
      if (filter === 'error' && status !== 'error') return false
      // 'all' → no status narrowing

      // Search filter: supplier name, email subject/from, placeholder filename
      if (term === '') return true
      const haystack = [
        item.extracted_data?.supplier?.name,
        item.email_subject,
        item.email_from,
        item.fileName,
      ]
        .filter((v): v is string => !!v)
        .join(' ')
        .toLowerCase()
      return haystack.includes(term)
    })
  }, [items, filter, searchTerm])

  // ── Selection ──────────────────────────────────────────────

  // Resolve the signed URL for a row's underlag. Every exit sets docState, so
  // the preview pane always says which of the four situations it is in: no
  // document, still loading, ready, or "we could not load it". The pane must
  // never fall back to "Inget underlag bifogat" for a row that has a
  // document_id, which is what the old silent catch produced.
  const loadDocument = useCallback(async (documentId: string | null) => {
    const request = ++docRequestRef.current
    setDocUrl(null)
    setDocMime(null)
    if (!documentId) {
      setDocState('none')
      return
    }
    setDocState('loading')
    try {
      const res = await fetchWithTimeout(
        `/api/documents/${documentId}`,
        { method: 'GET' },
        { timeoutMs: DOCUMENT_FETCH_TIMEOUT_MS, description: `document ${documentId}` },
      )
      if (docRequestRef.current !== request) return
      if (!res.ok) {
        setDocState('error')
        return
      }
      const { data } = await res.json()
      if (docRequestRef.current !== request) return
      const url: string | null = data?.download_url ?? null
      // HTML mail underlag renders via the same-origin inline proxy: it
      // serves text/html with a CSP sandbox header and guaranteed inline
      // disposition. Other types keep the signed storage URL.
      const effectiveUrl =
        data?.mime_type === 'text/html' ? `/api/documents/${documentId}/inline` : url
      if (!url) {
        // The document row exists but no signed URL came back: still a load
        // failure, not an absent underlag.
        setDocState('error')
        return
      }
      setDocUrl(effectiveUrl)
      setDocMime(data?.mime_type ?? null)
      setDocState('ready')
    } catch {
      // Timeout, offline, or an unparseable body. The document itself is
      // untouched, so the retry in the preview pane is the whole recovery.
      if (docRequestRef.current !== request) return
      setDocState('error')
    }
  }, [])

  const handleSelect = useCallback(async (id: string) => {
    const request = ++detailRequestRef.current
    setSelectedId(id)
    setSelectedPurchaseId(null)
    // Intentionally no auto-scroll: in the vertical-stack layout (below xl)
    // scrolling the preview into view pushes the list off-screen, and the
    // user has no obvious way back to pick another item. The row-highlight
    // + the preview content update are enough feedback that the tap took.

    // Seed the detail pane synchronously from the list row already in hand
    // (fetchItems returns full rows: status, amounts, extracted fields), and
    // start the document load in parallel with the detail GET. Clearing
    // `selected` first made every row click flash the no-selection branch
    // (onboarding card / "Välj en post") for a full round trip, then run a
    // second serialized round trip before the PDF even started loading.
    const listRow = items.find((it) => it.id === id) ?? null
    if (listRow) {
      setSelected(listRow)
      void loadDocument(listRow.document_id)
    } else {
      // Invalidate any in-flight document read: the pane is being cleared,
      // and a late resolution must not paint a URL or error onto it.
      docRequestRef.current++
      setSelected(null)
      setDocUrl(null)
      setDocMime(null)
      setDocState('none')
    }

    try {
      const res = await fetch(`/api/extensions/ext/invoice-inbox/items/${id}`)
      if (!res.ok) throw await resolveFailure(res)
      const json = await res.json()
      const item = json.data as InboxItem
      // A newer selection owns the pane now: dropping this response keeps a
      // slower earlier fetch (same item or another) from overwriting the
      // newest request's detail snapshot.
      if (detailRequestRef.current !== request) return
      setSelected(item)
      if (!listRow) {
        await loadDocument(item.document_id)
      } else if (item.document_id !== listRow.document_id) {
        // The detail row knows a different underlag than the list row we
        // seeded from (e.g. processing finished between paint and click).
        void loadDocument(item.document_id)
      }
    } catch (err) {
      if (detailRequestRef.current !== request) return
      toast({
        title: 'Kunde inte ladda dokumentet',
        description: failureText(err),
        variant: 'destructive',
      })
    }
  }, [items, toast, loadDocument])

  // The detail pane renders from its own fetched snapshot (`selected`), so
  // the realtime refetch updates the list row but would leave a selected
  // staged upload stuck on the in-flight skeleton after the processing ->
  // received flip. Re-read the detail when the list shows the flip landed.
  useEffect(() => {
    if (!selected || selected.isPlaceholder || selected.status !== 'processing') return
    const listRow = items.find((it) => it.id === selected.id)
    if (listRow && listRow.status !== 'processing') {
      void handleSelect(selected.id)
    }
  }, [items, selected, handleSelect])

  // ── Upload ─────────────────────────────────────────────────

  // `autoSelect`: jump the detail pane to the new placeholder/row. Useful
  // for a one-off drop (user expects to see what just landed). Harmful in
  // a multi-file queue (selection yanks around as each file processes).
  const uploadFile = useCallback(async (
    original: File,
    options: { autoSelect: boolean } = { autoSelect: true },
  ) => {
    // A phone photo is routinely larger than the request body the platform
    // will carry, and it rejects the upload itself, before the route can say
    // anything useful about it. Shrink what can be shrunk, and refuse the rest
    // here, where we can name the size instead of letting the transfer fail.
    const file = exceedsHostedUploadLimit(original.size)
      ? await shrinkImageForUpload(original)
      : original
    if (exceedsHostedUploadLimit(file.size)) {
      reportUploadFailure({
        status: 0,
        size: file.size,
        type: file.type || 'unknown',
        reason: 'over hosted body limit, refused client-side',
      })
      toast({
        title: 'Uppladdning misslyckades',
        description: tooLargeMessage(file.size),
        variant: 'destructive',
      })
      return undefined
    }

    // Optimistic placeholder: gives the user an immediate visual response
    // for the 3-8s while extraction runs. Removed once the real row arrives.
    const tempId = `temp-${crypto.randomUUID()}`
    const placeholder: InboxItem = {
      id: tempId,
      status: 'received',
      source: 'upload',
      created_at: new Date().toISOString(),
      email_from: null,
      email_subject: null,
      email_received_at: null,
      email_body_text: null,
      document_id: null,
      extracted_data: null,
      matched_supplier_id: null,
      matched_transaction_id: null,
      created_supplier_invoice_id: null,
      created_journal_entry_id: null,
      error_message: null,
      extraction_skipped: false,
      isPlaceholder: true,
      fileName: file.name,
    }
    setItems((prev) => [placeholder, ...prev])
    if (options.autoSelect) {
      setSelectedId(tempId)
      setSelected(placeholder)
    }
    setIsUploading(true)
    try {
      const fd = new FormData()
      fd.append('file', file)
      const res = await fetch('/api/extensions/ext/invoice-inbox/upload', {
        method: 'POST',
        body: fd,
      })
      if (!res.ok) throw await resolveFailure(res)
      const json = await res.json()
      if (json.data?.extraction_skipped) {
        const pages = json.data?.page_count
        toast({
          title: 'Dokument uppladdat',
          description: pages
            ? `Stort dokument (${pages} sidor): AI-tolkning skippad. Du kan koppla det till en transaktion eller skapa leverantörsfaktura manuellt.`
            : 'AI-tolkning skippad. Du kan koppla dokumentet till en transaktion eller skapa leverantörsfaktura manuellt.',
        })
      } else {
        toast({ title: 'Dokument uppladdat', description: file.name })
      }
      setItems((prev) => prev.filter((it) => it.id !== tempId))
      await fetchItems()
      if (options.autoSelect && json.data?.inbox_item_id) {
        await handleSelect(json.data.inbox_item_id)
      }
      return json.data?.inbox_item_id as string | undefined
    } catch (err) {
      setItems((prev) => prev.filter((it) => it.id !== tempId))
      if (options.autoSelect) {
        setSelectedId((prev) => (prev === tempId ? null : prev))
        setSelected((prev) => (prev?.id === tempId ? null : prev))
      }
      const reason = failureText(err)
      reportUploadFailure({
        status: err instanceof ResolvedFailure ? err.status : 0,
        size: file.size,
        type: file.type || 'unknown',
        reason,
      })
      toast({
        title: 'Uppladdning misslyckades',
        description: reason,
        variant: 'destructive',
      })
    } finally {
      setIsUploading(false)
    }
  }, [fetchItems, handleSelect, toast])

  // Sequential queue: running multiple extractions concurrently would
  // hammer pdfjs on slow boxes. Per-file placeholder rows + the queue
  // counter on the upload button surface progress.
  /**
   * Upload a file and make it the underlag for one specific purchase.
   *
   * The generic upload only carries the file, so a document dropped while a
   * purchase was selected landed in the inbox unmatched: the pane showed that
   * purchase's amount and date under the drop zone and then quietly did not
   * use either. Matching afterwards through the endpoint that already exists
   * keeps the promise the copy makes.
   */
  const uploadForPurchase = useCallback(async (files: File[], transactionId: string) => {
    const [file, ...rest] = files
    if (!file) return
    const itemId = await uploadFile(file, { autoSelect: false })
    // A receipt scanned as two images, or an invoice with its specification,
    // arrives as one drop. Taking the first and discarding the rest in silence
    // left the purchase looking resolved with half its paperwork gone. They
    // cannot all be the underlag for one purchase, so the extras are filed in
    // the inbox rather than dropped on the floor.
    for (const extra of rest) await uploadFile(extra, { autoSelect: false })
    if (!itemId) return
    try {
      const res = await fetch(
        `/api/extensions/ext/invoice-inbox/items/${itemId}/match-transaction`,
        {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({ transaction_id: transactionId }),
        },
      )
      if (!res.ok) throw await resolveFailure(res)
      toast({
        title: 'Underlag kopplat',
        description: rest.length ? `${file.name}. ${rest.length} till lades i inkorgen.` : file.name,
      })
      setSelectedPurchaseId(null)
      await Promise.all([fetchItems(), fetchPurchases()])
    } catch (err) {
      // The document is safely filed either way; only the link failed, and
      // the user can still make it by hand from the inbox.
      toast({
        title: 'Uppladdat, men inte kopplat',
        description: err instanceof ResolvedFailure
          ? `${failureText(err)} Dokumentet ligger i inkorgen, koppla det till köpet därifrån.`
          : 'Dokumentet ligger i inkorgen. Koppla det till köpet därifrån.',
        variant: 'destructive',
      })
      await fetchItems()
    }
  }, [uploadFile, toast, fetchItems, fetchPurchases])

  const uploadFiles = useCallback(async (files: File[]) => {
    if (files.length === 0) return
    if (files.length === 1) {
      // Single-file drop: keep the historic behavior of jumping the detail
      // pane to the new item. Skip the queue counter: it would just flash.
      await uploadFile(files[0], { autoSelect: true })
      return
    }
    setUploadQueue({ total: files.length, done: 0 })
    try {
      for (const file of files) {
        await uploadFile(file, { autoSelect: false })
        setUploadQueue((q) => (q ? { ...q, done: q.done + 1 } : null))
      }
    } finally {
      setUploadQueue(null)
    }
  }, [uploadFile])

  const handleFileInputChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files ?? [])
    if (files.length > 0) await uploadFiles(files)
    if (fileInputRef.current) fileInputRef.current.value = ''
  }, [uploadFiles])

  const handleDrop = useCallback(async (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
    const files = Array.from(e.dataTransfer.files ?? [])
    if (files.length === 0) return
    // Dropping while a purchase is selected means "this is that purchase's
    // receipt", wherever on the page it landed. Ignoring the selection would
    // file it loose and leave the user to match by hand what they had already
    // told us.
    if (selectedPurchaseId) {
      await uploadForPurchase(files, selectedPurchaseId)
      return
    }
    await uploadFiles(files)
  }, [uploadFiles, uploadForPurchase, selectedPurchaseId])

  // ── Delete ─────────────────────────────────────────────────

  const handleDelete = useCallback(async (id: string) => {
    if (!confirm('Ta bort dokumentet ur inkorgen?')) return
    setIsDeleting(true)
    try {
      const res = await fetch(`/api/extensions/ext/invoice-inbox/items/${id}`, {
        method: 'DELETE',
      })
      if (!res.ok) throw await resolveFailure(res)
      toast({ title: 'Borttagen' })
      if (selectedId === id) {
        setSelectedId(null)
        setSelected(null)
      }
      await fetchItems()
    } catch (err) {
      toast({
        title: 'Kunde inte ta bort',
        description: failureText(err),
        variant: 'destructive',
      })
    } finally {
      setIsDeleting(false)
    }
  }, [fetchItems, selectedId, toast])

  const toggleSelected = useCallback((id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }, [])

  const clearSelection = useCallback(() => setSelectedIds(new Set()), [])

  // The selected rows, and how many of them can actually be bulk-booked
  // (matched to a transaction and not yet booked). Drives the "Bokför valda"
  // button enabled-state and feeds the bulk-book dialog.
  const selectedItems = useMemo(
    () => items.filter((it) => selectedIds.has(it.id)),
    [items, selectedIds],
  )
  const bookableSelectedCount = useMemo(
    () =>
      selectedItems.filter(
        (it) =>
          it.matched_transaction_id &&
          !it.created_journal_entry_id &&
          !it.created_supplier_invoice_id &&
          // A matched transaction that is already booked has nothing left to
          // bulk-book: the server would only skip it with a 409.
          !it.matched_transaction_journal_entry_id,
      ).length,
    [selectedItems],
  )

  const handleBulkDelete = useCallback(async () => {
    if (selectedIds.size === 0) return
    if (!confirm(`Ta bort ${selectedIds.size} poster ur inkorgen?`)) return

    // Skip items that the server would 409 on, surface the count to the user.
    const targets = items.filter((it) => selectedIds.has(it.id))
    const deletable = targets.filter(
      (it) => !it.created_supplier_invoice_id && !it.created_journal_entry_id
    )
    const skipped = targets.length - deletable.length

    setIsBulkDeleting(true)
    try {
      const results = await Promise.allSettled(
        deletable.map((it) =>
          fetch(`/api/extensions/ext/invoice-inbox/items/${it.id}`, { method: 'DELETE' })
            .then(async (res) => {
              if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || 'fail')
            })
        )
      )
      const failed = results.filter((r) => r.status === 'rejected').length
      const succeeded = deletable.length - failed
      const parts: string[] = []
      if (succeeded > 0) parts.push(`${succeeded} borttagna`)
      if (skipped > 0) parts.push(`${skipped} kopplade till leverantörsfaktura, hoppade över`)
      if (failed > 0) parts.push(`${failed} misslyckades`)
      toast({
        title: 'Bulkborttagning klar',
        description: parts.join(' · '),
        variant: failed > 0 ? 'destructive' : 'default',
      })
      clearSelection()
      // If the currently-selected item was deleted, clear the rail.
      if (selectedId && deletable.some((it) => it.id === selectedId)) {
        setSelectedId(null)
        setSelected(null)
      }
      await fetchItems()
    } finally {
      setIsBulkDeleting(false)
    }
  }, [selectedIds, items, selectedId, fetchItems, toast, clearSelection])

  // ── Inbox address ──────────────────────────────────────────

  const handleRotateAddress = useCallback(async () => {
    // Confirm whenever an address may already exist: either we hold one, or the
    // read failed and we cannot rule one out. Rotating retires the old address,
    // and suppliers plus forwarding rules already point at it, so the one case
    // that must never skip this dialog is the one where we are unsure.
    if (
      (inboxAddress || addressLoadFailed) &&
      !confirm('Skapa en ny inkorgsadress? Den gamla slutar att fungera.')
    ) {
      return
    }
    setIsRotating(true)
    try {
      const res = await fetch('/api/extensions/ext/invoice-inbox/inbox/rotate', {
        method: 'POST',
      })
      if (!res.ok) throw await resolveFailure(res)
      const json = await res.json()
      setInboxAddress(json.data)
      setAddressLoadFailed(false)
      toast({ title: 'Ny adress skapad', description: json.data.address })
    } catch (err) {
      toast({
        title: 'Rotation misslyckades',
        description: failureText(err),
        variant: 'destructive',
      })
    } finally {
      setIsRotating(false)
    }
  }, [toast, inboxAddress, addressLoadFailed])

  // ── Render ─────────────────────────────────────────────────

  if (isLoading) return <WorkspaceSkeleton />

  return (
    <div
      className="min-h-[calc(100vh-1px)] md:min-h-full xl:h-full"
      onDragOver={(e) => { e.preventDefault(); if (!isDragging) setIsDragging(true) }}
      onDragLeave={(e) => {
        // only clear when leaving the workspace itself, not children
        if (e.currentTarget === e.target) setIsDragging(false)
      }}
      onDrop={handleDrop}
    >
    {/* No card of its own: /e/ routes render full-bleed inside the dashboard
        panel, which already supplies the border, the 12px radius and the
        background. Wrapping the workspace in a second rounded, bordered
        surface drew two frames 24px apart with mismatched radii. */}
    <div className="xl:h-full flex flex-col xl:overflow-hidden">
      {/* Top bar */}
      <header className="flex items-center justify-between gap-4 border-b px-4 py-2.5 flex-wrap">
        <div className="flex items-center gap-2 min-w-0">
          <Inbox className="h-4 w-4 text-muted-foreground shrink-0" />
          <h1 className="text-sm shrink-0">Dokumentinkorg</h1>
          {/* Where the page's contents come from, behind one chip. The detail
              (which mailbox, when it was last read) is a thing people look up
              when something seems wrong, not something they read every visit.
              A mailbox that has stopped working is the exception, so that
              surfaces on the chip itself. */}
          {sourceCount > 0 ? (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSourcesOpen((v) => !v)}
              className={cn(
                'h-7 px-2 text-xs font-normal shrink-0',
                ailingMailbox ? 'text-warning' : 'text-muted-foreground',
              )}
              aria-expanded={sourcesOpen}
            >
              {/* No marker on the healthy state. Convention 5: a normal state
                  is muted text, and a chip every company sees always is a chip
                  that says nothing. Convention 12 rules out the sage anyway,
                  semantic colour being data rather than chrome. What remains is
                  the exception, which is the one thing worth an ochre word. */}
              {ailingMailbox && <AlertTriangle className="h-3 w-3 mr-1.5" />}
              {ailingMailbox
                ? `${ailingMailbox.emailAddress} behöver återanslutas`
                : `${sourceCount} ${sourceCount === 1 ? 'källa' : 'källor'}`}
              <ChevronDown className="h-3 w-3 ml-1 opacity-60" />
            </Button>
          ) : addressLoadFailed ? (
            // We do not know whether an address exists, so we offer a retry
            // rather than an activate button that would rotate a live address.
            <div role="status" aria-live="polite" className="min-w-0">
              <AttnLine
                action={{ label: t('retry'), onClick: () => { void fetchInboxAddress() } }}
              >
                {t('address_load_failed')}
              </AttnLine>
            </div>
          ) : (
            <Button
              variant="outline"
              size="sm"
              onClick={handleRotateAddress}
              disabled={isRotating}
              className="ml-2 shrink-0 h-7 text-xs"
            >
              {isRotating ? (
                <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
              ) : (
                <Mail className="h-3.5 w-3.5 mr-1.5" />
              )}
              Aktivera inkorgsadress
            </Button>
          )}
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {/* No image/heic or image/heif here on purpose: when HEIC is absent
              from accept, iOS Safari transcodes photo-library picks to JPEG,
              which AI extraction can read. The server allowlist still accepts
              HEIC for drag-drop and the email/WhatsApp channels. */}
          <input
            ref={fileInputRef}
            type="file"
            multiple
            accept="application/pdf,image/jpeg,image/png,image/webp"
            className="hidden"
            onChange={handleFileInputChange}
          />
          {/* The hunt lived only in Settings, so the button that fills this
              page sat on a different page. It runs in passes and reports as it
              goes, because a backlog does not clear in one request. */}
          {mailConnected && (
            <Button variant="ghost" size="sm" onClick={hunting ? stopHunt : hunt} disabled={false}>
              {hunting ? (
                <>
                  <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
                  {t('hunt_stop')}
                </>
              ) : (
                <>
                  <Search className="h-3.5 w-3.5 mr-1.5" />
                  Leta i mejlen
                </>
              )}
            </Button>
          )}
          <Button
            variant="outline"
            size="sm"
            onClick={() => fileInputRef.current?.click()}
            disabled={isUploading}
          >
            {isUploading ? (
              <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
            ) : (
              <Plus className="h-3.5 w-3.5 mr-1.5" />
            )}
            {uploadQueue
              ? `Laddar ${Math.min(uploadQueue.done + 1, uploadQueue.total)} av ${uploadQueue.total}…`
              : isUploading
                ? 'Laddar…'
                : 'Ladda upp'}
          </Button>
        </div>
      </header>

      {/* A pass takes over two minutes and reports nothing until it lands, so
          a spinner alone leaves somebody watching a button. This says which
          mailboxes are being read, what has been found so far, and keeps
          moving while the pass is silent. The bar is deliberately
          indeterminate: there is no honest percentage inside a pass, and a
          fake one is worse than none. */}
      {hunting && (
        <div className="border-b bg-secondary/30">
          <div className="h-0.5 overflow-hidden bg-border/40">
            <div className="hunt-sweep h-full w-1/3 bg-foreground/40" />
          </div>
          <div className="px-4 py-2.5 flex items-center gap-3 flex-wrap text-xs">
            <span className="flex items-center gap-2 min-w-0">
              <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0 text-muted-foreground" />
              <span className="truncate">
                {t('hunt_reading', {
                  mailboxes: mailConnections
                    .filter((c) => c.status === 'active')
                    .map((c) => c.emailAddress)
                    .join(', '),
                })}
              </span>
            </span>
            <span className="flex-1" />
            {huntProgress && (
              <span className="text-muted-foreground tabular-nums">
                {t('hunt_progress', {
                  pass: huntProgress.passes,
                  found: huntProgress.fetched,
                })}
              </span>
            )}
            <button type="button" onClick={stopHunt} className={QUIET_LINK_CLASS}>
              {t('hunt_stop')}
            </button>
          </div>
        </div>
      )}

      {!hunting && huntResult && (
        <div className="border-b px-4 py-2 text-xs flex items-center gap-2">
          {huntResult.failed ? (
            <span className="text-warning">
              {/* searchFailures counts mailboxes that refused; without it the
                  failure was ours, and telling somebody to go check a healthy
                  Gmail sends them after the wrong thing. */}
              {(huntResult.searchFailures ?? 0) > 0
                ? 'En brevlåda svarade inte. Försök igen om en stund.'
                : 'Sökningen kunde inte slutföras. Försök igen.'}
            </span>
          ) : huntResult.fetched > 0 ? (
            <span>
              <b className="font-medium tabular-nums">{huntResult.fetched}</b> nya underlag hämtade.{' '}
              {huntResult.remaining > 0 && (
                <>
                  <b className="font-medium tabular-nums">{huntResult.remaining}</b> köp kvar att söka
                  för: tryck igen.{' '}
                </>
              )}
              {/* "proposed" counts pending_operations rows, not links. The hunt
                  stages attach_document_to_transaction for a human to approve
                  and books nothing, so calling them kopplade would send the
                  user away believing purchases were done. */}
              {huntResult.proposed > 0 ? (
                <>
                  <b className="font-medium tabular-nums">{huntResult.proposed}</b> förslag väntar på{' '}
                  <Link href="/pending" className="underline hover:text-foreground">
                    granskning
                  </Link>
                  .
                </>
              ) : (
                // A press fetches a bounded number of receipts, so an empty
                // result usually means "not yet", not "nothing there". Saying
                // only the first sends people away from a mailbox that still
                // has their receipts in it.
                <>Inget matchade något köp än. Tryck igen för att leta vidare.</>
              )}
            </span>
          ) : (
            <span className="text-muted-foreground">
              Inga nya underlag i brevlådorna för de köp som saknar ett.
            </span>
          )}
        </div>
      )}

      {/* Opened from the chip. Three ways in, each with the one fact that
          matters about it: an address you can forward to, mailboxes we search,
          and the number receipts arrive from. Nothing here is configuration;
          that still lives in Inställningar. */}
      {sourcesOpen && (
        <div className="border-b bg-muted/20 text-xs">
          {inboxAddress && (
            <div className="flex items-center gap-3 px-4 py-2 border-b border-border">
              <Mail className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
              <div className="min-w-0 flex-1">
                <span className="tabular-nums">{inboxAddress.address}</span>
              </div>
              <InboxAddressBar
                address={inboxAddress.address}
                onRotate={handleRotateAddress}
                isRotating={isRotating}
              />
            </div>
          )}

          {mailConnections.map((c) => (
            <details key={c.id} className="group border-b border-border">
              <summary className="flex items-center gap-3 px-4 py-2 cursor-pointer list-none hover:bg-secondary/40">
                {c.provider === 'gmail' ? (
                  <GoogleMark className="h-3.5 w-3.5 shrink-0" />
                ) : (
                  <MicrosoftMark className="h-3.5 w-3.5 shrink-0" />
                )}
                <span className="truncate flex-1">{c.emailAddress}</span>
                {c.status !== 'active' && (
                  <Badge variant="warning" className="text-[10px] font-normal shrink-0">
                    Behöver återanslutas
                  </Badge>
                )}
                <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform group-open:rotate-90 shrink-0" />
              </summary>
              {/* One level down, because this is what you look up when a
                  mailbox seems to have gone quiet, not what you read on the
                  way past. */}
              <dl className="px-4 pb-2.5 pl-11 text-[11px] text-muted-foreground space-y-0.5">
                <div className="flex gap-2">
                  <dt className="w-24 shrink-0">{t('source_last_searched')}</dt>
                  <dd className="tabular-nums">
                    {c.lastSearchedAt ? formatDateLong(c.lastSearchedAt) : t('source_never_searched')}
                  </dd>
                </div>
                <div className="flex gap-2">
                  <dt className="w-24 shrink-0">Status</dt>
                  <dd>
                    {c.status === 'active'
                      ? t('source_searched_when_hunting')
                      : t('source_not_searched')}
                  </dd>
                </div>
              </dl>
            </details>
          ))}

          {whatsapp?.linked && (
            <details className="group border-b border-border">
              <summary className="flex items-center gap-3 px-4 py-2 cursor-pointer list-none hover:bg-secondary/40">
                <WhatsAppMark className="h-3.5 w-3.5 shrink-0" />
                <span className="flex-1 truncate">WhatsApp</span>
                <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform group-open:rotate-90 shrink-0" />
              </summary>
              <dl className="px-4 pb-2.5 pl-11 text-[11px] text-muted-foreground space-y-0.5">
                <div className="flex gap-2">
                  <dt className="w-24 shrink-0">{t('source_whatsapp_number')}</dt>
                  <dd className="tabular-nums">{whatsapp.phoneMasked ?? '-'}</dd>
                </div>
                <div className="flex gap-2">
                  <dt className="w-24 shrink-0">Status</dt>
                  <dd>{whatsapp.verifiedAt ? t('source_verified') : t('source_unverified')}</dd>
                </div>
              </dl>
            </details>
          )}

        </div>
      )}


      {/* Three-section body. Below xl (iPad portrait/landscape + phone) the
          sections stack vertically as a single scrollable feed. With the app
          sidebar eating ~256px, even iPad landscape (1024-1180px viewport)
          has only ~570px of workspace: too tight for 3 panes. At xl+ they
          sit side-by-side as three panes. */}
      <div className="xl:flex-1 grid grid-cols-1 xl:grid-cols-[280px_minmax(0,1fr)_340px] xl:min-h-0 xl:overflow-hidden">
        {/* List: flows naturally below xl; bounded with internal scroll at xl+ */}
        <aside className="border-b xl:border-b-0 xl:border-r bg-muted/20 pt-3 xl:overflow-y-auto xl:block">
          {items.length > 0 && (
            <div className="px-3 pb-3 space-y-2 border-b">
              <div className="relative">
                <Search className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                <Input
                  placeholder="Sök i inkorgen…"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-8 h-8 text-xs"
                />
              </div>
              {/* One row instead of three. Five filters wrapped to three lines
                  in a 280px column, and the counts are what people actually
                  read, so they stay visible on the trigger and inside the menu
                  rather than being traded away for the space. */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    className="w-full justify-between h-8 px-2.5 text-xs font-normal"
                  >
                    <span className="flex items-center gap-1.5 min-w-0">
                      <span className="truncate">{activePill?.label ?? 'Att göra'}</span>
                      <span className="tabular-nums text-muted-foreground">
                        {activePill?.count ?? 0}
                      </span>
                    </span>
                    <ChevronDown className="h-3.5 w-3.5 opacity-60 shrink-0" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-[--radix-dropdown-menu-trigger-width]">
                  {pills.map((pill) => (
                    <DropdownMenuItem
                      key={pill.key}
                      onSelect={() => {
                        setFilter(pill.key)
                        // The panes show one kind of row at a time; a stale
                        // selection from the other kind would outlive its list.
                        if (pill.key === 'missing' || pill.key === 'portal') setSelectedId(null)
                        else setSelectedPurchaseId(null)
                      }}
                      className="justify-between text-xs"
                    >
                      <span className="flex items-center gap-2">
                        <Check
                          className={cn(
                            'h-3.5 w-3.5',
                            filter === pill.key ? 'opacity-100' : 'opacity-0',
                          )}
                        />
                        {pill.label}
                      </span>
                      <span className="tabular-nums text-muted-foreground">{pill.count}</span>
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          )}
          {selectedIds.size > 0 && (
            <div className="sticky top-0 z-10 flex flex-col gap-3 border-b bg-background/95 backdrop-blur px-4 py-3">
              {/* Count */}
              <span className="text-xs text-muted-foreground tabular-nums">
                <span className="font-medium text-foreground">{selectedIds.size}</span>{' '}
                {selectedIds.size === 1 ? 'markerad' : 'markerade'}
              </span>
              {/* Primary action: the one solid button */}
              <Button
                variant="default"
                size="sm"
                className="h-8 w-full text-xs"
                onClick={() => setBulkBookOpen(true)}
                disabled={isBulkDeleting || bookableSelectedCount === 0}
                title={
                  bookableSelectedCount === 0
                    ? 'Inget av de valda underlagen är matchat mot en banktransaktion'
                    : undefined
                }
              >
                <Check className="h-3.5 w-3.5 mr-1.5" />
                Bokför valda
              </Button>
              {/* Secondary actions: outlined, so they read as buttons */}
              <div className="flex items-center gap-2">
                {identity.isVerified && (
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-8 flex-1 px-2 text-xs text-muted-foreground hover:text-foreground"
                    onClick={() =>
                      openAgentSheet({
                        intentId: 'inbox.bulk-book',
                        intentArgs: { item_ids: Array.from(selectedIds) },
                        contextRef: 'inbox:bulk',
                      })
                    }
                    disabled={isBulkDeleting}
                  >
                    <Sparkles className="h-3.5 w-3.5 mr-1.5" />
                    Fråga assistenten
                  </Button>
                )}
                <Button
                  variant="outline"
                  size="sm"
                  className={cn(
                    'h-8 px-2 text-xs text-muted-foreground hover:text-destructive hover:border-destructive/40',
                    identity.isVerified ? 'flex-none' : 'flex-1'
                  )}
                  onClick={handleBulkDelete}
                  disabled={isBulkDeleting}
                >
                  {isBulkDeleting ? (
                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
                  ) : (
                    <Trash2 className="h-3.5 w-3.5 mr-1.5" />
                  )}
                  Ta bort
                </Button>
              </div>
            </div>
          )}
          {itemsUnknown ? (
            // The list read failed. "Inkorgen är tom" would be a claim we
            // cannot back: a mailed-in invoice may be sitting there unread.
            <div className="p-6 text-center text-sm text-muted-foreground space-y-2">
              <AlertTriangle className="h-5 w-5 mx-auto text-attn" />
              <p>{t('items_load_failed')}</p>
              <Button
                variant="outline"
                size="sm"
                className="h-7 text-xs"
                onClick={() => { void fetchItems() }}
              >
                {t('retry')}
              </Button>
            </div>
          ) : !hasAnyItem ? (
            // On desktop the preview pane is always visible alongside this
            // column, so showing the onboarding card here would duplicate it.
            // Below xl the panes stack into one feed, so the sibling preview
            // and fields panes are hidden when the inbox is empty (see their
            // classNames): this list is the only onboarding surface there.
            // So: compact card on mobile only, quiet empty state on desktop.
            showOnboarding ? (
              <>
                <div className="xl:hidden p-3">
                  <StartCard
                    card="geese"
                    layout="bleed-left"
                    dense
                    title={tStart('inbox_title')}
                    body={tStart('inbox_body')}
                    primary={{ label: tStart('inbox_primary'), href: '/settings/mail' }}
                    secondary={{
                      label: tStart('inbox_secondary'),
                      onClick: () => fileInputRef.current?.click(),
                    }}
                    onDismiss={handleDismissOnboarding}
                    dismissLabel={tStart('inbox_dismiss')}
                  />
                </div>
                <div className="hidden xl:block p-6 text-center text-sm text-muted-foreground">
                  <Inbox className="h-6 w-6 mx-auto mb-2 opacity-50" />
                  Inkorgen är tom.
                </div>
              </>
            ) : (
              <div className="p-6 text-center text-sm text-muted-foreground">
                <Inbox className="h-6 w-6 mx-auto mb-2 opacity-50" />
                Inkorgen är tom.
              </div>
            )
          ) : (filter === 'missing' || filter === 'portal' ? filteredPurchases.length : filteredItems.length) === 0 ? (
            <div className="p-6 text-center text-xs text-muted-foreground">
              {/* A leftover search term makes every one of these false: the
                  trigger above still shows the unsearched count, so the page
                  would claim every purchase has its underlag while the button
                  beside it reads 50. */}
              {searchTerm.trim() !== ''
                ? `Inga träffar på ”${searchTerm.trim()}”.`
                : filter === 'todo'
                  ? 'Inget att åtgärda; allt är bearbetat.'
                  : filter === 'portal'
                    ? 'Inga köp väntar på en faktura från en portal.'
                    : filter === 'missing'
                      ? 'Varje köp har sitt underlag.'
                      : 'Inga poster matchar filtret.'}
            </div>
          ) : (
            <ul>
              {filter === 'missing' || filter === 'portal'
                ? filteredPurchases.map((p) => (
                    <PurchaseRow
                      key={p.id}
                      purchase={p}
                      selected={p.id === selectedPurchaseId}
                      onClick={() => {
                        setSelectedPurchaseId(p.id)
                        setSelectedId(null)
                      }}
                    />
                  ))
                : filteredItems.map((item) => (
                    <InboxRow
                      key={item.id}
                      item={item}
                      selected={item.id === selectedId}
                      onClick={() => handleSelect(item.id)}
                      isChecked={selectedIds.has(item.id)}
                      onToggleChecked={() => toggleSelected(item.id)}
                      anyChecked={selectedIds.size > 0}
                    />
                  ))}
            </ul>
          )}
        </aside>

        {/* Document preview (hero). When the inbox is empty there is nothing
            to preview and no row can be selected, so below xl (stacked feed)
            this pane is hidden: the list's compact onboarding card is the
            single onboarding surface, avoiding a duplicated card. */}
        <main
          className={cn(
            'xl:overflow-hidden bg-muted/10 relative xl:block min-h-[55vh] xl:min-h-0',
            !hasAnyItem && 'hidden xl:block'
          )}
        >
          {selectedPurchase ? (
            // There is no file to show, so the pane says why and then offers
            // the one thing that resolves it. Telling somebody a document is
            // missing without a place to put it is half an answer.
            <div className="h-full flex items-center justify-center p-8">
              <div className="text-center max-w-sm w-full">
                <FileQuestion className="h-6 w-6 mx-auto mb-3 text-muted-foreground opacity-60" />
                <p className="text-sm">{t('purchase_no_document')}</p>
                <p className="text-xs text-muted-foreground mt-1.5">
                  {selectedPurchase.portal
                    ? `${selectedPurchase.portal.vendor} skickar ingen fil. Hämta fakturan och släpp den här.`
                    : 'Vi har sökt i brevlådorna. Släpp kvittot här, eller vidarebefordra det till inkorgsadressen.'}
                </p>

                {selectedPurchase.portal && (
                  <Button size="sm" variant="outline" className="mt-4" asChild>
                    <a href={selectedPurchase.portal.url} target="_blank" rel="noopener noreferrer">
                      Öppna {selectedPurchase.portal.vendor}
                      <ExternalLink className="h-3.5 w-3.5 ml-1.5" />
                    </a>
                  </Button>
                )}

                {/* Same accept list as the header input: HEIC left out so iOS
                    delivers JPEG from the photo library. */}
                <input
                  ref={purchaseFileInputRef}
                  type="file"
                  className="hidden"
                  accept="application/pdf,image/jpeg,image/png,image/webp"
                  onChange={async (e) => {
                    const files = Array.from(e.target.files ?? [])
                    if (files.length > 0) await uploadForPurchase(files, selectedPurchase.id)
                    if (purchaseFileInputRef.current) purchaseFileInputRef.current.value = ''
                  }}
                />
                <button
                  type="button"
                  onClick={() => purchaseFileInputRef.current?.click()}
                  disabled={isUploading}
                  className={cn(
                    'mt-4 w-full rounded-lg border border-dashed px-4 py-6 text-xs transition-colors',
                    'text-muted-foreground hover:border-foreground hover:text-foreground',
                    isDragging && 'border-foreground text-foreground bg-secondary/40',
                  )}
                >
                  {isUploading ? (
                    <span className="flex items-center justify-center gap-2">
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      Laddar upp…
                    </span>
                  ) : (
                    <>
                      Släpp filen här, eller klicka för att välja
                      <span className="block mt-1 opacity-70">
                        {formatCurrency(Math.abs(selectedPurchase.amount), selectedPurchase.currency ?? undefined)}
                        {' · '}
                        {formatDate(selectedPurchase.date)}
                      </span>
                    </>
                  )}
                </button>
              </div>
            </div>
          ) : selected ? (
            <DocumentPreview
              docUrl={docUrl}
              docMime={docMime}
              isProcessing={!!selected.isPlaceholder}
              loadState={docState}
              onRetry={() => { void loadDocument(selected.document_id) }}
            />
          ) : showOnboarding ? (
            <div className="h-full flex flex-col justify-center px-4 py-6">
              <div className="animate-fade-in">
                <StartCard
                  card="geese"
                  layout="bleed-left"
                  dense
                  floatIcons
                  title={tStart('inbox_title')}
                  body={tStart('inbox_body')}
                  primary={{ label: tStart('inbox_primary'), href: '/settings/mail' }}
                  secondary={{
                    label: tStart('inbox_secondary'),
                    onClick: () => fileInputRef.current?.click(),
                  }}
                  onDismiss={handleDismissOnboarding}
                  dismissLabel={tStart('inbox_dismiss')}
                />
                <p className="mt-4 text-center text-xs text-muted-foreground">
                  {t('drop_anywhere_hint')}
                </p>
              </div>
            </div>
          ) : (
            <EmptyPreview
              onUploadClick={() => fileInputRef.current?.click()}
              // Only offer activation when we know there is nothing to retire:
              // a failed address read is not a "you have no address yet".
              onActivateInbox={inboxAddress || addressLoadFailed ? null : handleRotateAddress}
              isActivating={isRotating}
            />
          )}
          {isDragging && (
            <div className="absolute inset-0 bg-primary/5 border-2 border-dashed border-primary rounded-lg m-4 flex items-center justify-center pointer-events-none">
              <p className="text-sm font-medium text-primary">Släpp filen för att ladda upp</p>
            </div>
          )}
        </main>

        {/* Fields rail. Below xl it stacks below the preview as part of the
            single vertical feed (top border for separation). At xl+ it's the
            third pane with a left border. With an empty inbox no row can be
            selected, so below xl it is hidden to keep the stacked empty state
            to just the list column. */}
        <aside
          className={cn(
            'border-t xl:border-t-0 xl:border-l xl:overflow-y-auto pt-4 xl:block pb-4',
            !hasAnyItem && 'hidden xl:block'
          )}
        >
          {selectedPurchase ? (
            <PurchaseRail purchase={selectedPurchase} />
          ) : selected ? (
            <FieldsRail
              item={selected}
              docMime={docMime}
              accountingMethod={accountingMethod}
              onDelete={() => handleDelete(selected.id)}
              onBookDirect={() => setBookDirectOpen(true)}
              onCreateSupplierInvoice={() => setCreateSupplierInvoiceOpen(true)}
              onMatchTransaction={() => setMatchPickerOpen(true)}
              onUnmatchTransaction={async () => {
                const targetId = selected.id
                const res = await fetch(
                  `/api/extensions/ext/invoice-inbox/items/${targetId}/unmatch-transaction`,
                  { method: 'POST' },
                )
                if (!res.ok) {
                  const json = await res.json().catch(() => ({}))
                  toast({
                    title: 'Kunde inte avbryta matchningen',
                    description: json.error ?? `HTTP ${res.status}`,
                    variant: 'destructive',
                  })
                  return
                }
                await Promise.all([fetchItems(), handleSelect(targetId)])
              }}
              onAskAssistant={
                identity.isVerified
                  ? (transactionId) => {
                      openAgentSheet({
                        intentId: 'transaction.categorization',
                        intentArgs: { transaction_id: transactionId },
                        contextRef: `transaction:${transactionId}`,
                      })
                    }
                  : undefined
              }
              isDeleting={isDeleting}
              onRetryRequested={async () => {
                await Promise.all([fetchItems(), handleSelect(selected.id)])
              }}
              onBookedLocally={async () => {
                // Re-read the item so the rail sees created_journal_entry_id
                // and switches to the booked state; without it the same
                // underlag can be posted twice.
                await Promise.all([fetchItems(), fetchPurchases(), handleSelect(selected.id)])
              }}
              onFieldsUpdated={(nextData) => {
                // Guard against stale closure: if the user navigated to a
                // different item between sending the PATCH and the response
                // arriving, the captured `selected` is no longer the
                // currently-selected one. Without the id check we'd write
                // item A's payload onto item B's row.
                const targetId = selected.id
                setSelected((prev) =>
                  prev?.id === targetId ? { ...prev, extracted_data: nextData } : prev
                )
                setItems((prev) =>
                  prev.map((it) =>
                    it.id === targetId ? { ...it, extracted_data: nextData } : it
                  )
                )
              }}
            />
          ) : (
            <div className="p-6 text-center text-sm text-muted-foreground">
              Välj en post för att se extraherade fält.
            </div>
          )}
        </aside>
      </div>
    </div>

    {selected && (
      <BookDirectlyDialog
        open={bookDirectOpen}
        onOpenChange={setBookDirectOpen}
        item={selected}
        docUrl={docUrl}
        docMime={docMime}
        onSuccess={async () => {
          await Promise.all([fetchItems(), handleSelect(selected.id)])
        }}
      />
    )}
    {selected && (
      <NewSupplierInvoiceDialog
        open={createSupplierInvoiceOpen}
        onOpenChange={setCreateSupplierInvoiceOpen}
        inboxItemId={selected.id}
        onCreated={async () => {
          // Stay in the inbox (the whole point of the modal): close, then
          // refresh the list + the selected item so it shows as converted.
          setCreateSupplierInvoiceOpen(false)
          await Promise.all([fetchItems(), handleSelect(selected.id)])
        }}
      />
    )}
    <BulkBookInboxDialog
      open={bulkBookOpen}
      onOpenChange={setBulkBookOpen}
      items={selectedItems}
      onSuccess={async () => {
        clearSelection()
        await fetchItems()
      }}
    />
    {selected && (
      <TransactionMatchPicker
        open={matchPickerOpen}
        onClose={() => setMatchPickerOpen(false)}
        inboxItemId={selected.id}
        extractedData={selected.extracted_data}
        onMatched={async () => {
          await Promise.all([fetchItems(), handleSelect(selected.id)])
        }}
      />
    )}
    </div>
  )
}


// ── Inbox address bar ────────────────────────────────────────
// The address plus its copy and rotate controls. Owns the copy state so the
// header can report an honest outcome: a clipboard write rejects for ordinary
// reasons (insecure context, a blocking Permissions-Policy, a document that
// lost focus) and the previous handler swallowed that and said "Adress
// kopierad" anyway. The user then waits for supplier invoices at an address
// they never captured, which is unrecoverable in the sense that matters: no
// invoice ever arrives and nothing explains why.
//
// Treatment mirrors CopyBlock in components/settings/ApiKeysPanel.tsx: icon
// swap for the state, one ochre AttnLine on failure, live region always
// mounted. No toast on any path, so nothing here can be evicted by (or evict)
// another toast under TOAST_LIMIT = 1.

function InboxAddressBar({
  address,
  onRotate,
  isRotating,
}: {
  address: string
  onRotate: () => void
  isRotating: boolean
}) {
  const t = useTranslations('inbox_workspace')
  const [copyState, setCopyState] = useState<AddressCopyState>('idle')

  async function handleCopy() {
    // The clipboard write is the first await, so the click's user activation
    // still holds when it runs.
    const next = await copyInboxAddress(address)
    setCopyState(next)
    if (next === 'copied') setTimeout(() => setCopyState('idle'), 2000)
  }

  return (
    <div className="flex flex-col min-w-0">
      <div className="flex items-center gap-2 min-w-0">
        <span className="text-muted-foreground text-xs shrink-0">·</span>
        <code
          className={cn(
            'select-all font-mono text-xs text-muted-foreground min-w-0',
            // With no clipboard, reading the address off the screen is the only
            // way to get it: show it whole instead of ellipsised.
            copyState === 'failed' ? 'break-all' : 'truncate',
          )}
        >
          {address}
        </code>
        <button
          type="button"
          className="text-muted-foreground hover:text-foreground shrink-0"
          onClick={handleCopy}
          aria-label={t('copy_address')}
          title={t('copy_address')}
        >
          {copyState === 'copied' ? (
            <Check className="h-3.5 w-3.5 text-success" />
          ) : copyState === 'failed' ? (
            <AlertTriangle className="h-3.5 w-3.5 text-attn" />
          ) : (
            <Copy className="h-3.5 w-3.5" />
          )}
        </button>
        <button
          type="button"
          className="text-muted-foreground hover:text-foreground shrink-0"
          onClick={onRotate}
          disabled={isRotating}
          title="Rotera till ny adress"
        >
          {isRotating ? (
            <Loader2 className="h-3.5 w-3.5 animate-spin" />
          ) : (
            <RotateCcw className="h-3.5 w-3.5" />
          )}
        </button>
      </div>
      {/* Always mounted so the sentence is announced when it appears, not
          merely inserted. */}
      <div role="status" aria-live="polite">
        {copyState === 'failed' && (
          <AttnLine className="mt-1">{t('copy_address_failed')}</AttnLine>
        )}
      </div>
    </div>
  )
}

// ── List row ─────────────────────────────────────────────────

function InboxRow({
  item,
  selected,
  onClick,
  isChecked,
  onToggleChecked,
  anyChecked,
}: {
  item: InboxItem
  selected: boolean
  onClick: () => void
  isChecked: boolean
  onToggleChecked: () => void
  /** True when bulk-select mode is active anywhere in the list: keeps the
      checkbox visible (otherwise it's hover-only on desktop). */
  anyChecked: boolean
}) {
  const t = useTranslations('inbox_workspace')
  const amount = pickAmount(item)
  const supplierName = pickSupplierName(item)
  const invoiceDate = pickInvoiceDate(item)
  const isPlaceholder = !!item.isPlaceholder
  const status = deriveInboxStatus(item)
  const isErrored = status === 'error'
  const isBooked = status === 'booked'
  const isLinkedToTransaction = status === 'linked'
  // Staged upload: the row is real (that IS the "mottaget" ack) but the
  // deferred AI extraction is still in flight. The realtime refetch flips it.
  const isExtracting = status === 'processing'
  // A chat question the sender never answered (48h TTL hit): the missing
  // info should be completed here instead. Quiet hint, not a status: the
  // item still books normally. Booked items drop the reminder.
  const hasUnansweredQuestion =
    !isBooked && item.channel_context?.pending_question?.status === 'moved_to_app'

  const receivedMeta = (
    <span className="truncate">
      {timeAgo(item.email_received_at ?? item.created_at)}
      {invoiceDate && (
        <> · <span className="tabular-nums">{formatDate(invoiceDate)}</span></>
      )}
    </span>
  )

  return (
    <li
      className={cn(
        'group flex items-stretch border-b transition-colors',
        selected ? 'bg-background border-l-2 border-l-primary' : 'hover:bg-background',
        isErrored && !selected && 'bg-destructive/[0.03]'
      )}
    >
      {!isPlaceholder && (
        <div
          className={cn(
            'flex items-center pl-2.5 pr-1.5 transition-opacity',
            // Always visible on touch (no hover), or when any selection is active.
            anyChecked ? 'opacity-100' : 'md:opacity-0 md:group-hover:opacity-100 opacity-100'
          )}
          onClick={(e) => e.stopPropagation()}
        >
          <Checkbox
            checked={isChecked}
            onCheckedChange={onToggleChecked}
            aria-label="Markera post"
            className="h-3.5 w-3.5"
          />
        </div>
      )}
      <button
        type="button"
        onClick={onClick}
        disabled={isPlaceholder}
        className={cn(
          'flex-1 text-left px-3 py-2 flex flex-col gap-0.5 min-w-0',
          isPlaceholder && 'cursor-default'
        )}
      >
        <div className="flex items-center gap-2 min-w-0">
          {isPlaceholder ? (
            <Loader2 className="h-3 w-3 text-muted-foreground shrink-0 animate-spin" />
          ) : item.source === 'email' ? (
            <Mail className="h-3 w-3 text-muted-foreground shrink-0" />
          ) : item.source === 'whatsapp' ? (
            <WhatsAppMark className="h-3 w-3 shrink-0" />
          ) : item.source === 'peppol' ? (
            // Received as a structured e-invoice over the Peppol network.
            <Globe className="h-3 w-3 text-muted-foreground shrink-0" aria-label="Peppol" />
          ) : item.channel_context?.mail_provider === 'gmail' ? (
            // The hunt records which mailbox it pulled a receipt from, so the
            // brand is known rather than guessed. Mail that arrived by
            // forwarding has no connection behind it and keeps the envelope.
            <GoogleMark className="h-3 w-3 shrink-0" />
          ) : item.channel_context?.mail_provider === 'microsoft' ? (
            <MicrosoftMark className="h-3 w-3 shrink-0" />
          ) : (
            <Upload className="h-3 w-3 text-muted-foreground shrink-0" />
          )}
          <span className="text-sm font-medium truncate flex-1 min-w-0">
            {isPlaceholder
              ? (item.fileName ?? 'Nytt dokument')
              : (supplierName ?? item.email_subject ?? 'Okänt dokument')}
          </span>
          {isErrored && (
            <AlertTriangle className="h-3 w-3 text-destructive shrink-0" aria-label="Fel vid bearbetning" />
          )}
          {isLinkedToTransaction && (
            <Link2 className="h-3 w-3 text-success shrink-0" aria-label="Kopplad till transaktion" />
          )}
          {isBooked && (
            <Check className="h-3 w-3 text-success shrink-0" aria-label="Bokförd" />
          )}
        </div>
        <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
          {isPlaceholder ? (
            <span className="italic">Tolkar dokument med AI…</span>
          ) : isExtracting ? (
            <span className="flex items-center gap-1.5 min-w-0">
              <Badge variant="outline" className="font-normal">
                <Loader2 className="h-2.5 w-2.5 mr-1 animate-spin" />
                {t('processing_chip')}
              </Badge>
              {receivedMeta}
            </span>
          ) : item.extraction_skipped || hasUnansweredQuestion ? (
            <span className="flex items-center gap-1.5 min-w-0">
              {item.extraction_skipped && (
                <Badge variant="outline" className="font-normal">Inte AI-tolkad</Badge>
              )}
              {hasUnansweredQuestion && (
                <Badge variant="outline" className="font-normal text-attn border-attn/40">
                  {t('wa_question_badge')}
                </Badge>
              )}
              {receivedMeta}
            </span>
          ) : (
            receivedMeta
          )}
          {!isPlaceholder && amount != null && (
            <span className="tabular-nums shrink-0">
              {formatCurrency(amount, pickCurrency(item))}
            </span>
          )}
        </div>
      </button>
    </li>
  )
}

// ── Document preview pane ────────────────────────────────────
// (placed below the row so editors can fold the row cleanly)

export function DocumentPreview({
  docUrl,
  docMime,
  isProcessing = false,
  loadState,
  onRetry,
}: {
  docUrl: string | null
  docMime: string | null
  isProcessing?: boolean
  /** Omitted by callers that only ever hold a resolved URL. */
  loadState?: DocumentLoadState
  onRetry?: () => void
}) {
  const t = useTranslations('inbox_workspace')
  const state: DocumentLoadState = loadState ?? (docUrl ? 'ready' : 'none')

  if (isProcessing) {
    return (
      <div className="h-full flex flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
        <Loader2 className="h-6 w-6 animate-spin" />
        <span>Tolkar dokument med AI…</span>
      </div>
    )
  }
  if (state === 'loading') {
    return (
      <div className="h-full flex flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
        <Loader2 className="h-6 w-6 animate-spin" />
        <span>{t('document_loading')}</span>
      </div>
    )
  }
  if (state === 'error' || (state === 'ready' && !docUrl)) {
    // The row points at a stored document: say that it could not be shown, not
    // that there is nothing attached.
    return (
      <div className="h-full flex flex-col items-center justify-center gap-3 px-6 text-center text-sm text-muted-foreground">
        <AlertTriangle className="h-5 w-5 text-attn" />
        <span>{t('document_load_failed')}</span>
        {onRetry && (
          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={onRetry}>
            {t('retry')}
          </Button>
        )}
      </div>
    )
  }
  if (!docUrl) {
    return (
      <div className="h-full flex items-center justify-center text-sm text-muted-foreground">
        <FileText className="h-5 w-5 mr-2" />
        Inget underlag bifogat
      </div>
    )
  }
  return (
    <div className="h-full w-full p-4 flex items-start justify-center overflow-hidden">
      {docMime?.startsWith('image/') ? (
        // Image: frame hugs the image, capped at the parent's visible box.
        <div className="max-h-full max-w-3xl bg-background rounded-lg border overflow-hidden flex">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={docUrl}
            alt="Underlag"
            className="block max-h-[calc(100vh-9rem)] max-w-full w-auto h-auto object-contain"
          />
        </div>
      ) : docMime === 'text/html' ? (
        // HTML mail underlag: arbitrary sender-controlled markup. sandbox
        // with no tokens = opaque origin, no scripts, no forms, no popups.
        // bg-white because mail HTML assumes a white canvas and would render
        // transparent (unreadable in dark mode) otherwise.
        <div className="h-full w-full max-w-3xl bg-background rounded-lg border overflow-hidden">
          <iframe
            src={docUrl}
            sandbox=""
            className="w-full h-full border-0 bg-white"
            title="Underlag"
          />
        </div>
      ) : (
        // PDF: iframe needs explicit height, frame fills the available pane.
        <div className="h-full w-full max-w-3xl bg-background rounded-lg border overflow-hidden">
          <iframe src={docUrl} className="w-full h-full border-0" title="Underlag" />
        </div>
      )}
    </div>
  )
}

// ── Empty preview state ──────────────────────────────────────


function EmptyPreview({
  onUploadClick,
  onActivateInbox,
  isActivating,
}: {
  onUploadClick: () => void
  onActivateInbox: (() => void) | null
  isActivating: boolean
}) {
  return (
    <div className="h-full flex flex-col items-center justify-center text-center px-6 gap-3">
      <Inbox className="h-10 w-10 text-muted-foreground/40" />
      <div>
        <p className="text-sm font-medium">
          {onActivateInbox ? 'Aktivera din inkorgsadress' : 'Välj ett dokument från listan'}
        </p>
        <p className="text-xs text-muted-foreground mt-1">
          {onActivateInbox
            ? 'Ditt bolag får en unik e-postadress som leverantörer kan skicka fakturor till.'
            : 'Eller dra och släpp en fil var som helst på sidan för att ladda upp.'}
        </p>
      </div>
      <div className="flex gap-2">
        {onActivateInbox && (
          <Button size="sm" onClick={onActivateInbox} disabled={isActivating}>
            {isActivating ? (
              <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
            ) : (
              <Mail className="h-3.5 w-3.5 mr-1.5" />
            )}
            Aktivera inkorgsadress
          </Button>
        )}
        <Button variant="outline" size="sm" onClick={onUploadClick}>
          <Plus className="h-3.5 w-3.5 mr-1.5" />
          Ladda upp en fil
        </Button>
      </div>
    </div>
  )
}

interface InboxMailConnection {
  id: string
  provider: 'gmail' | 'microsoft'
  emailAddress: string
  status: 'active' | 'needs_reconsent' | 'revoked'
  lastSearchedAt: string | null
}

// ── Purchases with no underlag ───────────────────────────────

/**
 * A bank purchase that has no document at all.
 *
 * These have never been on this page, because the page lists documents and a
 * purchase without one has nothing to list. They are the other half of the
 * question the receipt hunt asks, and the half a person can act on: fetch the
 * invoice from wherever the supplier keeps it, or ask whoever made the purchase.
 */
export interface PurchaseWithoutUnderlag {
  id: string
  date: string
  description: string | null
  merchant_name: string | null
  amount: number
  currency: string | null
  amount_sek: number | null
  portal: { vendor: string; url: string; note: string | null } | null
}

function PurchaseRow({
  purchase,
  selected,
  onClick,
}: {
  purchase: PurchaseWithoutUnderlag
  selected: boolean
  onClick: () => void
}) {
  const t = useTranslations('inbox_workspace')
  return (
    <li>
      <button
        type="button"
        onClick={onClick}
        className={cn(
          'w-full text-left px-3 py-2 border-b transition-colors',
          selected ? 'bg-secondary' : 'hover:bg-secondary/60',
        )}
      >
        <div className="flex items-baseline justify-between gap-2">
          <span className="text-[13px] truncate">
            {purchase.merchant_name || purchase.description || t('purchase_unknown')}
          </span>
          <span className="text-xs tabular-nums shrink-0">
            {formatCurrency(Math.abs(purchase.amount), purchase.currency ?? undefined)}
          </span>
        </div>
        <div className="flex items-baseline justify-between gap-2 mt-0.5">
          <span className="text-xs text-muted-foreground tabular-nums">{formatDate(purchase.date)}</span>
          {/* A chip only when the row deviates: here, when we can actually
              tell the user where to go. */}
          {purchase.portal && (
            <Badge data-ph-mask="" variant="outline" className="text-[10px] font-normal">
              {purchase.portal.vendor}
            </Badge>
          )}
        </div>
      </button>
    </li>
  )
}

function PurchaseRail({ purchase }: { purchase: PurchaseWithoutUnderlag }) {
  const t = useTranslations('inbox_workspace')
  return (
    <div className="p-4 space-y-4">
      <div>
        <h3 className="text-sm">
          {purchase.merchant_name || purchase.description || t('purchase_unknown')}
        </h3>
        <p className="text-xs text-muted-foreground mt-0.5">{t('purchase_kind')}</p>
      </div>

      <dl className="space-y-1.5 text-xs">
        <div className="flex justify-between gap-3">
          <dt className="text-muted-foreground">Datum</dt>
          <dd className="tabular-nums">{formatDate(purchase.date)}</dd>
        </div>
        <div className="flex justify-between gap-3">
          <dt className="text-muted-foreground">Belopp</dt>
          <dd className="tabular-nums">
            {formatCurrency(Math.abs(purchase.amount), purchase.currency ?? undefined)}
          </dd>
        </div>
        {purchase.description && (
          <div className="flex justify-between gap-3">
            <dt className="text-muted-foreground shrink-0">{t('purchase_bank_text')}</dt>
            <dd className="text-muted-foreground text-right break-words">{purchase.description}</dd>
          </div>
        )}
      </dl>

      {purchase.portal ? (
        <div className="space-y-2">
          <p className="text-xs text-muted-foreground">
            {purchase.portal.note ??
              `${purchase.portal.vendor} skickar ingen fil. Fakturan ligger bakom en inloggning.`}
          </p>
          {/* We never log in for anyone. Knowing where the invoice is costs no
              password and is most of the value. */}
          <Button size="sm" className="w-full" asChild>
            <a href={purchase.portal.url} target="_blank" rel="noopener noreferrer">
              Öppna {purchase.portal.vendor}
              <ExternalLink className="h-3.5 w-3.5 ml-1.5" />
            </a>
          </Button>
        </div>
      ) : (
        <p className="text-xs text-muted-foreground">
          Vi hittade ingen bilaga och känner inte till någon portal för den här leverantören. Ladda upp
          kvittot här, eller vidarebefordra det till inkorgsadressen.
        </p>
      )}
    </div>
  )
}

// ── Proposed kontering ───────────────────────────────────────

/**
 * What this underlag would be booked as, for a matched transaction.
 *
 * Read-only on purpose. Per convention 14 nothing AI-suggested posts without
 * review, so this shows the answer and the existing booking dialog remains the
 * only way to commit it. The lines come from the same builder the commit path
 * uses, so what is shown here is what would be posted.
 *
 * The route answers honestly when it cannot propose: a company with no rule and
 * no history, a foreign-currency row the engine would mis-VAT, a transaction
 * that already carries a verifikat. Each of those renders as a sentence rather
 * than as an empty table, because "we have nothing for this" is information.
 */
type SuggestedBooking = {
  source:
    | 'mapping_rule'
    | 'booking_template'
    | 'counterparty_template'
    | 'no_mapping'
    | 'no_transaction'
    | 'already_booked'
    | 'currency_unsupported'
  lines: { account_number: string; debit_amount: number; credit_amount: number; description: string }[]
  confidence: number | null
  requires_review?: boolean
  direction_mismatch?: boolean
  description?: string
  rule_name?: string | null
  entry_date?: string
  /** Skeleton rows seeded from the matched bank transaction when `lines` is
      empty: the amount in SEK against the settlement account, cost side left
      blank. Editor prefill only; never rendered as a proposal. */
  fallback_lines?: { account_number: string; debit_amount: number; credit_amount: number; description: string }[]
  /** The matched bank row's SEK amount and date, present on empty proposals
      so the dialog can still show the kronor figure. */
  transaction?: { amount_sek: number; date: string } | null
}

const SUGGESTION_SOURCE_LABEL: Record<string, string> = {
  counterparty_template: 'Så du brukar bokföra den här leverantören',
  booking_template: 'Från en bokföringsmall',
  mapping_rule: 'Från en konteringsregel',
}

/** Why there is no proposal, said plainly rather than shown as an empty table. */
const SUGGESTION_EMPTY_REASON: Record<string, string> = {
  no_mapping: 'Okänd leverantör. Bokför en gång, så känns den igen.',
  currency_unsupported:
    'Köpet är i utländsk valuta och matchades av en konteringsregel. Momsen skulle bli fel, så vi visar inget förslag.',
}

function ProposedBooking({
  itemId,
  onLoaded,
}: {
  itemId: string
  /** Hands the loaded proposal up so the editor can open pre-filled with it. */
  onLoaded?: (data: SuggestedBooking | null) => void
}) {
  const t = useTranslations('inbox_workspace')
  const [state, setState] = useState<'loading' | 'ready' | 'failed'>('loading')
  const [data, setData] = useState<SuggestedBooking | null>(null)

  useEffect(() => {
    // Arrowing down a list fires one of these per row. Without the abort the
    // superseded requests still run to completion server-side, and a slow one
    // can resolve after a faster later one.
    const controller = new AbortController()
    let cancelled = false
    setState('loading')
    setData(null)
    fetch(`/api/extensions/ext/invoice-inbox/items/${itemId}/suggest-booking`, {
      method: 'POST',
      signal: controller.signal,
    })
      .then(async (res) => {
        if (!res.ok) throw new Error(String(res.status))
        return (await res.json()) as { data: SuggestedBooking }
      })
      .then((json) => {
        if (cancelled) return
        setData(json.data)
        onLoaded?.(json.data)
        setState('ready')
      })
      .catch(() => {
        // A suggestion that cannot be fetched is not something the user did:
        // stay quiet rather than showing an error beside their document.
        if (!cancelled) {
          onLoaded?.(null)
          setState('failed')
        }
      })
    return () => {
      cancelled = true
      controller.abort()
    }
    // onLoaded is intentionally excluded: a new identity each render
    // would refetch on every parent render.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [itemId])

  if (state === 'loading') return <Skeleton className="h-24 w-full" />
  if (state === 'failed' || !data) return null
  if (data.source === 'already_booked' || data.source === 'no_transaction') return null

  if (data.lines.length === 0) {
    const reason = SUGGESTION_EMPTY_REASON[data.source]
    return reason ? <p className="text-xs text-muted-foreground">{reason}</p> : null
  }

  const debit = data.lines.reduce((t, l) => t + (l.debit_amount || 0), 0)
  const credit = data.lines.reduce((t, l) => t + (l.credit_amount || 0), 0)
  const balanced = Math.round((debit - credit) * 100) === 0

  return (
    <div className="space-y-2">
      <div className="flex items-baseline justify-between gap-3">
        <h3 className="text-xs">{t('proposal_title')}</h3>
        {data.entry_date && (
          <span className="text-[11px] text-muted-foreground tabular-nums">
            Bokförs {formatDate(data.entry_date)}
          </span>
        )}
      </div>

      <table className="w-full border-collapse text-xs">
        <thead>
          <tr className="text-[10px] uppercase tracking-wider text-muted-foreground">
            <th className="pb-1 pr-2 text-left font-medium" colSpan={2}>
              Konto
            </th>
            <th className="pb-1 text-right font-medium w-20">Debet</th>
            <th className="pb-1 pl-2 text-right font-medium w-20">Kredit</th>
          </tr>
        </thead>
        <tbody>
          {data.lines.map((l, i) => (
            <tr key={`${l.account_number}-${i}`} className="border-b border-border/40 last:border-0">
              <td className="py-1 pr-2 tabular-nums text-muted-foreground w-10">{l.account_number}</td>
              <td className="py-1 pr-2 truncate" title={l.description}>
                {l.description}
              </td>
              <td className="py-1 text-right tabular-nums whitespace-nowrap w-20">
                {l.debit_amount ? formatCurrency(l.debit_amount) : ''}
              </td>
              <td className="py-1 pl-2 text-right tabular-nums whitespace-nowrap w-20 text-muted-foreground">
                {l.credit_amount ? formatCurrency(l.credit_amount) : ''}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Balance is stated rather than assumed: the builder balances by
          construction, so a mismatch here means something upstream is wrong
          and the user should see it before booking. */}
      {!balanced && (
        <p className="text-[11px] text-warning">
          Debet {formatCurrency(debit)} · Kredit {formatCurrency(credit)}
        </p>
      )}

      {(SUGGESTION_SOURCE_LABEL[data.source] || data.requires_review || data.direction_mismatch) && (
        <details className="text-[11px] text-muted-foreground">
          <summary className="cursor-pointer hover:text-foreground">{t('proposal_why')}</summary>
          <div className="pt-1.5 space-y-1">
            {SUGGESTION_SOURCE_LABEL[data.source] && <p>{SUGGESTION_SOURCE_LABEL[data.source]}</p>}
            {data.rule_name && <p>Regel: {data.rule_name}</p>}
            {data.direction_mismatch && (
              <p className="text-warning">
                Beloppets riktning stämmer inte med hur leverantören brukar bokföras. Kontrollera innan du
                bokför.
              </p>
            )}
            {data.requires_review && !data.direction_mismatch && (
              <p>Förslaget är osäkert och bör granskas innan du bokför.</p>
            )}
          </div>
        </details>
      )}
    </div>
  )
}

// ── Fields rail ──────────────────────────────────────────────

function FieldsRail({
  item,
  docMime,
  accountingMethod,
  onDelete,
  onBookDirect,
  onCreateSupplierInvoice,
  onMatchTransaction,
  onUnmatchTransaction,
  onAskAssistant,
  isDeleting,
  onFieldsUpdated,
  onRetryRequested,
  onBookedLocally,
}: {
  item: InboxItem
  docMime: string | null
  accountingMethod: AccountingMethod
  onDelete: () => void
  onBookDirect: () => void
  onCreateSupplierInvoice: () => void
  onMatchTransaction: () => void
  onUnmatchTransaction: () => Promise<void>
  onAskAssistant?: (transactionId: string) => void
  isDeleting: boolean
  onFieldsUpdated: (data: InvoiceExtractionResult) => void
  /** Re-read the item after this rail posted a verifikat for it. */
  onBookedLocally?: () => void
  onRetryRequested: () => Promise<void>
}) {
  const { toast } = useToast()
  const hasAi = useCapability(CAPABILITY.ai)
  const { appName } = useBranding()
  const data = item.extracted_data
  const [proposal, setProposal] = useState<SuggestedBooking | null>(null)
  const [editOpen, setEditOpen] = useState(false)
  // A proposal belongs to one item; carrying it to the next would offer the
  // previous underlag's accounts for this one's money.
  useEffect(() => {
    setProposal(null)
    setEditOpen(false)
  }, [item.id])

  const isProcessed = !!item.created_supplier_invoice_id
  // The verifikat this item resolved into: its own stamp, or the entry that
  // anchors its matched (and already booked) transaction. See InboxItem.
  const bookedEntryId =
    item.created_journal_entry_id ?? item.matched_transaction_journal_entry_id ?? null
  const isBookedDirectly = !isProcessed && !!bookedEntryId
  // "Resolved" now means a journal entry exists: matched_transaction_id alone
  // is not resolved, it's the prerequisite for booking against that tx.
  const isLinkedToTransaction = !isProcessed && !isBookedDirectly && !!item.matched_transaction_id
  const isResolved = isProcessed || isBookedDirectly
  // Staged upload mid-extraction: a real row whose deferred AI extraction has
  // not landed yet. Same disabled treatment as the optimistic placeholder
  // (skeleton fields, no actions); the realtime flip re-enables everything.
  const isExtracting = !item.isPlaceholder && item.status === 'processing'
  const inFlight = !!item.isPlaceholder || isExtracting
  const [isUnmatchingTx, setIsUnmatchingTx] = useState(false)
  const [isRetrying, setIsRetrying] = useState(false)
  // Larger edit surface for the extracted fields (the rail is deliberately
  // compact and users found it hard to read/fill: dialog reuses the same
  // autosaving list at a comfortable size). Closes on item switch so it never
  // shows fields for a row other than the selected one.
  const [fieldsExpanded, setFieldsExpanded] = useState(false)
  useEffect(() => {
    setFieldsExpanded(false)
  }, [item.id])
  const t = useTranslations('inbox_workspace')

  // WhatsApp chat context: verified human answers captured by the intake bot
  // (photo caption, representation deltagare + syfte, sender note). Rendered
  // as read-only provenance above the editable fields, mirroring the email
  // metadata block. `moved_to_app` means the bot asked a question in the chat
  // that was never answered (48h TTL): the missing info should be completed
  // here before booking.
  const waCtx = item.source === 'whatsapp' ? item.channel_context ?? null : null
  const waParticipants = (waCtx?.representation?.participants ?? [])
    .map(renderChannelParticipant)
    .filter((n) => n.length > 0)
  const waPurpose = waCtx?.representation?.purpose?.trim() || null
  const waCaption = waCtx?.caption?.trim() || null
  const waNote = waCtx?.user_note?.trim() || null
  const waUnanswered =
    !isResolved && waCtx?.pending_question?.status === 'moved_to_app'
  const showWaBlock =
    waParticipants.length > 0 || !!waPurpose || !!waCaption || !!waNote || waUnanswered

  // Surface a quiet hint when extraction caught a supplier name but no existing
  // supplier matched. The actual creation flow lives on the leverantörsfaktura
  // form (Skapa & välj), so we don't render a separate button here.
  const extractedSupplierName = data?.supplier?.name?.trim() || null
  const showNoMatchHint =
    !isResolved &&
    !item.matched_supplier_id &&
    !!extractedSupplierName

  const handleRetry = async () => {
    // Retry overwrites extracted_data wholesale server-side, including any
    // manual field edits: make the user opt into that loss explicitly.
    if (hasAnyExtractedField(data) && !confirm(t('retry_overwrite_confirm'))) return
    setIsRetrying(true)
    try {
      const res = await fetch(
        `/api/extensions/ext/invoice-inbox/items/${item.id}/retry-extraction`,
        { method: 'POST' },
      )
      if (!res.ok) {
        toast({
          title: 'Tolkning misslyckades',
          description: (await resolveFailure(res)).message,
          variant: 'destructive',
        })
        return
      }
      toast({ title: 'Tolkning lyckades' })
      await onRetryRequested()
    } finally {
      setIsRetrying(false)
    }
  }

  return (
    <div className="flex flex-col h-full">
      {/* Email metadata */}
      {item.source === 'email' && (item.email_from || item.email_subject) && (
        <div className="border-b px-4 py-3 text-xs space-y-1">
          {item.email_from && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-14 shrink-0">Från</span>
              <span className="truncate">{item.email_from}</span>
            </div>
          )}
          {item.email_subject && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-14 shrink-0">Ämne</span>
              <span className="truncate">{item.email_subject}</span>
            </div>
          )}
          {item.email_received_at && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-14 shrink-0">Mottaget</span>
              <span>{new Date(item.email_received_at).toLocaleString('sv-SE')}</span>
            </div>
          )}
        </div>
      )}

      {/* WhatsApp chat context (see waCtx derivation above). */}
      {showWaBlock && (
        <div className="border-b px-4 py-3 text-xs space-y-1">
          <h3 className="text-xs uppercase tracking-wide text-muted-foreground mb-2">
            {t('wa_block_title')}
          </h3>
          {waCaption && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-20 shrink-0">{t('wa_caption_label')}</span>
              <span className="break-words min-w-0">{waCaption}</span>
            </div>
          )}
          {waParticipants.length > 0 && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-20 shrink-0">{t('wa_participants_label')}</span>
              <span className="break-words min-w-0">{waParticipants.join(', ')}</span>
            </div>
          )}
          {waPurpose && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-20 shrink-0">{t('wa_purpose_label')}</span>
              <span className="break-words min-w-0">{waPurpose}</span>
            </div>
          )}
          {waNote && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-20 shrink-0">{t('wa_note_label')}</span>
              <span className="break-words min-w-0">{waNote}</span>
            </div>
          )}
          {waUnanswered && (
            <AttnLine className="pt-1">{t('wa_question_unanswered')}</AttnLine>
          )}
        </div>
      )}

      {/* AI classification: what kind of document this is and how it was
          paid. Read-only context above the editable fields; absent for
          extractions from before the fields existed. */}
      {(data?.documentKind || data?.payment?.method || data?.pages) && (
        <div className="border-b px-4 py-3 text-xs space-y-1">
          {data?.documentKind && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-14 shrink-0">{t('doc_kind_label')}</span>
              <span>{t(`doc_kind_${data.documentKind}`)}</span>
            </div>
          )}
          {data?.payment?.method && (
            <div className="flex gap-2">
              <span className="text-muted-foreground w-14 shrink-0">{t('payment_label')}</span>
              <span>
                {t(`payment_${data.payment.method}`)}
                {data.payment.cardLast4 ? ` •• ${data.payment.cardLast4}` : ''}
                {data.purchaseTime ? ` · ${data.purchaseTime}` : ''}
              </span>
            </div>
          )}
          {data?.pages && (
            <div className="text-muted-foreground">
              {t('pages_partial_note', {
                analyzed: data.pages.analyzed,
                total: data.pages.total,
              })}
            </div>
          )}
        </div>
      )}

      {item.error_message && (
        <div className="border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-xs space-y-2">
          <div className="flex items-start gap-2">
            <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0 mt-0.5" />
            <div>
              <p className="font-medium">Fel vid bearbetning</p>
              <p className="text-muted-foreground mt-0.5">{item.error_message}</p>
            </div>
          </div>
          {item.document_id && (
            <Button
              variant="outline"
              size="sm"
              className="w-full h-7 text-xs"
              onClick={handleRetry}
              disabled={isRetrying}
            >
              {isRetrying ? (
                <Loader2 className="h-3 w-3 mr-1.5 animate-spin" />
              ) : (
                <RotateCcw className="h-3 w-3 mr-1.5" />
              )}
              Försök igen
            </Button>
          )}
        </div>
      )}

      {/* Mail body. Shown only when nothing was attached: then the body IS the
          delivered content, and without it the item is a dead end that says
          "no attachments" and nothing more. This is what makes a Gmail forward
          possible to set up, since Gmail sends its confirmation code as a
          plain-text mail with no attachment. Rendered as selectable text so
          the code can be copied out. */}
      {item.source === 'email' && !item.document_id && (
        <div className="border-b px-4 py-3">
          <h3 className="text-xs uppercase tracking-wide text-muted-foreground mb-2">
            {t('email_body_label')}
          </h3>
          {item.email_body_text?.trim() ? (
            <pre className="max-h-64 overflow-y-auto whitespace-pre-wrap break-words font-sans text-xs leading-relaxed text-foreground">
              {item.email_body_text}
            </pre>
          ) : (
            <p className="text-xs text-muted-foreground">{t('email_body_empty')}</p>
          )}
        </div>
      )}

      {/* Hint only: creation happens on the leverantörsfaktura form via "Skapa & välj" */}
      {showNoMatchHint && (
        <div className="border-b bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
          <span className="text-foreground font-medium">{extractedSupplierName}</span>
          {' finns inte upplagd än. Den skapas när du gör leverantörsfakturan.'}
        </div>
      )}

      {/* Skipped-extraction hint: explains the empty fields and points the
          user to the manual paths (transaction link or supplier invoice).
          Deliberately reason-agnostic: skip covers sandbox, BYO-extraction
          and unsliceable PDFs, not just page count anymore. */}
      {item.extraction_skipped && !isResolved && (
        <div className="border-b bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
          {t('skipped_hint')}
        </div>
      )}

      {/* HEIC: extraction ran but Bedrock cannot read the format, so every
          field came back empty with no error. Tell the user why instead of
          leaving a silently blank rail (iPhone photos default to HEIC). */}
      {!item.extraction_skipped &&
        !isResolved &&
        hasAi &&
        (docMime === 'image/heic' || docMime === 'image/heif') &&
        !hasAnyExtractedField(data) && (
          <div className="border-b bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
            {t('heic_hint')}
          </div>
        )}

      {/* Extraction produced nothing (a crashed deferred worker swept back to
          'received', a swallowed failure, or a skipped run): offer the AI
          re-run right where the empty fields are. Mirrors the error-state
          retry above, which only renders when error_message is set. HEIC is
          excluded: Bedrock cannot read it, so a retry cannot succeed. */}
      {!inFlight &&
        !isResolved &&
        !item.error_message &&
        hasAi &&
        !!item.document_id &&
        !hasAnyExtractedField(data) &&
        docMime !== 'image/heic' &&
        docMime !== 'image/heif' && (
          <div className="border-b px-4 py-2">
            <Button
              variant="outline"
              size="sm"
              className="w-full h-7 text-xs"
              onClick={handleRetry}
              disabled={isRetrying}
            >
              {isRetrying ? (
                <Loader2 className="h-3 w-3 mr-1.5 animate-spin" />
              ) : (
                <RotateCcw className="h-3 w-3 mr-1.5" />
              )}
              {t('retry_extraction')}
            </Button>
          </div>
        )}

      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-4">
        {/* The proposed kontering comes first: it is the decision. The fields
            are the evidence you check when the decision looks wrong, so they
            fold. Reading order used to be the other way round, which meant
            scrolling past nine values to reach the one thing to approve.
            Suppressed while extraction is in flight: a proposal computed from
            empty fields would be an invitation to book nothing. */}
        {isLinkedToTransaction && !inFlight && (
          <ProposedBooking itemId={item.id} onLoaded={setProposal} />
        )}

        <details className="group" open={!isLinkedToTransaction}>
          <summary className="flex items-center gap-1.5 cursor-pointer list-none text-xs uppercase tracking-wide text-muted-foreground font-medium hover:text-foreground">
            <ChevronRight className="h-3 w-3 transition-transform group-open:rotate-90" />
            <span className="flex-1">{t('fields_summary')}</span>
            {/* A count, not a score. "5 av 12" read as a bad extraction even
                when a kvitto had given up everything a kvitto has: half those
                twelve fields only exist on an invoice. */}
            {!inFlight && countExtractedFields(data) > 0 && (
              <span className="tabular-nums normal-case tracking-normal">
                {t('fields_filled', { count: countExtractedFields(data) })}
              </span>
            )}
            {/* Kept from main: the fields are readable at rail width but not
                comfortable, so the expand still earns its place inside the
                fold. stopPropagation, or the summary would toggle under it. */}
            {!inFlight && (hasAnyExtractedField(data) || hasAi) && (
              <span
                role="button"
                tabIndex={0}
                onClick={(e) => { e.preventDefault(); e.stopPropagation(); setFieldsExpanded(true) }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault(); e.stopPropagation(); setFieldsExpanded(true)
                  }
                }}
                aria-label={t('expand_fields')}
                title={t('expand_fields')}
                className="p-1 -m-1 hover:text-foreground"
              >
                <Maximize2 className="h-3.5 w-3.5" />
              </span>
            )}
          </summary>
          <div className="pt-3">
        {inFlight ? (
          <div className="space-y-2">
            <div className="text-xs text-muted-foreground italic flex items-center gap-2 mb-2">
              <Loader2 className="h-3 w-3 animate-spin" />
              Tolkar dokument med AI…
            </div>
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-8 w-full" />
            ))}
          </div>
        ) : !hasAnyExtractedField(data) && !hasAi ? (
          // No fields were extracted (AI never ran) and the company doesn't have
          // the AI capability. Show an upsell in place of the blank field list:
          // upload and manual entry stay available via the actions below.
          <div className="rounded-lg border border-border bg-secondary/40 px-4 py-3 text-left">
            <div className="flex items-center gap-2 text-sm font-medium">
              <Sparkles className="h-4 w-4" />
              AI-tolkning ingår i abonnemanget
            </div>
            <p className="text-xs text-muted-foreground mt-1.5 leading-relaxed">
              Uppgradera för att låta {appName} läsa av leverantör, belopp och
              moms automatiskt. Du kan fortfarande fylla i fälten manuellt eller
              koppla dokumentet till en transaktion nedan.
            </p>
            <Button size="sm" className="mt-3" asChild>
              <Link href="/settings/billing">Uppgradera</Link>
            </Button>
          </div>
        ) : (
          <EditableFieldsList
            itemId={item.id}
            data={data ?? emptyExtraction()}
            disabled={isResolved}
            onUpdated={onFieldsUpdated}
          />
        )}
          </div>
        </details>
      </div>

      {/* Actions: hidden while AI extraction is in flight (optimistic
          placeholder AND staged 'processing' rows alike). */}
      {!inFlight && (
      <div className="border-t px-4 py-3 space-y-2">
        {isProcessed && item.created_supplier_invoice_id ? (
          <Link href={`/supplier-invoices/${item.created_supplier_invoice_id}`} className="block">
            <Button variant="default" size="sm" className="w-full">
              <ArrowRight className="h-3.5 w-3.5 mr-1.5" />
              Öppna leverantörsfaktura
            </Button>
          </Link>
        ) : isBookedDirectly && bookedEntryId ? (
          <Link href={`/bookkeeping/${bookedEntryId}`} className="block">
            <Button variant="default" size="sm" className="w-full">
              <ArrowRight className="h-3.5 w-3.5 mr-1.5" />
              Öppna verifikation
            </Button>
          </Link>
        ) : isLinkedToTransaction && item.matched_transaction_id ? (
          <>
            {/* Matched-to-tx state: show the bridge to booking. The user
                picks one of two actions: book themselves with the
                deterministic dialog, or hand off to the assistant. */}
            {onAskAssistant && (
              <Button
                variant="default"
                size="sm"
                className="w-full"
                onClick={() => onAskAssistant(item.matched_transaction_id!)}
              >
                Fråga assistenten
              </Button>
            )}
            {/* One control, and its scope is the whole verifikat. It opens
                pre-filled with the proposal when there is one and empty when
                there is not, so there is no separate "book manually" path to
                choose between. Nothing posts from here without the form's own
                review step (convention 14). */}
            <Button
              variant="outline"
              size="sm"
              className="w-full"
              onClick={() => setEditOpen(true)}
            >
              {proposal?.lines.length ? t('review_and_book') : t('book_manually')}
            </Button>
            <button
              type="button"
              onClick={async () => {
                setIsUnmatchingTx(true)
                try {
                  await onUnmatchTransaction()
                } finally {
                  setIsUnmatchingTx(false)
                }
              }}
              disabled={isUnmatchingTx}
              className="w-full text-xs text-muted-foreground hover:text-foreground hover:underline pt-1"
            >
              {isUnmatchingTx ? 'Avbryter…' : 'Avbryt matchning'}
            </button>
          </>
        ) : (
          <>
            {/* Unmatched state: the canonical next step is to find the bank
                transaction this underlag belongs to. Two escape hatches sit
                below it: "Skapa leverantörsfaktura" for users who want
                supplier-invoice tracking (accrual flow), and "Bokför som
                verifikat" for underlag that aren't a supplier invoice at all
                (bank fees, owner expenses, the underlag for a correction). The
                latter opens the same BookDirectlyDialog as the matched state,
                which works without a bank transaction and lets the user attach
                one if they want. Per BFL 5 kap 6-7 § the underlag must be
                bookable as a verifikat, not forced into a supplier invoice. */}
            <Button
              variant="default"
              size="sm"
              className="w-full"
              onClick={onMatchTransaction}
            >
              Matcha mot transaktion
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="w-full justify-between">
                  Andra sätt att bokföra
                  <ChevronDown className="h-3.5 w-3.5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start" className="w-64">
                <DropdownMenuItem
                  onClick={onCreateSupplierInvoice}
                  className="flex flex-col items-start gap-1"
                >
                  <span>Skapa leverantörsfaktura</span>
                  <span className="text-xs text-muted-foreground">
                    För leverantörsskulder du vill följa (periodisering).
                  </span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={onBookDirect}
                  className="flex flex-col items-start gap-1"
                >
                  <span>Bokför som verifikat</span>
                  <span className="text-xs text-muted-foreground">
                    För underlag som inte är en leverantörsfaktura (bankavgift, utlägg).
                  </span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </>
        )}
        <Button
          variant="ghost"
          size="sm"
          className="w-full"
          onClick={onDelete}
          disabled={isDeleting || isResolved}
          title={
            isProcessed
              ? 'Kopplad till leverantörsfaktura, kan inte tas bort'
              : isBookedDirectly
                ? 'Bokförd, kan inte tas bort'
                : isLinkedToTransaction
                  ? 'Kopplad till transaktion, koppla loss innan borttagning'
                  : undefined
          }
        >
          {isDeleting ? (
            <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
          ) : (
            <Trash2 className="h-3.5 w-3.5 mr-1.5" />
          )}
          Ta bort
        </Button>
        {isProcessed && (
          <Badge variant="secondary" className="w-full justify-center text-[10px]">
            <Check className="h-2.5 w-2.5 mr-1" />
            Bearbetad
          </Badge>
        )}
        {isBookedDirectly && (
          <Badge variant="secondary" className="w-full justify-center text-[10px]">
            <Check className="h-2.5 w-2.5 mr-1" />
            Bokförd
          </Badge>
        )}
        {isLinkedToTransaction &&
          (item.matched_transaction_id ? (
            <Link
              href={`/transactions?highlight=${item.matched_transaction_id}`}
              className="w-full"
            >
              <Badge
                variant="secondary"
                className="w-full justify-center text-[10px] hover:bg-secondary/80"
              >
                <Link2 className="h-2.5 w-2.5 mr-1" />
                Kopplad till transaktion
              </Badge>
            </Link>
          ) : (
            <Badge variant="secondary" className="w-full justify-center text-[10px]">
              <Link2 className="h-2.5 w-2.5 mr-1" />
              Kopplad till transaktion
            </Badge>
          ))}
      </div>
      )}

      <EditKonteringDialog
        open={editOpen}
        onOpenChange={setEditOpen}
        itemId={item.id}
        documentId={item.document_id ?? null}
        documentMime={docMime}
        documentUrl={null}
        fileName={item.fileName ?? null}
        transactionId={item.matched_transaction_id ?? null}
        // BFL 5 kap 6-7 § wants datum för affärshändelsen. The proposal's date
        // is the bank's, which is the event for a matched purchase. Without one
        // the document's own date is the next best truth; today is the day
        // somebody opened a dialog and is nobody's business event. The field is
        // editable either way, but a silent wrong default is not checked.
        entryDate={
          proposal?.entry_date ??
          data?.invoice?.invoiceDate ??
          new Date().toISOString().slice(0, 10)
        }
        description={data?.supplier?.name ?? item.email_subject ?? 'Underlag'}
        // No proposal is not the same as no amount: the matched bank row still
        // knows what left the account and where. The fallback skeleton keeps
        // the kronor figure in the form (regression report 2026-08-12: match,
        // "Bokför manuellt", and the amount no longer followed along).
        lines={proposal?.lines.length ? proposal.lines : (proposal?.fallback_lines ?? [])}
        matchedTransaction={proposal?.transaction ?? null}
        onBooked={() => {
          setEditOpen(false)
          // Realtime refreshes the list, but this rail renders from the
          // `selected` object the parent already fetched, so it would keep
          // offering "Granska och bokför" for an underlag that now has a
          // verifikat, and a second press would post a duplicate.
          onBookedLocally?.()
        }}
      />

      {/* Expanded fields editor: same autosaving list as the rail, at a
          readable size. Convention 13: centered modal. */}
      <Dialog open={fieldsExpanded} onOpenChange={setFieldsExpanded}>
        <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{t('fields_summary')}</DialogTitle>
          </DialogHeader>
          <EditableFieldsList
            itemId={item.id}
            data={data ?? emptyExtraction()}
            disabled={isResolved}
            onUpdated={onFieldsUpdated}
            variant="expanded"
          />
        </DialogContent>
      </Dialog>
    </div>
  )
}

// ── Extracted fields list ────────────────────────────────────

export function emptyExtraction(): InvoiceExtractionResult {
  return {
    supplier: { name: null, orgNumber: null, vatNumber: null, address: null, bankgiro: null, plusgiro: null },
    invoice: { invoiceNumber: null, invoiceDate: null, dueDate: null, paymentReference: null, currency: 'SEK' },
    lineItems: [],
    totals: { subtotal: null, vatAmount: null, total: null },
    vatBreakdown: [],
    confidence: 0,
  }
}

// Inline edit + debounced auto-save. The field set mirrors the
// UpdateExtractedDataSchema in extensions/general/invoice-inbox/index.ts.
type FieldKey =
  | 'supplier.name'
  | 'supplier.orgNumber'
  | 'supplier.vatNumber'
  | 'supplier.bankgiro'
  | 'supplier.plusgiro'
  | 'invoice.invoiceNumber'
  | 'invoice.paymentReference'
  | 'invoice.invoiceDate'
  | 'invoice.dueDate'
  | 'invoice.currency'
  | 'totals.total'
  | 'totals.vatAmount'

interface FieldDef {
  key: FieldKey
  label: string
  type: 'text' | 'date' | 'number'
  inputMode?: 'numeric' | 'decimal'
}

const FIELD_DEFS: FieldDef[] = [
  { key: 'supplier.name', label: 'Leverantör', type: 'text' },
  { key: 'supplier.orgNumber', label: 'Org.nr', type: 'text' },
  { key: 'supplier.vatNumber', label: 'VAT-nr', type: 'text' },
  { key: 'invoice.currency', label: 'Valuta', type: 'text' },
  { key: 'totals.total', label: 'Totalt', type: 'number', inputMode: 'decimal' },
  { key: 'totals.vatAmount', label: 'Moms', type: 'number', inputMode: 'decimal' },
  { key: 'supplier.bankgiro', label: 'Bankgiro', type: 'text' },
  { key: 'supplier.plusgiro', label: 'Plusgiro', type: 'text' },
  { key: 'invoice.invoiceNumber', label: 'Fakturanr', type: 'text' },
  { key: 'invoice.paymentReference', label: 'OCR/Referens', type: 'text' },
  { key: 'invoice.invoiceDate', label: 'Fakturadatum', type: 'date' },
  { key: 'invoice.dueDate', label: 'Förfallodatum', type: 'date' },
]

function readField(data: InvoiceExtractionResult, key: FieldKey): string {
  const [group, name] = key.split('.') as [keyof InvoiceExtractionResult, string]
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const value = (data[group] as any)?.[name]
  if (value == null) return ''
  return String(value)
}

function buildPatchBody(key: FieldKey, raw: string, currency: string) {
  const [group, name] = key.split('.')
  const trimmed = raw.trim()

  if (group === 'totals') {
    const num = trimmed === '' ? null : Number(trimmed.replace(',', '.'))
    if (num != null && !Number.isFinite(num)) return null
    return { totals: { [name]: num } }
  }
  if (group === 'invoice' && (name === 'invoiceDate' || name === 'dueDate')) {
    const value = trimmed === '' ? null : trimmed
    return { invoice: { [name]: value } }
  }
  if (group === 'invoice' && name === 'currency') {
    return { invoice: { currency: trimmed === '' ? currency : trimmed.toUpperCase() } }
  }
  return { [group]: { [name]: trimmed === '' ? null : trimmed } }
}

export function EditableFieldsList({
  itemId,
  data,
  disabled,
  onUpdated,
  variant = 'rail',
}: {
  itemId: string
  data: InvoiceExtractionResult
  disabled: boolean
  onUpdated: (data: InvoiceExtractionResult) => void
  /** 'rail' = the compact inline list in the side rail; 'expanded' = the
   *  larger two-column layout inside the fields dialog. Same behavior,
   *  different density. */
  variant?: 'rail' | 'expanded'
}) {
  const { toast } = useToast()
  const [drafts, setDrafts] = useState<Record<FieldKey, string>>(() =>
    Object.fromEntries(FIELD_DEFS.map((f) => [f.key, readField(data, f.key)])) as Record<FieldKey, string>
  )
  // Per-field provenance: a populated field starts "AI-filled" (its value came
  // from the extraction) and flips to user-verified once the user edits it:
  // mirrors the create form's AiFilledIndicator. Reset when switching items.
  const [edited, setEdited] = useState<Partial<Record<FieldKey, boolean>>>({})
  // Per-document fold for the invoice-only fields on a receipt.
  const [showAllFields, setShowAllFields] = useState(false)
  const timersRef = useRef<Partial<Record<FieldKey, ReturnType<typeof setTimeout>>>>({})
  // Last-known server values per field. Used to detect when the server
  // normalises a value (currency upper-cased, whitespace trimmed) so we can
  // pick up the canonical value into the input without clobbering an
  // in-progress edit.
  const lastServerRef = useRef<Record<FieldKey, string>>(
    Object.fromEntries(FIELD_DEFS.map((f) => [f.key, readField(data, f.key)])) as Record<FieldKey, string>
  )

  // Reset drafts when the user switches to a different inbox item.
  useEffect(() => {
    const seeded = Object.fromEntries(
      FIELD_DEFS.map((f) => [f.key, readField(data, f.key)])
    ) as Record<FieldKey, string>
    setDrafts(seeded)
    lastServerRef.current = seeded
    setEdited({})
    // The "Visa fakturafält" fold is per document: without this, expanding
    // it on one receipt leaves the invoice fields open on the next one,
    // which reads as if that document had them too.
    setShowAllFields(false)
    return () => {
      for (const t of Object.values(timersRef.current)) {
        if (t) clearTimeout(t)
      }
      timersRef.current = {}
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [itemId])

  // Re-seed drafts when the server returns normalised values (e.g. uppercased
  // currency, trimmed strings). Only update fields where the local draft
  // matches the previous server value, i.e. the user hasn't typed anything
  // newer that we'd otherwise clobber.
  useEffect(() => {
    let dirty = false
    const next: Record<FieldKey, string> = { ...lastServerRef.current }
    setDrafts((prev) => {
      const updated = { ...prev }
      for (const f of FIELD_DEFS) {
        const newServer = readField(data, f.key)
        const prevServer = lastServerRef.current[f.key]
        if (newServer !== prevServer) {
          next[f.key] = newServer
          // Only sync into the input if the user hadn't started a new edit.
          if (prev[f.key] === prevServer) {
            updated[f.key] = newServer
            dirty = true
          }
        }
      }
      return dirty ? updated : prev
    })
    lastServerRef.current = next
  }, [data])

  const currency = data.invoice?.currency ?? 'SEK'

  const persist = useCallback(
    async (key: FieldKey, raw: string) => {
      const body = buildPatchBody(key, raw, currency)
      if (!body) {
        toast({ variant: 'destructive', title: 'Ogiltigt värde' })
        setDrafts((prev) => ({ ...prev, [key]: readField(data, key) }))
        return
      }
      try {
        const res = await fetch(
          `/api/extensions/ext/invoice-inbox/items/${itemId}/fields`,
          {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
          }
        )
        if (!res.ok) {
          // 409 means the item is already linked to a supplier invoice and
          // the server has rejected the edit. Name that in the title; the
          // description carries the specific Swedish message ("Posten är
          // redan kopplad…") for every status.
          const failure = await resolveFailure(res)
          toast({
            variant: 'destructive',
            title: res.status === 409 ? 'Posten är låst' : 'Kunde inte spara',
            description: failure.message,
          })
          setDrafts((prev) => ({ ...prev, [key]: readField(data, key) }))
          return
        }
        const json = await res.json()
        if (json.data?.extracted_data) {
          onUpdated(json.data.extracted_data as InvoiceExtractionResult)
        }
      } catch (err) {
        toast({
          variant: 'destructive',
          title: 'Nätverksfel',
          description: err instanceof Error ? getUserErrorMessage(err) : 'Kunde inte spara',
        })
        setDrafts((prev) => ({ ...prev, [key]: readField(data, key) }))
      }
    },
    [itemId, currency, data, onUpdated, toast]
  )

  const onChange = useCallback(
    (key: FieldKey, raw: string) => {
      setDrafts((prev) => ({ ...prev, [key]: raw }))
      setEdited((prev) => (prev[key] ? prev : { ...prev, [key]: true }))
      const existing = timersRef.current[key]
      if (existing) clearTimeout(existing)
      timersRef.current[key] = setTimeout(() => {
        timersRef.current[key] = undefined
        if (raw === readField(data, key)) return
        void persist(key, raw)
      }, 800)
    },
    [data, persist]
  )

  const onBlur = useCallback(
    (key: FieldKey) => {
      const pending = timersRef.current[key]
      if (pending) {
        clearTimeout(pending)
        timersRef.current[key] = undefined
        const raw = drafts[key]
        if (raw !== readField(data, key)) void persist(key, raw)
      }
    },
    [data, drafts, persist]
  )

  const vatRows = useMemo(() => data.vatBreakdown ?? [], [data.vatBreakdown])

  const { shown: shownFields, hiddenCount } = useMemo(
    () =>
      selectInboxFields({
        documentKind: data.documentKind ?? null,
        fields: FIELD_DEFS,
        hasValue: (key) => (drafts[key as FieldKey] ?? '').trim() !== '',
        showAll: showAllFields,
      }),
    [data, drafts, showAllFields]
  )

  return (
    <div
      className={
        variant === 'expanded'
          ? 'grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3'
          : 'space-y-2'
      }
    >
      {shownFields.map((f) => (
        <div key={f.key} className="flex flex-col gap-0.5">
          <div className="flex items-center justify-between gap-2">
            <label
              // The rail and the expanded dialog can be mounted at the same
              // time: the variant keeps the input ids unique between them.
              htmlFor={`field-${variant}-${f.key}`}
              className={cn(
                'uppercase tracking-wide text-muted-foreground/80',
                variant === 'expanded' ? 'text-xs' : 'text-[10px]'
              )}
            >
              {f.label}
            </label>
            <AiFilledIndicator
              active={drafts[f.key].trim() !== '' && !edited[f.key]}
              title="Ifyllt av AI: kontrollera mot dokumentet"
            />
          </div>
          <Input
            id={`field-${variant}-${f.key}`}
            type={f.type}
            inputMode={f.inputMode}
            value={drafts[f.key]}
            onChange={(e) => onChange(f.key, e.target.value)}
            onBlur={() => onBlur(f.key)}
            disabled={disabled}
            placeholder="-"
            className={cn(
              variant === 'expanded'
                ? 'h-9 text-sm border-border bg-transparent px-3 focus-visible:border-ring'
                : 'h-8 text-sm border-transparent bg-transparent px-2 -mx-2 hover:border-border focus-visible:border-ring',
              drafts[f.key] === '' && 'text-muted-foreground/50 italic'
            )}
          />
        </div>
      ))}
      {hiddenCount > 0 && (
        <button
          type="button"
          onClick={() => setShowAllFields(true)}
          className={cn(
            'text-[11px] text-muted-foreground hover:text-foreground hover:underline pt-1 text-left',
            variant === 'expanded' && 'sm:col-span-2'
          )}
        >
          Visa fakturafält ({hiddenCount})
        </button>
      )}
      {vatRows.length > 0 && (
        <div className={cn('pt-2 border-t mt-3', variant === 'expanded' && 'sm:col-span-2 mt-1')}>
          <p className="text-[10px] uppercase tracking-wide text-muted-foreground/80 mb-1.5">
            Momsfördelning
          </p>
          <div className="space-y-1">
            {vatRows.map((row, i) => (
              <div key={i} className="text-xs flex justify-between">
                <span className="text-muted-foreground">{row.rate}%</span>
                <span className="tabular-nums">
                  {formatCurrency(row.base, currency)} +{' '}
                  {formatCurrency(row.amount, currency)}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
      {disabled && (
        <p
          className={cn(
            'text-[10px] text-muted-foreground/70 pt-2',
            variant === 'expanded' && 'sm:col-span-2 text-xs'
          )}
        >
          Posten är kopplad till en leverantörsfaktura: fälten kan inte ändras.
        </p>
      )}
    </div>
  )
}