"""Branded HTML email template for chatbot-sent mail.

Table-based layout with inline styles throughout, because mail clients strip
<style> blocks and ignore most modern CSS. Placeholders are filled by
app/services/email_service.py.

Placeholders: subject, brandName, firstName, generatedAnswer, headerText,
footerText, disclaimerBlock, logoCell, brandCellPad, ctaBlock, unsubscribeBlock.
"""

EMAIL_TEMPLATE = """<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{subject}</title>
  </head>
  <body style="margin: 0; padding: 0; background-color: #F5F5F7; font-family: Arial, Helvetica, sans-serif; color: #1F1F1F;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #F5F5F7; padding: 32px 16px;">
      <tr>
        <td align="center">
          <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 640px; background-color: #FFFFFF; border-radius: 16px; overflow: hidden; border: 1px solid #E8E8EC;">

            <!-- Header -->
            <tr>
              <td style="padding: 24px 32px; border-bottom: 1px solid #EEEEEE;">
                <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr>
{logoCell}                    <td align="left" valign="middle"{brandCellPad}>
                      <p style="margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: #1F1F1F;">{brandName}</p>
                      <p style="margin: 4px 0 0; font-size: 13px; line-height: 20px; color: #707070;">Your AI assistant</p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Hero -->
            <tr>
              <td align="center" style="padding: 40px 32px 24px; background-color: #FAF7FF;">
                <h1 style="margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; color: #181818;">
                  {headerText}
                </h1>
                <p style="margin: 12px 0 0; font-size: 16px; line-height: 24px; color: #656565;">
                  Here is the information you requested.
                </p>
              </td>
            </tr>

            <!-- Main content -->
            <tr>
              <td style="padding: 32px;">
                <p style="margin: 0 0 20px; font-size: 16px; line-height: 26px; color: #333333;">Hi {firstName},</p>
                <p style="margin: 0 0 20px; font-size: 16px; line-height: 26px; color: #333333;">
                  Thank you for chatting with {brandName}. Based on our conversation, here is the information you requested:
                </p>

                <!-- AI-generated answer -->
                <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
                       style="margin: 24px 0; background-color: #FFF9E8; border: 1px solid #FFE5A3; border-radius: 12px;">
                  <tr>
                    <td style="padding: 24px; font-size: 16px; line-height: 26px; color: #333333;">
                      {generatedAnswer}
                    </td>
                  </tr>
                </table>

                <p style="margin: 0 0 24px; font-size: 16px; line-height: 26px; color: #333333;">
                  If you have any additional questions, reply to this email or continue your conversation with our AI assistant.
                </p>
{ctaBlock}
                <p style="margin: 0; font-size: 16px; line-height: 26px; color: #333333;">
                  Best regards,<br />
                  <strong>{brandName} Team</strong>
                </p>
              </td>
            </tr>

            <!-- Footer -->
            <tr>
              <td align="center" style="padding: 24px 32px; background-color: #F8F8FA; border-top: 1px solid #ECECEC;">
{disclaimerBlock}                <p style="margin: 0 0 8px; font-size: 12px; line-height: 18px; color: #7A7A7A;">
                  {footerText}
                </p>
{unsubscribeBlock}
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </body>
</html>"""

CTA_BLOCK = """
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 8px auto 24px;">
                  <tr>
                    <td align="center" style="background-color: #FFC43D; border-radius: 8px;">
                      <a href="{chatbotUrl}" target="_blank" rel="noopener noreferrer"
                         style="display: inline-block; padding: 14px 26px; font-size: 15px; line-height: 20px; font-weight: 700; color: #1F1F1F; text-decoration: none;">
                        Continue Conversation
                      </a>
                    </td>
                  </tr>
                </table>
"""

UNSUBSCRIBE_BLOCK = """                <p style="margin: 0; font-size: 12px; line-height: 18px; color: #7A7A7A;">
                  <a href="{unsubscribeUrl}" target="_blank" rel="noopener noreferrer"
                     style="color: #6B4EFF; text-decoration: underline;">Unsubscribe</a>
                </p>
"""

LOGO_CELL = """                    <td align="left" valign="middle" width="44">
                      <img src="{logoUrl}" alt="{brandName}" width="44" height="44"
                           style="display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;" />
                    </td>
"""

DISCLAIMER_BLOCK = """                <p style="margin: 0 0 12px; font-size: 12px; line-height: 19px; color: #7A7A7A;">
                  {disclaimerText}
                </p>
"""


# Shell used when the body is a generated image: everything that must stay
# clickable or selectable (links, footer, disclaimer) remains real HTML around it.
IMAGE_SHELL = """<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{subject}</title>
  </head>
  <body style="margin:0;padding:0;background-color:#F4F4F7;font-family:Arial,Helvetica,sans-serif;color:#1F1F1F;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color:#F4F4F7;padding:28px 14px;">
      <tr><td align="center">
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:640px;background-color:#FFFFFF;border-radius:16px;overflow:hidden;border:1px solid #E7E7ED;">

          <!-- Header -->
          <tr>
            <td style="padding:22px 28px;background-color:{headerTint};border-bottom:1px solid #ECECF2;">
              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
{logoCell}                  <td align="left" valign="middle"{brandCellPad}>
                    <p style="margin:0;font-size:19px;line-height:26px;font-weight:700;color:#1F1F1F;">{brandName}</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Greeting -->
          <tr>
            <td style="padding:28px 28px 4px;">
              <p style="margin:0 0 10px;font-size:21px;line-height:28px;font-weight:700;color:{primaryColor};">Hi {firstName},</p>
              <p style="margin:0;font-size:15px;line-height:24px;color:#4A4A4A;">{headerText}</p>
            </td>
          </tr>

          <!-- Generated body panel -->
          <tr>
            <td style="padding:18px 20px 8px;" align="center">
              <img src="{bodyImageUrl}" alt="{imageAlt}" width="600"
                   style="display:block;width:100%;max-width:600px;height:auto;border:0;border-radius:12px;" />
            </td>
          </tr>
{linksBlock}
          <!-- Footer -->
          <tr>
            <td align="center" style="padding:22px 28px;background-color:#F8F8FB;border-top:1px solid #ECECF2;">
              <p style="margin:0 0 10px;font-size:12px;line-height:19px;color:#7A7A7A;">{disclaimerText}</p>
              <p style="margin:0;font-size:12px;line-height:18px;color:#7A7A7A;">{footerText}</p>
            </td>
          </tr>

        </table>
      </td></tr>
    </table>
  </body>
</html>"""

LINKS_BLOCK = """          <tr>
            <td style="padding:6px 28px 22px;">
              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
                     style="background-color:#FBFBFD;border:1px solid #ECECF2;border-radius:12px;">
                <tr><td style="padding:16px 18px;">
                  <p style="margin:0 0 8px;font-size:13px;line-height:20px;font-weight:700;color:#3A3A3A;">Useful links</p>
                  <p style="margin:0;font-size:14px;line-height:24px;">{linkItems}</p>
                </td></tr>
              </table>
            </td>
          </tr>
"""
