"""
store/email_utils.py
─────────────────────
Shared HTML shell for the store app's transactional emails (customer order
confirmation in signals.py, admin payment-proof notification in views.py),
styled to match the Tai AfroPress storefront palette — cream background,
green/rust/gold Kente stripe, Archivo typeface with web-safe fallbacks.

Email clients don't reliably support external CSS/webfonts or CSS
gradients (Outlook desktop in particular), so this uses inline styles and a
table-based layout — the standard "bulletproof HTML email" pattern — rather
than the CSS classes/gradients the actual site uses. Buttons declare a
solid `bgcolor` first so they degrade to a plain solid color instead of
breaking in clients that ignore the gradient.
"""
from django.utils import timezone

BRAND = {
    "bg": "#fbf7ef",
    "card": "#ffffff",
    "border": "#ece2cf",
    "text": "#21160a",
    "muted": "#6d6152",
    "green": "#1f5039",
    "rust": "#b9461f",
    "gold": "#e8932c",
    "gold_light": "#f3b850",
    "gold_dark": "#e07b2c",
    "dark": "#160f08",
    "dark_muted": "#c9b48a",
}

FONT_STACK = "Archivo,'Segoe UI',Arial,sans-serif"

BRAND_WORDMARK = {
    "afropress": "TAI AfroPress",
    "bookstore": "Tai BookStore",
}
BRAND_FOOTER_NAME = {
    "afropress": "Tai AfroPress",
    "bookstore": "Tai BookStore",
}


def render_email_shell(
    *, heading: str, body_html: str, cta_label: str = "", cta_url: str = "",
    brand: str = "afropress", preheader: str = "",
) -> str:
    """
    Wraps `body_html` in the branded email shell: Kente-stripe top bar,
    white card with heading, optional gold gradient CTA button, dark footer.

    `brand` switches the header wordmark/footer line between the two Tai
    identities ("afropress" | "bookstore") — same BRAND palette either way,
    no separate color scheme. `preheader` is the short hidden snippet shown
    next to the subject in an inbox's message list; harmless to omit.
    """
    wordmark = BRAND_WORDMARK.get(brand, BRAND_WORDMARK["afropress"])
    footer_name = BRAND_FOOTER_NAME.get(brand, BRAND_FOOTER_NAME["afropress"])
    preheader_html = (
        f'<div style="display:none;max-height:0;overflow:hidden;opacity:0;">{preheader}</div>'
        if preheader else ""
    )
    cta_html = ""
    if cta_label and cta_url:
        cta_html = f"""
        <table role="presentation" cellpadding="0" cellspacing="0" style="margin:26px 0 4px;">
          <tr>
            <td bgcolor="{BRAND['gold_dark']}" style="border-radius:9px;background:linear-gradient(90deg,{BRAND['gold_light']},{BRAND['gold_dark']});">
              <a href="{cta_url}" target="_blank" style="display:inline-block;padding:14px 26px;font-family:{FONT_STACK};font-size:14.5px;font-weight:700;color:#2a1608;text-decoration:none;">{cta_label}</a>
            </td>
          </tr>
        </table>"""

    return f"""\
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin:0;padding:0;background:{BRAND['bg']};">
  {preheader_html}
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:{BRAND['bg']};padding:32px 16px;">
    <tr><td align="center">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;background:{BRAND['card']};border-radius:14px;overflow:hidden;border:1px solid {BRAND['border']};font-family:{FONT_STACK};">
        <tr><td style="padding:0;">
          <table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>
            <td width="33%" bgcolor="{BRAND['green']}" style="background:{BRAND['green']};height:6px;font-size:0;line-height:0;">&nbsp;</td>
            <td width="34%" bgcolor="{BRAND['rust']}" style="background:{BRAND['rust']};height:6px;font-size:0;line-height:0;">&nbsp;</td>
            <td width="33%" bgcolor="{BRAND['gold']}" style="background:{BRAND['gold']};height:6px;font-size:0;line-height:0;">&nbsp;</td>
          </tr></table>
        </td></tr>
        <tr><td style="padding:30px 36px 6px;">
          <div style="font-size:19px;font-weight:800;color:{BRAND['text']};letter-spacing:-0.01em;">{wordmark}</div>
        </td></tr>
        <tr><td style="padding:10px 36px 0;">
          <h1 style="margin:0 0 16px;font-size:21px;font-weight:800;color:{BRAND['text']};">{heading}</h1>
        </td></tr>
        <tr><td style="padding:0 36px 8px;font-size:14.5px;line-height:1.65;color:{BRAND['text']};">
          {body_html}
          {cta_html}
        </td></tr>
        <tr><td style="height:26px;font-size:0;line-height:0;">&nbsp;</td></tr>
        <tr><td bgcolor="{BRAND['dark']}" style="background:{BRAND['dark']};padding:22px 36px;text-align:center;">
          <div style="color:{BRAND['dark_muted']};font-size:12px;font-family:{FONT_STACK};">&copy; {timezone.now().year} {footer_name}. All rights reserved.</div>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>"""


def kv_row(label: str, value: str, *, strong: bool = False, top_border: bool = False) -> str:
    """One label/value row for the small key-value detail tables used in both emails."""
    border = f"border-top:1px solid {BRAND['border']};" if top_border else ""
    weight = "font-weight:800;font-size:15px;" if strong else "font-weight:700;"
    value_color = BRAND["green"] if strong else BRAND["text"]
    pad = "padding:8px 0 0;" if top_border else "padding:3px 0;"
    return (
        f'<tr><td style="color:{BRAND["muted"]};{pad}{border}font-size:13.5px;">{label}</td>'
        f'<td style="text-align:right;color:{value_color};{weight}{pad}{border}font-size:13.5px;">{value}</td></tr>'
    )


def section_label(text: str) -> str:
    return (
        f'<div style="font-weight:700;font-size:13px;color:{BRAND["rust"]};'
        f'text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">{text}</div>'
    )
