// @design-system: domain/VatBreakdown
'use client';

import { extractVat, fromPercent } from '@platform-modules/tax/rates-table';
import { useT, useLocale } from '@/lib/i18n/react';
import { formatAgorotLocale } from '@/lib/money';

export interface VatBreakdownProps {
  /** VAT-inclusive total in agorot. */
  totalAgorot: number;
  /** VAT rate as integer percent, e.g. 18. */
  vatRatePercent: number;
  className?: string;
}

export function VatBreakdown({ totalAgorot, vatRatePercent, className }: VatBreakdownProps) {
  const t = useT('checkout');
  const { locale } = useLocale();

  // Inclusive VAT extraction via @platform-modules/tax (exact BigInt round-half-up).
  // Agorot are integer minor units; round() guards a stray float from crashing the island.
  const { net, vat } = extractVat(BigInt(Math.round(totalAgorot)), fromPercent(vatRatePercent));
  const vatAgorot = Number(vat);
  const netAgorot = Number(net);

  const fmt = (agorot: number) => formatAgorotLocale(agorot, locale);

  return (
    <div className={`text-text-secondary space-y-1 text-xs${className ? ` ${className}` : ''}`}>
      <div className="flex items-center justify-between gap-2">
        <span>{t('vat_breakdown_net')}</span>
        <span dir="ltr">{fmt(netAgorot)}</span>
      </div>
      <div className="flex items-center justify-between gap-2">
        <span>{`${t('vat_breakdown_vat')} (${vatRatePercent}%)`}</span>
        <span dir="ltr">{fmt(vatAgorot)}</span>
      </div>
      <div className="border-border-subtle flex items-center justify-between gap-2 border-t pt-1 font-semibold">
        <span className="text-text-primary">{t('vat_breakdown_total')}</span>
        <span className="text-text-primary" dir="ltr">
          {fmt(totalAgorot)}
        </span>
      </div>
    </div>
  );
}