// Progress dashboard — by teacher. Each teacher = a card with KPIs, trend
// sparkline, and two columns of "needs attention" + "doing well" students.

const ACard4 = window.ACard;
const ACardHeader4 = window.ACardHeader;
const ASparkline4 = window.ASparkline;

function AProgress({ branchId, lang }) {
  const t = lang === 'zh';
  const teachers = TL_TEACHER_PROGRESS;

  return (
    <div style={{ height: '100%', overflow: 'auto', background: '#F8F8F8' }} className="tl-noscroll">
      <div style={{ padding: '24px 28px 12px' }}>
        <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#A0A0A0' }}>
          {t ? '進度報告 · 尖沙咀分行' : 'Progress · Tsim Sha Tsui'}
        </div>
        <h1 style={{ fontFamily: TL_FONTS.serif, fontSize: 32, fontWeight: 500, lineHeight: 1.1, margin: '6px 0 4px', paddingBottom: 4, letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>
          {t ? <>每位學生的<em style={{ fontStyle: 'italic' }}>進度。</em></> : <>Every student's <em style={{ fontStyle: 'italic' }}>progress.</em></>}
        </h1>
        <div style={{ fontFamily: TL_FONTS.sans, fontSize: 13, color: '#333', maxWidth: 640 }}>
          {t ? '按老師檢視 · 用於與老師一對一檢討、家長會議、考試準備。' : 'By teacher — for 1:1 reviews, parent meetings, and exam prep planning.'}
        </div>
      </div>

      {/* Branch summary strip */}
      <div style={{ padding: '0 28px 16px' }}>
        <ACard4>
          <div style={{ padding: '16px 22px', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
            <PStat label={t ? '在學學生' : 'Active students'} val="247" />
            <PStat label={t ? '老師人數' : 'Teachers'} val="12" />
            <PStat label={t ? '平均技巧分' : 'Avg skill score'} val="3.6" sub="↑ +0.2 / qtr" accent />
            <PStat label={t ? '考試合格率' : 'Exam pass rate'} val="94%" sub={t ? '近 12 個月' : 'last 12mo'} />
            <PStat label={t ? '考試傑出率' : 'Distinction rate'} val="38%" />
            <PStat label={t ? '需要關注' : 'Needs attention'} val="11" sub={t ? '未進步 60 日' : 'flat ≥60d'} warn />
          </div>
        </ACard4>
      </div>

      {/* Teacher cards */}
      <div style={{ padding: '0 28px 32px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {teachers.map(tt => <TeacherProgressCard key={tt.id} tt={tt} t={t} />)}
      </div>
    </div>
  );
}

function TeacherProgressCard({ tt, t }) {
  const initials = tt.name.split(' ').map(w => w[0]).slice(-2).join('');
  const deltaUp = tt.skillDelta >= 0;
  return (
    <ACard4>
      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', minHeight: 200 }}>
        {/* LEFT: identity + KPIs */}
        <div style={{ padding: '18px 22px', borderRight: '1px solid rgba(20,20,20,0.06)', background: '#FAFAFA' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <div style={{
              width: 44, height: 44, background: '#141414', color: '#FFE003',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: TL_FONTS.serif, fontSize: 16, fontWeight: 500,
            }}>{initials}</div>
            <div>
              <div style={{ fontFamily: TL_FONTS.serif, fontSize: 17, fontWeight: 500, lineHeight: 1.15 }}>{tt.name}</div>
              <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: '#6B6B6B', letterSpacing: '0.06em', marginTop: 2 }}>{tt.subject}</div>
            </div>
          </div>

          <div style={{ marginBottom: 14 }}>
            <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#A0A0A0', marginBottom: 4 }}>
              {t ? '平均技巧分' : 'Avg skill'} · 6mo
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
              <span style={{ fontFamily: TL_FONTS.serif, fontSize: 30, fontWeight: 500, letterSpacing: '-0.01em' }}>{tt.avgSkill.toFixed(1)}</span>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 11, color: deltaUp ? '#1F7A37' : '#B14B4B' }}>
                {deltaUp ? '↑' : '↓'} {Math.abs(tt.skillDelta).toFixed(2)}
              </span>
            </div>
            {ASparkline4 && <ASparkline4 data={tt.trend} w={216} h={36} color="#141414" fill="#FFE003" />}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, paddingTop: 12, borderTop: '1px solid rgba(20,20,20,0.06)' }}>
            <MiniKpi label={t ? '學生' : 'Students'} val={tt.students} />
            <MiniKpi label={t ? '每週堂數' : 'Weekly'} val={tt.weeklyLessons} />
            <MiniKpi label={t ? '考試合格' : 'Exam pass'} val={`${Math.round(tt.examPassRate*100)}%`} />
            <MiniKpi label={t ? '手冊準時' : 'Handbook on-time'} val={`${Math.round(tt.handbookOnTime*100)}%`} />
            <MiniKpi label={t ? '家長已讀' : 'Parent open'} val={`${Math.round(tt.parentOpen*100)}%`} />
            <MiniKpi label={t ? '每學期曲目' : 'Pieces / term'} val={tt.avgPiecesPerTerm.toFixed(1)} />
          </div>
        </div>

        {/* RIGHT: students who need attention vs doing well */}
        <div style={{ padding: '18px 22px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          <StudentColumn
            kind="risk"
            title={t ? '需要關注' : 'Needs attention'}
            count={tt.flagged}
            students={tt.risk}
            t={t}
          />
          <StudentColumn
            kind="rise"
            title={t ? '進步顯著' : 'Doing well'}
            count={tt.risers}
            students={tt.rising}
            t={t}
          />
        </div>
      </div>
    </ACard4>
  );
}

function MiniKpi({ label, val }) {
  return (
    <div>
      <div style={{ fontFamily: TL_FONTS.mono, fontSize: 8.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#A0A0A0' }}>{label}</div>
      <div style={{ fontFamily: TL_FONTS.mono, fontSize: 13, color: '#141414', marginTop: 2, fontWeight: 500 }}>{val}</div>
    </div>
  );
}

function StudentColumn({ kind, title, count, students, t }) {
  const isRisk = kind === 'risk';
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid rgba(20,20,20,0.08)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 8, height: 8, background: isRisk ? '#B14B4B' : '#1F7A37' }} />
          <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#141414' }}>{title}</span>
        </div>
        <span style={{ fontFamily: TL_FONTS.serif, fontSize: 18, fontWeight: 500, color: isRisk && count > 0 ? '#B14B4B' : '#141414' }}>
          {count}
        </span>
      </div>
      {students.length === 0 ? (
        <div style={{ fontFamily: TL_FONTS.sans, fontSize: 11, color: '#A0A0A0', fontStyle: 'italic', padding: '14px 0' }}>
          {isRisk ? (t ? '所有學生進度正常。' : 'No students flagged.') : (t ? '本月暫無突出表現。' : 'No standouts this period.')}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {students.map((s, i) => (
            <div key={i} style={{
              padding: '10px 12px',
              background: isRisk ? 'rgba(177,75,75,0.06)' : 'rgba(31,122,55,0.06)',
              borderLeft: '2px solid ' + (isRisk ? '#B14B4B' : '#1F7A37'),
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: TL_FONTS.sans, fontSize: 12, fontWeight: 500, color: '#141414' }}>{s.name}</span>
                <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: '#6B6B6B', letterSpacing: '0.04em' }}>{s.id.toUpperCase()}</span>
              </div>
              <div style={{ fontFamily: TL_FONTS.sans, fontSize: 11, color: '#333', marginTop: 3, lineHeight: 1.4 }}>{s.why}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function PStat({ label, val, sub, accent, warn }) {
  return (
    <div>
      <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6B6B6B' }}>{label}</div>
      <div style={{ fontFamily: TL_FONTS.serif, fontSize: 28, fontWeight: 500, lineHeight: 1.1, marginTop: 4, letterSpacing: '-0.01em', color: warn ? '#B14B4B' : '#141414', whiteSpace: 'nowrap' }}>
        {accent && <span style={{ background: '#FFE003', padding: '0 6px', marginRight: 4 }}>{val}</span>}
        {!accent && val}
      </div>
      {sub && <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#6B6B6B', marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

window.AProgress = AProgress;