<script setup lang="ts">
import Card from 'primevue/card';
import { computed } from 'vue';
import type { FixedAssetStructure } from '../../types/fixedAssetStructure';

interface Props {
    structure: FixedAssetStructure;
}

const props = defineProps<Props>();

const contentsTotal = computed(() =>
    props.structure.contents.reduce((sum, item) => sum + item.value, 0)
);

const totalStructureValue = computed(() => props.structure.containerValue + contentsTotal.value);

const formatCurrency = (value: number) =>
    `$${value.toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
</script>

<template>
    <Card class="summary-card border-0 shadow-lg">
        <template #content>
            <div class="space-y-4 text-white">
                <p class="text-xs font-semibold uppercase tracking-[0.2em] opacity-90">
                    Resumen de valoracion
                </p>

                <div class="flex items-center justify-between text-sm">
                    <span class="opacity-90">Valor de contenedor</span>
                    <strong class="text-xl">{{ formatCurrency(structure.containerValue) }}</strong>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="opacity-90">Valor de contenidos ({{ structure.contents.length }})</span>
                    <strong class="text-xl">{{ formatCurrency(contentsTotal) }}</strong>
                </div>

                <div class="border-t border-white/20 pt-4">
                    <p class="text-xs uppercase tracking-wide opacity-80">Valor total de estructura</p>
                    <p class="mt-1 text-4xl font-black leading-none">{{ formatCurrency(totalStructureValue) }}</p>
                </div>

                <div class="rounded-lg bg-white/12 p-3 text-xs leading-relaxed opacity-95">
                    El valor total se calcula sumando el activo base mas todos los elementos vinculados.
                </div>
            </div>
        </template>
    </Card>
</template>

<style scoped>
.summary-card {
    background: linear-gradient(145deg, #1f7ae0 0%, #0b60c2 100%);
}
</style>
