accounted/components/suppliers/SupplierInvoiceReviewContent.tsx

'use client'

import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { AccountNumber } from '@/components/ui/account-number'
import { formatCurrency } from '@/lib/utils'
import type { Supplier } from '@/types'

interface ReviewLineItem {
  description: string
  amount: number
  account_number: string
  vat_rate: number
}

interface SupplierInvoiceReviewContentProps {
  supplier: Supplier
  invoiceNumber: string
  invoiceDate: string
  dueDate: string
  deliveryDate?: string
  currency: string
  exchangeRate?: string
  reverseCharge: boolean
  paymentReference?: string
  items: ReviewLineItem[]
  subtotal: number
  totalVat: number
  total: number
}

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

interface JournalPreviewLine {
  account_number: string
  description: string
  debit: number
  credit: number
}

function getOutputVatAccount(rate: number): string {
  if (rate === 0.12) return '2624'
  if (rate === 0.06) return '2634'
  return '2614'
}

function buildJournalPreview(
  items: ReviewLineItem[],
  subtotal: number,
  totalVat: number,
  total: number,
  reverseCharge: boolean,
  supplierType?: string,
): JournalPreviewLine[] {
  const lines: JournalPreviewLine[] = []

  // Aggregate expense amounts by account number
  const expenseByAccount = new Map<string, number>()
  for (const item of items) {
    const current = expenseByAccount.get(item.account_number) || 0
    expenseByAccount.set(item.account_number, current + Math.round(item.amount * 100) / 100)
  }

  // Debit: Expense accounts
  for (const [accountNumber, amount] of expenseByAccount) {
    lines.push({
      account_number: accountNumber,
      description: accountNumber,
      debit: Math.round(amount * 100) / 100,
      credit: 0,
    })
  }

  if (reverseCharge) {
    // Reverse charge: fiktiv moms per VAT rate (matches engine groupVatByRate logic)
    const isDomesticRC = supplierType === 'swedish_business'
    const inputAccount = isDomesticRC ? '2647' : '2645'

    const vatByRate = new Map<number, number>()
    for (const item of items) {
      if (item.vat_rate > 0) {
        const current = vatByRate.get(item.vat_rate) || 0
        vatByRate.set(item.vat_rate, current + Math.round(item.amount * 100) / 100)
      }
    }

    for (const [rate, netAmount] of vatByRate) {
      const fiktivVat = Math.round(netAmount * rate * 100) / 100
      const outputAccount = getOutputVatAccount(rate)
      lines.push({
        account_number: inputAccount,
        description: inputAccount,
        debit: fiktivVat,
        credit: 0,
      })
      lines.push({
        account_number: outputAccount,
        description: outputAccount,
        debit: 0,
        credit: fiktivVat,
      })
    }

    // Credit: 2440 at subtotal (no real VAT for reverse charge)
    lines.push({
      account_number: '2440',
      description: 'Leverantörsskulder',
      debit: 0,
      credit: Math.round(subtotal * 100) / 100,
    })
  } else {
    if (totalVat > 0) {
      lines.push({
        account_number: '2641',
        description: 'Ingående moms',
        debit: Math.round(totalVat * 100) / 100,
        credit: 0,
      })
    }
    // Credit: 2440 at total incl. VAT
    lines.push({
      account_number: '2440',
      description: 'Leverantörsskulder',
      debit: 0,
      credit: Math.round(total * 100) / 100,
    })
  }

  return lines
}

const ACCOUNT_LABELS: Record<string, string> = {
  '2440': 'Leverantörsskulder',
  '2641': 'Ingående moms',
  '2645': 'Beräknad ing. moms förvärv utlandet',
  '2647': 'Beräknad ing. moms omvänd i Sverige',
  '2614': 'Utg. moms omvänd 25%',
  '2624': 'Utg. moms omvänd 12%',
  '2634': 'Utg. moms omvänd 6%',
}

export function SupplierInvoiceReviewContent({
  supplier,
  invoiceNumber,
  invoiceDate,
  dueDate,
  deliveryDate,
  currency,
  exchangeRate,
  reverseCharge,
  paymentReference,
  items,
  subtotal,
  totalVat,
  total,
}: SupplierInvoiceReviewContentProps) {
  const journalLines = buildJournalPreview(items, subtotal, totalVat, total, reverseCharge, supplier.supplier_type)
  const totalDebit = journalLines.reduce((sum, l) => sum + l.debit, 0)
  const totalCredit = journalLines.reduce((sum, l) => sum + l.credit, 0)

  return (
    <div className="space-y-4">
      {/* Supplier info */}
      <div className="bg-muted rounded-lg p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-2 sm:justify-between">
        <div className="min-w-0">
          <p className="font-medium text-base truncate">{supplier.name}</p>
          <p className="text-sm text-muted-foreground">Fakturanr: {invoiceNumber}</p>
        </div>
        <div className="flex flex-wrap gap-1.5 sm:gap-2 shrink-0">
          {reverseCharge && (
            <Badge variant="outline" className="border-orange-300 text-orange-700 dark:text-orange-400">
              Omvänd skattskyldighet
            </Badge>
          )}
          {currency !== 'SEK' && (
            <Badge variant="outline" className="text-sm">
              {currency}
              {exchangeRate && ` (kurs ${exchangeRate})`}
            </Badge>
          )}
        </div>
      </div>

      {/* Dates */}
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4 text-sm">
        <div>
          <span className="text-muted-foreground">Fakturadatum</span>
          <p className="font-medium">{invoiceDate}</p>
        </div>
        <div>
          <span className="text-muted-foreground">Förfallodatum</span>
          <p className="font-medium">{dueDate}</p>
        </div>
        {deliveryDate && (
          <div>
            <span className="text-muted-foreground">Leveransdatum</span>
            <p className="font-medium">{deliveryDate}</p>
          </div>
        )}
      </div>

      {/* Line items — table on desktop, cards on mobile */}
      <div className="hidden sm:block">
        <table className="w-full text-sm">
          <thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
            <tr className="border-b text-left">
              <th className="py-2 w-20">Konto</th>
              <th className="py-2">Beskrivning</th>
              <th className="py-2 w-28 text-right">Belopp</th>
              <th className="py-2 w-16 text-right">Moms%</th>
              <th className="py-2 w-24 text-right">Moms</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item, index) => {
              const vatAmount = Math.round(item.amount * item.vat_rate * 100) / 100
              return (
                <tr key={index} className="border-b last:border-0">
                  <td className="py-2">
                    <AccountNumber number={item.account_number} size="sm" />
                  </td>
                  <td className="py-2">{item.description}</td>
                  <td className="py-2 text-right font-mono">{formatAmount(item.amount)}</td>
                  <td className="py-2 text-right">{Math.round(item.vat_rate * 100)}%</td>
                  <td className="py-2 text-right font-mono">{formatAmount(vatAmount)}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
      <div className="sm:hidden space-y-2">
        {items.map((item, index) => {
          const vatAmount = Math.round(item.amount * item.vat_rate * 100) / 100
          return (
            <div key={index} className="border rounded-lg p-3 text-sm space-y-1.5">
              <div className="flex items-center justify-between">
                <p className="font-medium">{item.description}</p>
                <AccountNumber number={item.account_number} size="sm" />
              </div>
              <div className="flex items-center justify-between text-muted-foreground">
                <span>{formatAmount(item.amount)} kr</span>
                <span className="text-xs">{Math.round(item.vat_rate * 100)}% moms ({formatAmount(vatAmount)})</span>
              </div>
            </div>
          )
        })}
      </div>

      {/* Totals */}
      <div className="space-y-2 text-sm">
        <div className="flex justify-between">
          <span className="text-muted-foreground">Netto (exkl. moms)</span>
          <span>{formatCurrency(subtotal, currency)}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Moms</span>
          <span>{formatCurrency(totalVat, currency)}</span>
        </div>
        <Separator />
        <div className="flex justify-between font-bold text-xl sm:text-2xl">
          <span>Totalt</span>
          <span>{formatCurrency(total, currency)}</span>
        </div>
        {currency !== 'SEK' && exchangeRate && (
          <div className="flex justify-between text-muted-foreground">
            <span>SEK-belopp (vid kurs {exchangeRate})</span>
            <span>{formatCurrency(total * parseFloat(exchangeRate))}</span>
          </div>
        )}
      </div>

      {/* Verifikation preview */}
      <div className="bg-muted/50 border rounded-lg p-3 sm:p-4 space-y-2">
        <p className="text-sm font-semibold text-muted-foreground">Verifikation som bokförs</p>
        <div className="hidden sm:block">
          <table className="w-full text-sm font-mono">
            <thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
              <tr className="text-left">
                <th className="pb-1 w-16">Konto</th>
                <th className="pb-1">Beskrivning</th>
                <th className="pb-1 w-24 text-right">Debet</th>
                <th className="pb-1 w-24 text-right">Kredit</th>
              </tr>
            </thead>
            <tbody>
              {journalLines.map((line, index) => (
                <tr key={index} className="border-b border-dashed border-muted-foreground/20 last:border-0">
                  <td className="py-1">
                    <AccountNumber number={line.account_number} size="sm" />
                  </td>
                  <td className="py-1 text-xs">
                    {ACCOUNT_LABELS[line.account_number] || line.description}
                  </td>
                  <td className="py-1 text-right">
                    {line.debit > 0 ? formatAmount(line.debit) : ''}
                  </td>
                  <td className="py-1 text-right">
                    {line.credit > 0 ? formatAmount(line.credit) : ''}
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr className="border-t font-semibold">
                <td className="pt-1" colSpan={2}>SUMMA</td>
                <td className="pt-1 text-right">{formatAmount(totalDebit)}</td>
                <td className="pt-1 text-right">{formatAmount(totalCredit)}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div className="sm:hidden space-y-1.5 text-sm">
          {journalLines.map((line, index) => (
            <div key={index} className="flex items-center justify-between py-1 border-b border-dashed border-muted-foreground/20 last:border-0">
              <div className="min-w-0">
                <div className="flex items-center gap-1.5">
                  <AccountNumber number={line.account_number} size="sm" />
                  <span className="text-xs text-muted-foreground truncate">
                    {ACCOUNT_LABELS[line.account_number] || line.description}
                  </span>
                </div>
              </div>
              <span className="font-mono text-xs shrink-0 ml-2">
                {line.debit > 0 ? `D ${formatAmount(line.debit)}` : `K ${formatAmount(line.credit)}`}
              </span>
            </div>
          ))}
          <div className="flex justify-between pt-1 border-t font-semibold text-xs font-mono">
            <span>SUMMA</span>
            <span>D {formatAmount(totalDebit)} / K {formatAmount(totalCredit)}</span>
          </div>
        </div>
      </div>

      {/* Payment reference */}
      {paymentReference && (
        <div className="border-t pt-3 text-sm text-muted-foreground">
          <p>Betalningsreferens: {paymentReference}</p>
        </div>
      )}
    </div>
  )
}