/* ENSSA Reporting — District (Level 1) and School (Level 2). */

/* global React, Card, Eyebrow, KPI, Section, Btn, CSVExportButton, StatusBadge, TermSelector,
   RiskBreakdownStackedBar, RiskPyramid, RiskTransitionSankey, TaskBoxPlotPanel,
   allStudents, riskCountsOf, statusCountsOf, taskBoxStats, getMultiStageTransitions, TERM_DEFAULT */

function DistrictPage({ district, yearFilter, onOpenSchool }) {
  const [termBands, setTermBands] = React.useState(TERM_DEFAULT);
  const [termTask,  setTermTask]  = React.useState(TERM_DEFAULT);
  const dnode = { schools: district.schools };
  const counts = riskCountsOf(dnode, yearFilter);
  const transitions = getMultiStageTransitions(dnode, yearFilter);
  const stats = taskBoxStats(dnode, yearFilter);
  const status = statusCountsOf(dnode, yearFilter);
  const completedPct = status.total ? Math.round(status.completed / status.total * 100) : 0;

  return (
    <>
      <div data-stats-row style={{ display: 'flex', gap: 48, marginBottom: 32, flexWrap: 'wrap', borderBottom: '1px solid var(--border-subtle)', paddingBottom: 22 }}>
        <StatPill label="Schools" value={district.schools.length} />
        <StatPill label="Students" value={counts.total} />
        <StatPill label="Fully screened" value={`${completedPct}%`} sub={`${status.completed} of ${status.total}`} />
      </div>

      <Section title="Screener results" controls={<TermSelector value={termBands} onChange={setTermBands} />}>
        <Card><RiskPyramid counts={counts} /></Card>
      </Section>

      <Section title="Risk-band movement across terms">
        <Card><RiskTransitionSankey transitions={transitions} districtId={district.id} /></Card>
      </Section>

      <Section title="Task performance profile" controls={<TermSelector value={termTask} onChange={setTermTask} />}>
        <Card><TaskBoxPlotPanel stats={stats} /></Card>
      </Section>

      <Section title="Schools in this district">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 18 }}>
          {district.schools.map(s => {
            const sn = { classes: s.classes };
            const sc = riskCountsOf(sn, yearFilter);
            const status = statusCountsOf(sn, yearFilter);
            return (
              <Card key={s.id} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                  <div>
                    <h3 style={{ fontSize: 18, fontWeight: 700, margin: '4px 0 0' }}>{s.name}</h3>
                    <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>
                      {s.leader} · {sc.total} students · last administered {s.lastAdmin}
                    </div>
                  </div>
                  <Btn variant="ghost" onClick={() => onOpenSchool(s.id)}>Open →</Btn>
                </div>
                <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: 12, color: 'var(--fg-3)' }}>
                  <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><StatusBadge status="completed" /><span style={{ fontFamily: 'var(--font-mono)' }}>{status.completed}</span></span>
                  <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><StatusBadge status="partial" /><span style={{ fontFamily: 'var(--font-mono)' }}>{status.partial}</span></span>
                  <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><StatusBadge status="notstarted" /><span style={{ fontFamily: 'var(--font-mono)' }}>{status.notstarted}</span></span>
                </div>
                <RiskBreakdownStackedBar counts={sc} showLegend={false} />
              </Card>
            );
          })}
        </div>
      </Section>
    </>
  );
}

function SchoolPage({ school, district, yearFilter, onOpenClass }) {
  const [termBands, setTermBands] = React.useState(TERM_DEFAULT);
  const [termTask,  setTermTask]  = React.useState(TERM_DEFAULT);
  const sn = { classes: school.classes };
  const counts = riskCountsOf(sn, yearFilter);
  const transitions = getMultiStageTransitions(sn, yearFilter);
  const stats = taskBoxStats(sn, yearFilter);
  const status = statusCountsOf(sn, yearFilter);
  const completedPct = status.total ? Math.round(status.completed / status.total * 100) : 0;

  const classesBy = { F: [], Y1: [] };
  for (const c of school.classes) classesBy[c.year]?.push(c);

  return (
    <>
      <div data-stats-row style={{ display: 'flex', gap: 48, marginBottom: 32, flexWrap: 'wrap', borderBottom: '1px solid var(--border-subtle)', paddingBottom: 22 }}>
        <StatPill label="Classes" value={school.classes.filter(c => !yearFilter || c.year === yearFilter).length} />
        <StatPill label="Students" value={counts.total} />
        <StatPill label="Fully screened" value={`${completedPct}%`} sub={`${status.completed} of ${status.total}`} />
      </div>

      <Section title="Screener results" controls={<TermSelector value={termBands} onChange={setTermBands} />}>
        <Card><RiskPyramid counts={counts} /></Card>
      </Section>

      <Section title="Risk-band movement across terms">
        <Card><RiskTransitionSankey transitions={transitions} districtId={district ? district.id : null} schoolId={school.id} onOpenClass={onOpenClass} /></Card>
      </Section>

      <Section title="Task performance profile" controls={<TermSelector value={termTask} onChange={setTermTask} />}>
        <Card><TaskBoxPlotPanel stats={stats} /></Card>
      </Section>

      {(!yearFilter || yearFilter === 'F') && classesBy.F.length > 0 && (
        <Section title={classesBy.Y1.length > 0 ? 'Foundation classes' : 'Classes'}>
          <ClassCardGrid classes={classesBy.F} onOpenClass={onOpenClass} />
        </Section>
      )}
      {(!yearFilter || yearFilter === 'Y1') && classesBy.Y1.length > 0 && (
        <Section title={classesBy.F.length > 0 ? 'Year 1 classes' : 'Classes'}>
          <ClassCardGrid classes={classesBy.Y1} onOpenClass={onOpenClass} />
        </Section>
      )}
    </>
  );
}

function ClassCardGrid({ classes, onOpenClass }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
      {classes.map(c => {
        const cn = { students: c.students };
        const sc = riskCountsOf(cn);
        const status = statusCountsOf(cn);
        return (
          <Card key={c.id} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <h3 style={{ fontSize: 18, fontWeight: 700, margin: '4px 0 0' }}>{c.name}</h3>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>
                  {c.teacher} · {sc.total} students
                </div>
              </div>
              <Btn variant="ghost" onClick={() => onOpenClass(c.id)}>Open →</Btn>
            </div>
            <RiskBreakdownStackedBar counts={sc} showLegend={false} />
            <div style={{ display: 'flex', gap: 12, fontSize: 11, color: 'var(--fg-3)', flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}><StatusBadge status="completed" /><span style={{ fontFamily: 'var(--font-mono)' }}>{status.completed}</span></span>
              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}><StatusBadge status="partial" /><span style={{ fontFamily: 'var(--font-mono)' }}>{status.partial}</span></span>
              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}><StatusBadge status="notstarted" /><span style={{ fontFamily: 'var(--font-mono)' }}>{status.notstarted}</span></span>
            </div>
          </Card>
        );
      })}
    </div>
  );
}

Object.assign(window, { DistrictPage, SchoolPage });