import { PORTAL_HREF } from '../textUtils'

export function WelcomeParentBody({
  recipientName = 'Parent',
  orgName = 'Al Rahma Sunday School',
  activationLink = `${PORTAL_HREF}/login`,
  contactInfo = 'alrahma.isgl@gmail.com',
}: {
  recipientName?: string
  orgName?: string
  activationLink?: string
  contactInfo?: string
}) {
  return (
    <>
      <p style={{ fontSize: 18 }}>Dear {recipientName},</p>
      <p style={{ fontSize: 18 }}>
        Thank you for creating an account with us — we&apos;re thrilled to welcome you to{' '}
        <strong>{orgName}</strong> community!
      </p>
      <p style={{ fontSize: 18 }}>To activate your account, click the link below:</p>
      <p>
        <a href={activationLink} style={{ fontSize: 18, color: '#007bff' }}>
          Activate my account
        </a>
      </p>
      <p style={{ fontSize: 18 }}>Once activated you will be able to:</p>
      <ul style={{ fontSize: 18 }}>
        <li>Access your dashboard</li>
        <li>Register and enroll your child(ren) in classes</li>
        <li>Receive school notifications and updates</li>
      </ul>
      <p style={{ fontSize: 18 }}>
        Contact us at{' '}
        <a href={`mailto:${contactInfo}`} style={{ color: '#0000EE' }}>
          {contactInfo}
        </a>{' '}
        if you have any questions.
      </p>
      <p style={{ fontSize: 18 }}>
        Warm regards,
        <br />
        <strong>{orgName}</strong>
      </p>
    </>
  )
}

export function WelcomeStaffBody({
  recipientName = 'Teacher',
  orgName = 'Al Rahma Sunday School',
  activationLink = `${PORTAL_HREF}/login`,
  contactInfo = 'alrahma.isgl@gmail.com',
}: {
  recipientName?: string
  orgName?: string
  activationLink?: string
  contactInfo?: string
}) {
  return (
    <>
      <p style={{ fontSize: 18 }}>Dear {recipientName},</p>
      <p style={{ fontSize: 18 }}>
        Thank you for creating an account with us — we&apos;re thrilled to welcome you to <strong>{orgName}</strong>{' '}
        community!
      </p>
      <p style={{ fontSize: 18 }}>To activate your account, click the link below:</p>
      <p>
        <a href={activationLink} style={{ fontSize: 18, color: '#007bff' }}>
          Activate my account
        </a>
      </p>
      <p style={{ fontSize: 18 }}>Once activated you will be able to:</p>
      <ul style={{ fontSize: 18 }}>
        <li>Access your dashboard</li>
        <li>Receive school notifications and updates</li>
      </ul>
      <p style={{ fontSize: 18 }}>
        Contact us at{' '}
        <a href={`mailto:${contactInfo}`} style={{ color: '#0000EE' }}>
          {contactInfo}
        </a>{' '}
        if you have any questions.
      </p>
      <p style={{ fontSize: 18 }}>
        Warm regards,
        <br />
        <strong>{orgName}</strong>
      </p>
    </>
  )
}

export function WelcomeUserBody({
  user = { firstname: 'Friend' },
}: {
  user?: { firstname?: string }
}) {
  const first = user.firstname ?? 'User'
  return (
    <>
      <h2>Welcome, {first.charAt(0).toUpperCase() + first.slice(1)}!</h2>
      <p>
        Thank you for registering with <strong>Al Rahma Sunday School</strong>! We&apos;re excited to have you as part of
        our growing community.
      </p>
      <p>
        At Al Rahma, we&apos;re committed to nurturing spiritual growth, knowledge and strong Islamic values in a welcoming
        and engaging environment. Whether you&apos;re a new student, a parent or a community member, we&apos;re thrilled to
        begin this journey with you.
      </p>
      <p>Here&apos;s what you can expect as a new member:</p>
      <ul>
        <li>📚 Access to enriching Islamic studies and Quranic education</li>
        <li>🤝 A warm and supportive learning environment</li>
        <li>🕌 Regular events, announcements and community updates</li>
      </ul>
      <p style={{ fontSize: 16 }}>
        Click{' '}
        <a href={`${PORTAL_HREF}/login`} target="_blank" rel="noopener noreferrer">
          here
        </a>{' '}
        to login to your account securely to access your parent portal. There you can register and enroll your child(ren)
        in classes, check their enrollment status and track their academic progress, view/print your invoice, and check
        school events and calendar.
      </p>
      <p>
        Need help or have questions? Don&apos;t hesitate to{' '}
        <a href="mailto:alrahma.isgl@gmail.com">contact us</a>. We&apos;re here to support you every step of the way.
      </p>
      <p>
        Once again, welcome to the Al Rahma Sunday School family. We look forward to a wonderful and meaningful experience
        together!
      </p>
      <p>
        Warm regards,
        <br />
        <strong>Al Rahma Sunday School Team</strong>
      </p>
    </>
  )
}

export function ResetPasswordBody({
  resetLink = `${PORTAL_HREF}/forgot-password`,
  orgName = 'Al Rahma Sunday School',
}: {
  resetLink?: string
  orgName?: string
}) {
  return (
    <>
      <p style={{ fontSize: 18 }}>Hello,</p>
      <p style={{ fontSize: 18 }}>
        We received a request to reset your password. If you initiated this request, please click on the link below to set
        a new password:
      </p>
      <p style={{ fontSize: 18 }}>
        <a href={resetLink} style={{ color: '#007bff' }}>
          Reset Password
        </a>
      </p>
      <p style={{ fontSize: 18 }}>If you did not request a password reset, please discard this email.</p>
      <p style={{ fontSize: 18 }}>
        Warm regards,
        <br />
        <strong>{orgName}</strong>
      </p>
    </>
  )
}

export function StudentRemovedBody({
  parent_name = 'Parent/Guardian',
  student_name = 'Sara Ali',
  signature = 'AlRahma School Administration',
}: {
  parent_name?: string
  student_name?: string
  signature?: string
}) {
  return (
    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', color: '#222', fontSize: 16, lineHeight: 1.6 }}>
      <p style={{ margin: '0 0 12px' }}>Dear {parent_name},</p>
      <p style={{ margin: '0 0 12px' }}>
        We are writing to inform you that{' '}
        {student_name ? (
          <>
            your child, <strong>{student_name}</strong>,
          </>
        ) : (
          'your child'
        )}{' '}
        has been officially withdrawn from the school&apos;s enrollment list, effective immediately.
      </p>
      <p style={{ margin: '0 0 12px' }}>
        To ensure confidentiality and accuracy, we kindly request that you contact the school directly. This will allow us
        to provide complete information and discuss any necessary next steps.
      </p>
      <p style={{ margin: '0 0 12px' }}>Thank you for your understanding. We look forward to speaking with you soon.</p>
      <p style={{ margin: 0 }}>
        Sincerely,
        <br />
        {signature}
      </p>
    </div>
  )
}

export function SupportNewAccountBody({
  user = { id: '42', firstname: 'Jamie', lastname: 'Rivera', email: 'new.user@example.com' },
}: {
  user?: { id?: string | number; firstname?: string; lastname?: string; email?: string }
}) {
  return (
    <>
      <h2>📬 New Account Created</h2>
      <p>
        <strong>Name:</strong> {user.firstname} {user.lastname}
      </p>
      <p>
        <strong>Email:</strong> {user.email ?? 'N/A'}
      </p>
      <p>
        <strong>User ID:</strong> {user.id ?? 'N/A'}
      </p>
      <p>This user has just completed account setup. Please verify and take any necessary actions.</p>
    </>
  )
}

export function AdminStudentRegisteredBody({
  student = {
    firstname: 'Sara',
    lastname: 'Ali',
    parents: { firstname: 'Parent', lastname: 'One', email: 'parent@example.com' },
  },
}: {
  student?: {
    firstname?: string
    lastname?: string
    parents?: { firstname?: string; lastname?: string; email?: string }
  }
}) {
  const p = student.parents
  return (
    <>
      <h2>🎓 New Student Registered</h2>
      <p>
        <strong>Student Name:</strong> {student.firstname} {student.lastname}
      </p>
      {p ? (
        <>
          <h3>👪 Parent Info</h3>
          <p>
            <strong>Parent:</strong> {p.firstname} {p.lastname}
            <br />
            <strong>Email:</strong> {p.email ?? 'N/A'}
          </p>
        </>
      ) : null}
      <p>The student has just been registered. Please review their information and verify if needed.</p>
    </>
  )
}

export function CalendarNotificationBody({
  event = {
    title: 'Community Iftar',
    date: '2026-05-01',
    event_type: 'Community',
    description: 'Join us after Maghrib for a community gathering.',
  },
  calendarUrl = `${PORTAL_HREF}/calendar`,
}: {
  event?: { title?: string; date?: string; event_type?: string; description?: string }
  calendarUrl?: string
}) {
  const eventTitle = event.title?.trim() || 'School Calendar Update'
  const eventType = event.event_type?.trim() || 'General'
  const raw = event.date?.trim()
  const eventDate = raw
    ? new Date(`${raw}T12:00:00`).toLocaleDateString(undefined, {
        month: 'long',
        day: 'numeric',
        year: 'numeric',
      })
    : 'TBD'

  return (
    <div style={{ fontFamily: 'sans-serif', lineHeight: 1.6 }}>
      <h1 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{eventTitle}</h1>
      <p style={{ margin: '0.25rem 0' }}>
        <strong>Date:</strong> {eventDate}
      </p>
      <p style={{ margin: '0.25rem 0' }}>
        <strong>Type:</strong> {eventType}
      </p>
      {event.description ? (
        <p style={{ margin: '0.25rem 0', whiteSpace: 'pre-wrap' }}>{event.description}</p>
      ) : null}
      <p style={{ margin: '0.25rem 0' }}>
        Visit the{' '}
        <a href={calendarUrl}>{calendarUrl}</a> to see the calendar.
      </p>
    </div>
  )
}

export function EventBroadcastBody({
  event = {
    event_name: 'Science Fair',
    expiration_date: '2026-06-15',
    event_category: 'Academic',
    amount: 15,
    description: '<p>Bring your poster boards.</p>',
  },
  flyerUrl = '',
  eventUrl = `${PORTAL_HREF}/parent/events`,
}: {
  event?: {
    event_name?: string
    expiration_date?: string
    event_category?: string
    amount?: number | string | null
    description?: string
  }
  flyerUrl?: string
  eventUrl?: string
}) {
  const eventName = (event.event_name ?? 'Upcoming Event').trim()
  const eventCategory = (event.event_category ?? '').trim()
  const raw = (event.expiration_date ?? '').trim()
  const eventDate = raw
    ? new Date(`${raw}T12:00:00`).toLocaleDateString(undefined, {
        month: 'long',
        day: 'numeric',
        year: 'numeric',
      })
    : 'TBD'
  const amountRaw = event.amount
  const amount =
    amountRaw !== null && amountRaw !== undefined && amountRaw !== ''
      ? Number(amountRaw).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
      : null

  return (
    <div style={{ fontFamily: 'sans-serif', lineHeight: 1.6 }}>
      <h1 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{eventName}</h1>
      <p style={{ margin: '0.25rem 0' }}>
        <strong>Date:</strong> {eventDate}
      </p>
      {eventCategory ? (
        <p style={{ margin: '0.25rem 0' }}>
          <strong>Category:</strong> {eventCategory}
        </p>
      ) : null}
      {amount !== null ? (
        <p style={{ margin: '0.25rem 0' }}>
          <strong>Amount:</strong> ${amount}
        </p>
      ) : null}
      {event.description ? (
        <div style={{ margin: '0.75rem 0' }} dangerouslySetInnerHTML={{ __html: event.description }} />
      ) : null}
      {flyerUrl ? (
        <>
          <div style={{ margin: '1rem 0' }}>
            <img
              src={flyerUrl}
              alt={`Event flyer for ${eventName}`}
              style={{ display: 'block', maxWidth: '100%', height: 'auto', border: '1px solid #ddd', borderRadius: 8 }}
            />
          </div>
          <p style={{ margin: '0.75rem 0' }}>
            Flyer:{' '}
            <a href={flyerUrl}>{flyerUrl}</a>
          </p>
        </>
      ) : null}
      <p style={{ margin: '0.75rem 0' }}>
        For more details, please contact the school office or review the parent event page.
      </p>
      <p style={{ margin: '0.25rem 0' }}>
        <a href={eventUrl}>{eventUrl}</a>
      </p>
    </div>
  )
}

export function CustomHtmlBody({
  body_html = '<p>Custom <strong>HTML</strong> from the sender.</p>',
}: {
  body_html?: string
}) {
  return <div dangerouslySetInnerHTML={{ __html: body_html }} />
}

/** `_wrap_layout.php`: inner HTML passed into email_layout */
export function WrapLayoutSampleBody({
  body_html = '<p style="font-size:16px;">Inner HTML injected via <code>$body_html</code> (CI <code>_wrap_layout.php</code>).</p>',
}: {
  body_html?: string
}) {
  return <div dangerouslySetInnerHTML={{ __html: body_html }} />
}

/** `broadcast_wrapper.php`: content slot */
export function BroadcastWrapperSampleBody({
  content = '<p>This area maps to <code>$content</code> in <code>broadcast_wrapper.php</code>.</p>',
}: {
  content?: string
}) {
  return <div dangerouslySetInnerHTML={{ __html: content }} />
}
