import { formatCurrency } from '@erp/core';
import {
    Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger,
    HoverCard, HoverCardContent, HoverCardTrigger
} from "@repo/shadcn-ui/components";
import { PropsWithChildren } from 'react';
import { useFormContext, useWatch } from "react-hook-form";
import { useInvoiceContext } from '../../../context';
import { useTranslation } from "../../../i18n";


type HoverCardTotalsSummaryProps = PropsWithChildren & {
    rowIndex: number;
}

/**
 * Muestra un desglose financiero del total de línea.
 * Lee directamente los importes del formulario vía react-hook-form.
 */


// Aparcado por ahora

export const HoverCardTotalsSummary = ({
    children,
    rowIndex,
}: HoverCardTotalsSummaryProps) => <>{children}</>


const HoverCardTotalsSummary2 = ({
    children,
    rowIndex,
}: HoverCardTotalsSummaryProps) => {
    const { t } = useTranslation();
    const { control } = useFormContext();
    const { currency_code, language_code } = useInvoiceContext();

    // Observar los valores actuales del formulario
    const [subtotal, discountPercentage, discountAmount, taxableBase, total] =
        useWatch({
            control,
            name: [
                `items.${rowIndex}.subtotal_amount`,
                `items.${rowIndex}.discount_percentage`,
                `items.${rowIndex}.discount_amount`,
                `items.${rowIndex}.taxable_base`,
                `items.${rowIndex}.total_amount`,
            ],
        });

    const SummaryBlock = () => (
        <div className="space-y-2">
            <h4 className="text-sm font-semibold mb-3">
                {t("components.hover_card_totals_summary.label")}
            </h4>

            {/* Subtotal */}
            <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">
                    {t("components.hover_card_totals_summary.fields.subtotal_amount")}:
                </span>
                <span className="font-mono tabular-nums">{formatCurrency(subtotal, 4, currency_code, language_code)}</span>
            </div>

            {/* Descuento (si aplica) */}
            {discountPercentage && Number(discountPercentage.value) > 0 && (
                <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">
                        {t(
                            "components.hover_card_totals_summary.fields.discount_percentage"
                        )}{" "}
                        ({discountPercentage && discountPercentage.value
                            ? (Number(discountPercentage.value) /
                                10 ** Number(discountPercentage.scale)) *
                            100
                            : 0}
                        %):
                    </span>
                    <span className="font-mono tabular-nums text-destructive">
                        -{formatCurrency(discountAmount, 4, currency_code, language_code)}
                    </span>
                </div>
            )}

            {/* Base imponible */}
            <div className="flex justify-between text-sm border-t pt-2">
                <span className="text-muted-foreground">
                    {t("components.hover_card_totals_summary.fields.taxable_amount")}:
                </span>
                <span className="font-mono tabular-nums font-medium">
                    {formatCurrency(taxableBase, 4, currency_code, language_code)}
                </span>
            </div>

            {/* Total final */}
            <div className="flex justify-between text-sm border-t pt-2 font-semibold">
                <span>
                    {t("components.hover_card_totals_summary.fields.total_amount")}:
                </span>
                <span className="font-mono tabular-nums">{formatCurrency(total, 4, currency_code, language_code)}</span>
            </div>
        </div>
    );

    return (
        <>
            {/* Variante móvil (Dialog) */}
            <div className="md:hidden">
                <Dialog>
                    <DialogTrigger asChild>{children}</DialogTrigger>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>
                                {t("components.hover_card_totals_summary.label")}
                            </DialogTitle>
                        </DialogHeader>
                        <SummaryBlock />
                    </DialogContent>
                </Dialog>
            </div>

            {/* Variante escritorio (HoverCard) */}
            <div className="hidden md:block">
                <HoverCard>
                    <HoverCardTrigger asChild>{children}</HoverCardTrigger>
                    <HoverCardContent className="w-64" align="end">
                        <SummaryBlock />
                    </HoverCardContent>
                </HoverCard>
            </div>
        </>
    );
};
