// 이 파일이 하는 일: "지금 어느 과정(수습용/초급/중급/고급/특급)을 보고 있나"를
// 앱 전체가 공유하는 컨텍스트. 헤더의 셀렉트 박스가 값을 바꾸고, 학습 센터가 값을 읽는다.
//
// 학습 포인트 ① — 왜 컨텍스트인가?
//   셀렉트 박스는 헤더(Layout)에 있고, 그 값을 쓰는 화면은 학습 센터(LearnHubPage)다.
//   둘은 부모-자식이 아니라서 props로 전달하려면 중간 계층을 전부 거쳐야 한다(prop drilling).
//   컨텍스트는 "전역 게시판"처럼 어디서든 읽고 쓸 수 있게 해 준다.
//
// 학습 포인트 ② — localStorage로 기억하기.
//   새로고침해도 선택한 과정이 유지되도록 localStorage에 저장한다.
//   (서버에 저장할 수도 있지만, "보고 있는 과정"은 기기별 취향이라 브라우저 저장이 알맞다.)
import { createContext, useContext, useState } from 'react';

/** 과정(트랙) 목록 — 셀렉트 박스의 선택지. key는 저장값, label은 표시명. */
export const TRACK_OPTIONS = [
  { key: 'trainee', label: '수습용' },
  { key: 'lv1', label: '초급' },
  { key: 'lv2', label: '중급' },
  { key: 'lv3', label: '고급' },
  { key: 'lv4', label: '특급' },
];

const STORAGE_KEY = 'mirim.track';

const TrackContext = createContext({ track: 'trainee', setTrack: () => {} });

export function TrackProvider({ children }) {
  const [track, setTrackState] = useState(() => {
    // 저장된 값이 유효한 트랙일 때만 복원 — 이상한 값이 들어 있어도 앱이 안 깨진다.
    const saved = localStorage.getItem(STORAGE_KEY);
    return TRACK_OPTIONS.some((t) => t.key === saved) ? saved : 'trainee';
  });

  function setTrack(next) {
    setTrackState(next);
    localStorage.setItem(STORAGE_KEY, next);
  }

  return <TrackContext.Provider value={{ track, setTrack }}>{children}</TrackContext.Provider>;
}

/** 어디서든 현재 과정을 읽고 바꾸는 훅. */
export function useTrack() {
  return useContext(TrackContext);
}
