import { useEffect, useMemo, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import {
  fetchClassProgressGroups,
  fetchClassProgressMeta,
  fetchClassSections,
} from '../../api/session'
import type { ClassProgressGroupRow } from '../../api/types'
import { ClassProgressUnitDisplay } from './ClassProgressUnitDisplay'
import { formatProgressDate } from './classProgressUtils'

/** CI `admin/class_progress_list.php` — accordion by class section, filters, submission badges when API provides stats. */
export function ClassProgressListPage() {
  const [filters, setFilters] = useState({ weekStart: '', weekEnd: '', classSectionId: '', status: '' })
  const [subjectSections, setSubjectSections] = useState<Record<string, { label?: string; db_subject?: string }>>({})
  const [statusOptions, setStatusOptions] = useState<Record<string, string>>({})
  const [classSections, setClassSections] = useState<
    Array<{ class_section_id?: number | null; class_section_name?: string | null }>
  >([])
  const [items, setItems] = useState<ClassProgressGroupRow[]>([])
  const [error, setError] = useState<string | null>(null)
  const navigate = useNavigate()

  /** Server may later expose `low_progress_section_ids`; until then keep empty (CI disables button). */
  const lowProgressSectionIds: number[] = []

  const lowProgressQuery = lowProgressSectionIds.join(',')
  const lowProgressUrl =
    lowProgressQuery === ''
      ? '/app/administrator/teacher-submissions'
      : `/app/administrator/teacher-submissions?low_progress_sections=${encodeURIComponent(lowProgressQuery)}`

  async function load() {
    try {
      const [meta, sections, groups] = await Promise.all([
        fetchClassProgressMeta(),
        fetchClassSections({ perPage: 200, withStudents: true }),
        fetchClassProgressGroups({
          classSectionId: filters.classSectionId ? Number(filters.classSectionId) : null,
          status: filters.status || null,
          weekStart: filters.weekStart || null,
          weekEnd: filters.weekEnd || null,
          perPage: 200,
        }),
      ])
      setSubjectSections(meta.data?.subject_sections ?? {})
      setStatusOptions(meta.data?.status_options ?? {})
      setClassSections(sections.data?.sections ?? [])
      setItems(groups.data?.items ?? [])
      setError(null)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Unable to load class progress.')
    }
  }

  useEffect(() => {
    void load()
  }, [])

  const groupsBySection = useMemo(() => {
    const m = new Map<number, ClassProgressGroupRow[]>()
    for (const item of items) {
      const sid = Number(item.class_section_id ?? 0)
      if (!sid) continue
      const arr = m.get(sid) ?? []
      arr.push(item)
      m.set(sid, arr)
    }
    return m
  }, [items])

  const subjectCount = Object.keys(subjectSections).length

  function teacherLabelForGroup(group: ClassProgressGroupRow): string {
    const reports = group.reports ?? {}
    const teacherCounts: Record<string, number> = {}
    const teacherLatest: Record<string, string> = {}
    for (const report of Object.values(reports)) {
      const name = String(report?.teacher_name ?? '').trim()
      if (!name) continue
      teacherCounts[name] = (teacherCounts[name] ?? 0) + 1
      const stamp = String(report?.updated_at ?? report?.created_at ?? '')
      if (stamp !== '' && (!teacherLatest[name] || stamp > teacherLatest[name])) {
        teacherLatest[name] = stamp
      }
    }
    if (!Object.keys(teacherCounts).length) return '—'
    let bestName = ''
    let bestCount = -1
    let bestStamp = ''
    for (const [name, count] of Object.entries(teacherCounts)) {
      const stamp = teacherLatest[name] ?? ''
      if (count > bestCount || (count === bestCount && stamp > bestStamp)) {
        bestName = name
        bestCount = count
        bestStamp = stamp
      }
    }
    return bestName || '—'
  }

  return (
    <>
      <style>{`
        .admin-progress-table thead th {
          position: static !important;
          top: auto !important;
          z-index: auto !important;
          background: #f8f9fa;
          white-space: nowrap;
          line-height: 1.2;
          padding-top: .75rem;
          padding-bottom: .75rem;
        }
        .admin-progress-table td { vertical-align: top; }
        .bg-orange { background-color: #fd7e14 !important; }
      `}</style>
      <div className="container py-4">
        <div className="mb-4 pb-3 border-bottom">
          <div className="d-flex align-items-center justify-content-between">
            <div>
              <h3 className="mb-0">Class Progress Reports</h3>
              <div className="text-muted">Filter by week, class, and status</div>
            </div>
            <div>
              <Link
                className={`btn btn-sm btn-outline-warning${lowProgressSectionIds.length === 0 ? ' disabled' : ''}`}
                to={lowProgressUrl}
                aria-disabled={lowProgressSectionIds.length === 0}
                tabIndex={lowProgressSectionIds.length === 0 ? -1 : undefined}
                onClick={(e) => {
                  if (lowProgressSectionIds.length === 0) e.preventDefault()
                }}
              >
                Teachers &lt; 50%
              </Link>
            </div>
          </div>
        </div>

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

        <form
          className="card shadow-sm mb-3"
          onSubmit={(e) => {
            e.preventDefault()
            void load()
          }}
        >
          <div className="card-body">
            <div className="row g-3">
              <div className="col-md-3">
                <label className="form-label">From</label>
                <input
                  type="date"
                  className="form-control"
                  value={filters.weekStart}
                  onChange={(e) => setFilters((c) => ({ ...c, weekStart: e.target.value }))}
                />
              </div>
              <div className="col-md-3">
                <label className="form-label">To</label>
                <input
                  type="date"
                  className="form-control"
                  value={filters.weekEnd}
                  onChange={(e) => setFilters((c) => ({ ...c, weekEnd: e.target.value }))}
                />
              </div>
              <div className="col-md-3">
                <label className="form-label">Class/Section</label>
                <select
                  className="form-select"
                  value={filters.classSectionId}
                  onChange={(e) => setFilters((c) => ({ ...c, classSectionId: e.target.value }))}
                >
                  <option value="">All</option>
                  {classSections.map((section) => (
                    <option key={String(section.class_section_id ?? '')} value={section.class_section_id ?? ''}>
                      {section.class_section_name}
                    </option>
                  ))}
                </select>
              </div>
              <div className="col-md-3">
                <label className="form-label">Status</label>
                <select
                  className="form-select"
                  value={filters.status}
                  onChange={(e) => setFilters((c) => ({ ...c, status: e.target.value }))}
                >
                  <option value="">All</option>
                  {Object.entries(statusOptions).map(([value, label]) => (
                    <option key={value} value={value}>
                      {label}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div className="d-flex gap-2 mt-3">
              <button className="btn btn-primary" type="submit">
                Apply
              </button>
              <button
                className="btn btn-outline-secondary"
                type="button"
                onClick={() => {
                  setFilters({ weekStart: '', weekEnd: '', classSectionId: '', status: '' })
                  window.setTimeout(() => void load(), 0)
                }}
              >
                Reset
              </button>
            </div>
          </div>
        </form>

        <div className="card shadow-sm mt-5">
          <div className="card-body pt-4">
            {classSections.length === 0 ? (
              <div className="text-center text-muted py-4">No class sections found.</div>
            ) : (
              <div className="accordion" id="adminProgressAccordion">
                {classSections.map((cs) => {
                  const sectionId = Number(cs.class_section_id ?? 0)
                  const sectionName = cs.class_section_name ?? 'Unknown Section'
                  const sectionGroups = groupsBySection.get(sectionId) ?? []
                  const hasReports = sectionGroups.length > 0
                  const collapseId = `progress-section-${sectionId}`
                  const headingId = `progress-heading-${sectionId}`
                  const submissionLabel = 'Submitted: N/A'
                  const badgeClass = 'bg-secondary'
                  return (
                    <div className="accordion-item mb-2" key={sectionId || sectionName}>
                      <h2 className="accordion-header" id={headingId}>
                        <button
                          className="accordion-button collapsed"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target={`#${collapseId}`}
                          aria-expanded="false"
                          aria-controls={collapseId}
                        >
                          {sectionName}
                          <span className={`badge ${badgeClass} ms-2`}>{submissionLabel}</span>
                          <span className="badge bg-info text-dark ms-2">Units: {subjectCount}</span>
                          {hasReports ? (
                            <span className="badge bg-secondary ms-2">{sectionGroups.length} weeks</span>
                          ) : null}
                        </button>
                      </h2>
                      <div
                        id={collapseId}
                        className="accordion-collapse collapse"
                        aria-labelledby={headingId}
                        data-bs-parent="#adminProgressAccordion"
                      >
                        <div className="accordion-body">
                          {!hasReports ? (
                            <div className="text-muted">No reports found for this section.</div>
                          ) : (
                            <div className="table-responsive">
                              <table
                                className="table table-hover align-middle mb-0 admin-progress-table no-mgmt-sticky"
                                data-no-mgmt-sticky
                              >
                                <thead className="table-light">
                                  <tr>
                                    <th>Week</th>
                                    <th>Subjects</th>
                                    <th>Teacher</th>
                                    <th className="text-end">Action</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {sectionGroups.map((group, groupIndex) => {
                                    const reports = group.reports ?? {}
                                    const reportValues = Object.values(reports)
                                    const firstReport = reportValues[0]
                                    const exampleId = firstReport?.id
                                    const reportKey = reportValues
                                      .map((report) => String(report?.id ?? report?.subject ?? report?.teacher_name ?? ''))
                                      .filter(Boolean)
                                      .sort()
                                      .join('-')
                                    const weekLabel = `${formatProgressDate(group.week_start)} – ${formatProgressDate(group.week_end)}`
                                    return (
                                      <tr
                                        key={`${sectionId}-${group.week_start}-${group.week_end}-${reportKey || exampleId || 'group'}-${groupIndex}`}
                                      >
                                        <td>
                                          <div className="fw-semibold">{weekLabel}</div>
                                        </td>
                                        <td>
                                          <div className="d-flex flex-column gap-2">
                                            {Object.entries(subjectSections).map(([slug, section]) => {
                                              const subjectName = section.db_subject ?? section.label ?? slug
                                              const report = reports[subjectName]
                                              const statusTag = report
                                                ? (report.status_label ?? 'Unknown')
                                                : 'No entry'
                                              const badgeClassInner = report ? 'bg-secondary' : 'bg-light text-muted'
                                              return (
                                                <div key={slug} className="border rounded-3 p-2">
                                                  <div className="d-flex justify-content-between align-items-center">
                                                    <strong className="small mb-0">
                                                      {section.label ?? subjectName}
                                                    </strong>
                                                    <span className={`badge ${badgeClassInner}`}>{statusTag}</span>
                                                  </div>
                                                  <div className="small">
                                                    {report ? (
                                                      <ClassProgressUnitDisplay
                                                        unitTitle={report.unit_title}
                                                        isQuran={subjectName === 'Quran/Arabic'}
                                                        compact
                                                      />
                                                    ) : (
                                                      <span className="text-muted">No submission</span>
                                                    )}
                                                  </div>
                                                </div>
                                              )
                                            })}
                                          </div>
                                        </td>
                                        <td>{teacherLabelForGroup(group)}</td>
                                        <td className="text-end">
                                          {exampleId ? (
                                            <button
                                              className="btn btn-sm btn-outline-primary"
                                              type="button"
                                              onClick={() => navigate(`/app/admin/progress/view/${exampleId}`)}
                                            >
                                              View
                                            </button>
                                          ) : null}
                                        </td>
                                      </tr>
                                    )
                                  })}
                                </tbody>
                              </table>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  )
}
