// 이 파일이 하는 일: 멘토용 "기수(코호트) 분석 대시보드".
// 학생 카드 하나하나로는 안 보이는 "묶어서 본 그림"을 보여준다 —
//   기수 선택 → KPI(진도·퀴즈·코딩·리뷰대기), 관심 필요 학생, 어려운 지점(퀴즈·코딩).
//
// 학습 포인트: "총 코스 수"는 프론트 카탈로그의 지식이라 진도 %를 여기서 계산한다.
//   서버는 학생별 원자료(완료 수·점수·활동시각)만 주고, 카탈로그를 아는 화면이 %로 빚는다.
import { useEffect, useMemo, useState } from 'react';
import client from '../api/client';
import { ALL_COURSES } from '../courseCatalog';
import { LEVEL_COURSES } from '../levelCatalog';

const TOTAL_COURSES = ALL_COURSES.length + LEVEL_COURSES.length;
// 퀴즈 핫스팟은 서버가 slug만 주므로, 카탈로그로 사람이 읽는 제목을 붙인다.
const SLUG_TITLE = new Map(
  [...ALL_COURSES, ...LEVEL_COURSES].map((c) => [c.slug, c.title]),
);

function Kpi({ label, value, sub }) {
  return (
    <div className="card" style={{ textAlign: 'center' }}>
      <div style={{ fontSize: 26, fontWeight: 800, color: 'var(--primary)' }}>{value}</div>
      <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{label}</div>
      {sub && <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function daysLabel(d) {
  if (d == null) return '활동 없음';
  if (d === 0) return '오늘';
  return `${d}일 전`;
}

export default function MentorAnalytics() {
  const [cohort, setCohort] = useState('all');
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    const q = cohort === 'all' ? '' : `?cohort=${encodeURIComponent(cohort)}`;
    client
      .get(`/mentor/analytics${q}`)
      .then((res) => {
        if (!cancelled) {
          setData(res.data);
          setLoading(false);
        }
      })
      .catch(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [cohort]);

  const kpi = useMemo(() => {
    if (!data) return null;
    const rows = data.students;
    const n = rows.length;
    const avgCoursePct = n
      ? Math.round((rows.reduce((s, x) => s + x.coursesDone, 0) / n / TOTAL_COURSES) * 100)
      : 0;
    const quizzed = rows.filter((x) => x.quizAttempted > 0);
    const avgQuiz = quizzed.length
      ? Math.round(quizzed.reduce((s, x) => s + x.quizAvgPct, 0) / quizzed.length)
      : 0;
    const codingRate = n
      ? Math.round(
          (rows.reduce((s, x) => s + (x.codingTotal ? x.codingPassed / x.codingTotal : 0), 0) / n) * 100,
        )
      : 0;
    return { n, avgCoursePct, avgQuiz, quizzedCount: quizzed.length, codingRate };
  }, [data]);

  if (loading && !data) return <p className="empty">기수 분석을 불러오는 중...</p>;
  if (!data) return null;

  // 관심 필요: 활동이 없거나 7일 이상 조용한 학생 — 오래 조용한 순으로.
  const atRisk = data.students
    .filter((x) => x.daysSinceActive == null || x.daysSinceActive >= 7)
    .sort((a, b) => (b.daysSinceActive ?? 99999) - (a.daysSinceActive ?? 99999));

  const totalHead = data.cohorts.reduce((s, c) => s + c.count, 0);

  return (
    <div style={{ marginBottom: 26 }}>
      <div
        style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 8, marginBottom: 12,
        }}
      >
        <h2 className="section-title" style={{ margin: 0 }}>📊 기수 분석</h2>
        <select
          className="input"
          style={{ width: 'auto' }}
          value={cohort}
          onChange={(e) => setCohort(e.target.value)}
          aria-label="기수 선택"
        >
          <option value="all">전체 ({totalHead}명)</option>
          {data.cohorts.map((c) => (
            <option key={c.cohort} value={c.cohort}>{c.cohort}기 ({c.count}명)</option>
          ))}
        </select>
      </div>

      {/* KPI 카드 */}
      <div className="grid-cards" style={{ marginBottom: 18 }}>
        <Kpi label="학생" value={`${kpi.n}명`} />
        <Kpi label="평균 코스 진도" value={`${kpi.avgCoursePct}%`} sub={`총 ${TOTAL_COURSES}강좌 기준`} />
        <Kpi label="평균 퀴즈 점수" value={`${kpi.avgQuiz}%`} sub={`응시 ${kpi.quizzedCount}명`} />
        <Kpi label="코딩 통과율" value={`${kpi.codingRate}%`} />
        <Kpi label="리뷰 대기" value={`${data.pendingReviews}건`} />
      </div>

      {/* 관심 필요 학생 */}
      <h3 className="section-title" style={{ fontSize: 15 }}>🔔 관심 필요 (7일 넘게 활동 없음)</h3>
      {atRisk.length === 0 ? (
        <p className="empty">모두 최근에 활동했어요 👍</p>
      ) : (
        <div className="card" style={{ padding: 0, overflowX: 'auto', marginBottom: 18 }}>
          <table className="table table--nowrap" style={{ minWidth: 420 }}>
            <thead>
              <tr>
                <th>학생</th>
                <th>트랙</th>
                <th style={{ textAlign: 'center' }}>마지막 활동</th>
                <th style={{ textAlign: 'center' }}>완료 코스</th>
              </tr>
            </thead>
            <tbody>
              {atRisk.map((s) => (
                <tr key={s.userId}>
                  <td style={{ fontWeight: 600 }}>{s.name}</td>
                  <td>{s.track === 'DESIGN' ? '디자인' : '개발'}</td>
                  <td style={{ textAlign: 'center', color: s.daysSinceActive == null ? 'var(--rose)' : 'inherit' }}>
                    {daysLabel(s.daysSinceActive)}
                  </td>
                  <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>
                    {s.coursesDone} / {TOTAL_COURSES}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* 어려운 지점 — 퀴즈 / 코딩 */}
      <div className="grid-cards" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
        <div className="card">
          <h3 className="section-title" style={{ fontSize: 15, marginTop: 0 }}>🧩 어려운 퀴즈 (평균 낮은 순)</h3>
          {data.hardestQuizzes.length === 0 ? (
            <p className="empty">아직 퀴즈 응시 기록이 없어요.</p>
          ) : (
            <ul style={{ margin: 0, paddingLeft: 18 }}>
              {data.hardestQuizzes.map((q) => (
                <li key={q.courseSlug} style={{ marginBottom: 4 }}>
                  <span>{SLUG_TITLE.get(q.courseSlug) || q.courseSlug}</span>
                  {' — '}
                  <b style={{ color: q.avgScorePct < 60 ? 'var(--rose)' : 'var(--ink)' }}>{q.avgScorePct}%</b>
                  <span className="muted" style={{ fontSize: 12 }}> (응시 {q.attempts}명)</span>
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className="card">
          <h3 className="section-title" style={{ fontSize: 15, marginTop: 0 }}>💻 어려운 코딩 (통과율 낮은 순)</h3>
          {data.hardestCoding.length === 0 ? (
            <p className="empty">아직 코딩 제출 기록이 없어요.</p>
          ) : (
            <ul style={{ margin: 0, paddingLeft: 18 }}>
              {data.hardestCoding.map((c) => (
                <li key={c.problemId} style={{ marginBottom: 4 }}>
                  <span>{c.title}</span>
                  {' — '}
                  <b style={{ color: c.passRatePct < 60 ? 'var(--rose)' : 'var(--ink)' }}>{c.passRatePct}%</b>
                  <span className="muted" style={{ fontSize: 12 }}> (시도 {c.attempts}명)</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}
