/**
 * Server-side HTML email template renderers for receipts and repair estimates.
 * Uses inline CSS for email-client compatibility.
 */

interface Address {
  street?: string
  city?: string
  state?: string
  zip?: string
}

interface CompanyInfo {
  name: string
  phone?: string | null
  email?: string | null
  address?: Address | null
}

interface ReceiptLineItem {
  description: string
  qty: number
  unitPrice: string
  taxAmount: string
  lineTotal: string
  discountAmount?: string | null
}

interface ReceiptTransaction {
  transactionNumber: string
  subtotal: string
  discountTotal: string
  taxTotal: string
  total: string
  paymentMethod: string | null
  amountTendered: string | null
  changeGiven: string | null
  roundingAdjustment: string | null
  completedAt: string | null
  lineItems: ReceiptLineItem[]
}

interface ReceiptConfig {
  receipt_header?: string
  receipt_footer?: string
  receipt_return_policy?: string
  receipt_social?: string
}

interface ReceiptData {
  transaction: ReceiptTransaction
  company: CompanyInfo | null
  location: CompanyInfo | null
}

interface RepairLineItem {
  itemType: string
  description: string
  qty: number
  unitPrice: string
  totalPrice: string
}

interface RepairTicket {
  ticketNumber: string
  customerName: string
  customerPhone?: string | null
  itemDescription?: string | null
  serialNumber?: string | null
  problemDescription?: string | null
  estimatedCost?: string | null
  promisedDate?: string | null
  status: string
}

// ── Shared layout ──────────────────────────────────────────────────────────

function wrapEmailLayout(storeName: string, bodyHtml: string): string {
  return `
    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px; color: #333;">
      <h2 style="color: #1a1a2e; margin: 0 0 24px 0; font-size: 20px;">${esc(storeName)}</h2>
      ${bodyHtml}
      <hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
      <p style="color: #aaa; font-size: 11px; margin: 0;">Powered by LunarFront</p>
    </div>
  `
}

function esc(s: string): string {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
}

function formatAddress(addr?: Address | null): string {
  if (!addr) return ''
  const parts = [addr.street, [addr.city, addr.state].filter(Boolean).join(', '), addr.zip].filter(Boolean)
  return parts.join('<br />')
}

function formatDate(dateStr: string | null): string {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })
}

function formatDateOnly(dateStr: string | null): string {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
}

const PAYMENT_LABELS: Record<string, string> = {
  cash: 'Cash',
  card_present: 'Card',
  card_keyed: 'Card (Keyed)',
  check: 'Check',
  store_credit: 'Store Credit',
  other: 'Other',
}

const TYPE_LABELS: Record<string, string> = {
  labor: 'Labor',
  part: 'Part',
  flat_rate: 'Flat Rate',
  misc: 'Misc',
  consumable: 'Consumable',
}

// ── Receipt email ──────────────────────────────────────────────────────────

export function renderReceiptEmailHtml(data: ReceiptData, config?: ReceiptConfig): string {
  const txn = data.transaction
  const storeName = data.company?.name ?? 'Store'

  let companyBlock = ''
  if (data.company) {
    const addr = formatAddress(data.company.address)
    companyBlock = `
      <div style="font-size: 13px; color: #666; margin-bottom: 16px;">
        ${addr ? `<div>${addr}</div>` : ''}
        ${data.company.phone ? `<div>${esc(data.company.phone)}</div>` : ''}
      </div>
    `
  }

  const headerText = config?.receipt_header ? `<p style="font-size: 13px; color: #555; margin: 0 0 16px 0;">${esc(config.receipt_header)}</p>` : ''

  const lineRows = txn.lineItems.map(item => `
    <tr>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${esc(item.description)}</td>
      <td style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: center;">${item.qty}</td>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.unitPrice}</td>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.lineTotal}</td>
    </tr>
  `).join('')

  const discountRow = parseFloat(txn.discountTotal) > 0
    ? `<tr><td style="padding: 4px 0; font-size: 13px;">Discount</td><td style="padding: 4px 0; font-size: 13px; text-align: right; color: #e57373;">-$${txn.discountTotal}</td></tr>`
    : ''

  const roundingRow = txn.roundingAdjustment && parseFloat(txn.roundingAdjustment) !== 0
    ? `<tr><td style="padding: 4px 0; font-size: 13px;">Rounding</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.roundingAdjustment}</td></tr>`
    : ''

  const paymentBlock = txn.paymentMethod ? `
    <div style="margin-top: 16px; font-size: 13px; color: #666;">
      <div>Paid by: ${PAYMENT_LABELS[txn.paymentMethod] ?? txn.paymentMethod}</div>
      ${txn.amountTendered && txn.paymentMethod === 'cash' ? `<div>Tendered: $${txn.amountTendered}</div>` : ''}
      ${txn.changeGiven && parseFloat(txn.changeGiven) > 0 ? `<div>Change: $${txn.changeGiven}</div>` : ''}
    </div>
  ` : ''

  const footerText = config?.receipt_footer ? `<p style="font-size: 12px; color: #888; margin: 16px 0 0 0; text-align: center;">${esc(config.receipt_footer)}</p>` : ''
  const policyText = config?.receipt_return_policy ? `<p style="font-size: 11px; color: #999; margin: 8px 0 0 0; text-align: center;">${esc(config.receipt_return_policy)}</p>` : ''
  const socialText = config?.receipt_social ? `<p style="font-size: 11px; color: #999; margin: 4px 0 0 0; text-align: center;">${esc(config.receipt_social)}</p>` : ''

  const body = `
    ${companyBlock}
    ${headerText}
    <div style="background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
      <div style="font-size: 13px; color: #666;">
        <strong style="color: #333;">Receipt #${esc(txn.transactionNumber)}</strong><br />
        ${formatDate(txn.completedAt)}
      </div>
    </div>
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
      <thead>
        <tr style="border-bottom: 2px solid #eee;">
          <th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Item</th>
          <th style="padding: 6px 8px; font-size: 12px; text-align: center; color: #888; font-weight: 600;">Qty</th>
          <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Price</th>
          <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Total</th>
        </tr>
      </thead>
      <tbody>
        ${lineRows}
      </tbody>
    </table>
    <table style="width: 50%; margin-left: auto; border-collapse: collapse;">
      <tr><td style="padding: 4px 0; font-size: 13px;">Subtotal</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.subtotal}</td></tr>
      ${discountRow}
      <tr><td style="padding: 4px 0; font-size: 13px;">Tax</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.taxTotal}</td></tr>
      ${roundingRow}
      <tr style="border-top: 2px solid #333;"><td style="padding: 8px 0; font-size: 15px; font-weight: 700;">Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${txn.total}</td></tr>
    </table>
    ${paymentBlock}
    ${footerText}
    ${policyText}
    ${socialText}
  `

  return wrapEmailLayout(storeName, body)
}

export function renderReceiptEmailText(data: ReceiptData, config?: ReceiptConfig): string {
  const txn = data.transaction
  const storeName = data.company?.name ?? 'Store'
  const lines = [
    storeName,
    `Receipt #${txn.transactionNumber}`,
    formatDate(txn.completedAt),
    '',
    ...txn.lineItems.map(i => `${i.description} x${i.qty} — $${i.lineTotal}`),
    '',
    `Subtotal: $${txn.subtotal}`,
    ...(parseFloat(txn.discountTotal) > 0 ? [`Discount: -$${txn.discountTotal}`] : []),
    `Tax: $${txn.taxTotal}`,
    `Total: $${txn.total}`,
    '',
    ...(txn.paymentMethod ? [`Paid by: ${PAYMENT_LABELS[txn.paymentMethod] ?? txn.paymentMethod}`] : []),
    ...(config?.receipt_footer ? ['', config.receipt_footer] : []),
  ]
  return lines.join('\n')
}

// ── Repair estimate email ──────────────────────────────────────────────────

export function renderEstimateEmailHtml(ticket: RepairTicket, lineItems: RepairLineItem[], company: CompanyInfo): string {
  const storeName = company.name

  const lineRows = lineItems.map(item => `
    <tr>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${TYPE_LABELS[item.itemType] ?? item.itemType}</td>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${esc(item.description)}</td>
      <td style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: center;">${item.qty}</td>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.unitPrice}</td>
      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.totalPrice}</td>
    </tr>
  `).join('')

  const estimatedTotal = ticket.estimatedCost
    ? `<tr style="border-top: 2px solid #333;"><td colspan="4" style="padding: 8px 0; font-size: 15px; font-weight: 700;">Estimated Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${ticket.estimatedCost}</td></tr>`
    : ''

  const lineItemTotal = lineItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0).toFixed(2)
  const lineItemTotalRow = !ticket.estimatedCost && lineItems.length > 0
    ? `<tr style="border-top: 2px solid #333;"><td colspan="4" style="padding: 8px 0; font-size: 15px; font-weight: 700;">Estimated Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${lineItemTotal}</td></tr>`
    : ''

  const body = `
    <div style="background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
      <div style="font-size: 13px; color: #666;">
        <strong style="color: #333;">Repair Estimate — Ticket #${esc(ticket.ticketNumber)}</strong><br />
        ${esc(ticket.customerName)}
      </div>
    </div>

    <div style="margin-bottom: 16px; font-size: 13px; color: #555;">
      ${ticket.itemDescription ? `<div><strong>Item:</strong> ${esc(ticket.itemDescription)}${ticket.serialNumber ? ` (S/N: ${esc(ticket.serialNumber)})` : ''}</div>` : ''}
      ${ticket.problemDescription ? `<div style="margin-top: 4px;"><strong>Issue:</strong> ${esc(ticket.problemDescription)}</div>` : ''}
      ${ticket.promisedDate ? `<div style="margin-top: 4px;"><strong>Estimated completion:</strong> ${formatDateOnly(ticket.promisedDate)}</div>` : ''}
    </div>

    ${lineItems.length > 0 ? `
      <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
        <thead>
          <tr style="border-bottom: 2px solid #eee;">
            <th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Type</th>
            <th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Description</th>
            <th style="padding: 6px 8px; font-size: 12px; text-align: center; color: #888; font-weight: 600;">Qty</th>
            <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Price</th>
            <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Total</th>
          </tr>
        </thead>
        <tbody>
          ${lineRows}
          ${estimatedTotal}
          ${lineItemTotalRow}
        </tbody>
      </table>
    ` : `
      ${ticket.estimatedCost ? `<div style="font-size: 15px; font-weight: 700; margin-bottom: 16px;">Estimated Cost: $${ticket.estimatedCost}</div>` : ''}
    `}

    <p style="font-size: 12px; color: #888;">This is an estimate and the final cost may vary. Please contact us with any questions.</p>
    ${company.phone ? `<p style="font-size: 12px; color: #888; margin-top: 4px;">Phone: ${esc(company.phone)}</p>` : ''}
  `

  return wrapEmailLayout(storeName, body)
}

export function renderEstimateEmailText(ticket: RepairTicket, lineItems: RepairLineItem[], company: CompanyInfo): string {
  const lines = [
    company.name,
    `Repair Estimate — Ticket #${ticket.ticketNumber}`,
    `Customer: ${ticket.customerName}`,
    '',
    ...(ticket.itemDescription ? [`Item: ${ticket.itemDescription}${ticket.serialNumber ? ` (S/N: ${ticket.serialNumber})` : ''}`] : []),
    ...(ticket.problemDescription ? [`Issue: ${ticket.problemDescription}`] : []),
    ...(ticket.promisedDate ? [`Estimated completion: ${formatDateOnly(ticket.promisedDate)}`] : []),
    '',
    ...lineItems.map(i => `${TYPE_LABELS[i.itemType] ?? i.itemType}: ${i.description} x${i.qty} — $${i.totalPrice}`),
    '',
    ...(ticket.estimatedCost ? [`Estimated Total: $${ticket.estimatedCost}`] : []),
    '',
    'This is an estimate and the final cost may vary.',
    ...(company.phone ? [`Phone: ${company.phone}`] : []),
  ]
  return lines.join('\n')
}