import { BrevoClient } from "@getbrevo/brevo";
import { prisma } from "@/lib/db";
import crypto from "crypto";
import { getSiteHostname, getSiteUrl } from "@/lib/site-url";

const brevo = new BrevoClient({ apiKey: process.env.BREVO_API_KEY! });

const DEFAULT_SENDER = {
  name: process.env.EMAIL_FROM_NAME || "Echo OCR",
  email: process.env.EMAIL_FROM_ADDRESS || "mars@noreply.stillwell.cloud",
};

const SITE_URL = getSiteUrl();
const SITE_HOSTNAME = getSiteHostname(SITE_URL);

/* ------------------------------------------------------------------ */
/*  Shared template shell                                              */
/* ------------------------------------------------------------------ */

const BRAND = {
  dark: "#2d2b28",
  accent: "#3d3a36",
  muted: "#8a8580",
  bg: "#f7f5f2",
  cardBg: "#ffffff",
  border: "#e8e4df",
  cta: "#2d2b28",
  ctaText: "#fafaf8",
  link: "#5c5650",
  font: "'Quicksand', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
};

function emailShell({
  preheader,
  heading,
  body,
  ctaLabel,
  ctaUrl,
  footer,
}: {
  preheader: string;
  heading: string;
  body: string;
  ctaLabel: string;
  ctaUrl: string;
  footer: string;
}) {
  return `<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="color-scheme" content="light" />
  <meta name="supported-color-schemes" content="light" />
  <title>${heading}</title>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <!--[if mso]>
  <style>
    * { font-family: 'Segoe UI', Roboto, Arial, sans-serif !important; }
  </style>
  <![endif]-->
</head>
<body style="margin:0;padding:0;background-color:${BRAND.bg};font-family:${BRAND.font};-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;">
  <!-- Preheader (hidden preview text) -->
  <div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">${preheader}&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</div>

  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background-color:${BRAND.bg};">
    <tr>
      <td align="center" style="padding:40px 16px 32px;">

        <!-- Logo -->
        <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:520px;">
          <tr>
            <td align="center" style="padding-bottom:32px;">
              <a href="${SITE_URL}" style="text-decoration:none;" target="_blank">
                <table role="presentation" cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="background-color:${BRAND.dark};border-radius:8px;width:30px;height:30px;text-align:center;line-height:30px;font-size:16px;" valign="middle">
                      <span style="color:${BRAND.ctaText};">&#10711;</span>
                    </td>
                    <td style="padding-left:10px;font-family:${BRAND.font};font-size:20px;font-weight:700;color:${BRAND.dark};letter-spacing:-0.3px;" valign="middle">
                      Echo
                    </td>
                  </tr>
                </table>
              </a>
            </td>
          </tr>
        </table>

        <!-- Card -->
        <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:520px;background-color:${BRAND.cardBg};border-radius:16px;border:1px solid ${BRAND.border};box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.03);">
          <tr>
            <td style="padding:48px 40px 44px;">

              <!-- Heading -->
              <h1 style="margin:0 0 16px;font-family:${BRAND.font};font-size:24px;font-weight:700;color:${BRAND.dark};line-height:1.3;letter-spacing:-0.3px;">
                ${heading}
              </h1>

              <!-- Body -->
              <div style="margin:0 0 32px;font-family:${BRAND.font};font-size:15px;color:${BRAND.accent};line-height:1.65;">
                ${body}
              </div>

              <!-- CTA Button -->
              <table role="presentation" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td>
                    <a href="${ctaUrl}" target="_blank"
                       style="display:inline-block;padding:14px 32px;background-color:${BRAND.cta};color:${BRAND.ctaText};font-family:${BRAND.font};font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;letter-spacing:-0.2px;mso-padding-alt:0;text-align:center;">
                      <!--[if mso]><i style="mso-font-width:150%;mso-text-raise:22pt;" hidden>&nbsp;</i><![endif]-->
                      <span style="mso-text-raise:11pt;">${ctaLabel}</span>
                      <!--[if mso]><i style="mso-font-width:150%;" hidden>&nbsp;</i><![endif]-->
                    </a>
                  </td>
                </tr>
              </table>

              <!-- Footer note -->
              <p style="margin:28px 0 0;font-family:${BRAND.font};font-size:13px;color:${BRAND.muted};line-height:1.55;">
                ${footer}
              </p>

            </td>
          </tr>
        </table>

        <!-- Bottom branding -->
        <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:520px;">
          <tr>
            <td align="center" style="padding:28px 0 8px;">
              <p style="margin:0;font-family:${BRAND.font};font-size:12px;color:${BRAND.muted};line-height:1.5;">
                AI-powered response card scanning for churches
              </p>
              <p style="margin:6px 0 0;font-family:${BRAND.font};font-size:12px;line-height:1.5;">
                <a href="${SITE_URL}" style="color:${BRAND.link};text-decoration:underline;" target="_blank">${SITE_HOSTNAME}</a>
              </p>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
</body>
</html>`;
}

/* ------------------------------------------------------------------ */
/*  Core send function                                                 */
/* ------------------------------------------------------------------ */

export async function sendEmail(to: string, subject: string, html: string) {
  await brevo.transactionalEmails.sendTransacEmail({
    sender: DEFAULT_SENDER,
    to: [{ email: to }],
    subject,
    htmlContent: html,
  });
}

/* ------------------------------------------------------------------ */
/*  Verification email                                                 */
/* ------------------------------------------------------------------ */

export async function generateVerificationToken(email: string): Promise<string> {
  const token = crypto.randomBytes(32).toString("hex");
  const expires = new Date(Date.now() + 24 * 60 * 60 * 1000);

  await prisma.verificationToken.deleteMany({
    where: { identifier: email },
  });

  await prisma.verificationToken.create({
    data: {
      identifier: email,
      token,
      expires,
    },
  });

  return token;
}

export async function sendVerificationEmail(email: string, baseUrl: string) {
  const token = await generateVerificationToken(email);
  const verifyUrl = `${baseUrl}/api/auth/verify-email/confirm?token=${token}`;

  const html = emailShell({
    preheader: "Confirm your email to start scanning cards with Echo.",
    heading: "Verify your email address",
    body: `
      <p style="margin:0 0 16px;">Welcome to Echo! Before you can start scanning response cards, we need to verify your email address.</p>
      <p style="margin:0;">Click the button below to confirm your email and get started.</p>
    `,
    ctaLabel: "Verify Email Address",
    ctaUrl: verifyUrl,
    footer:
      "If you didn't create an Echo account, you can safely ignore this email. This link expires in 24 hours.",
  });

  await sendEmail(email, "Verify your email — Echo", html);
}

/* ------------------------------------------------------------------ */
/*  Support ticket email (ingested by Libredesk)                       */
/* ------------------------------------------------------------------ */

export type SupportTicketCategory =
  | "bug"
  | "question"
  | "feature"
  | "billing"
  | "other";

const CATEGORY_LABELS: Record<SupportTicketCategory, string> = {
  bug: "Bug report",
  question: "Question",
  feature: "Feature request",
  billing: "Billing",
  other: "Other",
};

export interface SupportTicketPayload {
  subject: string;
  message: string;
  category: SupportTicketCategory;
  userEmail: string;
  userName?: string | null;
  userId?: string | null;
  orgName?: string | null;
  orgId?: string | null;
  pageUrl?: string | null;
  userAgent?: string | null;
  appEnv?: string | null;
}

export async function sendSupportTicketEmail(payload: SupportTicketPayload) {
  const supportInbox = process.env.SUPPORT_EMAIL || "support@stillwell.cloud";
  const categoryLabel = CATEGORY_LABELS[payload.category] || payload.category;
  const submittedAt = new Date().toISOString();

  const lines = [
    "New support request submitted from the Echo app.",
    "",
    "---- Request ----",
    `Subject:      ${payload.subject}`,
    `Category:     ${categoryLabel} (${payload.category})`,
    `Submitted At: ${submittedAt}`,
    "",
    "---- User ----",
    `Name:         ${payload.userName || "(not set)"}`,
    `Email:        ${payload.userEmail}`,
    `User ID:      ${payload.userId || "(anonymous)"}`,
    "",
    "---- Organization ----",
    `Organization: ${payload.orgName || "(none)"}`,
    `Org ID:       ${payload.orgId || "(none)"}`,
    "",
    "---- Context ----",
    `App URL:      ${payload.pageUrl || SITE_URL}`,
    `Site:         ${SITE_HOSTNAME}`,
    `App Env:      ${payload.appEnv || process.env.NEXT_PUBLIC_ENV || "production"}`,
    `User Agent:   ${payload.userAgent || "(unknown)"}`,
    "",
    "---- Message ----",
    payload.message,
    "",
    "---- End ----",
    "This ticket was generated by the Echo in-app Contact Support form.",
    "Reply directly to this email to respond to the user.",
  ];

  const textContent = lines.join("\n");
  const subject = `[Echo Support] [${categoryLabel}] ${payload.subject}`;

  await brevo.transactionalEmails.sendTransacEmail({
    sender: DEFAULT_SENDER,
    to: [{ email: supportInbox }],
    replyTo: {
      email: payload.userEmail,
      name: payload.userName || undefined,
    },
    subject,
    textContent,
    tags: ["echo-support", `category:${payload.category}`],
  });
}

/* ------------------------------------------------------------------ */
/*  Invitation email                                                   */
/* ------------------------------------------------------------------ */

export async function sendInvitationEmail(
  email: string,
  baseUrl: string,
  inviteToken: string,
  orgName: string,
  inviterName?: string
) {
  const inviteUrl = `${baseUrl}/invite/${inviteToken}`;

  const inviterLine = inviterName
    ? `<strong>${inviterName}</strong> has invited you to join`
    : "You've been invited to join";

  const html = emailShell({
    preheader: `${inviterName || "Your team"} invited you to join ${orgName} on Echo.`,
    heading: `You're invited to ${orgName}`,
    body: `
      <p style="margin:0 0 16px;">${inviterLine} <strong>${orgName}</strong> on Echo — AI-powered response card scanning for churches and ministries.</p>
      <p style="margin:0;">Accept the invitation below to join the team and start collaborating.</p>
    `,
    ctaLabel: "Accept Invitation",
    ctaUrl: inviteUrl,
    footer: `This invitation expires in 7 days. If you weren't expecting this email, you can safely ignore it.`,
  });

  await sendEmail(
    email,
    `You're invited to ${orgName} — Echo`,
    html
  );
}
