import { joinNamesAnd, normalizeStudentNames, PORTAL_HREF } from '../textUtils'

const btnStyle: React.CSSProperties = {
  display: 'inline-block',
  padding: '10px 16px',
  textDecoration: 'none',
  borderRadius: 6,
  background: '#198754',
  color: '#ffffff',
  fontWeight: 600,
  fontSize: 16,
}

function AccessAccount() {
  return (
    <p style={{ margin: '16px 0' }}>
      <a href={PORTAL_HREF} target="_blank" rel="noopener noreferrer" style={btnStyle}>
        Access My Account
      </a>
    </p>
  )
}

export function StatusAdmissionReviewBody({
  parentName = 'Parent',
  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
}: {
  parentName?: string
  studentName?: string | string[]
}) {
  const multi = Array.isArray(studentName) && studentName.length > 1
  return (
    <>
      <h2 style={{ fontSize: 22, fontWeight: 'bold' }}>Admission Under Review</h2>
      <p style={{ fontSize: 16 }}>Dear {parentName},</p>
      {multi ? (
        <>
          <p style={{ fontSize: 16 }}>
            Thank you for submitting the enrollment application for the following {studentName.length} students:
          </p>
          <ul style={{ fontSize: 16 }}>
            {(studentName as string[]).map((s, i) => (
              <li key={i}>{s}</li>
            ))}
          </ul>
        </>
      ) : (
        <p style={{ fontSize: 16 }}>
          Thank you for submitting the enrollment application for{' '}
          {Array.isArray(studentName) ? studentName[0] : studentName}.
        </p>
      )}
      <p style={{ fontSize: 16 }}>
        Your application{multi ? 's are' : ' is'} currently under review by our admissions committee. This
        process typically takes 1–2 business days.
      </p>
      <p style={{ fontSize: 16 }}>You will be notified immediately once a decision has been made.</p>
      <p style={{ fontSize: 16 }}>You can check your application status at any time through the parent portal.</p>
      <AccessAccount />
      <p style={{ fontSize: 16 }}>
        Best regards,
        <br />
        Admissions Team
      </p>
    </>
  )
}

export function StatusDeniedBody({
  parentName = 'Parent',
  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
  students,
}: {
  parentName?: string
  studentName?: string | string[]
  students?: { name?: string; reason?: string }[]
}) {
  const names = normalizeStudentNames(
    Array.isArray(studentName) ? studentName : studentName ? [studentName] : [],
  )
  const isMulti = names.length > 1
  const studentLabel =
    names.length === 0
      ? 'your student'
      : names.length === 1
        ? names[0]!
        : names.length === 2
          ? `${names[0]} and ${names[1]}`
          : `${names.slice(0, -1).join(', ')}, and ${names[names.length - 1]}`

  const hasReasons = students?.some((s) => s.reason)

  return (
    <div style={{ fontSize: 16, lineHeight: 1.5 }}>
      <h2>Admission Decision</h2>
      <p>Dear {parentName},</p>
      {isMulti ? (
        <>
          <p>
            Thank you for your interest in our school and for applying for admission for the following {names.length}{' '}
            students:
          </p>
          <ul style={{ paddingLeft: 20 }}>
            {names.map((n, i) => (
              <li key={i}>{n}</li>
            ))}
          </ul>
          <p>After careful consideration, we regret to inform you that we are unable to grant admission at this time.</p>
        </>
      ) : (
        <>
          <p>Thank you for your interest in our school and for applying for {studentLabel}&apos;s admission.</p>
          <p>After careful consideration, we regret to inform you that we are unable to grant admission at this time.</p>
        </>
      )}
      {hasReasons && students ? (
        <>
          <p>Where available, we&apos;ve included brief context for your reference:</p>
          <ul style={{ paddingLeft: 20 }}>
            {students.map((s, i) => (
              <li key={i}>
                <strong>{s.name ?? ''}:</strong> {s.reason ?? 'No additional details provided.'}
              </li>
            ))}
          </ul>
        </>
      ) : null}
      <p>This decision was made after a thorough review of all applications received, and we acknowledge that it may be disappointing.</p>
      <p>We encourage you to consider applying again in the future as circumstances may change.</p>
      <p>
        If you would like feedback on your application, please contact us at{' '}
        <a href="mailto:alrahma.isgl@gmail.com">alrahma.isgl@gmail.com</a>.
      </p>
      <p>
        Best regards,
        <br />
        Admissions&nbsp;Committee
      </p>
    </div>
  )
}

type EnrolledStudent = {
  name?: string
  studentId?: string
  gradeLevel?: string
  teacherName?: string
  startDate?: string
}

export function StatusEnrolledBody({
  parentName = 'Parent',
  schoolYear = '2025-2026',
  portalLink = PORTAL_HREF,
  students,
  studentName,
  studentId,
  gradeLevel,
  teacherName,
  startDate,
}: {
  parentName?: string
  schoolYear?: string
  portalLink?: string
  students?: EnrolledStudent[]
  studentName?: string | string[]
  studentId?: string
  gradeLevel?: string
  teacherName?: string
  startDate?: string
}) {
  let studentsArr: EnrolledStudent[] = students ?? []
  if (studentsArr.length === 0 && studentName) {
    const n = Array.isArray(studentName) ? studentName[0] : studentName
    if (n)
      studentsArr = [
        { name: n, studentId, gradeLevel, teacherName, startDate },
      ]
  }
  studentsArr = studentsArr.filter((s) => (s.name ?? '').trim() !== '')
  const isMulti = studentsArr.length > 1
  const fmt = (d?: string) => {
    if (!d) return null
    const t = Date.parse(d)
    return Number.isNaN(t) ? d : new Date(t).toLocaleDateString()
  }

  return (
    <div style={{ fontSize: 18, lineHeight: 1.6 }}>
      <h2>Enrollment Confirmed</h2>
      <p>Dear {parentName},</p>
      {isMulti ? (
        <>
          <p>
            We are pleased to inform you that the following {studentsArr.length} students are now officially enrolled for
            the {schoolYear} school year:
          </p>
          <ul style={{ margin: '0 0 16px 20px' }}>
            {studentsArr.map((st, i) => {
              const bits = [
                st.gradeLevel ? `Grade: ${st.gradeLevel}` : null,
                st.teacherName ? `Teacher: ${st.teacherName}` : null,
                fmt(st.startDate) ? `Start: ${fmt(st.startDate)}` : null,
              ].filter(Boolean)
              return (
                <li key={i}>
                  <strong>{st.name}</strong>
                  {bits.length > 0 ? <span style={{ color: '#6c757d' }}> ({bits.join(' • ')})</span> : null}
                </li>
              )
            })}
          </ul>
        </>
      ) : (
        <p>
          We are pleased to inform you that <strong>{studentsArr[0]?.name ?? 'your student'}</strong> is now officially
          enrolled for the {schoolYear} school year.
        </p>
      )}
      <p style={{ margin: '16px 0' }}>
        <a href={portalLink} target="_blank" rel="noopener noreferrer" style={{ ...btnStyle, fontSize: 18, padding: '12px 18px' }}>
          Access My Account
        </a>
      </p>
      <p>Welcome to our school community!</p>
      <p>
        Best regards,
        <br />
        Admissions Team
      </p>
    </div>
  )
}

export function StatusNotEnrolledBody({
  parentName = 'Parent',
  studentName = 'Sara Ali',
  portalLink = PORTAL_HREF,
}: {
  parentName?: string
  studentName?: string
  portalLink?: string
}) {
  return (
    <>
      <h2>Enrollment Not Started</h2>
      <p>Dear {parentName},</p>
      <p>We noticed that you haven&apos;t started the enrollment process for {studentName} yet.</p>
      <p>To begin the enrollment process, please log in to your parent portal and complete the application form.</p>
      <p>
        <a href={portalLink} target="_blank" rel="noopener noreferrer" style={btnStyle}>
          Access Parent Portal
        </a>
      </p>
      <p>If you need any assistance, please contact our admissions office.</p>
      <p>
        Best regards,
        <br />
        Admissions Team
      </p>
    </>
  )
}

export function StatusPaymentPendingBody({
  parentName = 'Parent',
  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
}: {
  parentName?: string
  studentName?: string | string[]
}) {
  const displayNames = Array.isArray(studentName)
    ? studentName.map((n) => String(n).trim()).filter(Boolean)
    : normalizeStudentNames(studentName)

  const verb = displayNames.length > 1 ? 'have' : 'has'

  return (
    <div style={{ fontSize: 16, lineHeight: 1.5 }}>
      <p>Dear {parentName},</p>
      {displayNames.length > 1 ? (
        <>
          <p>Congratulations! We are pleased to inform you that the following students have been accepted for admission to our school:</p>
          <table role="presentation" cellPadding={0} cellSpacing={0} style={{ borderCollapse: 'collapse' }}>
            <tbody>
              {displayNames.map((n, i) => (
                <tr key={i}>
                  <td style={{ width: 24, fontSize: 0, lineHeight: 0 }}>&nbsp;</td>
                  <td style={{ fontSize: 16, lineHeight: 1.5, padding: '0 8px 2px 0', verticalAlign: 'top' }}>&bull;</td>
                  <td style={{ fontSize: 16, lineHeight: 1.5, padding: '0 0 2px 0', verticalAlign: 'top' }}>{n}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p>
            We are excited to welcome your family to our community and look forward to supporting your children&apos;s
            growth in both faith and learning.
          </p>
        </>
      ) : displayNames.length === 1 ? (
        <>
          <p>
            Congratulations! We are pleased to inform you that {displayNames[0]} {verb} been accepted for admission to
            our school.
          </p>
          <p>
            We are excited to welcome your family to our community and look forward to supporting your child&apos;s growth
            in both faith and learning.
          </p>
        </>
      ) : (
        <p>Congratulations! We are pleased to inform you that your student has been accepted for admission to our school.</p>
      )}
      <p>
        <strong>Next steps:</strong> Please log in to the parent portal and visit the <em>Invoice</em> tab to review your
        invoice details. The balance must be paid in person on the first day of school to complete the enrollment process.
      </p>
      <AccessAccount />
      <p>
        Best regards,
        <br />
        Admissions Committee
      </p>
    </div>
  )
}

export function StatusRefundPendingBody({
  parentName = 'Parent',
  studentName = ['Sara Ali'] as string | string[],
  refundAmount = '$150.00',
}: {
  parentName?: string
  studentName?: string | string[]
  refundAmount?: string
}) {
  const multi = Array.isArray(studentName) && studentName.length > 1
  return (
    <>
      <h2>Refund Processing</h2>
      <p>Dear {parentName},</p>
      {multi ? (
        <>
          <p>Your withdrawal requests for the following {studentName.length} students have been approved:</p>
          <ul style={{ paddingLeft: 20 }}>
            {(studentName as string[]).map((name, i) => (
              <li key={i}>{name}</li>
            ))}
          </ul>
        </>
      ) : (
        <p>
          Your withdrawal request for {Array.isArray(studentName) ? studentName[0] : studentName ?? 'your student'} has
          been approved.
        </p>
      )}
      <p>
        {refundAmount ? `A refund in the amount of ${refundAmount} is being processed.` : 'A refund is being processed.'}{' '}
        Please allow 7–10 business days for the refund to be issued to your original payment method.
      </p>
      <p>You will receive a confirmation email once the refund has been processed.</p>
      <p>If you have any questions, please contact our billing department.</p>
      <AccessAccount />
      <p>
        Best regards,
        <br />
        Billing Department
      </p>
    </>
  )
}

export function StatusWaitlistBody({
  parentName = 'Parent',
  studentName = ['Sara Ali', 'Omar Ali'] as string | string[],
}: {
  parentName?: string
  studentName?: string | string[]
}) {
  const names = Array.isArray(studentName)
    ? studentName
    : studentName
      ? [studentName]
      : []
  let isMulti = names.length > 1
  let studentLabel = joinNamesAnd(names) || 'your student'
  if (names.length === 1) {
    isMulti = false
    studentLabel = names[0]!
  }

  return (
    <div style={{ fontSize: 16, lineHeight: 1.5 }}>
      <p>Dear {parentName},</p>
      {isMulti ? (
        <>
          <p>
            Thank you for your interest in our school and for applying for admission for the following {names.length}{' '}
            students:
          </p>
          <ul style={{ paddingLeft: 20 }}>
            {names.map((n, i) => (
              <li key={i}>{n}</li>
            ))}
          </ul>
          <p>
            After careful review, we are unable to grant immediate admission at this time. However, we are pleased to
            place these students on our waitlist for the upcoming school year. Should seats become available, we will
            notify you right away.
          </p>
          <p>
            We understand this may not be the outcome you had hoped for, but please know that your applications remain
            active and under consideration. In the meantime, you may check the status of your applications at any time
            through the parent portal.
          </p>
        </>
      ) : (
        <>
          <p>Thank you for your interest in our school and for applying for {studentLabel}&apos;s admission.</p>
          <p>
            After careful review, we are unable to grant immediate admission at this time. However, we are pleased to
            place {studentLabel} on our waitlist for the upcoming school year. Should a seat become available, we will
            notify you right away.
          </p>
          <p>
            We understand this may not be the outcome you had hoped for, but please know that the application remains
            active and under consideration. In the meantime, you may check the status of the application at any time
            through the parent portal.
          </p>
        </>
      )}
      <AccessAccount />
      <p>
        Best regards,
        <br />
        Admissions Committee
      </p>
    </div>
  )
}

export function StatusWithdrawReviewBody({
  parentName = 'Parent',
  studentName = ['Sara Ali'] as string | string[],
}: {
  parentName?: string
  studentName?: string | string[]
}) {
  const multi = Array.isArray(studentName) && studentName.length > 1
  return (
    <>
      <h2>Withdrawal Request Under Review</h2>
      <p>Dear {parentName},</p>
      {multi ? (
        <>
          <p>We have received your request to withdraw the following {studentName.length} students from our school:</p>
          <ul style={{ paddingLeft: 20, fontSize: 14 }}>
            {(studentName as string[]).map((n, i) => (
              <li key={i}>{n}</li>
            ))}
          </ul>
        </>
      ) : (
        <p>
          We have received your request to withdraw {Array.isArray(studentName) ? studentName[0] : studentName ?? 'your student'} from our school.
        </p>
      )}
      <p>This request is currently under review by our administration. We will contact you within 3–5 business days regarding the next steps.</p>
      <p>If you have any questions or need to provide additional information, please contact our registrar&apos;s office.</p>
      <AccessAccount />
      <p>
        Best regards,
        <br />
        Registrar&apos;s Office
      </p>
    </>
  )
}

type WithdrawRow = { name?: string; withdrawalDate?: string }

export function StatusWithdrawnBody({
  parentName = 'Parent',
  studentName = 'Sara Ali',
  withdrawalDate = 'June 1, 2026',
  withdrawals,
}: {
  parentName?: string
  studentName?: string | string[]
  withdrawalDate?: string
  withdrawals?: WithdrawRow[]
}) {
  let farewell: string
  if (withdrawals && withdrawals.length > 0) {
    farewell =
      joinNamesAnd(
        withdrawals.map((w) => w.name).filter((n): n is string => Boolean(n && String(n).trim())),
      ) || 'your student'
  } else if (Array.isArray(studentName)) {
    const n = studentName.map((x) => String(x).trim()).filter(Boolean)
    farewell = joinNamesAnd(n) || 'your student'
  } else {
    farewell = studentName ?? 'your student'
  }

  return (
    <>
      <h2>Withdrawal Complete</h2>
      <p>Dear {parentName},</p>
      {withdrawals && withdrawals.length > 0 ? (
        <>
          <p>This email confirms the following students have been officially withdrawn from our school:</p>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Student</th>
                <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Effective Date</th>
              </tr>
            </thead>
            <tbody>
              {withdrawals.map((w, i) => (
                <tr key={i}>
                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{w.name ?? ''}</td>
                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{w.withdrawalDate ?? ''}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </>
      ) : Array.isArray(studentName) && studentName.length > 1 ? (
        <>
          <p>
            This email confirms the following {studentName.length} students have been officially withdrawn from our school
            {withdrawalDate ? ` effective ${withdrawalDate}` : ''}:
          </p>
          <ul style={{ paddingLeft: 20 }}>
            {studentName.map((n, i) => (
              <li key={i}>{n}</li>
            ))}
          </ul>
        </>
      ) : (
        <p>
          This email confirms that {Array.isArray(studentName) ? studentName[0] : studentName} has been officially withdrawn from our school
          {withdrawalDate ? ` effective ${withdrawalDate}` : ''}.
        </p>
      )}
      <p>The refund process has been completed. You should see the credit in your account within 3–5 business days.</p>
      <p>We&apos;re sorry to see you go and wish {farewell} all the best in their future educational endeavors.</p>
      <p>If you would like to re-enroll in the future, please don&apos;t hesitate to contact us.</p>
      <AccessAccount />
      <p>
        Best regards,
        <br />
        Registrar&apos;s Office
      </p>
    </>
  )
}

type PaymentStudent = { firstname?: string; lastname?: string }

export function PaymentReceiptBody({
  parentName = 'Parent',
  invoiceNumber = 'INV-1001',
  invoiceId = '1001',
  transactionId = 'TXN-ABC123',
  paymentDate = 'April 10, 2026',
  method = 'Check',
  checkNumber = '1024',
  installmentSeq = 2,
  amount = '$250.00',
  invoiceDiscount,
  invoiceTotal = '$1,200.00',
  preBalance = '$500.00',
  postBalance = '$250.00',
  students = [{ firstname: 'Sara', lastname: 'Ali' }] as PaymentStudent[],
  portalLink = PORTAL_HREF,
}: {
  parentName?: string
  invoiceNumber?: string | number
  invoiceId?: string | number
  transactionId?: string
  paymentDate?: string
  method?: string
  checkNumber?: string
  installmentSeq?: number | string
  amount?: string
  invoiceDiscount?: string
  invoiceTotal?: string
  preBalance?: string
  postBalance?: string
  students?: PaymentStudent[]
  portalLink?: string
}) {
  const invDisplay =
    invoiceNumber !== undefined && invoiceNumber !== '' ? String(invoiceNumber) : String(invoiceId ?? '')
  return (
    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
      <p>Dear {parentName},</p>
      <p>We have received your payment. Below are the details of your transaction:</p>
      <table
        border={0}
        cellPadding={8}
        cellSpacing={0}
        style={{ borderCollapse: 'collapse', width: '100%', fontSize: 16 }}
      >
        <tbody>
          <tr style={{ backgroundColor: '#f5f5f5' }}>
            <td>
              <strong>Invoice Number:</strong>
            </td>
            <td>#{invDisplay}</td>
          </tr>
          <tr>
            <td>
              <strong>Transaction ID:</strong>
            </td>
            <td>{transactionId}</td>
          </tr>
          <tr style={{ backgroundColor: '#f5f5f5' }}>
            <td>
              <strong>Payment Date:</strong>
            </td>
            <td>{paymentDate}</td>
          </tr>
          <tr>
            <td>
              <strong>Payment Method:</strong>
            </td>
            <td>
              {method}
              {checkNumber ? ` (Check #${checkNumber})` : ''}
            </td>
          </tr>
          <tr style={{ backgroundColor: '#f5f5f5' }}>
            <td>
              <strong>Installment #:</strong>
            </td>
            <td>{String(installmentSeq)}</td>
          </tr>
          <tr>
            <td>
              <strong>Amount Paid:</strong>
            </td>
            <td>
              <strong style={{ color: 'green' }}>{amount}</strong>
            </td>
          </tr>
          {invoiceDiscount ? (
            <tr style={{ backgroundColor: '#f5f5f5' }}>
              <td>
                <strong>Discount Applied (This Invoice):</strong>
              </td>
              <td>{invoiceDiscount}</td>
            </tr>
          ) : null}
          <tr style={{ backgroundColor: '#f5f5f5' }}>
            <td>
              <strong>Total Invoice Amount:</strong>
            </td>
            <td>{invoiceTotal}</td>
          </tr>
          <tr>
            <td>
              <strong>Previous Balance:</strong>
            </td>
            <td>{preBalance}</td>
          </tr>
          <tr style={{ backgroundColor: '#f5f5f5' }}>
            <td>
              <strong>New Balance:</strong>
            </td>
            <td>
              <strong>{postBalance}</strong>
            </td>
          </tr>
        </tbody>
      </table>
      {students.length > 0 ? (
        <>
          <p style={{ marginTop: 20 }}>
            <strong>Students linked to this invoice:</strong>
          </p>
          <ul>
            {students.map((s, i) => (
              <li key={i}>{`${s.firstname ?? ''} ${s.lastname ?? ''}`.trim()}</li>
            ))}
          </ul>
        </>
      ) : null}
      <p style={{ marginTop: 16 }}>You can view this invoice and your full payment history in your account:</p>
      <p>
        <a
          href={portalLink}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-block',
            padding: '10px 16px',
            textDecoration: 'none',
            borderRadius: 6,
            background: '#198754',
            color: '#ffffff',
            fontWeight: 600,
            fontSize: 16,
          }}
        >
          Access My Account
        </a>
      </p>
      <p>Thank you for your payment and continued support.</p>
      <p style={{ marginTop: 20 }}>
        Warm regards,
        <br />
        <strong>Al Rahma Sunday School</strong>
      </p>
    </div>
  )
}

export function ExtraChargeNoticeBody({
  title = 'Account Charge Update',
  parentName = 'Parent',
  schoolYear = '2025-2026',
  semester = 'Fall',
  typeLabel = 'Fee adjustment',
  chargeTitle = 'Materials fee',
  chargeDesc = 'Additional materials for semester projects.',
  amountSigned = '-$25.00',
  amountAbs = '$25.00',
  invoiceTotal = '$1,225.00',
  preBalance = '$500.00',
  postBalance = '$525.00',
  invoiceNumber = 'INV-1001',
  invoiceId = '1001',
  dueDate = 'May 1, 2026',
  createdAt = 'April 12, 2026',
  portalLink = PORTAL_HREF,
  students = [{ name: 'Sara Ali', class: 'Grade 5-A' }],
}: {
  title?: string
  parentName?: string
  schoolYear?: string
  semester?: string
  typeLabel?: string
  chargeTitle?: string
  chargeDesc?: string
  amountSigned?: string
  amountAbs?: string
  invoiceTotal?: string
  preBalance?: string
  postBalance?: string
  invoiceNumber?: string
  invoiceId?: string | number
  dueDate?: string
  createdAt?: string
  portalLink?: string
  students?: { name?: string; class?: string }[]
}) {
  return (
    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 14, color: '#212529', lineHeight: 1.5 }}>
      <h2 style={{ margin: '0 0 10px', fontSize: 18 }}>{title}</h2>
      <p style={{ margin: '0 0 12px' }}>Hello {parentName},</p>
      <p style={{ margin: '0 0 12px' }}>
        An update was made to your account for{' '}
        <strong>
          {schoolYear} {semester ? `(${semester})` : ''}
        </strong>
        .
      </p>
      <table cellPadding={0} cellSpacing={0} width="100%" style={{ borderCollapse: 'collapse', margin: '8px 0 16px' }}>
        <tbody>
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa', width: '35%' }}>Type</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{typeLabel}</td>
          </tr>
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Title</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{chargeTitle}</td>
          </tr>
          {chargeDesc ? (
            <tr>
              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Details</td>
              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', whiteSpace: 'pre-wrap' }}>
                {chargeDesc}
              </td>
            </tr>
          ) : null}
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Amount</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>
              <strong>{amountSigned}</strong> (absolute: {amountAbs})
            </td>
          </tr>
          {dueDate ? (
            <tr>
              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Due Date</td>
              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{dueDate}</td>
            </tr>
          ) : null}
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Invoice</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>
              {invoiceNumber || `INV-${invoiceId}`}
            </td>
          </tr>
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Invoice Total</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{invoiceTotal}</td>
          </tr>
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Previous Balance</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{preBalance}</td>
          </tr>
          <tr>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>New Balance</td>
            <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>
              <strong>{postBalance}</strong>
            </td>
          </tr>
          {createdAt ? (
            <tr>
              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef', background: '#f8f9fa' }}>Recorded At</td>
              <td style={{ padding: '8px 10px', border: '1px solid #e9ecef' }}>{createdAt}</td>
            </tr>
          ) : null}
        </tbody>
      </table>
      <p style={{ margin: '0 0 18px' }}>
        <a href={portalLink} target="_blank" rel="noopener noreferrer" style={btnStyle}>
          Access My Account
        </a>
      </p>
      {students.length > 0 ? (
        <>
          <p style={{ margin: '16px 0 8px' }}>
            <strong>Students on your account:</strong>
          </p>
          <ul style={{ margin: 0, paddingLeft: 20 }}>
            {students.map((s, i) => (
              <li key={i}>
                {s.name}
                {s.class ? ` - ${s.class}` : ''}
              </li>
            ))}
          </ul>
        </>
      ) : null}
      <p style={{ margin: '18px 0 6px' }}>Thank you,</p>
      <p style={{ marginTop: 20 }}>
        Warm regards,
        <br />
        <strong>Al Rahma Sunday School</strong>
      </p>
    </div>
  )
}
