"""
Funciones.py
------------
Utilidades de UI/formatos y tema visual para el dashboard Cabanna.

Incluye:
- Identidad de marca (colores y tipografías).
- Paleta Picton Blue (solo charts).
- Helpers de formato (moneda, % seguro, rangos).
- Componentes UI (cards) para Streamlit.
- Tema Plotly consistente con fondo oscuro.

Notas de diseño:
- Este archivo NO debe conectarse a la base de datos (evitar acoplamiento).
- Mantenerlo como "UI toolkit" reutilizable por los renders.
"""

from __future__ import annotations

from contextlib import contextmanager
from typing import Optional, Tuple, Any

import pandas as pd
import streamlit as st
import plotly.graph_objects as go

# =============================================================================
# Identidad de marca
# =============================================================================
COLORS = {
    "brown":       "#8B4513",
    "gold":        "#FD6A02",
    "white":       "#FFFFFF",
    "darkslate":   "#2F4F4F",
    "beige":       "#F5F5DC",
    "black":       "#000000",
    "light_brown": "#C19A6B",
    "dark_red":    "#8B0000",
}

TITLE_FONT = "Playfair Display, serif"
BODY_FONT  = "Lato, sans-serif"
ALT_FONT   = "Montserrat, sans-serif"

# Paleta Picton Blue (solo charts)
PICTON_BLUE = [
    "#eff8ff", "#dff0ff", "#b8e3ff", "#78cdff", "#38b6ff",
    "#069af1", "#007ace", "#0061a7", "#02528a", "#084572", "#062b4b"
]
# Funcionaes auxiliares
def render_metric(label: str, value: str, help_text: str | None = None):
    """Renderiza una métrica dentro de una tarjeta visual coherente con el tema."""
    st.metric(label=label, value=value, help=help_text)
    st.markdown("</div>", unsafe_allow_html=True)

def fmt_currency(x: float) -> str:
    """Formatea a moneda con separadores."""
    return f"${x:,.2f}"

# TEMA PLOTLY (APLICA SOLO A GRÁFICAS)
def apply_cabanna_theme(fig: go.Figure, title: str | None = None) -> go.Figure:
    """
    Aplica fondo negro, tipografía de marca y la paleta Picton Blue SOLO a la figura.
    Si 'title' es None, respeta el título ya presente en la figura.
    """
    # Construir actualización de layout sin forzar título "undefined"
    layout_updates = dict(
        font=dict(family=BODY_FONT, size=13, color=COLORS["white"]),
        paper_bgcolor=COLORS["black"],     # lienzo
        plot_bgcolor=COLORS["black"],      # área del gráfico
        margin=dict(l=10, r=10, t=60, b=10),
        legend=dict(
            title=None, orientation="h",
            yanchor="bottom", y=1.02, xanchor="left", x=0,
            font=dict(color=PICTON_BLUE[4])
        ),
    )
    fig.update_layout(**layout_updates)
    return fig

def _safe_pct(num, den):
    if den is None or den == 0:
        return None
    return (num - den) / den

def _fmt_range(d1, d2=None):
    """Formatea una fecha o rango en formato dd/mm/yyyy"""
    fmt = '%d/%m/%Y'
    
    fecha1 = pd.to_datetime(d1).strftime(fmt)
    
    if d2 is None:
        return fecha1
    
    fecha2 = pd.to_datetime(d2).strftime(fmt)
    return f"{fecha1} → {fecha2}"

def _fmt_pct_value(p):
    if p is None:
        return "NA", "#9aa0a6", ""
    color = "#22c55e" if p >= 0 else "#ef4444"  # verde / rojo
    arrow = "↗" if p >= 0 else "↘"
    return f"{p:+.2%}", color, arrow

def _render_var_card(titulo, pct, leyenda, rango_actual, rango_anterior):
    value_str, color, arrow = _fmt_pct_value(pct)
    st.markdown(
        f"""
        <div class="var-card">
        <div class="var-title">{titulo}</div>
        <div class="var-value" style="color:{color}">{value_str} {arrow}</div>
        <div class="var-legend">{leyenda}</div>
        <div class="var-range">({rango_actual} vs {rango_anterior})</div>
        </div>
        """,
        unsafe_allow_html=True,
    )

# 7) UTILIDAD: Tarjeta para secciones (gráficas / texto)
@contextmanager
def st_card(title: str | None = None, subtitle: str | None = None):
    """
    Context manager para envolver cualquier bloque en una tarjeta de UI
    consistente con la identidad (negro/dorado).
    Uso:
        with st_card("Título", "Subtítulo opcional"):
            st.plotly_chart(...)

    Cierra automáticamente su contenedor al salir.
    """
    
    if title:
        st.markdown(f"<div class='cab-card-title'>{title}</div>", unsafe_allow_html=True)
    if subtitle:
        st.markdown(f"<div class='cab-card-sub'>{subtitle}</div>", unsafe_allow_html=True)
    try:
        yield
    finally:
        st.markdown("</div>", unsafe_allow_html=True)