// 이 파일이 하는 일: 학습 문서 전체 목록을 카테고리별로 묶어 카드로 보여준다.
// 카드를 클릭하면 /docs/:slug 뷰어로 이동한다.
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import client from '../api/client';
import Card from '../components/Card';
import Badge from '../components/Badge';

// 카테고리를 보여줄 순서와 한국어 제목
const CATEGORY_ORDER = [
  ['GUIDE', '가이드'],
  ['CURRICULUM', '커리큘럼'],
  ['PLAN', '운영 계획'],
  ['RUBRIC', '평가 기준'],
  ['LESSON', '수업 자료'],
  ['ASSIGNMENT', '과제 안내'],
  ['TICKET', '실무 티켓'],
];

export default function DocsPage() {
  const [documents, setDocuments] = useState([]);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    // 서버가 이미 권한(audience) 필터링을 해준다 — 학생에겐 멘토 문서가 안 온다.
    client
      .get('/documents')
      .then((res) => setDocuments(res.data))
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <p className="empty">불러오는 중...</p>;
  }

  // 학습 포인트: reduce 없이도 이렇게 소박한 반복문으로 그룹핑할 수 있다.
  const byCategory = new Map();
  for (const doc of documents) {
    if (!byCategory.has(doc.category)) byCategory.set(doc.category, []);
    byCategory.get(doc.category).push(doc);
  }
  // 각 그룹 안에서는 sortOrder 순으로 정렬
  for (const list of byCategory.values()) {
    list.sort((a, b) => a.sortOrder - b.sortOrder);
  }

  return (
    <div>
      <h1 className="page-title">학습 문서</h1>
      <p className="page-desc">수습 기간에 참고할 문서들이에요. 카드를 클릭하면 열립니다.</p>

      {CATEGORY_ORDER.map(([category, koreanTitle]) => {
        const docs = byCategory.get(category);
        if (!docs || docs.length === 0) return null;
        return (
          <div key={category}>
            <h2 className="section-title">{koreanTitle}</h2>
            <div className="grid-cards">
              {docs.map((doc) => (
                <Card key={doc.id} onClick={() => navigate(`/docs/${doc.slug}`)}>
                  <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
                    <Badge value={doc.category} />
                    {doc.week != null && (
                      <span className="badge badge-primary">{doc.week}주차</span>
                    )}
                  </div>
                  <div style={{ fontWeight: 700 }}>{doc.title}</div>
                </Card>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}
