import { useMemo } from 'react'
import { useSearchParams } from 'react-router-dom'
import { formatSchoolYearShort, formatSlipDate } from './slipFormatting'

/**
 * Print layout matching CI `slips/slip_pdf.php` (standalone HTML slip).
 * Open via query string from SlipPreviewListPage (Print) or bookmarked URL.
 */
export function LateSlipPrintPage() {
  const [searchParams] = useSearchParams()

  const entry = useMemo(
    () => ({
      school_year: searchParams.get('school_year') ?? '',
      student_name: searchParams.get('student_name') ?? '',
      date: searchParams.get('date') ?? '',
      time_in: searchParams.get('time_in') ?? '',
      grade: searchParams.get('grade') ?? '',
      reason: searchParams.get('reason') ?? '',
      admin_name: searchParams.get('admin_name') ?? '',
    }),
    [searchParams],
  )

  const wMm = parseFloat(searchParams.get('w_mm') ?? '85.60') || 85.6
  const hMm = parseFloat(searchParams.get('h_mm') ?? '53.98') || 53.98

  const schoolYearFmt = formatSchoolYearShort(entry.school_year)
  const dateFmt = entry.date ? formatSlipDate(entry.date) : ''

  return (
    <>
      <div className="late-slip-print-toolbar d-print-none p-2 border-bottom bg-light d-flex gap-2">
        <button type="button" className="btn btn-primary btn-sm" onClick={() => window.print()}>
          Print
        </button>
        <button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => window.close()}>
          Close
        </button>
      </div>
      <div className="late-slip-print-root">
        <style>{`
          @page {
            size: ${wMm.toFixed(2)}mm ${hMm.toFixed(2)}mm;
            margin: 3mm;
          }
          .late-slip-print-root {
            font-family: "Courier New", Courier, monospace;
            font-size: 13pt;
            color: #000;
            padding: 4mm;
          }
          .late-slip-print-root .line {
            line-height: 2;
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            page-break-inside: avoid;
          }
          .late-slip-print-root .label { font-weight: 700; }
          .late-slip-print-root .title {
            text-align: center;
            font-weight: 700;
            text-decoration: underline;
            font-size: 18pt;
            margin-bottom: 3mm;
          }
        `}</style>
        <div className="page">
          <div className="title">Late Slip</div>
          <div className="line">
            <span className="label">Al Rahma School at ISGL {schoolYearFmt}</span>
          </div>
          <div className="line">
            <span className="label">Student:</span> {entry.student_name}
          </div>
          <div className="line">
            <span className="label">Date:</span> {dateFmt}
          </div>
          <div className="line">
            <span className="label">Time In:</span> {entry.time_in}
          </div>
          <div className="line">
            <span className="label">Grade:</span> {entry.grade}
          </div>
          <div className="line">
            <span className="label">Reason:</span> {entry.reason}
          </div>
          <div className="line">
            <span className="label">Admin:</span> {entry.admin_name}
          </div>
        </div>
      </div>
    </>
  )
}
