"""
HTML Renderer for Dashboard as Code.
"""

CSS_RESET = """
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f4f6f8; color: #1f2937; }
"""

CSS_GRID = """
.dac-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem; }
.dac-row { display: flex; flex-wrap: wrap; margin: -0.5rem; }
[class^="dac-col-"] { padding: 0.5rem; }
.dac-col-12 { width: 100%; }
.dac-col-6 { width: 50%; }
.dac-col-4 { width: 33.333%; }
.dac-col-3 { width: 25%; }
/* Add responsive breakpoints here */
@media (max-width: 768px) {
    .dac-col-12, .dac-col-6, .dac-col-4, .dac-col-3 { width: 100%; }
}
"""

CSS_COMPONENTS = """
.dac-widget { background: white; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); height: 100%; }
.dac-metric-label { font-size: 0.875rem; color: #6b7280; font-weight: 500; }
.dac-metric-value { font-size: 1.875rem; font-weight: 700; margin-top: 0.25rem; }
.dac-metric-delta { font-size: 0.875rem; font-weight: 500; margin-left: 0.5rem; }
.dac-text-green { color: #10b981; }
.dac-text-red { color: #ef4444; }
.dac-table { width: 100%; border-collapse: collapse; }
.dac-table th { text-align: left; padding: 0.75rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dac-table td { padding: 0.75rem; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; }
.dac-markdown h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.dac-markdown h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.dac-nav { background: white; border-bottom: 1px solid #e5e7eb; padding: 1rem 0; margin-bottom: 2rem; }
.dac-nav-content { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; }
.dac-title { font-size: 1.25rem; font-weight: 700; color: #111827; }
"""


class HtmlRenderer:
    """Renders dashboard to HTML."""

    def __init__(self, title: str = "Dashboard"):
        self.title = title

    def render(self, content_html: str) -> str:
        return f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{self.title}</title>
    <style>
        {CSS_RESET}
        {CSS_GRID}
        {CSS_COMPONENTS}
    </style>
    <!-- Plotly JS if needed -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <nav class="dac-nav">
        <div class="dac-nav-content">
            <div class="dac-title">{self.title}</div>
            <div class="dac-meta">Generated by ParquetFrame DaC</div>
        </div>
    </nav>
    <main>
        {content_html}
    </main>
</body>
</html>
"""
