"use client"

import type { ReactNode } from "react"
import { Separator } from "@/shared/components/ui/separator"
import { cn } from "@/shared/lib/utils"
import type { DocumentTotals } from "@/shared/hooks/use-document-totals"
import { Money } from "@/shared/components/money"

export type DocumentTotalsSummaryProps = {
    totals: DocumentTotals
    discountType?: string | null
    taxLabel?: string | null
    /** Override labels for line groups, keyed by group name */
    groupLabels?: Record<string, number>
}

function SummaryRow({
    label,
    value,
    muted = false,
    className,
}: {
    label: string
    value: ReactNode
    muted?: boolean
    className?: string
}) {
    return (
        <div className={cn("flex items-center justify-between text-sm", className)}>
            <span className={muted ? "text-muted-foreground" : ""}>{label}</span>
            <span className={muted ? "text-muted-foreground" : ""}>{value}</span>
        </div>
    )
}

export function DocumentTotalsSummary({
    totals,
    discountType,
    taxLabel,
    groupLabels,
}: DocumentTotalsSummaryProps) {
    const {
        subTotal,
        lineItemDiscount,
        transactionDiscount,
        totalDiscount,
        taxAmount,
        total,
        hasLineItems,
    } = totals

    if (!hasLineItems) return null

    return (
        <div className="space-y-2">
            {/* Group breakdowns */}
            {groupLabels &&
                Object.entries(groupLabels).map(([label, amount]) => (
                    <SummaryRow
                        key={label}
                        label={label}
                        value={<Money value={amount} />}
                        muted
                    />
                ))}

            {groupLabels && Object.keys(groupLabels).length > 0 && <Separator />}

            {/* Subtotal */}
            <SummaryRow label="Subtotal" value={<Money value={subTotal} />} />

            {/* Line-item discount */}
            {discountType === "line_item_level" && lineItemDiscount > 0 && (
                <SummaryRow
                    label="Line Discounts"
                    value={<Money value={lineItemDiscount} prefix="– " />}
                    muted
                />
            )}

            {/* Transaction-level discount */}
            {discountType === "transaction_level" && transactionDiscount > 0 && (
                <SummaryRow
                    label="Discount"
                    value={<Money value={transactionDiscount} prefix="– " />}
                    muted
                />
            )}

            {/* Tax */}
            {taxAmount > 0 && (
                <SummaryRow
                    label={taxLabel ?? "Tax"}
                    value={<Money value={taxAmount} prefix="+ " />}
                    muted
                />
            )}

            <Separator />

            {/* Total */}
            <div className={cn(
                "flex items-center justify-between rounded-md px-3 py-2 text-sm font-semibold",
                "bg-primary/10 text-primary",
            )}>
                <span>Total</span>
                <span><Money value={total} /></span>
            </div>
        </div>
    )
}