import { useEffect, useMemo, useState, type FormEvent } from 'react'
import { Link, useSearchParams } from 'react-router-dom'
import { CiFlashMessages, type CiFlashMessage } from '../../components/CiPartials'
import { SchoolYearSelector, SchoolYearStatusBadge } from '../../components/schoolYear'
import { isReadOnlySchoolYear } from '../../lib/schoolYearSelection'
import { ApiHttpError } from '../../api/http'
import {
  closeSchoolYear,
  createSchoolYear,
  fetchSchoolYearParentBalances,
  fetchSchoolYearPromotionPreview,
  fetchSchoolYearSummary,
  fetchSchoolYears,
  previewSchoolYearClose,
  reopenSchoolYear,
  updateSchoolYear,
  validateSchoolYearClose,
  type CloseSchoolYearPayload,
  type SchoolYearClosePreview,
  type SchoolYearCloseResult,
  type SchoolYearCloseValidation,
  type SchoolYearParentBalancePreview,
  type SchoolYearPromotionPreview,
  type SchoolYearRecord,
  type SchoolYearSummary,
} from '../../api/schoolYears'

type YearFormState = {
  name: string
  start_date: string
  end_date: string
}

type CloseFormState = {
  name: string
  start_date: string
  end_date: string
  confirmation: string
  transfer_unpaid_balances: boolean
}

function emptyYearForm(): YearFormState {
  return { name: '', start_date: '', end_date: '' }
}

function emptyCloseForm(): CloseFormState {
  return {
    name: '',
    start_date: '',
    end_date: '',
    confirmation: '',
    transfer_unpaid_balances: true,
  }
}

function normalizeApiError(error: unknown, fallback: string): string {
  if (error instanceof ApiHttpError) return error.message || fallback
  if (error instanceof Error) return error.message
  return fallback
}

function toDisplayDate(value: string | null | undefined): string {
  if (!value) return '—'
  const iso = value.length > 10 ? value.slice(0, 10) : value
  const parsed = new Date(`${iso}T00:00:00`)
  if (Number.isNaN(parsed.getTime())) return value
  return parsed.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}

function formatMoney(value: number | null | undefined): string {
  return Number(value ?? 0).toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })
}

function suggestNextName(name: string): string {
  const fullRange = name.match(/^(\d{4})\s*-\s*(\d{4})$/)
  if (fullRange) {
    return `${Number(fullRange[1]) + 1}-${Number(fullRange[2]) + 1}`
  }

  const shortRange = name.match(/^(\d{4})\s*-\s*(\d{2})$/)
  if (shortRange) {
    const nextStart = Number(shortRange[1]) + 1
    const nextEnd = (Number(shortRange[2]) + 1).toString().padStart(2, '0')
    return `${nextStart}-${nextEnd}`
  }

  return ''
}

function shiftSchoolYearDate(value: string): string {
  const parts = value.split('-')
  if (parts.length !== 3) return ''
  return `${Number(parts[0]) + 1}-${parts[1]}-${parts[2]}`
}

function defaultDraftFor(activeYear: SchoolYearRecord | null): YearFormState {
  if (!activeYear) return emptyYearForm()
  return {
    name: suggestNextName(activeYear.name),
    start_date: shiftSchoolYearDate(activeYear.start_date),
    end_date: shiftSchoolYearDate(activeYear.end_date),
  }
}

function closePayloadFrom(state: CloseFormState): CloseSchoolYearPayload {
  return {
    new_school_year: {
      name: state.name.trim(),
      start_date: state.start_date,
      end_date: state.end_date,
    },
    transfer_unpaid_balances: state.transfer_unpaid_balances,
    confirmation: state.confirmation.trim(),
  }
}

export function SchoolYearsManagementPage() {
  const [searchParams, setSearchParams] = useSearchParams()
  const [years, setYears] = useState<SchoolYearRecord[]>([])
  const [loading, setLoading] = useState(true)
  const [loadingMessage, setLoadingMessage] = useState('Loading school years…')
  const [error, setError] = useState<string | null>(null)
  const [messages, setMessages] = useState<CiFlashMessage[]>([])
  const [summary, setSummary] = useState<SchoolYearSummary | null>(null)
  const [promotionPreview, setPromotionPreview] = useState<SchoolYearPromotionPreview | null>(null)
  const [parentBalances, setParentBalances] = useState<SchoolYearParentBalancePreview | null>(null)
  const [closeValidation, setCloseValidation] = useState<SchoolYearCloseValidation | null>(null)
  const [closePreview, setClosePreview] = useState<SchoolYearClosePreview | null>(null)
  const [closeResult, setCloseResult] = useState<SchoolYearCloseResult | null>(null)
  const [createForm, setCreateForm] = useState<YearFormState>(emptyYearForm())
  const [editForm, setEditForm] = useState<YearFormState>(emptyYearForm())
  const [closeForm, setCloseForm] = useState<CloseFormState>(emptyCloseForm())
  const [busyCreate, setBusyCreate] = useState(false)
  const [busyEdit, setBusyEdit] = useState(false)
  const [busyOpenId, setBusyOpenId] = useState<number | null>(null)
  const [busyCloseAction, setBusyCloseAction] = useState<'validate' | 'preview' | 'close' | null>(null)
  const selectedYearName = searchParams.get('school_year')?.trim() || null

  const activeYear = useMemo(
    () => years.find((year) => Boolean(year.is_current)) ?? null,
    [years],
  )

  const selectedYear = useMemo(() => {
    if (years.length === 0) return null
    if (selectedYearName) {
      return years.find((year) => year.name === selectedYearName) ?? null
    }
    return activeYear ?? years[0] ?? null
  }, [activeYear, selectedYearName, years])

  async function refreshYears(preferredYearName?: string | null) {
    setLoading(true)
    setLoadingMessage('Loading school years…')
    setError(null)

    try {
      const list = await fetchSchoolYears()
      setYears(list)

      const nextSelectedId =
        preferredYearName ??
        (selectedYearName && list.some((year) => year.name === selectedYearName)
          ? selectedYearName
          : list.find((year) => year.is_current)?.name ?? list[0]?.name ?? null)

      if (nextSelectedId != null) {
        setSearchParams((current) => {
          const next = new URLSearchParams(current)
          next.delete('year')
          next.delete('school_year_id')
          next.set('school_year', nextSelectedId)
          return next
        }, { replace: true })
      }

      const nextActive = list.find((year) => year.is_current) ?? null
      const draftDefaults = defaultDraftFor(nextActive)
      setCreateForm((current) =>
        current.name || current.start_date || current.end_date ? current : draftDefaults,
      )

      if (nextActive) {
        setCloseForm((current) =>
          current.name || current.start_date || current.end_date
            ? current
            : {
                ...current,
                ...draftDefaults,
              },
        )
      } else {
        setCloseForm(emptyCloseForm())
      }
    } catch (loadError) {
      setYears([])
      setSummary(null)
      setPromotionPreview(null)
      setParentBalances(null)
      setCloseValidation(null)
      setClosePreview(null)
      setCloseResult(null)
      setError(normalizeApiError(loadError, 'Unable to load school years.'))
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    void refreshYears()
    // search params are intentionally handled by explicit selection logic
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    if (!selectedYear) {
      setSummary(null)
      setEditForm(emptyYearForm())
      setPromotionPreview(null)
      setParentBalances(null)
      return
    }

    setEditForm({
      name: selectedYear.name,
      start_date: selectedYear.start_date,
      end_date: selectedYear.end_date,
    })

    let cancelled = false
    setSummary(null)
    setLoadingMessage(`Loading ${selectedYear.name} summary…`)

    ;(async () => {
      try {
        const nextSummary = await fetchSchoolYearSummary(selectedYear.name)
        if (!cancelled) {
          setSummary(nextSummary)
        }
      } catch (loadError) {
        if (!cancelled) {
          setError(normalizeApiError(loadError, 'Unable to load school year summary.'))
        }
      }
    })()

    return () => {
      cancelled = true
    }
  }, [selectedYear])

  useEffect(() => {
    const defaults = defaultDraftFor(activeYear)
    if (!activeYear) {
      setCloseForm(emptyCloseForm())
      return
    }

    setCloseForm((current) => ({
      ...current,
      name: current.name || defaults.name,
      start_date: current.start_date || defaults.start_date,
      end_date: current.end_date || defaults.end_date,
    }))
  }, [activeYear])

  function pushMessage(type: CiFlashMessage['type'], message: string) {
    setMessages([{ type, message }])
  }

  function selectYear(yearName: string) {
    setSearchParams((current) => {
      const next = new URLSearchParams(current)
      next.delete('year')
      next.delete('school_year_id')
      next.set('school_year', yearName)
      return next
    })
    setPromotionPreview(null)
    setParentBalances(null)
    setCloseResult(null)
  }

  async function handleCreate(event: FormEvent) {
    event.preventDefault()
    setBusyCreate(true)
    setError(null)
    try {
      const created = await createSchoolYear(createForm)
      pushMessage('success', `Draft school year ${created.name} created.`)
      setCreateForm(emptyYearForm())
      await refreshYears(created.name)
    } catch (saveError) {
      setError(normalizeApiError(saveError, 'Unable to create school year.'))
    } finally {
      setBusyCreate(false)
    }
  }

  async function handleEdit(event: FormEvent) {
    event.preventDefault()
    if (!selectedYear) return
    setBusyEdit(true)
    setError(null)
    try {
      const updated = await updateSchoolYear(selectedYear.name, editForm)
      pushMessage('success', `School year ${updated.name} updated.`)
      await refreshYears(updated.name)
    } catch (saveError) {
      setError(normalizeApiError(saveError, 'Unable to update school year.'))
    } finally {
      setBusyEdit(false)
    }
  }

  async function handleReopen(year: SchoolYearRecord) {
    setBusyOpenId(year.id)
    setError(null)
    try {
      const reopened = await reopenSchoolYear(year.name)
      pushMessage('success', `School year ${reopened.name} is now active.`)
      setCloseValidation(null)
      setClosePreview(null)
      await refreshYears(reopened.name)
    } catch (actionError) {
      setError(normalizeApiError(actionError, 'Unable to open school year.'))
    } finally {
      setBusyOpenId(null)
    }
  }

  async function loadPromotionPreview() {
    if (!selectedYear) return
    setLoadingMessage(`Loading ${selectedYear.name} promotion preview…`)
    setError(null)
    try {
      const preview = await fetchSchoolYearPromotionPreview(
        selectedYear.name,
        suggestNextName(selectedYear.name),
      )
      setPromotionPreview(preview)
    } catch (loadError) {
      setError(normalizeApiError(loadError, 'Unable to load promotion preview.'))
    }
  }

  async function loadParentBalances() {
    if (!selectedYear) return
    setLoadingMessage(`Loading ${selectedYear.name} parent balances…`)
    setError(null)
    try {
      const balances = await fetchSchoolYearParentBalances(
        selectedYear.name,
        suggestNextName(selectedYear.name),
      )
      setParentBalances(balances)
    } catch (loadError) {
      setError(normalizeApiError(loadError, 'Unable to load parent balance preview.'))
    }
  }

  async function handleValidateClose() {
    if (!selectedYear?.is_current) return
    setBusyCloseAction('validate')
    setError(null)
    try {
      const validation = await validateSchoolYearClose(selectedYear.name, closePayloadFrom(closeForm))
      setCloseValidation(validation)
      setClosePreview(null)
      setCloseResult(null)
    } catch (actionError) {
      setError(normalizeApiError(actionError, 'Unable to validate school year closure.'))
    } finally {
      setBusyCloseAction(null)
    }
  }

  async function handlePreviewClose() {
    if (!selectedYear?.is_current) return
    setBusyCloseAction('preview')
    setError(null)
    try {
      const preview = await previewSchoolYearClose(selectedYear.name, closePayloadFrom(closeForm))
      setCloseValidation(preview.validation)
      setClosePreview(preview)
      setCloseResult(null)
    } catch (actionError) {
      setError(normalizeApiError(actionError, 'Unable to preview school year closure.'))
    } finally {
      setBusyCloseAction(null)
    }
  }

  async function handleClose(event: FormEvent) {
    event.preventDefault()
    if (!selectedYear?.is_current) return
    setBusyCloseAction('close')
    setError(null)
    try {
      const result = await closeSchoolYear(selectedYear.name, closePayloadFrom(closeForm))
      pushMessage(
        'success',
        `Closed ${result.closed_school_year.name} and opened ${result.new_school_year.name}.`,
      )
      setCloseValidation(null)
      setClosePreview(null)
      setCloseResult(result)
      setPromotionPreview(null)
      setParentBalances(null)
      setCloseForm(emptyCloseForm())
      await refreshYears(result.new_school_year.name)
    } catch (actionError) {
      setError(normalizeApiError(actionError, 'Unable to close school year.'))
    } finally {
      setBusyCloseAction(null)
    }
  }

  const summaryCards = summary?.totals
  const promotionRows = promotionPreview?.rows ?? []
  const balanceRows = parentBalances?.rows ?? []
  const closePromotionRows = closePreview?.promotion_preview.rows ?? []
  const closeBalanceRows = closePreview?.parent_balances.rows ?? []
  const selectedYearReadOnly = isReadOnlySchoolYear(selectedYear)
  const selectedYearIsActive = Boolean(selectedYear?.is_current)
  const requiredConfirmation = selectedYearIsActive && selectedYear ? `CLOSE ${selectedYear.name}` : ''
  const confirmationMatches = !selectedYearIsActive || closeForm.confirmation.trim() === requiredConfirmation

  return (
    <div className="container-fluid py-4">
      <nav aria-label="breadcrumb">
        <ol className="breadcrumb">
          <li className="breadcrumb-item">
            <Link to="/app/home">Home</Link>
          </li>
          <li className="breadcrumb-item active" aria-current="page">
            administrator
          </li>
          <li className="breadcrumb-item active" aria-current="page">
            school-years
          </li>
        </ol>
      </nav>

      <div className="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
          <h1 className="h3 mb-1">School Years Management</h1>
          <p className="text-muted mb-0">
            Control draft years, metadata updates, reopening, validation, promotion preview,
            parent balance carryover, and year closure through the matching Laravel API routes.
          </p>
        </div>
        <div className="d-flex flex-column align-items-end gap-2">
          <SchoolYearSelector />
          <div className="text-muted small">
            Uses <code>/api/v1/school-years</code> with JWT <code>Authorization: Bearer</code>.
          </div>
        </div>
      </div>

      <CiFlashMessages messages={messages} />
      {error ? <div className="alert alert-danger">{error}</div> : null}

      <div className="row g-4">
        <div className="col-xl-4">
          <div className="card shadow-sm mb-4">
            <div className="card-body">
              <h2 className="h5 mb-3">School Years</h2>
              {loading && years.length === 0 ? (
                <p className="text-muted mb-0">{loadingMessage}</p>
              ) : years.length === 0 ? (
                <p className="text-muted mb-0">No school years found.</p>
              ) : (
                <div className="d-grid gap-3">
                  {years.map((year) => (
                    <div
                      key={year.id}
                      className={`border rounded p-3 ${selectedYear?.id === year.id ? 'border-primary bg-light' : 'bg-white'}`}
                    >
                      <div className="d-flex justify-content-between gap-2 align-items-start mb-2">
                        <div>
                          <button
                            type="button"
                            className="btn btn-link p-0 fw-semibold text-decoration-none"
                            onClick={() => selectYear(year.name)}
                          >
                            {year.name}
                          </button>
                          <div className="small text-muted">
                            {toDisplayDate(year.start_date)} to {toDisplayDate(year.end_date)}
                          </div>
                        </div>
                        <SchoolYearStatusBadge status={year.status} />
                      </div>
                      <div className="d-flex flex-wrap gap-2">
                        <button
                          type="button"
                          className="btn btn-sm btn-outline-primary"
                          onClick={() => selectYear(year.name)}
                        >
                          Inspect
                        </button>
                        <Link
                          className="btn btn-sm btn-outline-secondary"
                          to={`/app/admin/school-years/summary?school_year=${encodeURIComponent(year.name)}`}
                        >
                          Summary
                        </Link>
                        {!year.is_current ? (
                          <button
                            type="button"
                            className="btn btn-sm btn-primary"
                            disabled={busyOpenId === year.id}
                            onClick={() => void handleReopen(year)}
                          >
                            {busyOpenId === year.id
                              ? 'Opening…'
                              : year.status === 'draft'
                                ? 'Open draft'
                                : 'Reopen'}
                          </button>
                        ) : (
                          <span className="badge text-bg-success align-self-center">Current</span>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div className="card shadow-sm">
            <div className="card-body">
              <div className="d-flex justify-content-between align-items-center mb-3">
                <h2 className="h5 mb-0">Create Draft Year</h2>
                <button
                  type="button"
                  className="btn btn-sm btn-outline-secondary"
                  onClick={() => setCreateForm(defaultDraftFor(activeYear))}
                >
                  Suggest next
                </button>
              </div>
              <form onSubmit={(event) => void handleCreate(event)}>
                <div className="mb-3">
                  <label className="form-label" htmlFor="create_school_year_name">
                    Name
                  </label>
                  <input
                    id="create_school_year_name"
                    className="form-control"
                    value={createForm.name}
                    onChange={(event) =>
                      setCreateForm((current) => ({ ...current, name: event.target.value }))
                    }
                    required
                  />
                </div>
                <div className="row g-3">
                  <div className="col-md-6">
                    <label className="form-label" htmlFor="create_school_year_start">
                      Start date
                    </label>
                    <input
                      id="create_school_year_start"
                      className="form-control"
                      type="date"
                      value={createForm.start_date}
                      onChange={(event) =>
                        setCreateForm((current) => ({ ...current, start_date: event.target.value }))
                      }
                      required
                    />
                  </div>
                  <div className="col-md-6">
                    <label className="form-label" htmlFor="create_school_year_end">
                      End date
                    </label>
                    <input
                      id="create_school_year_end"
                      className="form-control"
                      type="date"
                      value={createForm.end_date}
                      onChange={(event) =>
                        setCreateForm((current) => ({ ...current, end_date: event.target.value }))
                      }
                      required
                    />
                  </div>
                </div>
                <button type="submit" className="btn btn-success mt-3" disabled={busyCreate}>
                  {busyCreate ? 'Creating…' : 'Create draft year'}
                </button>
              </form>
            </div>
          </div>
        </div>

        <div className="col-xl-8">
          <div className="card shadow-sm mb-4">
            <div className="card-body">
              <div className="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                <div>
                  <h2 className="h5 mb-1">{selectedYear?.name ?? 'Year summary'}</h2>
                  <div className="text-muted small">
                    Review the selected year before updating metadata, reopening, or closing.
                  </div>
                </div>
                {selectedYear ? (
                  <SchoolYearStatusBadge status={selectedYear.status} />
                ) : null}
              </div>

              {!selectedYear ? (
                <p className="text-muted mb-0">Select a school year to inspect it.</p>
              ) : !summaryCards ? (
                <p className="text-muted mb-0">Loading summary…</p>
              ) : (
                <div className="row g-3">
                  <div className="col-md-6 col-xl-3">
                    <div className="border rounded p-3 h-100">
                      <div className="small text-muted text-uppercase">Students considered</div>
                      <div className="display-6">{summaryCards.students_considered}</div>
                    </div>
                  </div>
                  <div className="col-md-6 col-xl-3">
                    <div className="border rounded p-3 h-100">
                      <div className="small text-muted text-uppercase">Students blocked</div>
                      <div className="display-6">{summaryCards.students_blocked}</div>
                    </div>
                  </div>
                  <div className="col-md-6 col-xl-3">
                    <div className="border rounded p-3 h-100">
                      <div className="small text-muted text-uppercase">Unpaid carryover parents</div>
                      <div className="display-6">{summaryCards.parents_with_positive_balance ?? summaryCards.parents_with_balances}</div>
                    </div>
                  </div>
                  <div className="col-md-6 col-xl-3">
                    <div className="border rounded p-3 h-100">
                      <div className="small text-muted text-uppercase">Net balance impact</div>
                      <div className="display-6">${formatMoney(summaryCards.net_balance_impact ?? summaryCards.net_balance_to_transfer)}</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>

          {selectedYear ? (
            <div className="d-flex flex-wrap gap-2 mb-4">
              <Link className="btn btn-outline-secondary btn-sm" to={`/app/admin/school-years/summary?school_year=${encodeURIComponent(selectedYear.name)}`}>
                Open summary page
              </Link>
              <Link className="btn btn-outline-secondary btn-sm" to={`/app/admin/school-years/reports/closing?school_year=${encodeURIComponent(selectedYear.name)}`}>
                Closing report
              </Link>
              <Link className="btn btn-outline-secondary btn-sm" to={`/app/admin/school-years/reports/balance-transfers?school_year=${encodeURIComponent(selectedYear.name)}`}>
                Balance transfer report
              </Link>
            </div>
          ) : null}

          <div className="card shadow-sm mb-4">
            <div className="card-body">
              <h2 className="h5 mb-3">Edit Selected Year</h2>
              {selectedYearReadOnly ? (
                <div className="alert alert-warning small">
                  This year is closed or archived. Metadata editing is disabled here; backend guards must reject the write anyway.
                </div>
              ) : null}
              {!selectedYear ? (
                <p className="text-muted mb-0">Select a school year to edit its metadata.</p>
              ) : (
                <form onSubmit={(event) => void handleEdit(event)}>
                  <div className="mb-3">
                    <label className="form-label" htmlFor="edit_school_year_name">
                      Name
                    </label>
                    <input
                      id="edit_school_year_name"
                      className="form-control"
                      value={editForm.name}
                      disabled={selectedYearReadOnly}
                      onChange={(event) =>
                        setEditForm((current) => ({ ...current, name: event.target.value }))
                      }
                      required
                    />
                  </div>
                  <div className="row g-3">
                    <div className="col-md-6">
                      <label className="form-label" htmlFor="edit_school_year_start">
                        Start date
                      </label>
                      <input
                        id="edit_school_year_start"
                        className="form-control"
                        type="date"
                        value={editForm.start_date}
                        disabled={selectedYearReadOnly}
                        onChange={(event) =>
                          setEditForm((current) => ({ ...current, start_date: event.target.value }))
                        }
                        required
                      />
                    </div>
                    <div className="col-md-6">
                      <label className="form-label" htmlFor="edit_school_year_end">
                        End date
                      </label>
                      <input
                        id="edit_school_year_end"
                        className="form-control"
                        type="date"
                        value={editForm.end_date}
                        disabled={selectedYearReadOnly}
                        onChange={(event) =>
                          setEditForm((current) => ({ ...current, end_date: event.target.value }))
                        }
                        required
                      />
                    </div>
                  </div>
                  <div className="form-text mt-2">
                    Safe renames depend on whether finance and enrollment records already reference
                    the existing year label.
                  </div>
                  <button type="submit" className="btn btn-primary mt-3" disabled={busyEdit || selectedYearReadOnly}>
                    {busyEdit ? 'Saving…' : 'Save changes'}
                  </button>
                </form>
              )}
            </div>
          </div>

          <div className="card shadow-sm mb-4">
            <div className="card-body">
              <div className="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                <div>
                  <h2 className="h5 mb-1">Promotion And Balance Inspection</h2>
                  <div className="text-muted small">
                    Read-only previews for the selected year using the dedicated promotion and
                    parent-balance endpoints.
                  </div>
                </div>
                <div className="d-flex gap-2">
                  <button
                    type="button"
                    className="btn btn-outline-primary btn-sm"
                    disabled={!selectedYear}
                    onClick={() => void loadPromotionPreview()}
                  >
                    Load promotion preview
                  </button>
                  <button
                    type="button"
                    className="btn btn-outline-primary btn-sm"
                    disabled={!selectedYear}
                    onClick={() => void loadParentBalances()}
                  >
                    Load parent balances
                  </button>
                </div>
              </div>

              <div className="row g-4">
                <div className="col-lg-6">
                  <div className="border rounded p-3 h-100">
                    <h3 className="h6">Promotion preview</h3>
                    {!promotionPreview ? (
                      <p className="text-muted small mb-0">Not loaded yet.</p>
                    ) : (
                      <>
                        <div className="small text-muted mb-3">
                          {promotionPreview.summary.total_students} students scanned,{' '}
                          {promotionPreview.summary.hold} hold rows.
                        </div>
                        <div className="table-responsive">
                          <table className="table table-sm align-middle mb-0">
                            <thead>
                              <tr>
                                <th>Student</th>
                                <th>Current</th>
                                <th>Action</th>
                                <th>Target</th>
                              </tr>
                            </thead>
                            <tbody>
                              {promotionRows.length === 0 ? (
                                <tr>
                                  <td colSpan={4} className="text-muted">
                                    No rows found.
                                  </td>
                                </tr>
                              ) : (
                                promotionRows.slice(0, 8).map((row) => (
                                  <tr key={row.student_id}>
                                    <td>
                                      <div>{row.student_name}</div>
                                      {row.warnings?.length ? (
                                        <div className="small text-warning">
                                          {row.warnings.join('; ')}
                                        </div>
                                      ) : null}
                                    </td>
                                    <td>{row.current_grade ?? '—'}</td>
                                    <td>{row.promotion_action}</td>
                                    <td>{row.target_grade ?? '—'}</td>
                                  </tr>
                                ))
                              )}
                            </tbody>
                          </table>
                        </div>
                      </>
                    )}
                  </div>
                </div>

                <div className="col-lg-6">
                  <div className="border rounded p-3 h-100">
                    <h3 className="h6">Parent balance preview</h3>
                    {!parentBalances ? (
                      <p className="text-muted small mb-0">Not loaded yet.</p>
                    ) : (
                      <>
                        <div className="small text-muted mb-3">
                          Source year: {parentBalances.from_school_year}; target year: {parentBalances.to_school_year}.{' '}
                          Unpaid ${formatMoney(parentBalances.summary.total_positive_unpaid_balance ?? parentBalances.summary.total_old_unpaid_balance)},{' '}
                          credits ${formatMoney(parentBalances.summary.total_credit_balance)}, net ${formatMoney(parentBalances.summary.net_balance_impact ?? parentBalances.summary.net_balance_to_transfer)}.
                        </div>
                        <div className="table-responsive">
                          <table className="table table-sm align-middle mb-0">
                            <thead>
                              <tr>
                                <th>Parent</th>
                                <th>Students</th>
                                <th className="text-end">Unpaid</th>
                                <th className="text-end">Credits</th>
                                <th className="text-end">Net</th>
                                <th>Sources</th>
                                <th>Conflict</th>
                              </tr>
                            </thead>
                            <tbody>
                              {balanceRows.length === 0 ? (
                                <tr>
                                  <td colSpan={7} className="text-muted">
                                    No rows found.
                                  </td>
                                </tr>
                              ) : (
                                balanceRows.slice(0, 8).map((row) => (
                                  <tr key={row.parent_id}>
                                    <td>{row.parent_name || `Parent #${row.parent_id}`}</td>
                                    <td>{row.student_names?.join(', ') || '—'}</td>
                                    <td className="text-end">${formatMoney(row.positive_unpaid_balance ?? row.old_unpaid_balance)}</td>
                                    <td className="text-end">${formatMoney(row.credit_balance)}</td>
                                    <td className="text-end">${formatMoney(row.net_balance ?? row.amount_to_transfer)}</td>
                                    <td>{(row.positive_invoice_ids ?? row.source_invoice_ids ?? []).join(', ') || '—'}</td>
                                    <td>{row.existing_transfer_conflict ? <span className="badge text-bg-warning">Conflict</span> : '—'}</td>
                                  </tr>
                                ))
                              )}
                            </tbody>
                          </table>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="card shadow-sm">
            <div className="card-body">
              <div className="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                <div>
                  <h2 className="h5 mb-1">Close Selected Active Year</h2>
                  <div className="text-muted small">
                    Validate, preview, and close the inspected school year through the transactional
                    school-year closure endpoints. Only the current active year can be closed.
                  </div>
                </div>
                {selectedYearIsActive && selectedYear ? (
                  <span className="badge text-bg-success">{selectedYear.name}</span>
                ) : null}
              </div>

              {!selectedYear ? (
                <p className="text-muted mb-0">Select a school year to close it.</p>
              ) : !selectedYearIsActive ? (
                <div className="alert alert-info mb-0">
                  Only the current active school year can be closed. You are inspecting {selectedYear.name}, which is {selectedYear.status}.
                </div>
              ) : (
                <>
                <div className="row g-2 mb-3 small" aria-label="Close-year wizard steps">
                  {[
                    '1. New Year Details',
                    '2. Academic Promotion Preview',
                    '3. Financial Balance Preview',
                    '4. Validation Results',
                    '5. Confirmation',
                    '6. Completion Report',
                  ].map((step) => (
                    <div className="col-md-4" key={step}>
                      <div className="border rounded px-2 py-1 bg-light">{step}</div>
                    </div>
                  ))}
                </div>
                <form onSubmit={(event) => void handleClose(event)}>
                  <div className="row g-3">
                    <div className="col-md-4">
                      <label className="form-label" htmlFor="close_school_year_name">
                        New year name
                      </label>
                      <input
                        id="close_school_year_name"
                        className="form-control"
                        value={closeForm.name}
                        onChange={(event) =>
                          setCloseForm((current) => ({ ...current, name: event.target.value }))
                        }
                        required
                      />
                    </div>
                    <div className="col-md-4">
                      <label className="form-label" htmlFor="close_school_year_start">
                        New year start date
                      </label>
                      <input
                        id="close_school_year_start"
                        className="form-control"
                        type="date"
                        value={closeForm.start_date}
                        onChange={(event) =>
                          setCloseForm((current) => ({ ...current, start_date: event.target.value }))
                        }
                        required
                      />
                    </div>
                    <div className="col-md-4">
                      <label className="form-label" htmlFor="close_school_year_end">
                        New year end date
                      </label>
                      <input
                        id="close_school_year_end"
                        className="form-control"
                        type="date"
                        value={closeForm.end_date}
                        onChange={(event) =>
                          setCloseForm((current) => ({ ...current, end_date: event.target.value }))
                        }
                        required
                      />
                    </div>
                  </div>

                  <div className="row g-3 mt-0">
                    <div className="col-md-8">
                      <label className="form-label" htmlFor="close_school_year_confirmation">
                        Confirmation text
                      </label>
                      <input
                        id="close_school_year_confirmation"
                        className="form-control"
                        value={closeForm.confirmation}
                        onChange={(event) =>
                          setCloseForm((current) => ({
                            ...current,
                            confirmation: event.target.value,
                          }))
                        }
                        placeholder={requiredConfirmation}
                        required
                      />
                      <div className={confirmationMatches ? 'form-text' : 'form-text text-danger'}>
                        Type exactly <code>{requiredConfirmation}</code>. Button-click roulette is not a control.
                      </div>
                    </div>
                    <div className="col-md-4 d-flex align-items-end">
                      <div className="form-check mb-2">
                        <input
                          id="close_school_year_balances"
                          type="checkbox"
                          className="form-check-input"
                          checked={closeForm.transfer_unpaid_balances}
                          onChange={(event) =>
                            setCloseForm((current) => ({
                              ...current,
                              transfer_unpaid_balances: event.target.checked,
                            }))
                          }
                        />
                        <label className="form-check-label" htmlFor="close_school_year_balances">
                          Transfer unpaid balances
                        </label>
                      </div>
                    </div>
                  </div>

                  <div className="d-flex flex-wrap gap-2 mt-3">
                    <button
                      type="button"
                      className="btn btn-outline-primary"
                      disabled={busyCloseAction === 'validate' || !selectedYearIsActive}
                      onClick={() => void handleValidateClose()}
                    >
                      {busyCloseAction === 'validate' ? 'Validating…' : 'Validate'}
                    </button>
                    <button
                      type="button"
                      className="btn btn-outline-secondary"
                      disabled={busyCloseAction === 'preview' || !selectedYearIsActive}
                      onClick={() => void handlePreviewClose()}
                    >
                      {busyCloseAction === 'preview' ? 'Previewing…' : 'Preview'}
                    </button>
                    <button
                      type="submit"
                      className="btn btn-danger"
                      disabled={busyCloseAction === 'close' || !confirmationMatches || !selectedYearIsActive}
                    >
                      {busyCloseAction === 'close' ? 'Closing…' : `Close ${selectedYear.name}`}
                    </button>
                  </div>
                </form>
                </>
              )}

              {closeValidation ? (
                <div className={`alert mt-4 ${closeValidation.can_close ? 'alert-success' : 'alert-warning'}`}>
                  <div className="fw-semibold mb-2">
                    {closeValidation.can_close ? 'Closure validation passed.' : 'Closure is currently blocked.'}
                  </div>
                  <div className="row g-3 small">
                    <div className="col-md-3">
                      Students scanned: <strong>{closeValidation.promotion_summary.total_students}</strong>
                    </div>
                    <div className="col-md-3">
                      Missing decisions: <strong>{closeValidation.promotion_summary.hold}</strong>
                    </div>
                    <div className="col-md-3">
                      Unpaid carryover parents: <strong>{closeValidation.financial_summary.parents_with_positive_balance ?? closeValidation.financial_summary.parents_with_non_zero_balance}</strong>
                    </div>
                    <div className="col-md-3">
                      Net impact: <strong>${formatMoney(closeValidation.financial_summary.net_balance_impact ?? closeValidation.financial_summary.net_balance_to_transfer)}</strong>
                    </div>
                  </div>
                  {closeValidation.errors.length > 0 ? (
                    <ul className="mb-0 mt-3">
                      {closeValidation.errors.map((message) => (
                        <li key={message}>{message}</li>
                      ))}
                    </ul>
                  ) : null}
                  {closeValidation.warnings.length > 0 ? (
                    <ul className="mb-0 mt-3">
                      {closeValidation.warnings.map((message) => (
                        <li key={message}>{message}</li>
                      ))}
                    </ul>
                  ) : null}
                </div>
              ) : null}

              {closeResult ? (
                <div className="alert alert-success mt-4">
                  <div className="fw-semibold mb-2">Completion report</div>
                  <div className="row g-3 small">
                    <div className="col-md-6">Closed year: <strong>{closeResult.closed_school_year.name}</strong></div>
                    <div className="col-md-6">New active year: <strong>{closeResult.new_school_year.name}</strong></div>
                    <div className="col-md-6">Promotions: <strong>{Object.values(closeResult.promotion_counts ?? {}).reduce((sum, value) => sum + Number(value || 0), 0)}</strong></div>
                    <div className="col-md-6">Balance transfer rows: <strong>{Object.values(closeResult.balance_counts ?? {}).reduce((sum, value) => sum + Number(value || 0), 0)}</strong></div>
                  </div>
                </div>
              ) : null}

              {closePreview ? (
                <div className="mt-4">
                  <div className="row g-4">
                    <div className="col-lg-6">
                      <div className="border rounded p-3 h-100">
                        <h3 className="h6">Closure promotion preview</h3>
                        <div className="table-responsive">
                          <table className="table table-sm align-middle mb-0">
                            <thead>
                              <tr>
                                <th>Student</th>
                                <th>Action</th>
                                <th>Target</th>
                              </tr>
                            </thead>
                            <tbody>
                              {closePromotionRows.slice(0, 8).map((row) => (
                                <tr key={`close-${row.student_id}`}>
                                  <td>{row.student_name}</td>
                                  <td>{row.promotion_action}</td>
                                  <td>{row.target_grade ?? '—'}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                    <div className="col-lg-6">
                      <div className="border rounded p-3 h-100">
                        <h3 className="h6">Closure balance preview</h3>
                        <div className="small text-muted mb-2">
                          Source year: {closePreview.parent_balances.from_school_year}; target year: {closePreview.parent_balances.to_school_year}. Transfer mode: unpaid balances only.
                        </div>
                        <div className="table-responsive">
                          <table className="table table-sm align-middle mb-0">
                            <thead>
                              <tr>
                                <th>Parent</th>
                                <th>Students</th>
                                <th className="text-end">Unpaid</th>
                                <th className="text-end">Credits</th>
                                <th className="text-end">Net</th>
                                <th>Conflict</th>
                              </tr>
                            </thead>
                            <tbody>
                              {closeBalanceRows.slice(0, 8).map((row) => (
                                <tr key={`balance-${row.parent_id}`}>
                                  <td>{row.parent_name || `Parent #${row.parent_id}`}</td>
                                  <td>{row.student_names?.join(', ') || '—'}</td>
                                  <td className="text-end">${formatMoney(row.positive_unpaid_balance ?? row.old_unpaid_balance)}</td>
                                  <td className="text-end">${formatMoney(row.credit_balance)}</td>
                                  <td className="text-end">${formatMoney(row.net_balance ?? row.amount_to_transfer)}</td>
                                  <td>{row.existing_transfer_conflict ? <span className="badge text-bg-warning">Conflict</span> : '—'}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}