import { formatSectionName, joinWithAnd } from '../whatsappInviteUtils'

type WaItem = {
  class_section_name?: string
  invite_link?: string
  qr_src?: string
}

export function WhatsAppInviteBody({
  parent = { firstname: 'Fatima', lastname: 'Hassan' },
  items = [
    {
      class_section_name: '5-A',
      invite_link: 'https://chat.whatsapp.com/example',
      qr_src: '',
    },
  ] as WaItem[],
  sections,
  links,
  qrImageUrl,
}: {
  parent?: { firstname?: string; lastname?: string }
  items?: WaItem[]
  sections?: WaItem[]
  links?: string[]
  qrImageUrl?: string
}) {
  const displayName = `${parent.firstname ?? ''} ${parent.lastname ?? ''}`.trim()
  const sectionNames = (sections ?? []).map((s) => s.class_section_name ?? '')
  const linkFallback = links?.[0] ?? sections?.[0]?.invite_link ?? '#'
  const introSections =
    items.length > 0 ? items.map((i) => i.class_section_name ?? 'Class') : sectionNames

  const formattedSections = introSections.map((s) => formatSectionName(String(s)))
  const sectionList = joinWithAnd(formattedSections) || 'your class'

  const useItems = items.length > 0

  return (
    <div
      style={{
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 30,
        maxWidth: 720,
        margin: 'auto',
        boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
        fontFamily: "'Segoe UI', Arial, sans-serif",
        color: '#333',
        lineHeight: 1.8,
      }}
    >
      <p style={{ fontSize: 18 }}>Assalamu Alaikum {displayName},</p>
      <p style={{ fontSize: 18 }}>
        We are excited to welcome you to this school year at <strong>Al Rahma Sunday School</strong>. As we approach our
        fourth week of learning, we ask Allah (SWT) to make this year successful and beneficial for all our children.
      </p>
      <p style={{ fontSize: 18 }}>
        You have been identified as a parent or guardian of at least one child in <strong>{sectionList}</strong> this year.
        We are inviting you to join the WhatsApp group(s) that include other parents and your child&apos;s instructors. The
        WhatsApp group(s) will be used to share important information about curriculum assignments and school events.
      </p>
      <p style={{ fontSize: 18 }}>
        Additionally, by joining these groups, you automatically become part of the{' '}
        <strong>Al Rahma Sunday School Community</strong>, which hosts all grade groups within the school. Through this
        community, you will receive important alerts and messages from the school administration.
      </p>
      <h2 style={{ fontSize: 22, color: '#1c5f2c', fontWeight: 600, marginTop: 22 }}>
        Your WhatsApp Group(s){items.length ? ` (${items.length})` : ''}
      </h2>

      {useItems ? (
        items.map((it, i) => {
          const sectionLabel = formatSectionName(it.class_section_name ?? 'Class')
          const inviteLink = it.invite_link ?? '#'
          const qrSrc = it.qr_src ?? ''
          return (
            <div
              key={i}
              style={{
                border: '1px solid #e8e8e8',
                borderRadius: 10,
                padding: 16,
                margin: '16px 0',
                background: '#fff',
              }}
            >
              <div style={{ fontWeight: 700, marginBottom: 10, fontSize: 22 }}>
                {i + 1}) {sectionLabel}
              </div>
              <div style={{ textAlign: 'center', marginTop: 10, marginBottom: 20 }}>
                <a
                  href={inviteLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: 'inline-block',
                    backgroundColor: '#25D366',
                    color: '#fff',
                    padding: '14px 28px',
                    borderRadius: 8,
                    textDecoration: 'none',
                    fontWeight: 600,
                    fontSize: 20,
                  }}
                >
                  Join WhatsApp Group
                </a>
                <div style={{ marginTop: 15 }}>
                  {qrSrc ? (
                    <img src={qrSrc} alt={`QR for ${sectionLabel}`} width={260} height={260} style={{ display: 'block', margin: 'auto' }} />
                  ) : (
                    <div style={{ color: '#777', fontSize: 20 }}>
                      <em>QR unavailable</em>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )
        })
      ) : (
        <div style={{ border: '1px solid #e8e8e8', borderRadius: 10, padding: 16, margin: '16px 0', background: '#fff' }}>
          <div style={{ fontWeight: 700, marginBottom: 10, fontSize: 22 }}>
            {joinWithAnd(sectionNames.map((s) => formatSectionName(s))) || 'Class'}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 16 }}>
            <div style={{ flex: '1 1 280px', minWidth: 260 }}>
              <a
                href={linkFallback}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: 'inline-block',
                  backgroundColor: '#25D366',
                  color: '#fff',
                  padding: '14px 24px',
                  borderRadius: 8,
                  textDecoration: 'none',
                  fontWeight: 600,
                  fontSize: 20,
                }}
              >
                Join WhatsApp Group
              </a>
              <div style={{ marginTop: 10 }}>
                <a href={linkFallback} target="_blank" rel="noopener noreferrer" style={{ fontSize: 18, color: '#0b6ef6', wordBreak: 'break-all' }}>
                  {linkFallback}
                </a>
              </div>
            </div>
            <div style={{ flex: '0 0 260px', textAlign: 'center' }}>
              {qrImageUrl ? (
                <img src={qrImageUrl} alt="WhatsApp QR Code" width={260} height={260} style={{ display: 'block', margin: 'auto' }} />
              ) : (
                <div style={{ color: '#777', fontSize: 20 }}>
                  <em>QR unavailable</em>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      <p style={{ marginTop: 22, fontSize: 18, color: '#555', textAlign: 'center' }}>
        Jazakum Allah Khair,
        <br />
        <strong>Al Rahma Sunday School Administration</strong>
      </p>
    </div>
  )
}

/** CI file is plain-text draft — rendered as fixed message */
export function WhatsAppGroupInvitationDraftBody() {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', fontSize: 16, lineHeight: 1.7, whiteSpace: 'pre-wrap' }}>
      {`titile : Invitation to Join Youth WhatsApp Group


Assalam Alaikum Parents and Guardians,

We are excited to welcome you to this school year at Al Rahma Sunday School.

We are heading towards the 4th week of learning this coming Sunday and we ask Allah swt to make this year successful and beneficial for our children.

You have been identified as a parent/guardian to at least one child in Youth this year, and we are inviting you to join the WhatsApp group that will be hosting all other parents who have their children in the same grade along with their respective instructors Br Sheraz, Br Umar Farooq, Br Hassan, Br Nabil, Sr Mariama and Sr Zainab. The WhatsApp group will be used to communicate important matters about curriculum, assignments and events.

Also, by joining Youth, you are automatically joining Al Rahma Sunday School Community which hosts all grade groups within the school, you will be able to receive important alerts and messages from school administration through the WhatsApp community as well.

Two ways to join:

1- If you are seeing this email in your desktop/laptop, then use your smart phone to scan the QR code below:

image.png


2- If you are seeing this email in your smart phone, then simply click on this link below to join:

Youth WhatsApp Invitation Link

Jazakum Allah Khair,
-Al Rahma Admin`}
    </div>
  )
}
