@jjlmoya/utils-finance 1.1.0

package/src/tool/debtSnowball/component.astro

@@ -0,0 +1,1052 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="snow-container" id="debt-calc-container" data-currency-symbol={ui.currencySymbol} data-currency-code={ui.currencyCode} data-currency-locale={ui.currencyLocale} data-clear-confirm={ui.labelClearDataConfirm}>
+    <div class="snow-main-card">
+        <aside class="snow-sidebar">
+            <h2 class="snow-title">
+                <Icon name="mdi:finance" size={36} />
+                <span>{ui.labelTitle}</span>
+            </h2>
+
+            <div class="snow-input-group">
+                <label class="snow-label" for="extra-budget">{ui.labelExtraBudget}</label>
+                <div class="snow-input-wrapper">
+                    <input type="number" id="extra-budget" class="snow-input" value="100" min="0" step="50" />
+                    <span class="snow-input-unit">{ui.currencySymbol}</span>
+                </div>
+                <p class="snow-help-text">{ui.labelExtraBudgetHelp}</p>
+            </div>
+
+            <div class="snow-method-tabs" id="method-switcher">
+                <button class="snow-tab active" data-method="snowball">{ui.labelSnowballMethod}</button>
+                <button class="snow-tab" data-method="avalanche">{ui.labelAvalancheMethod}</button>
+            </div>
+
+            <div class="snow-adder-card">
+                <span class="snow-section-label">{ui.labelAddNewDebt}</span>
+                <div class="snow-adder-content">
+                    <div class="snow-input-group">
+                        <input type="text" id="debt-name" class="snow-input" placeholder={ui.labelDebtNamePlaceholder} />
+                    </div>
+                    <div class="snow-grid-2">
+                        <div class="snow-input-group">
+                            <label class="snow-label" for="debt-balance">{ui.labelDebtBalance}</label>
+                            <div class="snow-input-wrapper">
+                                <input type="number" id="debt-balance" class="snow-input" placeholder="0" min="0" />
+                                <span class="snow-input-unit">{ui.currencySymbol}</span>
+                            </div>
+                        </div>
+                        <div class="snow-input-group">
+                            <label class="snow-label" for="debt-min-payment">{ui.labelMinPayment}</label>
+                            <div class="snow-input-wrapper">
+                                <input type="number" id="debt-min-payment" class="snow-input" placeholder="0" min="0" />
+                                <span class="snow-input-unit">{ui.currencySymbol}/mes</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="snow-input-group">
+                        <label class="snow-label" for="debt-rate">{ui.labelInterestRate}</label>
+                        <div class="snow-input-wrapper">
+                            <input type="number" id="debt-rate" class="snow-input" value="15" step="0.1" />
+                            <span class="snow-input-unit">% {ui.labelInterestHelp}</span>
+                        </div>
+                    </div>
+                    <p class="snow-input-help">{ui.labelAddNewDebt}</p>
+                    <button id="add-debt-btn" class="snow-btn snow-btn-add">
+                        <Icon name="mdi:plus-thick" size={18} />
+                        <span>{ui.labelAddButton}</span>
+                    </button>
+                </div>
+            </div>
+
+            <button id="clear-data" class="snow-btn-clear">
+                <Icon name="mdi:delete-sweep" size={14} />
+                <span>{ui.labelClearData}</span>
+            </button>
+        </aside>
+
+        <main class="snow-content">
+            <div id="no-debts-msg" class="snow-empty-view">
+                <div class="snow-empty-icon">
+                    <Icon name="mdi:bank-off-outline" size={48} />
+                </div>
+                <h3 class="snow-empty-title">{ui.labelEmptyStateTitle}</h3>
+                <p class="snow-empty-description">{ui.labelEmptyStateDescription}</p>
+            </div>
+
+            <div id="results-content" class="snow-hidden">
+                <div class="snow-inventory-area">
+                    <span class="snow-section-label">{ui.labelDebtInventory}</span>
+                    <div class="snow-mini-table">
+                        <div class="snow-table-row snow-table-header">
+                            <span>{ui.labelDebtName}</span>
+                            <span>{ui.labelDebtBalance}</span>
+                            <span>{ui.labelMinPayment}</span>
+                            <span>{ui.labelInterestRate}</span>
+                            <span></span>
+                        </div>
+                        <div id="debt-items-list" class="snow-debt-list"></div>
+                    </div>
+                </div>
+
+                <div class="snow-results-hero">
+                    <div class="snow-hero-main">
+                        <span class="snow-hero-label">{ui.labelFreedomDate}</span>
+                        <div class="snow-hero-value" id="summary-date">ENERO 2026</div>
+                    </div>
+                    <div class="snow-hero-badge">
+                        <Icon name="mdi:check-decagram" size={20} />
+                        <span id="active-method-label">{ui.labelSnowballMethod}</span>
+                    </div>
+                </div>
+
+                <div class="snow-grid-stats">
+                    <div class="snow-stat-box">
+                        <div class="snow-stat-value" id="stat-months">--</div>
+                        <div class="snow-stat-label">{ui.labelMonthsRemaining}</div>
+                    </div>
+                    <div class="snow-stat-box">
+                        <div class="snow-stat-value" id="stat-interest">--</div>
+                        <div class="snow-stat-label">{ui.labelTotalInterest}</div>
+                    </div>
+                    <div class="snow-stat-box">
+                        <div class="snow-stat-value" id="stat-total-paid">--</div>
+                        <div class="snow-stat-label">{ui.labelTotalPaid}</div>
+                    </div>
+                    <div class="snow-stat-box snow-stat-highlight">
+                        <div class="snow-stat-value" id="stat-extra-saved">--</div>
+                        <div class="snow-stat-label">{ui.labelInterestSaved}</div>
+                    </div>
+                </div>
+
+                <div class="snow-action-plan">
+                    <div class="snow-action-header">
+                        <h4 class="snow-action-title">{ui.labelYourStrategy}</h4>
+                        <div class="snow-action-help">{ui.labelStrategyHelp}</div>
+                    </div>
+                    <div id="action-plan-list" class="snow-action-list"></div>
+                </div>
+
+                <div class="snow-table-container">
+                    <div class="snow-table-header-action">
+                        <h4 class="snow-table-title">{ui.labelDetailedAmortization}</h4>
+                        <button id="export-csv" class="snow-btn-export">{ui.labelExportCSV}</button>
+                    </div>
+                    <div class="snow-table-overlay">
+                        <div class="snow-table-scroll">
+                            <table id="projection-table">
+                                <thead>
+                                    <tr>
+                                        <th>{ui.labelDate}</th>
+                                        <th>{ui.labelStartingBalance}</th>
+                                        <th>{ui.labelInterest}</th>
+                                        <th>{ui.labelAmortization}</th>
+                                        <th>{ui.labelTotalMonth}</th>
+                                        <th>{ui.labelRemaining}</th>
+                                    </tr>
+                                </thead>
+                                <tbody></tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</div>
+
+<style>
+    :root {
+        --snow-emerald: #10b981;
+        --snow-blue: #3b82f6;
+        --snow-rose: #f43f5e;
+        --snow-bg-card: rgba(255, 255, 255, 0.95);
+        --snow-border: rgba(226, 232, 240, 0.8);
+        --snow-text-main: #0f172a;
+        --snow-text-muted: #64748b;
+        --snow-bg-input: rgba(255, 255, 255, 0.8);
+        --snow-bg-subtle: rgba(0, 0, 0, 0.02);
+        --snow-bg-tab: rgba(0, 0, 0, 0.05);
+    }
+
+    :global(.theme-dark),
+    :global([data-theme='dark']) {
+        --snow-bg-card: rgba(15, 23, 42, 0.9);
+        --snow-border: rgba(30, 41, 59, 1);
+        --snow-text-main: #f8fafc;
+        --snow-text-muted: #94a3b8;
+        --snow-bg-input: rgba(0, 0, 0, 0.3);
+    }
+
+    .snow-container {
+        width: 100%;
+        color: var(--snow-text-main);
+    }
+
+    .snow-main-card {
+        background: var(--snow-bg-card);
+        backdrop-filter: blur(24px);
+        -webkit-backdrop-filter: blur(24px);
+        border-radius: 2.5rem;
+        border: 1px solid var(--snow-border);
+        display: grid;
+        grid-template-columns: 1fr;
+        box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+    }
+
+    @media (min-width: 1024px) {
+        .snow-main-card {
+            grid-template-columns: 380px 1fr;
+        }
+    }
+
+    .snow-sidebar {
+        padding: 3rem 2.5rem;
+        background: var(--snow-bg-subtle);
+        border-right: 1px solid var(--snow-border);
+        overflow-y: auto;
+        max-height: 80vh;
+    }
+
+    .snow-title {
+        font-size: 1.75rem;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 2.5rem;
+        color: var(--snow-emerald);
+    }
+
+    .snow-section-label {
+        display: block;
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.15em;
+        opacity: 0.4;
+        margin-bottom: 1.5rem;
+    }
+
+    .snow-input-group {
+        margin-bottom: 1.5rem;
+    }
+
+    .snow-label {
+        display: block;
+        font-size: 0.75rem;
+        font-weight: 850;
+        margin-bottom: 0.6rem;
+        opacity: 0.8;
+    }
+
+    .snow-input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+
+    .snow-input {
+        width: 100%;
+        background: var(--snow-bg-input);
+        border: 1.5px solid var(--snow-border);
+        padding: 1rem 1.25rem;
+        border-radius: 1.25rem;
+        font-size: 1rem;
+        font-weight: 700;
+        color: inherit;
+        transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+    }
+
+    .snow-input:focus {
+        outline: none;
+        border-color: var(--snow-emerald);
+        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1);
+    }
+
+    .snow-input-unit {
+        position: absolute;
+        right: 1.25rem;
+        font-weight: 900;
+        font-size: 0.75rem;
+        opacity: 0.3;
+        pointer-events: none;
+    }
+
+    .snow-help-text,
+    .snow-input-help {
+        font-size: 0.6rem;
+        line-height: 1.4;
+        opacity: 0.4;
+        font-weight: bold;
+        margin-top: 0.5rem;
+    }
+
+    .snow-method-tabs {
+        display: flex;
+        background: var(--snow-bg-tab);
+        padding: 0.4rem;
+        border-radius: 1.25rem;
+        margin: 2rem 0;
+        gap: 0.4rem;
+    }
+
+    .snow-tab {
+        flex: 1;
+        padding: 0.85rem;
+        border-radius: 1rem;
+        border: none;
+        font-weight: 900;
+        font-size: 0.75rem;
+        cursor: pointer;
+        background: transparent;
+        color: var(--snow-text-muted);
+        transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+    }
+
+    .snow-tab.active {
+        background: white;
+        color: var(--snow-emerald);
+        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
+    }
+
+    :global(.theme-dark) .snow-tab.active,
+    :global([data-theme='dark']) .snow-tab.active {
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+    }
+
+    .snow-adder-card {
+        background: rgba(16, 185, 129, 0.08);
+        border: 1.5px solid rgba(16, 185, 129, 0.2);
+        padding: 2rem 1.5rem;
+        border-radius: 1.75rem;
+        margin-bottom: 2rem;
+    }
+
+    .snow-adder-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .snow-grid-2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+    }
+
+    .snow-btn {
+        padding: 0.85rem 1.5rem;
+        border-radius: 1rem;
+        border: none;
+        font-weight: 900;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        justify-content: center;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .snow-btn-add {
+        background: linear-gradient(135deg, var(--snow-emerald), var(--snow-blue));
+        color: white;
+    }
+
+    .snow-btn-add:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.2);
+    }
+
+    .snow-btn-clear {
+        margin-top: 2rem;
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--snow-rose);
+        opacity: 0.5;
+        background: none;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+    }
+
+    .snow-btn-clear:hover {
+        opacity: 1;
+        color: var(--snow-rose);
+    }
+
+    .snow-content {
+        padding: 3rem;
+        overflow-y: auto;
+        max-height: 80vh;
+    }
+
+    .snow-empty-view {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 400px;
+        text-align: center;
+    }
+
+    .snow-empty-icon {
+        font-size: 3rem;
+        opacity: 0.2;
+        margin-bottom: 1rem;
+    }
+
+    .snow-empty-title {
+        font-size: 1.5rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        margin-bottom: 1rem;
+    }
+
+    .snow-empty-description {
+        max-width: 300px;
+        font-size: 0.875rem;
+        opacity: 0.5;
+    }
+
+    .snow-hidden {
+        display: none;
+    }
+
+    .snow-inventory-area {
+        margin-bottom: 2rem;
+    }
+
+    .snow-mini-table {
+        border: 1px solid var(--snow-border);
+        border-radius: 1rem;
+        overflow: hidden;
+    }
+
+    .snow-table-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 60px;
+        padding: 1rem;
+        font-size: 0.875rem;
+        border-bottom: 1px solid var(--snow-border);
+        align-items: center;
+    }
+
+    .snow-table-header {
+        background: var(--snow-bg-subtle);
+        font-weight: 900;
+        text-transform: uppercase;
+        font-size: 0.65rem;
+        opacity: 0.6;
+    }
+
+    .snow-debt-list {
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .snow-debt-item {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 60px;
+        padding: 1rem;
+        border-bottom: 1px solid var(--snow-border);
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .snow-debt-remove {
+        background: none;
+        border: none;
+        color: var(--snow-rose);
+        cursor: pointer;
+        font-weight: 900;
+        font-size: 1.25rem;
+        opacity: 0.3;
+        transition: opacity 0.3s ease;
+    }
+
+    .snow-debt-remove:hover {
+        opacity: 1;
+    }
+
+    .snow-results-hero {
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
+        border: 1.5px solid var(--snow-border);
+        border-radius: 1.75rem;
+        padding: 3rem;
+        margin-bottom: 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .snow-hero-main {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .snow-hero-label {
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        opacity: 0.6;
+    }
+
+    .snow-hero-value {
+        font-size: 2.5rem;
+        font-weight: 900;
+        letter-spacing: -0.02em;
+        color: var(--snow-emerald);
+    }
+
+    .snow-hero-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        background: rgba(16, 185, 129, 0.1);
+        padding: 1rem 1.5rem;
+        border-radius: 1rem;
+        font-weight: 900;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--snow-emerald);
+    }
+
+    .snow-grid-stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1.5rem;
+        margin-bottom: 3rem;
+    }
+
+    .snow-stat-box {
+        background: var(--snow-bg-subtle);
+        border: 1px solid var(--snow-border);
+        border-radius: 1.25rem;
+        padding: 2rem 1.5rem;
+        text-align: center;
+    }
+
+    .snow-stat-highlight {
+        background: rgba(59, 130, 246, 0.08);
+        border-color: rgba(59, 130, 246, 0.2);
+    }
+
+    .snow-stat-value {
+        font-size: 1.875rem;
+        font-weight: 900;
+        color: var(--snow-emerald);
+        margin-bottom: 0.5rem;
+    }
+
+    .snow-stat-label {
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        opacity: 0.6;
+    }
+
+    .snow-action-plan {
+        margin-bottom: 3rem;
+    }
+
+    .snow-action-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 2rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .snow-action-title {
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        opacity: 0.6;
+    }
+
+    .snow-action-help {
+        font-size: 0.6rem;
+        font-weight: 900;
+        background: rgba(59, 130, 246, 0.1);
+        padding: 0.5rem 1rem;
+        border-radius: 2rem;
+        text-transform: uppercase;
+        color: var(--snow-blue);
+    }
+
+    .snow-action-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .snow-plan-item {
+        display: grid;
+        grid-template-columns: 50px 1fr 1fr;
+        gap: 1.5rem;
+        align-items: center;
+        padding: 1.5rem;
+        background: var(--snow-bg-subtle);
+        border: 1.5px solid var(--snow-border);
+        border-radius: 1rem;
+    }
+
+    .snow-plan-item.active-step {
+        background: rgba(16, 185, 129, 0.05);
+        border-color: rgba(16, 185, 129, 0.3);
+    }
+
+    .snow-step-marker {
+        width: 50px;
+        height: 50px;
+        background: var(--snow-emerald);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        font-weight: 900;
+        font-size: 1.25rem;
+    }
+
+    .snow-step-body {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .snow-step-label {
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        opacity: 0.6;
+    }
+
+    .snow-step-name {
+        font-size: 1rem;
+        font-weight: 900;
+        color: var(--snow-text-main);
+    }
+
+    .snow-step-amount {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.25rem;
+        text-align: right;
+    }
+
+    .snow-step-amount span {
+        font-size: 0.65rem;
+        opacity: 0.6;
+        text-transform: uppercase;
+    }
+
+    .snow-step-amount strong {
+        font-size: 1.25rem;
+        font-weight: 900;
+        color: var(--snow-emerald);
+    }
+
+    .snow-table-container {
+        margin-bottom: 2rem;
+    }
+
+    .snow-table-header-action {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1.5rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .snow-table-title {
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        opacity: 0.6;
+    }
+
+    .snow-btn-export {
+        font-size: 0.65rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        border: none;
+        background: none;
+        color: var(--snow-emerald);
+        border-bottom: 2px solid rgba(16, 185, 129, 0.3);
+        cursor: pointer;
+        padding: 0.25rem 0;
+        transition: all 0.3s ease;
+    }
+
+    .snow-btn-export:hover {
+        border-bottom-color: var(--snow-emerald);
+    }
+
+    .snow-table-overlay {
+        border: 1px solid var(--snow-border);
+        border-radius: 1rem;
+        overflow: hidden;
+    }
+
+    .snow-table-scroll {
+        overflow-x: auto;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.875rem;
+    }
+
+    table thead {
+        background: var(--snow-bg-subtle);
+        font-weight: 900;
+        text-transform: uppercase;
+        font-size: 0.65rem;
+        opacity: 0.6;
+    }
+
+    table th {
+        padding: 1rem;
+        text-align: left;
+        border-bottom: 1px solid var(--snow-border);
+    }
+
+    table td {
+        padding: 1rem;
+        border-bottom: 1px solid var(--snow-border);
+    }
+
+    table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .snow-table-free {
+        color: var(--snow-emerald);
+        font-weight: 900;
+    }
+
+    .snow-table-muted {
+        opacity: 0.6;
+    }
+
+    @media (max-width: 768px) {
+        .snow-sidebar {
+            max-height: none;
+        }
+        .snow-content {
+            max-height: none;
+        }
+        .snow-results-hero {
+            flex-direction: column;
+            text-align: center;
+            gap: 1.5rem;
+        }
+        .snow-grid-2 {
+            grid-template-columns: 1fr;
+        }
+        .snow-table-row {
+            grid-template-columns: 1fr;
+        }
+        .snow-table-header {
+            display: none;
+        }
+        .snow-debt-item {
+            grid-template-columns: 1fr;
+            padding: 1rem 0;
+            border-left: 4px solid var(--snow-emerald);
+            padding-left: 1rem;
+        }
+    }
+</style>
+
+<script>
+    import { DebtSnowballLogic, type Debt, type SimulationResult } from './logic';
+    import { format, addMonths } from 'date-fns';
+    import { es } from 'date-fns/locale';
+
+    const container = document.getElementById('debt-calc-container');
+    const currencyLocale = container?.getAttribute('data-currency-locale') || 'es-ES';
+    const currencyCode = container?.getAttribute('data-currency-code') || 'EUR';
+    const clearConfirm = container?.getAttribute('data-clear-confirm') || '¿Vaciar plan?';
+
+    function formatCurrency(val: number): string {
+        return new Intl.NumberFormat(currencyLocale, {
+            style: 'currency',
+            currency: currencyCode,
+            maximumFractionDigits: 0,
+        }).format(val);
+    }
+
+    class SnowballEngine {
+        private debts: Debt[] = [];
+        private extra: number = 100;
+        private method: 'snowball' | 'avalanche' = 'snowball';
+
+        constructor() {
+            this.load();
+            this.bind();
+            this.render();
+        }
+
+        private bind() {
+            const get = (id: string) => document.getElementById(id);
+
+            get('add-debt-btn')?.addEventListener('click', () => this.add());
+
+            const extraInput = get('extra-budget') as HTMLInputElement;
+            extraInput?.addEventListener('input', (e) => {
+                const val = parseFloat((e.target as HTMLInputElement).value);
+                this.extra = isNaN(val) ? 0 : val;
+                this.save();
+            });
+
+            document.querySelectorAll('.snow-tab').forEach((tab) => {
+                tab.addEventListener('click', () => {
+                    document.querySelectorAll('.snow-tab').forEach((t) => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    this.method = (tab as HTMLElement).dataset.method as 'snowball' | 'avalanche' || 'snowball';
+                    this.render();
+                });
+            });
+
+            get('clear-data')?.addEventListener('click', () => {
+                if (confirm(clearConfirm)) {
+                    this.debts = [];
+                    this.save();
+                }
+            });
+
+            get('export-csv')?.addEventListener('click', () => this.export());
+        }
+
+        private load() {
+            try {
+                const d = localStorage.getItem('snow_debts_v2');
+                if (d) this.debts = JSON.parse(d);
+                const e = localStorage.getItem('snow_extra_v2');
+                if (e) {
+                    this.extra = parseFloat(e);
+                    const input = document.getElementById('extra-budget') as HTMLInputElement;
+                    if (input) input.value = e;
+                }
+            } catch {
+                this.debts = [];
+            }
+        }
+
+        private save() {
+            localStorage.setItem('snow_debts_v2', JSON.stringify(this.debts));
+            localStorage.setItem('snow_extra_v2', this.extra.toString());
+            this.render();
+        }
+
+        private getDebtInputs() {
+            return {
+                nameEl: document.getElementById('debt-name') as HTMLInputElement,
+                balEl: document.getElementById('debt-balance') as HTMLInputElement,
+                minEl: document.getElementById('debt-min-payment') as HTMLInputElement,
+                rateEl: document.getElementById('debt-rate') as HTMLInputElement,
+            };
+        }
+
+        private clearDebtInputs(nameEl: HTMLInputElement, balEl: HTMLInputElement, minEl: HTMLInputElement) {
+            balEl.value = '';
+            minEl.value = '';
+            nameEl.value = '';
+        }
+
+        private validateAndCreateDebt(b: number, m: number, name: string, rate: number): boolean {
+            if (b > 0 && m > 0) {
+                this.debts.push({ id: Math.random().toString(36).substring(2, 11), name, balance: b, minPayment: m, rate });
+                return true;
+            }
+            return false;
+        }
+
+        private add() {
+            const { nameEl, balEl, minEl, rateEl } = this.getDebtInputs();
+            if (!balEl || !minEl) return;
+
+            const b = parseFloat(balEl.value);
+            const m = parseFloat(minEl.value);
+            const name = nameEl?.value || `Deuda ${this.debts.length + 1}`;
+            const rate = parseFloat(rateEl?.value) || 0;
+
+            if (this.validateAndCreateDebt(b, m, name, rate)) {
+                this.clearDebtInputs(nameEl, balEl, minEl);
+                this.save();
+            }
+        }
+
+        private render() {
+            const snow = DebtSnowballLogic.simulate(this.debts, this.extra, 'snowball');
+            const aval = DebtSnowballLogic.simulate(this.debts, this.extra, 'avalanche');
+            const res = this.method === 'snowball' ? snow : aval;
+            this.renderView(res, snow, aval);
+        }
+
+        private renderView(res: SimulationResult | null, snow: SimulationResult | null, aval: SimulationResult | null) {
+            const noMsg = document.getElementById('no-debts-msg');
+            const results = document.getElementById('results-content');
+
+            if (!res || !snow || !aval) {
+                noMsg?.classList.remove('snow-hidden');
+                results?.classList.add('snow-hidden');
+                return;
+            }
+
+            noMsg?.classList.add('snow-hidden');
+            results?.classList.remove('snow-hidden');
+            this.updateDisplay(res);
+            this.updateDebtList();
+            this.updateActionPlan();
+            this.updateProjectionTable(res);
+        }
+
+        private updateDisplay(res: SimulationResult) {
+            const dateEl = document.getElementById('summary-date');
+            if (dateEl) {
+                if (res.isGrowing) {
+                    dateEl.textContent = 'DEUDA INFINITA';
+                    dateEl.style.color = 'var(--snow-rose)';
+                } else {
+                    dateEl.textContent = format(addMonths(new Date(), res.mo), 'MMMM yyyy', { locale: es }).toUpperCase();
+                    dateEl.style.color = 'var(--snow-emerald)';
+                }
+            }
+
+            const methEl = document.getElementById('active-method-label');
+            if (methEl) methEl.textContent = `MÉTODO ${this.method.toUpperCase()}`;
+
+            document.getElementById('stat-months')!.textContent = res.mo.toString();
+            document.getElementById('stat-interest')!.textContent = formatCurrency(res.totalI);
+            document.getElementById('stat-total-paid')!.textContent = formatCurrency(res.totalP);
+
+            const baseSim = DebtSnowballLogic.simulateNoExtra(this.debts);
+            const saved = baseSim ? baseSim.totalI - res.totalI : 0;
+            document.getElementById('stat-extra-saved')!.textContent = formatCurrency(Math.max(0, saved));
+        }
+
+        private updateDebtList() {
+            const list = document.getElementById('debt-items-list');
+            if (!list) return;
+            list.innerHTML = '';
+            this.debts.forEach((d) => {
+                const row = document.createElement('div');
+                row.className = 'snow-debt-item';
+                row.innerHTML = `
+                    <span>${d.name}</span>
+                    <span>${formatCurrency(d.balance)}</span>
+                    <span>${formatCurrency(d.minPayment)}</span>
+                    <span>${d.rate}%</span>
+                    <button class="snow-debt-remove" title={ui.labelDeleteDebt}>&times;</button>
+                `;
+                row.querySelector('.snow-debt-remove')?.addEventListener('click', () => {
+                    this.debts = this.debts.filter((item) => item.id !== d.id);
+                    this.save();
+                });
+                list.appendChild(row);
+            });
+        }
+
+        private updateActionPlan() {
+            const planList = document.getElementById('action-plan-list');
+            if (!planList) return;
+            const ordered = [...this.debts].sort((a, b) =>
+                this.method === 'snowball' ? a.balance - b.balance : b.rate - a.rate
+            );
+            let cumulativeExtra = this.extra;
+            planList.innerHTML = ordered
+                .map((d, index) => {
+                    const totalForThis = d.minPayment + cumulativeExtra;
+                    cumulativeExtra += d.minPayment;
+                    const stepLabel = index === 0 ? 'PRIORIDAD MÁXIMA' : `PASO ${index + 1}`;
+                    return `
+                        <div class="snow-plan-item ${index === 0 ? 'active-step' : ''}">
+                            <div class="snow-step-marker">${index + 1}</div>
+                            <div class="snow-step-body">
+                                <span class="snow-step-label">${stepLabel}</span>
+                                <div class="snow-step-name">${d.name}</div>
+                            </div>
+                            <div class="snow-step-amount">
+                                <span>Pago mensual</span>
+                                <strong>${formatCurrency(totalForThis)}</strong>
+                            </div>
+                        </div>
+                    `;
+                })
+                .join('');
+        }
+
+        private updateProjectionTable(res: SimulationResult) {
+            const tbody = document.querySelector('#projection-table tbody');
+            if (!tbody) return;
+            tbody.innerHTML = res.proj
+                .map(
+                    (p) => `
+                    <tr>
+                        <td>${format(addMonths(new Date(), p.mo), 'MMM yy', { locale: es }).toUpperCase()}</td>
+                        <td>${formatCurrency(p.iniB)}</td>
+                        <td>${formatCurrency(p.int)}</td>
+                        <td>${formatCurrency(p.princ)}</td>
+                        <td>${formatCurrency(p.total)}</td>
+                        <td class="${p.finB < 1 ? 'snow-table-free' : 'snow-table-muted'}">${p.finB < 1 ? 'LIBRE' : formatCurrency(p.finB)}</td>
+                    </tr>
+                `
+                )
+                .join('');
+        }
+
+        private export() {
+            const res = DebtSnowballLogic.simulate(this.debts, this.extra, this.method);
+            if (!res) return;
+            let csv = '\uFEFFFecha,Saldo Inicial,Interes,Amortizacion,Pago Total,Saldo Final\n';
+            res.proj.forEach((p) => {
+                const d = format(addMonths(new Date(), p.mo), 'MM/yyyy');
+                csv += `${d},${p.iniB.toFixed(2)},${p.int.toFixed(2)},${p.princ.toFixed(2)},${p.total.toFixed(2)},${p.finB.toFixed(2)}\n`;
+            });
+            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `plan_deuda_${this.method}.csv`;
+            link.click();
+        }
+    }
+
+    new SnowballEngine();
+</script>