app.py

"""
Budget Advisor — a personal financial-planning tool.

Visual direction: editorial private-wealth report. Warm off-white paper,
serif headlines, monospace figures, no emoji. All styling is delivered
through a custom Gradio CSS override plus Google Fonts (Source Serif 4,
Inter, JetBrains Mono). The Gradio theme is kept intentionally neutral
so the custom CSS fully controls the look.
"""

import gradio as gr
import json
import tempfile
from datetime import datetime

# ── constants ──────────────────────────────────────────────────────────────
EXPENSE_CATS = [
    "Housing", "Food & groceries", "Transport", "Utilities",
    "Entertainment", "Health", "Education", "Clothing", "Other",
]
CAT_LIMITS = {
    "Housing": 30, "Food & groceries": 15, "Transport": 15,
    "Utilities": 10, "Entertainment": 10, "Health": 10,
    "Education": 10, "Clothing": 5, "Other": 10,
}

# Neutral palette of swatches for the stacked-bar + swatch column.
CAT_SWATCH = {
    "Housing":          "#1c1a17",
    "Food & groceries": "#3d3932",
    "Transport":        "#5e5849",
    "Utilities":        "#7a7462",
    "Entertainment":    "#958f7e",
    "Health":           "#a8a28f",
    "Education":        "#b6b09d",
    "Clothing":         "#c4bead",
    "Other":            "#d3cdbb",
}

FOLLOW_UP_PROMPT = """You are a practical, direct personal finance advisor. I am going to give you a JSON object that summarizes my income, pre-tax deductions, retirement contribution, and monthly expenses. Please do the following:

1. Open with a two- to three-sentence read on the overall health of this budget — what is working, what is concerning.
2. Provide five to six specific, numbered recommendations. Reference the actual dollar amounts and percentages from the JSON. Each should be one or two sentences.
3. Flag any category where spending exceeds the recommended ceiling (the `limit_pct` field), and suggest a realistic target dollar amount.
4. Close with a single highest-priority action for the coming month.

Be direct and honest, but constructive. Translate the numbers into decisions.

Here is the budget:

"""

# ── formatting helpers ─────────────────────────────────────────────────────
def fmt(n: float) -> str:
    sign = "−" if n < 0 else ""
    return f"{sign}${abs(round(n)):,}"

def pct(part: float, whole: float, decimals: int = 1) -> str:
    if whole == 0:
        return "0.0%"
    return f"{round(part / whole * 100, decimals)}%"


# ── HTML builders (return strings used by gr.HTML blocks) ──────────────────
def _kpi_row(gross, takehome, remaining):
    rem_cls = "accent" if remaining >= 0 else "warn"
    return f"""
<div class="ba-kpi-row">
  <div class="ba-kpi">
    <div class="ba-kpi-label">Gross</div>
    <div class="ba-kpi-amount">{fmt(gross)}</div>
    <div class="ba-kpi-sub">100.0%</div>
  </div>
  <div class="ba-kpi accent">
    <div class="ba-kpi-label">Take-home</div>
    <div class="ba-kpi-amount">{fmt(takehome)}</div>
    <div class="ba-kpi-sub">{pct(takehome, gross)} of gross</div>
  </div>
  <div class="ba-kpi {rem_cls}">
    <div class="ba-kpi-label">Remaining</div>
    <div class="ba-kpi-amount">{fmt(remaining)}</div>
    <div class="ba-kpi-sub">{pct(remaining, takehome)} of take-home</div>
  </div>
</div>
"""


def _flow_table(gross, fed, state, fica, mcare, k401, takehome):
    return f"""
<div class="ba-section">
  <div class="ba-section-head">
    <h3>Income flow</h3>
    <span class="ba-hint">Withholdings &amp; savings</span>
  </div>
  <table class="ba-ledger">
    <thead>
      <tr><th>Line item</th><th>Amount</th><th>% gross</th></tr>
    </thead>
    <tbody>
      <tr><td>Gross income</td><td>{fmt(gross)}</td><td>100.0%</td></tr>
      <tr><td>Federal tax</td><td>−{fmt(fed)}</td><td>{pct(fed, gross)}</td></tr>
      <tr><td>State tax</td><td>−{fmt(state)}</td><td>{pct(state, gross)}</td></tr>
      <tr><td>Social Security</td><td>−{fmt(fica)}</td><td>{pct(fica, gross)}</td></tr>
      <tr><td>Medicare</td><td>−{fmt(mcare)}</td><td>{pct(mcare, gross)}</td></tr>
      <tr><td>401(k) contribution</td><td>−{fmt(k401)}</td><td>{pct(k401, gross)}</td></tr>
      <tr class="ba-total"><td>Take-home pay</td><td>{fmt(takehome)}</td><td>{pct(takehome, gross)}</td></tr>
    </tbody>
  </table>
</div>
"""


def _spending_block(used, takehome):
    # stacked bar
    segs = []
    rows = []
    for cat, amt in used.items():
        color = CAT_SWATCH.get(cat, "#8a8478")
        share = (amt / takehome * 100) if takehome > 0 else 0
        limit = CAT_LIMITS.get(cat, 10)
        if share > limit:
            pill = f'<span class="ba-pill over">Over {limit}%</span>'
        elif share > limit * 0.8:
            pill = f'<span class="ba-pill near">Near {limit}%</span>'
        else:
            pill = ""
        # bar segments scale against take-home so empty space is remaining
        segs.append(
            f'<div class="ba-seg" style="width:{max(share,0):.2f}%;background:{color}"></div>'
        )
        rows.append(f"""
<div class="ba-cat-row">
  <div class="ba-swatch" style="background:{color}"></div>
  <div class="ba-cat-name">{cat}</div>
  <div class="ba-cat-amt">{fmt(amt)}</div>
  <div class="ba-cat-pct">{share:.1f}%{pill}</div>
</div>
""")
    return f"""
<div class="ba-section">
  <div class="ba-section-head">
    <h3>Spending allocation</h3>
    <span class="ba-hint">vs. take-home</span>
  </div>
  <div class="ba-bar">{''.join(segs)}</div>
  <div class="ba-cat-list">{''.join(rows)}</div>
</div>
"""


def _position_block(total_exp, remaining, takehome, k401, gross):
    savings_rate = ((k401 + max(remaining, 0)) / gross * 100) if gross > 0 else 0
    return f"""
<div class="ba-section" style="margin-bottom:0">
  <div class="ba-section-head">
    <h3>Position</h3>
    <span class="ba-hint">end of month</span>
  </div>
  <table class="ba-ledger">
    <tbody>
      <tr><td>Total expenses</td><td>{fmt(total_exp)}</td><td>{pct(total_exp, takehome)}</td></tr>
      <tr><td>Discretionary surplus</td><td>{fmt(max(remaining, 0))}</td><td>{pct(max(remaining, 0), takehome)}</td></tr>
      <tr class="ba-total"><td>Effective savings rate</td><td>{fmt(k401 + max(remaining, 0))}</td><td>{savings_rate:.1f}%</td></tr>
    </tbody>
  </table>
</div>
"""


def _empty_report(message="Enter your income to generate the report."):
    return f"""
<div class="ba-report-empty">
  <div class="ba-kicker">Advisory report</div>
  <h2 class="ba-report-title">Awaiting inputs</h2>
  <p class="ba-report-sub"><em>{message}</em></p>
</div>
"""


def _report_header():
    now = datetime.now().strftime("%b %Y")
    return f"""
<div class="ba-report-head">
  <span class="ba-kicker">Advisory report</span>
  <span class="ba-meta">{now}</span>
</div>
<h2 class="ba-report-title">Monthly Position</h2>
<p class="ba-report-sub"><em>Prepared from your declared inputs. Figures rounded to the nearest dollar.</em></p>
"""


# ── core calculation ───────────────────────────────────────────────────────
def calculate_budget(
    gross_income,
    fed_tax_pct, state_tax_pct, fica_pct, medicare_pct, k401_pct,
    housing, food, transport, utilities,
    entertainment, health, education, clothing, other,
):
    if gross_income is None or gross_income <= 0:
        empty_json = "{}"
        return (
            _empty_report("Please enter a valid monthly gross income to generate the report."),
            empty_json, FOLLOW_UP_PROMPT + empty_json, None,
        )

    fed_amt      = gross_income * fed_tax_pct    / 100
    state_amt    = gross_income * state_tax_pct  / 100
    fica_amt     = gross_income * fica_pct       / 100
    medicare_amt = gross_income * medicare_pct   / 100
    k401_amt     = gross_income * k401_pct       / 100

    total_tax = fed_amt + state_amt + fica_amt + medicare_amt
    total_ded = total_tax + k401_amt
    takehome  = gross_income - total_ded

    expenses = {
        "Housing":          housing,
        "Food & groceries": food,
        "Transport":        transport,
        "Utilities":        utilities,
        "Entertainment":    entertainment,
        "Health":           health,
        "Education":        education,
        "Clothing":         clothing,
        "Other":            other,
    }
    used = {k: (v or 0) for k, v in expenses.items() if v and v > 0}
    total_exp = sum(used.values())
    remaining = takehome - total_exp

    # ── report html ──
    report_html = (
        _report_header()
        + _kpi_row(gross_income, takehome, remaining)
        + _flow_table(gross_income, fed_amt, state_amt, fica_amt, medicare_amt, k401_amt, takehome)
        + _spending_block(used, takehome)
        + _position_block(total_exp, remaining, takehome, k401_amt, gross_income)
    )

    # ── structured JSON export ──
    def _round(x):
        return round(float(x), 2)

    expense_breakdown = []
    for cat, amt in used.items():
        limit = CAT_LIMITS.get(cat, 10)
        cat_pct = round(amt / takehome * 100, 2) if takehome > 0 else 0
        if cat_pct <= limit * 0.8:
            status = "ok"
        elif cat_pct <= limit:
            status = "near_limit"
        else:
            status = "over_limit"
        expense_breakdown.append({
            "category": cat,
            "amount_usd": _round(amt),
            "pct_of_takehome": cat_pct,
            "limit_pct": limit,
            "status": status,
        })

    export_data = {
        "schema": "budget-ai-advisor/v1",
        "generated_at": datetime.utcnow().isoformat() + "Z",
        "currency": "USD",
        "period": "monthly",
        "income": {"gross_usd": _round(gross_income)},
        "pre_tax_deductions": {
            "federal_tax_pct":     _round(fed_tax_pct),
            "state_tax_pct":       _round(state_tax_pct),
            "social_security_pct": _round(fica_pct),
            "medicare_pct":        _round(medicare_pct),
            "retirement_401k_pct": _round(k401_pct),
            "federal_tax_usd":     _round(fed_amt),
            "state_tax_usd":       _round(state_amt),
            "social_security_usd": _round(fica_amt),
            "medicare_usd":        _round(medicare_amt),
            "retirement_401k_usd": _round(k401_amt),
            "total_taxes_usd":     _round(total_tax),
        },
        "take_home_usd": _round(takehome),
        "expenses": expense_breakdown,
        "totals": {
            "total_expenses_usd": _round(total_exp),
            "remaining_usd":      _round(remaining),
            "remaining_pct_of_takehome":
                round(remaining / takehome * 100, 2) if takehome > 0 else 0,
            "savings_rate_pct_of_gross":
                round((k401_amt + max(remaining, 0)) / gross_income * 100, 2)
                if gross_income > 0 else 0,
        },
        "notes": {
            "limits_reference":
                "Each expense's `limit_pct` is a recommended ceiling as a share of "
                "take-home pay. `status` is 'ok' if under 80% of the limit, "
                "'near_limit' if 80-100%, 'over_limit' if above.",
            "savings_rate_definition":
                "savings_rate_pct_of_gross = (401(k) contribution + leftover after expenses) / gross income",
        },
    }

    export_json = json.dumps(export_data, indent=2)
    full_prompt = FOLLOW_UP_PROMPT + export_json

    timestamp = datetime.now().strftime("%Y%m%d-%H%M%S")
    tmp_dir = tempfile.gettempdir()
    download_path = f"{tmp_dir}/budget-export-{timestamp}.json"
    with open(download_path, "w") as f:
        f.write(export_json)

    return report_html, export_json, full_prompt, download_path


# ── Custom CSS ─────────────────────────────────────────────────────────────
APP_CSS = """
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root, .gradio-container {
  --ba-bg: #faf7f2;
  --ba-bg-sunk: #f1ecdf;
  --ba-card: #fffdf8;
  --ba-ink: #1c1a17;
  --ba-ink-2: #4a463f;
  --ba-ink-3: #8a8478;
  --ba-rule: #e5dfd2;
  --ba-accent: oklch(0.42 0.05 155);
  --ba-warn: oklch(0.58 0.12 55);
  --ba-danger: oklch(0.50 0.15 30);
  --ba-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ba-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ba-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Page shell ───────────────────────────────────────────────── */
html, body, .gradio-container {
  background: var(--ba-bg) !important;
  color: var(--ba-ink) !important;
  font-family: var(--ba-sans) !important;
}
.gradio-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 40px 48px 80px !important;
}

/* ── Masthead + hero (rendered via gr.HTML) ──────────────────── */
.ba-masthead {
  border-bottom: 1px solid var(--ba-ink);
  padding-bottom: 18px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ba-brand {
  font-family: var(--ba-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.ba-brand::before {
  content: "§";
  margin-right: 8px;
  color: var(--ba-accent);
  font-style: normal;
}
.ba-brand-title {
  font-family: var(--ba-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  color: var(--ba-ink-2);
  margin-left: 12px;
  letter-spacing: 0.02em;
}
.ba-meta {
  font-family: var(--ba-mono);
  font-size: 11px;
  color: var(--ba-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ba-hero { margin-bottom: 36px; max-width: 760px; }
.ba-hero h1 {
  font-family: var(--ba-serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.ba-hero h1 em { font-style: italic; color: var(--ba-accent); }
.ba-hero p {
  font-family: var(--ba-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ba-ink-2);
  margin: 0;
  max-width: 640px;
}

/* ── Gradio row / column as a two-column grid feels natural ───── */
.gradio-container .prose { font-family: var(--ba-sans) !important; color: var(--ba-ink) !important; }

/* Section headers we render as markdown */
.ba-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ba-ink);
  padding-bottom: 8px;
  margin: 24px 0 14px;
}
.ba-panel-head h2 {
  font-family: var(--ba-serif) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  margin: 0 !important;
  letter-spacing: -0.005em;
  color: var(--ba-ink) !important;
}
.ba-panel-head .ba-idx {
  font-family: var(--ba-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ba-ink-3);
  text-transform: uppercase;
}
.ba-panel-note {
  font-family: var(--ba-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ba-ink-3);
  margin: -4px 0 14px;
}

/* ── Gradio input controls ──────────────────────────────────── */

/* Labels */
.gradio-container label span,
.gradio-container .label-wrap > span,
.gradio-container .block > .label > span,
.gradio-container span[data-testid="block-info"] {
  font-family: var(--ba-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ba-ink-2) !important;
  letter-spacing: 0 !important;
}

/* Number inputs */
.gradio-container input[type="number"],
.gradio-container input[type="text"] {
  font-family: var(--ba-mono) !important;
  font-size: 14px !important;
  text-align: right !important;
  background: var(--ba-card) !important;
  border: 1px solid var(--ba-rule) !important;
  color: var(--ba-ink) !important;
  border-radius: 2px !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color .15s;
}
.gradio-container input[type="number"]:focus,
.gradio-container input[type="text"]:focus {
  border-color: var(--ba-ink) !important;
  outline: none !important;
}

/* Sliders */
.gradio-container input[type="range"] {
  accent-color: var(--ba-ink) !important;
  height: 2px !important;
}
.gradio-container .wrap.svelte-1cl284s,
.gradio-container .wrap .head,
.gradio-container .slider_input_container .tick-marks,
.gradio-container [data-testid="slider"] {
  background: transparent !important;
}

/* Slider value readout — force mono */
.gradio-container .slider_input_container input,
.gradio-container [data-testid="slider"] input {
  font-family: var(--ba-mono) !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
  color: var(--ba-ink) !important;
  text-align: right !important;
  padding: 0 !important;
  width: 56px !important;
}

/* Remove Gradio's default card backgrounds on form blocks */
.gradio-container .block,
.gradio-container .form,
.gradio-container .gap,
.gradio-container fieldset {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Give number/slider blocks a bottom rule to feel like a ledger */
.gradio-container .block.svelte-11xb1hd,
.gradio-container [data-testid="number-input"],
.gradio-container [data-testid="slider"] {
  border-bottom: 1px solid var(--ba-rule) !important;
  padding: 12px 0 !important;
  border-radius: 0 !important;
}

/* Button: turn Gradio primary into a serious black pill */
.gradio-container button.primary,
.gradio-container button[variant="primary"],
.gradio-container .primary button {
  background: var(--ba-ink) !important;
  color: var(--ba-bg) !important;
  border: 1px solid var(--ba-ink) !important;
  border-radius: 2px !important;
  font-family: var(--ba-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  padding: 11px 22px !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s;
}
.gradio-container button.primary:hover,
.gradio-container button[variant="primary"]:hover {
  background: var(--ba-accent) !important;
  border-color: var(--ba-accent) !important;
}
.gradio-container button.secondary,
.gradio-container button[variant="secondary"] {
  background: transparent !important;
  color: var(--ba-ink) !important;
  border: 1px solid var(--ba-ink) !important;
  border-radius: 2px !important;
  font-family: var(--ba-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 11px 22px !important;
  box-shadow: none !important;
}
.gradio-container button.secondary:hover {
  background: var(--ba-bg-sunk) !important;
}

/* ── Results sheet (gr.HTML output) ─────────────────────────── */
.ba-results-sheet {
  background: var(--ba-card);
  border: 1px solid var(--ba-rule);
  padding: 32px 36px;
}
.ba-report-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ba-kicker {
  font-family: var(--ba-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ba-ink-3);
}
.ba-report-title {
  font-family: var(--ba-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
  color: var(--ba-ink);
}
.ba-report-sub {
  font-family: var(--ba-serif);
  font-size: 13px;
  color: var(--ba-ink-3);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ba-rule);
}
.ba-report-empty {
  padding: 12px 0 8px;
}
.ba-report-empty .ba-report-title { margin-top: 4px; }

.ba-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ba-rule);
  margin-bottom: 26px;
}
.ba-kpi {
  padding: 16px 16px;
  border-right: 1px solid var(--ba-rule);
}
.ba-kpi:last-child { border-right: none; }
.ba-kpi-label {
  font-family: var(--ba-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ba-ink-3);
  margin-bottom: 6px;
}
.ba-kpi-amount {
  font-family: var(--ba-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ba-ink);
}
.ba-kpi-sub {
  font-family: var(--ba-mono);
  font-size: 11px;
  color: var(--ba-ink-3);
  margin-top: 6px;
}
.ba-kpi.accent .ba-kpi-amount { color: var(--ba-accent); }
.ba-kpi.warn .ba-kpi-amount { color: var(--ba-danger); }

.ba-section { margin-bottom: 26px; }
.ba-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.ba-section-head h3 {
  font-family: var(--ba-serif);
  font-weight: 500;
  font-size: 15px;
  margin: 0;
  color: var(--ba-ink);
}
.ba-hint {
  font-family: var(--ba-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ba-ink-3);
}

.ba-ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ba-ledger th {
  font-family: var(--ba-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ba-ink-3);
  text-align: right;
  padding: 6px 0;
  border-bottom: 1px solid var(--ba-rule);
}
.ba-ledger th:first-child { text-align: left; }
.ba-ledger td {
  padding: 9px 0;
  border-bottom: 1px dotted var(--ba-rule);
  font-family: var(--ba-mono);
  font-size: 12.5px;
  text-align: right;
  color: var(--ba-ink);
}
.ba-ledger td:first-child {
  text-align: left;
  font-family: var(--ba-sans);
  font-size: 13px;
  color: var(--ba-ink-2);
}
.ba-ledger tr.ba-total td {
  border-top: 1px solid var(--ba-ink);
  border-bottom: none;
  padding-top: 12px;
  font-weight: 600;
  color: var(--ba-ink);
}
.ba-ledger tr.ba-total td:first-child {
  font-family: var(--ba-serif);
  font-weight: 500;
  font-size: 14px;
}

.ba-bar {
  display: flex;
  height: 10px;
  width: 100%;
  background: var(--ba-bg-sunk);
  margin-bottom: 14px;
  overflow: hidden;
}
.ba-seg { height: 100%; border-right: 1px solid var(--ba-card); }
.ba-seg:last-child { border-right: none; }

.ba-cat-row {
  display: grid;
  grid-template-columns: 14px 1fr auto 130px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dotted var(--ba-rule);
  font-size: 13px;
}
.ba-cat-row:last-child { border-bottom: none; }
.ba-swatch { width: 10px; height: 10px; }
.ba-cat-name { color: var(--ba-ink-2); }
.ba-cat-amt {
  font-family: var(--ba-mono);
  font-size: 12.5px;
  color: var(--ba-ink);
}
.ba-cat-pct {
  font-family: var(--ba-mono);
  font-size: 11px;
  color: var(--ba-ink-3);
  text-align: right;
}
.ba-pill {
  display: inline-block;
  font-family: var(--ba-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid;
  margin-left: 6px;
  vertical-align: 2px;
}
.ba-pill.over { color: var(--ba-danger); border-color: var(--ba-danger); }
.ba-pill.near { color: var(--ba-warn);   border-color: var(--ba-warn); }

/* ── Handoff section ───────────────────────────────────────── */
.ba-handoff-head {
  border-top: 1px solid var(--ba-ink);
  padding-top: 28px;
  margin-top: 40px;
}
.ba-handoff-head h2 {
  font-family: var(--ba-serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.ba-handoff-head p {
  font-family: var(--ba-serif);
  font-size: 15px;
  color: var(--ba-ink-2);
  max-width: 680px;
  margin: 0 0 22px;
}
.ba-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 20px;
}
.ba-step { border-top: 1px solid var(--ba-rule); padding-top: 12px; }
.ba-step .ba-n {
  font-family: var(--ba-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ba-ink-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ba-step h4 {
  font-family: var(--ba-serif);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--ba-ink);
}
.ba-step p {
  font-family: var(--ba-sans);
  font-size: 13px;
  color: var(--ba-ink-2);
  margin: 0;
}

/* Gradio Code block override */
.gradio-container .cm-editor,
.gradio-container .cm-content,
.gradio-container pre,
.gradio-container code {
  font-family: var(--ba-mono) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}
.gradio-container .cm-editor {
  background: #1c1a17 !important;
  color: #e8e3d9 !important;
  border: 1px solid var(--ba-rule) !important;
  border-radius: 2px !important;
}

/* Accordion styling */
.gradio-container .label-wrap,
.gradio-container details > summary {
  font-family: var(--ba-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ba-ink) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--ba-rule) !important;
}

/* File download component */
.gradio-container [data-testid="file"] {
  background: var(--ba-card) !important;
  border: 1px solid var(--ba-rule) !important;
  border-radius: 2px !important;
}

/* Footer text */
.ba-footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--ba-rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--ba-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ba-ink-3);
}
"""

APP_THEME = gr.themes.Base(
    primary_hue=gr.themes.colors.stone,
    secondary_hue=gr.themes.colors.stone,
    neutral_hue=gr.themes.colors.stone,
    font=("Inter", "system-ui", "sans-serif"),
    font_mono=("JetBrains Mono", "ui-monospace", "monospace"),
).set(
    body_background_fill="#faf7f2",
    body_text_color="#1c1a17",
    background_fill_primary="#faf7f2",
    background_fill_secondary="#faf7f2",
    border_color_primary="#e5dfd2",
    block_background_fill="transparent",
    block_border_width="0px",
    block_label_background_fill="transparent",
    button_primary_background_fill="#1c1a17",
    button_primary_text_color="#faf7f2",
    button_secondary_background_fill="transparent",
    button_secondary_text_color="#1c1a17",
    button_secondary_border_color="#1c1a17",
    input_background_fill="#fffdf8",
    input_border_color="#e5dfd2",
)


# ── Gradio UI ──────────────────────────────────────────────────────────────
with gr.Blocks(title="Budget Advisor", theme=APP_THEME, css=APP_CSS) as demo:

    # Masthead
    gr.HTML("""
<div class="ba-masthead">
  <div>
    <span class="ba-brand">Ledger &amp; Co.</span>
    <span class="ba-brand-title">Personal Budget Advisor</span>
  </div>
  <span class="ba-meta">Monthly · USD</span>
</div>
<div class="ba-hero">
  <h1>A measured view of your <em>monthly finances.</em></h1>
  <p>Enter your income, pre-tax deductions, and expenses below. The report compiles a structured view of where your money goes — and packages it as a handoff you can take to any AI advisor for personalized guidance.</p>
</div>
""")

    with gr.Row(equal_height=False):

        # ─── LEFT: inputs ─────────────────────────────────────────────
        with gr.Column(scale=5, min_width=420):

            gr.HTML('<div class="ba-panel-head"><h2>Income</h2><span class="ba-idx">I.</span></div>')
            gross_income = gr.Number(
                label="Monthly gross income (USD)", value=5000, minimum=0, precision=0,
            )

            gr.HTML('<div class="ba-panel-head"><h2>Pre-tax deductions</h2><span class="ba-idx">II.</span></div>'
                    '<p class="ba-panel-note">Adjust to reflect your actual withholdings and retirement contributions.</p>')
            with gr.Row():
                fed_tax   = gr.Slider(0, 50, value=22,   step=0.5,  label="Federal income tax (%)")
                state_tax = gr.Slider(0, 15, value=5,    step=0.5,  label="State income tax (%)")
            with gr.Row():
                fica      = gr.Slider(0, 10, value=6.2,  step=0.1,  label="Social Security / FICA (%)")
                medicare  = gr.Slider(0, 5,  value=1.45, step=0.05, label="Medicare (%)")
            k401      = gr.Slider(0, 30, value=6,    step=0.5,  label="401(k) contribution (%)")

            gr.HTML('<div class="ba-panel-head"><h2>Monthly expenses</h2><span class="ba-idx">III.</span></div>'
                    '<p class="ba-panel-note">Recurring categories with rough recommended ceilings as a share of take-home.</p>')
            with gr.Row():
                housing       = gr.Number(label="Housing (USD)",           value=1200, minimum=0, precision=0)
                food          = gr.Number(label="Food & groceries (USD)",  value=400,  minimum=0, precision=0)
                transport     = gr.Number(label="Transport (USD)",         value=200,  minimum=0, precision=0)
            with gr.Row():
                utilities     = gr.Number(label="Utilities (USD)",         value=150,  minimum=0, precision=0)
                entertainment = gr.Number(label="Entertainment (USD)",     value=100,  minimum=0, precision=0)
                health        = gr.Number(label="Health (USD)",            value=0,    minimum=0, precision=0)
            with gr.Row():
                education     = gr.Number(label="Education (USD)",         value=0,    minimum=0, precision=0)
                clothing      = gr.Number(label="Clothing (USD)",          value=0,    minimum=0, precision=0)
                other         = gr.Number(label="Other (USD)",             value=0,    minimum=0, precision=0)

            calc_btn = gr.Button("Compile report", variant="primary", size="lg")

        # ─── RIGHT: results sheet ─────────────────────────────────────
        with gr.Column(scale=6, min_width=480):
            report_html = gr.HTML(
                value='<div class="ba-results-sheet">' + _empty_report() + '</div>',
            )

    # Handoff section
    gr.HTML("""
<div class="ba-handoff-head">
  <h2>Take this report further</h2>
  <p>Your budget has been packaged as a structured handoff — a carefully written prompt followed by your figures as JSON. Paste the whole block into the AI assistant of your choice for a personalized read.</p>
  <div class="ba-steps">
    <div class="ba-step"><div class="ba-n">Step 01</div><h4>Verify your inputs</h4><p>Adjust the sliders and expense fields until the report reflects your actual situation.</p></div>
    <div class="ba-step"><div class="ba-n">Step 02</div><h4>Copy the handoff</h4><p>Use the button below to copy the prompt and JSON in one click, or download the JSON as a file.</p></div>
    <div class="ba-step"><div class="ba-n">Step 03</div><h4>Paste into your advisor</h4><p>Any capable assistant — Claude, ChatGPT, or your own — will produce an actionable read.</p></div>
  </div>
</div>
""")

    with gr.Accordion("Ready-to-paste prompt and budget data", open=True):
        out_full_prompt = gr.Code(
            label="Prompt + JSON (copy the whole block)",
            language="markdown",
            interactive=False,
            lines=18,
        )
        with gr.Row():
            copy_btn     = gr.Button("Copy handoff to clipboard", variant="primary")
            out_download = gr.File(label="Or download the JSON", interactive=False)

    with gr.Accordion("Raw JSON only", open=False):
        out_json = gr.Code(
            label="Budget data as JSON",
            language="json",
            interactive=False,
            lines=18,
        )

    gr.HTML('<div class="ba-footer"><span>Ledger &amp; Co. · Not professional financial advice</span><span>Report compiled locally in-browser</span></div>')

    # ── wire up (computes on button click + on any input change) ───
    inputs = [
        gross_income,
        fed_tax, state_tax, fica, medicare, k401,
        housing, food, transport, utilities,
        entertainment, health, education, clothing, other,
    ]
    outputs = [report_html, out_json, out_full_prompt, out_download]

    calc_btn.click(fn=calculate_budget, inputs=inputs, outputs=outputs)
    # Live-update so the report reflects input changes without needing the button
    for ctrl in inputs:
        ctrl.change(fn=calculate_budget, inputs=inputs, outputs=outputs)

    # compute initial report on load
    demo.load(fn=calculate_budget, inputs=inputs, outputs=outputs)

    # Clipboard copy runs in the browser — no server round-trip needed.
    copy_btn.click(
        fn=None,
        inputs=[out_full_prompt],
        outputs=[],
        js="""
        (text) => {
            if (!text) {
                alert("Adjust your inputs first, then try again.");
                return;
            }
            navigator.clipboard.writeText(text).then(() => {
                alert("Copied. Paste it into your AI assistant of choice.");
            }).catch(() => {
                alert("Couldn't copy automatically — select the text in the box and copy it manually.");
            });
        }
        """,
    )


if __name__ == "__main__":
    demo.launch()