import { formatLocalDate } from '../textUtils'

export function FinalWarningBody({
  parent_name = 'Parent/Guardian',
  student_name = 'your student',
  class_section_name,
  date_fmt,
  semester,
  school_year,
}: {
  parent_name?: string
  student_name?: string
  class_section_name?: string
  date_fmt?: string
  semester?: string
  school_year?: string
}) {
  return (
    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        This is a <strong>final warning</strong> concerning the attendance of <strong>{student_name}</strong>
        {class_section_name ? ` (${class_section_name})` : ''}
        {date_fmt ? ` as of ${date_fmt}` : ''}. Continued unexcused absences
        {semester && school_year ? ` during ${semester} ${school_year}` : ''} may result in dismissal from the
        program.
      </p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        If there are special circumstances we should be aware of, please contact the school at{' '}
        <a href="mailto:alrahma.isgl@gmail.com">school email</a>.
      </p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        Sincerely,
        <br />
        Al Rahma Sunday School
      </p>
    </div>
  )
}

export function FollowUpBody(props: Parameters<typeof FinalWarningBody>[0]) {
  const {
    parent_name = 'Parent/Guardian',
    student_name = 'your student',
    class_section_name,
    date_fmt,
    semester,
    school_year,
  } = props
  return (
    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        We&apos;re reaching out regarding <strong>{student_name}</strong>
        {class_section_name ? ` (${class_section_name})` : ''}
        {date_fmt ? ` on ${date_fmt}` : ''}. We noticed recent unexcused absences
        {semester && school_year ? ` during ${semester} ${school_year}` : ''}. Please let us know in advance
        about any upcoming absences.
      </p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        If there are special circumstances we should be aware of, please contact the school at{' '}
        <a href="mailto:alrahma.isgl@gmail.com">school email</a>.
      </p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        Thank you,
        <br />
        Al Rahma Sunday School
      </p>
    </div>
  )
}

export function DismissalBody(props: Parameters<typeof FinalWarningBody>[0]) {
  const {
    parent_name = 'Parent/Guardian',
    student_name = 'your student',
    class_section_name,
    date_fmt,
    semester,
    school_year,
  } = props
  return (
    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        We regret to inform you that <strong>{student_name}</strong>
        {class_section_name ? ` (${class_section_name})` : ''} has been <strong>dismissed</strong>
        {semester && school_year ? ` for ${semester} ${school_year}` : ''}
        due to repeated unexcused absences{date_fmt ? ` as of ${date_fmt}` : ''}.
      </p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        If you believe this decision was made in error or wish to discuss next steps, please contact the school at{' '}
        <a href="mailto:alrahma.isgl@gmail.com">school email</a>.
      </p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        Sincerely,
        <br />
        Al Rahma Sunday School
      </p>
    </div>
  )
}

type AttendanceStudentRow = {
  name?: string
  date?: string
  date_label?: string
  class_label?: string
  type_label?: string
  arrival_time?: string
  dismiss_time?: string
}

export function ParentAttendanceAdminBody({
  recipient_parent = { firstname: 'Taylor', lastname: 'Jordan', email: 'parent@example.com', cellphone: '555-0100' },
  primary_parent,
  students = [
    {
      name: 'Ahmad Khan',
      date_label: '04-15-2026',
      class_label: 'Grade 5-A',
      type_label: 'Absent',
      arrival_time: '',
      dismiss_time: '',
    },
  ] as AttendanceStudentRow[],
  type_label = 'Attendance Update',
  reason,
  semester = 'Fall',
  school_year = '2025-2026',
  submitted_at = 'April 15, 2026 10:22 AM',
}: {
  recipient_parent?: Record<string, string | undefined>
  primary_parent?: Record<string, string | undefined>
  students?: AttendanceStudentRow[]
  type_label?: string
  reason?: string
  semester?: string
  school_year?: string
  submitted_at?: string
}) {
  const submitterName =
    `${recipient_parent.firstname ?? ''} ${recipient_parent.lastname ?? ''}`.trim() || 'Parent/Guardian'
  const primaryName = primary_parent
    ? `${primary_parent.firstname ?? ''} ${primary_parent.lastname ?? ''}`.trim()
    : ''

  return (
    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 15, color: '#333', lineHeight: 1.5 }}>
      <p>
        <strong>Parent Submission Received</strong>
      </p>
      <p>
        {submitterName} submitted an {type_label.toLowerCase()} request:
      </p>
      {students.length > 0 ? (
        <table style={{ width: '100%', borderCollapse: 'collapse', margin: '12px 0', 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 }}>Date</th>
              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Class</th>
              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Notes</th>
            </tr>
          </thead>
          <tbody>
            {students.map((student, idx) => {
              const dateDisplay =
                student.date_label ||
                (student.date ? formatLocalDate(student.date) : '—')
              return (
                <tr key={idx}>
                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{student.name ?? 'Student'}</td>
                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{dateDisplay}</td>
                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
                    {student.class_label ?? 'Not Assigned'}
                  </td>
                  <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
                    {student.type_label ?? ''}
                    <br />
                    {student.arrival_time ? <>Arrive ~ {student.arrival_time}<br /></> : null}
                    {student.dismiss_time ? <>Pickup @ {student.dismiss_time}<br /></> : null}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      ) : null}
      {reason ? (
        <p>
          <strong>Reason:</strong> {reason}
        </p>
      ) : null}
      <p style={{ marginTop: 16 }}>
        <strong>Contact Info</strong>
      </p>
      <ul style={{ paddingLeft: 20, marginTop: 0 }}>
        <li>Submitter Email: {recipient_parent.email ?? 'N/A'}</li>
        {recipient_parent.cellphone ? <li>Submitter Phone: {recipient_parent.cellphone}</li> : null}
        {primaryName && primaryName !== submitterName ? (
          <li>
            Primary Parent: {primaryName} ({primary_parent?.email ?? 'N/A'})
          </li>
        ) : null}
      </ul>
      {(semester || school_year) && (
        <p style={{ marginTop: 0 }}>
          Semester/Year: {`${semester ?? ''} ${school_year ?? ''}`.trim()}
        </p>
      )}
      {submitted_at ? <p style={{ marginTop: 0 }}>Submitted: {submitted_at}</p> : null}
      <p style={{ marginTop: 20, fontSize: 14, color: '#555' }}>
        Logged automatically by the Parent Attendance Report form.
      </p>
    </div>
  )
}

export function ParentAttendanceParentBody({
  recipient_parent = { firstname: 'Taylor', lastname: 'Jordan' },
  students = [
    {
      name: 'Ahmad Khan',
      date_label: '04-15-2026',
      class_label: 'Grade 5-A',
      type_label: 'Absent',
    },
  ] as AttendanceStudentRow[],
  type_label = 'Attendance Update',
  reason,
  semester = 'Fall',
  school_year = '2025-2026',
  submitted_at = 'April 15, 2026 10:22 AM',
}: {
  recipient_parent?: Record<string, string | undefined>
  students?: AttendanceStudentRow[]
  type_label?: string
  reason?: string
  semester?: string
  school_year?: string
  submitted_at?: string
}) {
  let parentName = `${recipient_parent.firstname ?? ''} ${recipient_parent.lastname ?? ''}`.trim()
  if (!parentName) parentName = 'Parent/Guardian'

  return (
    <div style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontSize: 15, color: '#333', lineHeight: 1.5 }}>
      <p>Dear {parentName},</p>
      <p>
        Thank you for letting us know about your child&apos;s {type_label.toLowerCase()}. We have recorded your
        submission.
      </p>
      {students.length > 0 ? (
        <table style={{ width: '100%', borderCollapse: 'collapse', margin: '12px 0', 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 }}>Date</th>
              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Class</th>
              <th style={{ textAlign: 'left', borderBottom: '1px solid #ddd', padding: 6 }}>Details</th>
            </tr>
          </thead>
          <tbody>
            {students.map((student, idx) => (
              <tr key={idx}>
                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>{student.name ?? 'Student'}</td>
                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
                  {student.date_label || (student.date ? formatLocalDate(student.date) : '—')}
                </td>
                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
                  {student.class_label ?? 'Not Assigned'}
                </td>
                <td style={{ padding: 6, borderBottom: '1px solid #f1f1f1' }}>
                  {student.type_label ?? ''}
                  <br />
                  {student.arrival_time ? <>Arrive ~ {student.arrival_time}<br /></> : null}
                  {student.dismiss_time ? <>Pickup @ {student.dismiss_time}<br /></> : null}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
      {reason ? (
        <p>
          <strong>Reason provided:</strong> {reason}
        </p>
      ) : null}
      {(semester || school_year) && (
        <p style={{ marginTop: 0 }}>
          Semester/Year: {`${semester ?? ''} ${school_year ?? ''}`.trim()}
        </p>
      )}
      {submitted_at ? <p style={{ marginTop: 0 }}>Submitted: {submitted_at}</p> : null}
      <p>
        Our admin team and your child&apos;s teacher will be notified. If you need to make a change, please update
        the form before the cutoff time or contact the school office.
      </p>
      <p style={{ marginTop: 20 }}>
        Jazakum Allahu khairan,
        <br />
        Al Rahma Sunday School
      </p>
    </div>
  )
}

export function BelowSixtyPerformanceBody({
  parent_name = 'Parent/Guardian',
  student_name = 'your student',
  class_section_name = 'Grade 5-A',
  semester = 'Fall',
  school_year = '2025-2026',
  scores = {
    homework_avg: 55,
    project_avg: 58,
    participation_score: 60,
    test_avg: 52,
    ptap_score: 59,
    attendance_score: 70,
    midterm_exam_score: 48,
    semester_score: 55,
  } as Record<string, number | string | null | undefined>,
  comment = 'Please reach out to discuss support options.',
}: {
  parent_name?: string
  student_name?: string
  class_section_name?: string
  semester?: string
  school_year?: string
  scores?: Record<string, number | string | null | undefined>
  comment?: string
}) {
  const rows: [string, keyof typeof scores][] = [
    ['Homework Avg', 'homework_avg'],
    ['Project Avg', 'project_avg'],
    ['Participation', 'participation_score'],
    ['Test Avg', 'test_avg'],
    ['PTAP Score', 'ptap_score'],
    ['Attendance', 'attendance_score'],
    ['Midterm Score', 'midterm_exam_score'],
    ['Semester Score', 'semester_score'],
  ]
  return (
    <div style={{ fontSize: 16, fontFamily: 'Arial, Helvetica, sans-serif', color: '#333' }}>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Dear {parent_name},</p>
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
        We are reaching out about <strong>{student_name}</strong>
        {class_section_name ? ` (${class_section_name})` : ''}
        {semester || school_year ? ` for ${`${semester ?? ''} ${school_year ?? ''}`.trim()}.` : '.'} The current
        semester performance is below 60.
      </p>
      <table style={{ width: '100%', borderCollapse: 'collapse', margin: '12px 0', fontSize: 14 }}>
        <thead>
          <tr>
            <th style={{ border: '1px solid #ddd', padding: 6, textAlign: 'left' }}>Item</th>
            <th style={{ border: '1px solid #ddd', padding: 6, textAlign: 'left' }}>Score</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(([label, key]) => {
            const val = scores[key]
            const display =
              val === null || val === undefined || val === ''
                ? '—'
                : typeof val === 'number'
                  ? val.toFixed(2)
                  : String(val)
            return (
              <tr key={label}>
                <td style={{ border: '1px solid #ddd', padding: 6 }}>{label}</td>
                <td style={{ border: '1px solid #ddd', padding: 6 }}>{display}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
      {comment ? (
        <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>
          <strong>Teacher Comment:</strong> {comment}
        </p>
      ) : null}
      <p style={{ margin: '0 0 12px', lineHeight: 1.5 }}>Please contact the school to discuss support plans for your child.</p>
      <p style={{ margin: 0, lineHeight: 1.5 }}>
        Thank you,
        <br />
        Al Rahma Sunday School
      </p>
    </div>
  )
}
