import { useEffect, useMemo, useRef, useState } from 'react';
import { CheckCircle2, CirclePlay, Clock3, FileCode2, FileText, Loader2, Plus, RadioTower, Save, Target, Trash2, Upload, type LucideIcon } from 'lucide-react';
import { ConfirmDialog } from '../../components/ConfirmDialog';
import { PageHeader } from '../../components/PageHeader';
import { useToast } from '../../components/ToastProvider';
import { deleteCurriculumReference, deleteInstructorCurriculumWeek, getInstructorCurriculum, updateInstructorCurriculum, uploadCurriculumExampleCode, uploadCurriculumReference, type CurriculumWeek, type InstructorCurriculumResponse } from '../../lib/curriculum';
import { listInstructorGroups, type InstructorGroup } from '../../lib/groups';
import type { AuthSession } from '../../types/auth';

const CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX = 'lms-admin-curriculum-selected-group-id';

export function CurriculumPage({ session, selectedCourseId }: { session: AuthSession; selectedCourseId: string }) {
  const { showToast } = useToast();
  const [weeks, setWeeks] = useState<CurriculumWeek[]>([]);
  const [groups, setGroups] = useState<InstructorGroup[]>([]);
  const [selectedGroupId, setSelectedGroupId] = useState<string>('');
  const [activeWeek, setActiveWeek] = useState(1);
  const [activeLearningStep, setActiveLearningStep] = useState<string | null>(null);
  const [currentProgressWeek, setCurrentProgressWeek] = useState(1);
  const [currentProgressLearningStep, setCurrentProgressLearningStep] = useState<string | null>(null);
  const [draftTagLabel, setDraftTagLabel] = useState('');
  const [draftTitle, setDraftTitle] = useState('');
  const [draftDuration, setDraftDuration] = useState('');
  const [draftOverview, setDraftOverview] = useState('');
  const [draftDeliverable, setDraftDeliverable] = useState('');
  const [draftRequiresSourceSubmission, setDraftRequiresSourceSubmission] = useState(true);
  const [draftTopics, setDraftTopics] = useState<string[]>([]);
  const [draftTopicDetails, setDraftTopicDetails] = useState<string[]>([]);
  const [draftTopicVideoUrls, setDraftTopicVideoUrls] = useState<string[]>([]);
  const [draftTopicVideoEnabled, setDraftTopicVideoEnabled] = useState<boolean[]>([]);
  const [draftTopicConcepts, setDraftTopicConcepts] = useState<string[]>([]);
  const [draftPracticeContents, setDraftPracticeContents] = useState<Array<{ title: string; description: string }>>([]);
  const [moduleEnabledById, setModuleEnabledById] = useState<Record<string, boolean>>({});
  const [tagOptions, setTagOptions] = useState<NonNullable<InstructorCurriculumResponse['tagOptions']>>([]);
  const [visualizationPlatforms, setVisualizationPlatforms] = useState<NonNullable<InstructorCurriculumResponse['visualizationPlatforms']>>([]);
  const [visualizationEnabledByKey, setVisualizationEnabledByKey] = useState<Record<string, boolean>>({});
  const [referenceTitle, setReferenceTitle] = useState('');
  const [referenceFile, setReferenceFile] = useState<File | null>(null);
  const [exampleCodeTitle, setExampleCodeTitle] = useState('');
  const [exampleCodeFile, setExampleCodeFile] = useState<File | null>(null);
  const [activeTab, setActiveTab] = useState<'apply' | 'edit' | 'modules' | 'examples'>('apply');
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [completeConfirmOpen, setCompleteConfirmOpen] = useState(false);
  const referenceFileInputRef = useRef<HTMLInputElement>(null);
  const exampleCodeFileInputRef = useRef<HTMLInputElement>(null);
  const selectedWeek = useMemo(() => weeks.find((week) => week.week === activeWeek) ?? weeks[0] ?? null, [activeWeek, weeks]);
  const selectedGroup = useMemo(() => groups.find((group) => group.id === selectedGroupId) ?? null, [groups, selectedGroupId]);
  const hasGroups = groups.length > 0;
  const applyTabDisabled = !hasGroups;
  const selectedWeekCompleted = selectedWeek?.state === 'done';
  const primaryActionDisabled = saving || !selectedWeek || (activeTab === 'apply' && !selectedGroup);
  const selectedTopics = activeTab === 'edit' ? draftTopics : selectedWeek?.topics ?? [];
  const selectedTopicDetails = activeTab === 'edit' ? draftTopicDetails : selectedWeek?.detail.topicDetails ?? [];
  const selectedWeekDeletable = Boolean(selectedWeek?.tags.includes('추가'));
  const tagOptionLabels = useMemo(() => new Set(tagOptions.map((option) => option.label)), [tagOptions]);
  const selectedTagLabel = tagOptionLabels.has(draftTagLabel)
    ? draftTagLabel
    : tagOptions[0]?.label ?? '없음';
  const selectedGroupStorageKey = useMemo(
    () => `${CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX}:${session.user.id}:${selectedCourseId || 'default'}`,
    [selectedCourseId, session.user.id],
  );

  const resolveProgressSelection = (nextWeeks: CurriculumWeek[], setting: InstructorCurriculumResponse['setting']) => {
    const nextWeek = nextWeeks.find((week) => week.state === 'current')?.week
      ?? nextWeeks.find((week) => week.state !== 'done')?.week
      ?? setting?.activeWeek
      ?? nextWeeks[0]?.week
      ?? 1;
    const nextWeekData = nextWeeks.find((week) => week.week === nextWeek) ?? nextWeeks[0];
    return {
      week: nextWeek,
      learningStep: setting?.activeLearningStep ?? nextWeekData?.topics[0] ?? null,
    };
  };

  const selectProgressWeek = (nextWeeks = weeks, setting?: InstructorCurriculumResponse['setting'] | null) => {
    const progress = setting === undefined
      ? { week: currentProgressWeek, learningStep: currentProgressLearningStep }
      : resolveProgressSelection(nextWeeks, setting);
    const progressWeek = nextWeeks.find((week) => week.week === progress.week) ?? nextWeeks[0] ?? null;
    setActiveWeek(progressWeek?.week ?? progress.week);
    setActiveLearningStep(progress.learningStep ?? progressWeek?.topics[0] ?? null);
  };

  const applyPayload = (payload: InstructorCurriculumResponse, options: { selectProgress?: boolean } = {}) => {
    setError(null);
    setWeeks(payload.weeks);
    setTagOptions(payload.tagOptions ?? []);
    setVisualizationPlatforms(payload.visualizationPlatforms ?? []);
    const progress = resolveProgressSelection(payload.weeks, payload.setting);
    setCurrentProgressWeek(progress.week);
    setCurrentProgressLearningStep(progress.learningStep);
    if (options.selectProgress) {
      selectProgressWeek(payload.weeks, payload.setting);
    }
  };

  useEffect(() => {
    let cancelled = false;
    listInstructorGroups(session.accessToken, selectedCourseId || null)
      .then((payload) => {
        if (cancelled) return;
        setGroups(payload.groups);
        if (!payload.groups.length) {
          window.localStorage.removeItem(selectedGroupStorageKey);
        }
        setSelectedGroupId((current) => {
          if (payload.groups.some((group) => group.id === current)) return current;
          const storedGroupId = window.localStorage.getItem(selectedGroupStorageKey) ?? '';
          if (payload.groups.some((group) => group.id === storedGroupId)) return storedGroupId;
          return payload.groups[0]?.id || '';
        });
      })
      .catch((reason: Error) => {
        if (cancelled) return;
        setGroups([]);
        setError(reason.message);
      });

    return () => {
      cancelled = true;
    };
  }, [session.accessToken, selectedCourseId, selectedGroupStorageKey]);

  useEffect(() => {
    if (selectedGroupId) {
      window.localStorage.setItem(selectedGroupStorageKey, selectedGroupId);
    }
  }, [selectedGroupId, selectedGroupStorageKey]);

  useEffect(() => {
    let cancelled = false;
    getInstructorCurriculum(session.accessToken, selectedGroupId || null, selectedCourseId || null)
      .then((payload) => {
        if (!cancelled) applyPayload(payload, { selectProgress: true });
      })
      .catch((reason: Error) => {
        if (cancelled) return;
        setWeeks([]);
        setError(reason.message);
      });

    return () => {
      cancelled = true;
    };
  }, [session.accessToken, selectedGroupId, selectedCourseId]);

  useEffect(() => {
    if (!selectedWeek) return;
    setDraftTagLabel(selectedWeek.tags[0] ?? '');
    setDraftTitle(selectedWeek.title);
    setDraftDuration(selectedWeek.duration);
    setDraftOverview(selectedWeek.detail.overview);
    setDraftDeliverable(selectedWeek.detail.deliverable);
    setDraftRequiresSourceSubmission(selectedWeek.detail.requiresSourceSubmission ?? true);
    setDraftTopics(selectedWeek.topics.length ? selectedWeek.topics : ['']);
    setDraftTopicDetails(selectedWeek.detail.topicDetails.length ? selectedWeek.detail.topicDetails : ['']);
    const topicVideoUrls = selectedWeek.topics.map((_, index) => selectedWeek.detail.topicVideoUrls?.[index] ?? '');
    setDraftTopicVideoUrls(topicVideoUrls);
    setDraftTopicVideoEnabled(topicVideoUrls.map((url) => Boolean(url.trim())));
    setDraftTopicConcepts(selectedWeek.topics.map((_, index) => selectedWeek.detail.learningSteps?.[index]?.concepts?.join('\n') ?? ''));
    setDraftPracticeContents(selectedWeek.detail.practiceContents?.length ? selectedWeek.detail.practiceContents : []);
    setModuleEnabledById(Object.fromEntries((selectedWeek.modules ?? []).map((module) => [module.id, module.enabled !== false])));
    setVisualizationEnabledByKey(Object.fromEntries((selectedWeek.visualizationPlatforms ?? []).map((platform) => [platform.key, true])));
    setReferenceTitle('');
    setReferenceFile(null);
    setExampleCodeTitle('');
    setExampleCodeFile(null);
    if (referenceFileInputRef.current) referenceFileInputRef.current.value = '';
    if (exampleCodeFileInputRef.current) exampleCodeFileInputRef.current.value = '';
  }, [selectedWeek?.week]);

  useEffect(() => {
    if (!selectedWeek) return;
    if (!activeLearningStep || !selectedTopics.includes(activeLearningStep)) {
      setActiveLearningStep(selectedTopics[0] ?? null);
    }
  }, [activeLearningStep, selectedTopics, selectedWeek]);

  const buildDraftLearningSteps = () => draftTopics
    .map((topic, index) => {
      const title = topic.trim();
      const description = draftTopicDetails[index]?.trim() ?? '';
      const videoEnabled = draftTopicVideoEnabled[index] || Boolean(draftTopicVideoUrls[index]?.trim());
      const videoUrl = videoEnabled ? (draftTopicVideoUrls[index]?.trim() ?? '') : '';
      const concepts = (draftTopicConcepts[index] ?? '')
        .split('\n')
        .map((concept) => concept.trim())
        .filter(Boolean);
      return title || description || videoUrl || concepts.length
        ? { title, description, videoEnabled, videoUrl, concepts }
        : null;
    })
    .filter((step): step is { title: string; description: string; videoEnabled: boolean; videoUrl: string; concepts: string[] } => Boolean(step));

  const handleApply = async () => {
    if (!selectedWeek || !selectedGroup) return;
    setSaving(true);
    setError(null);

    try {
      const payload = await updateInstructorCurriculum(session.accessToken, {
        courseId: selectedCourseId || null,
        groupId: selectedGroupId || null,
        activeWeek: selectedWeek.week,
        activeLearningStep,
        applyToStudents: true,
        tagLabel: selectedTagLabel,
        title: draftTitle,
        duration: draftDuration,
        overview: draftOverview,
        deliverable: draftDeliverable,
        requiresSourceSubmission: draftRequiresSourceSubmission,
        topics: draftTopics.map((topic) => topic.trim()).filter(Boolean),
        learningSteps: buildDraftLearningSteps(),
        topicDetails: draftTopicDetails,
        topicVideoUrls: draftTopicVideoUrls.map((url, index) => draftTopicVideoEnabled[index] ? url.trim() : ''),
        practiceContents: draftPracticeContents,
      });
      applyPayload(payload, { selectProgress: true });
      showToast({
        title: '커리큘럼이 적용되었습니다.',
        message: `${selectedGroup.name} · ${selectedWeek.week}주차 · ${activeLearningStep ?? '학습단계 미선택'}`,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '커리큘럼을 적용하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleChangeGroup = (groupId: string) => {
    setSelectedGroupId(groupId);
    if (groupId) {
      window.localStorage.setItem(selectedGroupStorageKey, groupId);
    } else {
      window.localStorage.removeItem(selectedGroupStorageKey);
    }
  };

  const handleCompleteWeek = async () => {
    if (!selectedWeek || !selectedGroup) return;
    const topics = draftTopics.map((topic) => topic.trim()).filter(Boolean);
    const finalLearningStep = topics[topics.length - 1] ?? selectedWeek.topics[selectedWeek.topics.length - 1] ?? activeLearningStep;
    setSaving(true);
    setError(null);

    try {
      const payload = await updateInstructorCurriculum(session.accessToken, {
        courseId: selectedCourseId || null,
        groupId: selectedGroupId || null,
        activeWeek: selectedWeek.week,
        activeLearningStep: finalLearningStep,
        applyToStudents: true,
        completed: true,
        tagLabel: selectedTagLabel,
        title: draftTitle,
        duration: draftDuration,
        overview: draftOverview,
        deliverable: draftDeliverable,
        requiresSourceSubmission: draftRequiresSourceSubmission,
        topics,
        learningSteps: buildDraftLearningSteps(),
        topicDetails: draftTopicDetails,
        topicVideoUrls: draftTopicVideoUrls.map((url, index) => draftTopicVideoEnabled[index] ? url.trim() : ''),
        practiceContents: draftPracticeContents,
      });
      applyPayload(payload, { selectProgress: true });
      showToast({
        title: '주차가 완료되었습니다.',
        message: `${selectedGroup.name} · ${selectedWeek.week}주차`,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '주차를 완료하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleRequestCompleteWeek = () => {
    if (!selectedWeek || !selectedGroup) return;
    setCompleteConfirmOpen(true);
  };

  const handleSaveContent = async () => {
    if (!selectedWeek) return;
    setSaving(true);
    setError(null);

    try {
      const payload = await updateInstructorCurriculum(session.accessToken, {
        courseId: selectedCourseId || null,
        groupId: selectedGroupId || null,
        activeWeek: selectedWeek.week,
        activeLearningStep,
        applyToStudents: false,
        tagLabel: selectedTagLabel,
        title: draftTitle,
        duration: draftDuration,
        overview: draftOverview,
        deliverable: draftDeliverable,
        requiresSourceSubmission: draftRequiresSourceSubmission,
        topics: draftTopics.map((topic) => topic.trim()).filter(Boolean),
        learningSteps: buildDraftLearningSteps(),
        topicDetails: draftTopicDetails,
        topicVideoUrls: draftTopicVideoUrls.map((url, index) => draftTopicVideoEnabled[index] ? url.trim() : ''),
        practiceContents: draftPracticeContents,
      });
      applyPayload(payload);
      showToast({
        title: '커리큘럼 내용이 저장되었습니다.',
        message: `${selectedWeek.week}주차`,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '커리큘럼을 저장하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleSaveModules = async () => {
    if (!selectedWeek) return;
    setSaving(true);
    setError(null);

    try {
      const disabledModuleIds = (selectedWeek.modules ?? [])
        .filter((module) => moduleEnabledById[module.id] === false)
        .map((module) => module.id);
      const payload = await updateInstructorCurriculum(session.accessToken, {
        courseId: selectedCourseId || null,
        groupId: selectedGroupId || null,
        activeWeek: selectedWeek.week,
        activeLearningStep,
        applyToStudents: false,
        disabledModuleIds,
        visualizationPlatformKeys: visualizationPlatforms
          .filter((platform) => visualizationEnabledByKey[platform.key])
          .map((platform) => platform.key),
      });
      applyPayload(payload);
      setActiveWeek(selectedWeek.week);
      showToast({
        title: '모듈 설정이 저장되었습니다.',
        message: `${selectedWeek.week}주차`,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '모듈 설정을 저장하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleAddWeek = async () => {
    const nextWeek = Math.max(0, ...weeks.map((week) => week.week)) + 1;
    setSaving(true);
    setError(null);

    try {
      const payload = await updateInstructorCurriculum(session.accessToken, {
        courseId: selectedCourseId || null,
        groupId: selectedGroupId || null,
        activeWeek: nextWeek,
        activeLearningStep: '학습단계 1',
        applyToStudents: false,
        tagLabel: tagOptions[0]?.label ?? '없음',
        title: `${nextWeek}주차 커리큘럼`,
        duration: '-',
        overview: '',
        deliverable: '',
        requiresSourceSubmission: true,
        topics: ['학습단계 1'],
        learningSteps: [{ title: '학습단계 1', description: '', videoEnabled: false, videoUrl: '', concepts: [] }],
        topicDetails: [''],
        topicVideoUrls: [''],
        practiceContents: [],
      });
      applyPayload(payload);
      setActiveWeek(nextWeek);
      setActiveLearningStep('학습단계 1');
      setActiveTab('edit');
      showToast({
        title: '주차가 추가되었습니다.',
        message: `${nextWeek}주차`,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '주차를 추가하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteWeek = async () => {
    if (!selectedWeek || !selectedWeekDeletable) return;

    setSaving(true);
    setError(null);

    try {
      const payload = await deleteInstructorCurriculumWeek(session.accessToken, selectedWeek.week);
      applyPayload(payload, { selectProgress: true });
      showToast({
        title: '주차가 삭제되었습니다.',
        message: `${selectedWeek.week}주차`,
      });
      setDeleteConfirmOpen(false);
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '주차를 삭제하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleAddLearningStep = () => {
    const nextIndex = draftTopics.length + 1;
    const nextTopic = `학습단계 ${nextIndex}`;
    setDraftTopics((current) => [...current, nextTopic]);
    setDraftTopicDetails((current) => [...current, '']);
    setDraftTopicVideoUrls((current) => [...current, '']);
    setDraftTopicVideoEnabled((current) => [...current, false]);
    setDraftTopicConcepts((current) => [...current, '']);
  };

  const handleDeleteLearningStep = (index: number) => {
    setDraftTopics((currentTopics) => {
      const removedTopic = currentTopics[index];
      const nextTopics = currentTopics.filter((_, topicIndex) => topicIndex !== index);
      setActiveLearningStep((currentStep) => {
        if (currentStep && currentStep !== removedTopic && nextTopics.includes(currentStep)) return currentStep;
        return nextTopics[Math.min(index, nextTopics.length - 1)] ?? null;
      });
      return nextTopics;
    });
    setDraftTopicDetails((currentDetails) => currentDetails.filter((_, detailIndex) => detailIndex !== index));
    setDraftTopicVideoUrls((currentUrls) => currentUrls.filter((_, urlIndex) => urlIndex !== index));
    setDraftTopicVideoEnabled((currentEnabled) => currentEnabled.filter((_, enabledIndex) => enabledIndex !== index));
    setDraftTopicConcepts((currentConcepts) => currentConcepts.filter((_, conceptIndex) => conceptIndex !== index));
  };

  const handleAddPracticeContent = () => {
    setDraftPracticeContents((current) => [...current, { title: '', description: '' }]);
  };

  const handleUpdatePracticeContent = (index: number, field: 'title' | 'description', value: string) => {
    setDraftPracticeContents((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, [field]: value } : item));
  };

  const handleDeletePracticeContent = (index: number) => {
    setDraftPracticeContents((current) => current.filter((_, itemIndex) => itemIndex !== index));
  };

  const handleUploadReference = async () => {
    if (!selectedWeek || !referenceFile) return;
    setSaving(true);
    setError(null);

    try {
      const payload = await uploadCurriculumReference(session.accessToken, {
        courseId: selectedCourseId || null,
        week: selectedWeek.week,
        title: referenceTitle,
        file: referenceFile,
      });
      applyPayload(payload);
      setActiveWeek(selectedWeek.week);
      setReferenceTitle('');
      setReferenceFile(null);
      if (referenceFileInputRef.current) referenceFileInputRef.current.value = '';
      showToast({
        title: '참고자료가 업로드되었습니다.',
        message: referenceFile.name,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '참고자료를 업로드하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleUploadExampleCode = async () => {
    if (!selectedWeek || !exampleCodeFile) return;
    setSaving(true);
    setError(null);

    try {
      const payload = await uploadCurriculumExampleCode(session.accessToken, {
        courseId: selectedCourseId || null,
        week: selectedWeek.week,
        title: exampleCodeTitle,
        file: exampleCodeFile,
      });
      applyPayload(payload);
      setActiveWeek(selectedWeek.week);
      setExampleCodeTitle('');
      setExampleCodeFile(null);
      if (exampleCodeFileInputRef.current) exampleCodeFileInputRef.current.value = '';
      showToast({
        title: '예제 코드가 업로드되었습니다.',
        message: exampleCodeFile.name,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : '예제 코드를 업로드하지 못했습니다.');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteReference = async (referenceId: string, label = '참고자료') => {
    if (!selectedWeek) return;
    setSaving(true);
    setError(null);

    try {
      const payload = await deleteCurriculumReference(session.accessToken, referenceId, selectedCourseId || null);
      applyPayload(payload);
      setActiveWeek(selectedWeek.week);
      showToast({
        title: `${label}가 삭제되었습니다.`,
        message: `${selectedWeek.week}주차`,
      });
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : `${label}를 삭제하지 못했습니다.`);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="mx-auto max-w-[1220px]">
      <PageHeader route="curriculum" />

      <section className="mb-4 grid gap-3 md:grid-cols-3">
        <SummaryCard label="선택 그룹" value={selectedGroup?.name ?? '등록된 그룹 없음'} icon={Target} />
        <SummaryCard label="현재 진행 주차" value={currentProgressWeek ? `${currentProgressWeek}주차` : '-'} icon={RadioTower} />
        <SummaryCard label="현재 학습단계" value={currentProgressLearningStep ?? '-'} icon={Target} />
      </section>

      {error ? (
        <div className="mb-4 rounded-lg border border-[#fecdd3] bg-[#fff1f2] px-4 py-3 text-[13px] font-bold text-[#e11d48]">{error}</div>
      ) : null}

      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-3">
          <div className="inline-flex rounded-lg border border-[#cbd5e1] bg-white p-1 shadow-sm">
            <button
              type="button"
              disabled={applyTabDisabled}
              className={`h-8 rounded-md px-4 text-[13px] font-black transition disabled:cursor-not-allowed disabled:opacity-45 ${activeTab === 'apply' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
              onClick={() => {
                if (applyTabDisabled) return;
                setActiveTab('apply');
                selectProgressWeek();
              }}
            >
              강의 진행
            </button>
            <button
              type="button"
              className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'edit' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
              onClick={() => setActiveTab('edit')}
            >
              내용 편집
            </button>
            <button
              type="button"
              className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'modules' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
              onClick={() => setActiveTab('modules')}
            >
              모듈 관리
            </button>
            <button
              type="button"
              className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'examples' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
              onClick={() => setActiveTab('examples')}
            >
              예제 코드
            </button>
          </div>
          <select
            className="h-10 min-w-[190px] rounded-md border border-[#cbd5e1] bg-white px-3 text-[13px] font-bold text-[#111827] shadow-sm outline-none transition hover:border-[#94a3b8] focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe] disabled:border-[#d1d9e6] disabled:bg-[#f8fafc] disabled:text-[#94a3b8]"
            value={selectedGroupId}
            onChange={(event) => handleChangeGroup(event.target.value)}
            disabled={saving || !hasGroups}
          >
            {groups.length ? groups.map((group) => (
              <option key={group.id} value={group.id}>{group.name}</option>
            )) : (
              <option value="">등록된 그룹 없음</option>
            )}
          </select>
        </div>
        <div className="flex items-center gap-2">
          {activeTab !== 'examples' && !(activeTab === 'apply' && selectedWeekCompleted) ? (
            <button className="inline-flex h-10 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={() => void (activeTab === 'apply' ? handleApply() : activeTab === 'modules' ? handleSaveModules() : handleSaveContent())} disabled={primaryActionDisabled}>
              {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : activeTab === 'apply' ? <CirclePlay size={15} aria-hidden="true" /> : <Save size={15} aria-hidden="true" />}
              {activeTab === 'apply' ? '진행하기' : activeTab === 'modules' ? '모듈 저장' : '내용 저장'}
            </button>
          ) : null}
          {activeTab === 'apply' ? (
            <button className="inline-flex h-10 items-center gap-2 rounded-md border border-[#2fbda0] bg-white px-4 text-[13px] font-bold text-[#178c78] transition hover:bg-[#effbf7] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={handleRequestCompleteWeek} disabled={primaryActionDisabled || selectedWeekCompleted}>
              {saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <CheckCircle2 size={15} aria-hidden="true" />}
              완료처리
            </button>
          ) : null}
        </div>
      </div>

      <section className="grid items-start gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
        <div className="rounded-lg border border-[#c7d2e0] bg-white">
          <div className="border-b border-[#cbd5e1] px-4 py-3">
            <h2 className="text-[15px] font-black text-[#111827]">주차별 커리큘럼</h2>
            <p className="mt-1 text-[12px] font-bold text-[#64748b]">강사가 선택한 주차가 학생 앱에서 자동 선택됩니다.</p>
          </div>
          <div className="p-3">
            {weeks.length ? (
              weeks.map((week) => {
                const completed = week.state === 'done';
                return (
                  <button
                    key={week.week}
                    type="button"
                    className={`mb-2 w-full rounded-lg border px-4 py-3 text-left transition last:mb-0 ${
                      week.week === activeWeek
                        ? 'border-[#2563eb] bg-[#eff6ff] shadow-[0_12px_28px_rgba(37,99,235,0.12)]'
                        : 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]'
                    }`}
                    onClick={() => {
                      setActiveWeek(week.week);
                      setActiveLearningStep(week.topics[0] ?? null);
                    }}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <p className="text-[12px] font-black text-[#4f46e5]">{week.week}주차</p>
                        <h3 className="mt-1 truncate text-[14px] font-black text-[#111827]">{week.title}</h3>
                        <p className="mt-2 line-clamp-2 text-[12px] font-semibold leading-relaxed text-[#64748b]">{week.detail.overview}</p>
                      </div>
                      {week.week === activeWeek ? <CheckCircle2 className="shrink-0 text-[#2563eb]" size={18} aria-hidden="true" /> : null}
                      {completed ? <span className="shrink-0 rounded-md bg-[#e2e8f0] px-2 py-1 text-[11px] font-black text-[#64748b]">완료</span> : null}
                    </div>
                  </button>
                );
              })
            ) : (
              <div className="grid h-[220px] place-items-center text-center">
                <p className="text-[13px] font-bold text-[#64748b]">등록된 커리큘럼이 없습니다.</p>
              </div>
            )}
            {activeTab === 'edit' ? (
              <button
                type="button"
                className="mt-2 flex min-h-[104px] w-full items-center justify-center gap-2 rounded-lg border border-dashed border-[#b7c4d8] bg-[#f8fafc] px-4 py-3 text-[13px] font-black text-[#64748b] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb] disabled:cursor-not-allowed disabled:opacity-60"
                onClick={() => void handleAddWeek()}
                disabled={saving}
              >
                {saving ? <Loader2 className="animate-spin" size={16} aria-hidden="true" /> : <Plus size={16} aria-hidden="true" />}
                추가
              </button>
            ) : null}
          </div>
        </div>

        <div className="rounded-lg border border-[#c7d2e0] bg-white">
          <div className="border-b border-[#cbd5e1] px-5 py-4">
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <p className="text-[12px] font-black text-[#4f46e5]">{selectedWeek ? `${selectedWeek.week}주차` : '-'}</p>
                <h2 className="mt-1 truncate text-[18px] font-black text-[#111827]">{draftTitle || selectedWeek?.title || '커리큘럼 없음'}</h2>
              </div>
              {activeTab === 'edit' ? (
                <button
                  type="button"
                  onClick={() => setDeleteConfirmOpen(true)}
                  disabled={saving || !selectedWeekDeletable}
                  title={selectedWeekDeletable ? '선택한 추가 주차 삭제' : '기본 커리큘럼 주차는 삭제할 수 없습니다'}
                  className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md border border-[#fecdd3] bg-white px-3 text-[12px] font-black text-[#e11d48] transition hover:bg-[#fff1f2] disabled:cursor-not-allowed disabled:border-[#cbd5e1] disabled:text-[#94a3b8] disabled:hover:bg-white"
                >
                  {saving ? <Loader2 className="animate-spin" size={14} aria-hidden="true" /> : <Trash2 size={14} aria-hidden="true" />}
                  삭제
                </button>
              ) : null}
            </div>
	          </div>

	          {activeTab === 'apply' ? (
              !hasGroups ? (
                <div className="grid min-h-[360px] place-items-center p-5 text-center">
                  <div>
                    <h3 className="text-[16px] font-black text-[#111827]">등록된 그룹이 없습니다</h3>
                    <p className="mt-2 text-[13px] font-bold leading-relaxed text-[#64748b]">
                      강의 진행을 적용하려면 먼저 그룹을 생성해 주세요.
                    </p>
                  </div>
                </div>
              ) : (
	            <div className="grid gap-4 p-5">
              <section>
                <h3 className="text-[15px] font-black text-[#111827]">현재 진행 학습단계</h3>
                <div className="mt-3 grid gap-2">
                  {selectedTopics.length ? (
                    selectedTopics.map((topic, index) => {
                      const selected = topic === activeLearningStep;
                      return (
                        <button
                          key={`${selectedWeek?.week}-apply-${index}`}
                          type="button"
                          disabled={selectedWeekCompleted}
                          className={`flex items-start gap-3 rounded-lg border px-4 py-3 text-left transition disabled:cursor-default ${
                            selected
                              ? selectedWeekCompleted
                                ? 'border-[#d1d9e6] bg-[#f8fafc]'
                                : 'border-[#4f46e5] bg-[#f0efff]'
                              : selectedWeekCompleted
                                ? 'border-[#cbd5e1] bg-white'
                                : 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]'
                          }`}
                          onClick={() => {
                            if (selectedWeekCompleted) return;
                            setActiveLearningStep(topic);
                          }}
                        >
                          <span className={`grid h-7 w-7 shrink-0 place-items-center rounded-md text-[12px] font-black ${selected && !selectedWeekCompleted ? 'bg-[#4f46e5] text-white' : 'bg-[#f1f5f9] text-[#64748b]'}`}>{index + 1}</span>
                          <span className="min-w-0">
                            <span className="block text-[14px] font-black text-[#111827]">{topic}</span>
                            <span className="mt-1 block text-[12px] font-semibold leading-relaxed text-[#64748b]">{selectedTopicDetails[index] ?? ''}</span>
                          </span>
                        </button>
                      );
                    })
                  ) : (
                    <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-8 text-center text-[13px] font-bold text-[#64748b]">학습단계가 없습니다.</p>
                  )}
                </div>
	              </section>
	            </div>
              )
	          ) : activeTab === 'modules' ? (
          <div className="grid gap-4 p-5">
            <section>
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h3 className="text-[15px] font-black text-[#111827]">모듈 관리</h3>
                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">체크된 모듈만 학생 앱의 모듈 리스트에 표시됩니다.</p>
                </div>
                {selectedWeek?.modules?.length ? (
                  <span className="rounded-md bg-[#eff6ff] px-3 py-1.5 text-[12px] font-black text-[#2563eb]">
                    {(selectedWeek.modules ?? []).filter((module) => moduleEnabledById[module.id] !== false).length}/{selectedWeek.modules.length}
                  </span>
                ) : null}
              </div>
              <div className="mt-3 grid gap-2">
                {selectedWeek?.modules?.length ? selectedWeek.modules.map((module) => {
                  const enabled = moduleEnabledById[module.id] !== false;
                  return (
                    <label
                      key={module.id}
                      className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-70 hover:bg-[#f1f5f9]'}`}
                    >
                      <input
                        type="checkbox"
                        className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
                        checked={enabled}
                        onChange={(event) => {
                          const checked = event.target.checked;
                          setModuleEnabledById((current) => ({ ...current, [module.id]: checked }));
                        }}
                      />
                      <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{module.sortOrder}</span>
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-[14px] font-black text-[#111827]">{module.name}</span>
                        <span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{module.category} · {module.folderName}</span>
                      </span>
                      <span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
                        {enabled ? '사용' : '미사용'}
                      </span>
                    </label>
                  );
                }) : (
                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 모듈이 없습니다.</p>
                )}
              </div>
            </section>
            <section className="border-t border-[#cbd5e1] pt-4">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h3 className="text-[15px] font-black text-[#111827]">시각화 플랫폼</h3>
                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">시각화 화면을 사용할 플랫폼을 선택하세요.</p>
                </div>
                {visualizationPlatforms.length ? (
                  <span className="rounded-md bg-[#f1f5f9] px-3 py-1.5 text-[12px] font-black text-[#475569]">
                    {visualizationPlatforms.filter((platform) => visualizationEnabledByKey[platform.key]).length}/{visualizationPlatforms.length}
                  </span>
                ) : null}
              </div>
              <div className="mt-3 grid gap-2">
                {visualizationPlatforms.length ? visualizationPlatforms.map((platform) => {
                  const enabled = Boolean(visualizationEnabledByKey[platform.key]);
                  return (
                    <label
                      key={platform.key}
                      className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-75 hover:bg-[#f1f5f9]'}`}
                    >
                      <input
                        type="checkbox"
                        className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
                        checked={enabled}
                        onChange={(event) => {
                          const checked = event.target.checked;
                          setVisualizationEnabledByKey((current) => ({ ...current, [platform.key]: checked }));
                        }}
                      />
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-[14px] font-black text-[#111827]">{platform.displayName}</span>
                        <span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{platform.description ?? '실행 설정 정보 없음'}</span>
                      </span>
                      <span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
                        {enabled ? '사용' : '미사용'}
                      </span>
                    </label>
                  );
                }) : (
                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 시각화 플랫폼이 없습니다.</p>
                )}
              </div>
            </section>
          </div>
	          ) : activeTab === 'examples' ? (
          <div className="grid gap-4 p-5">
            <section>
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h3 className="text-[15px] font-black text-[#111827]">예제 코드</h3>
                  <p className="mt-1 text-[12px] font-bold text-[#64748b]">학생 앱의 예제 코드 화면에 표시할 주차별 파일을 업로드합니다.</p>
                </div>
                <button
                  type="button"
                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
                  onClick={() => exampleCodeFileInputRef.current?.click()}
                >
                  <FileText size={14} aria-hidden="true" />
                  파일 선택
                </button>
              </div>

              <input
                ref={exampleCodeFileInputRef}
                type="file"
                className="hidden"
                onChange={(event) => {
                  const file = event.target.files?.[0] ?? null;
                  setExampleCodeFile(file);
                  if (file && !exampleCodeTitle.trim()) setExampleCodeTitle(file.name);
                }}
              />

              <div className="mt-3 grid gap-2 rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
                <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
                  <input
                    className="h-10 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
                    value={exampleCodeTitle}
                    placeholder="파일 표시명"
                    onChange={(event) => setExampleCodeTitle(event.target.value)}
                  />
                  <div className="flex h-10 min-w-0 items-center rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-bold text-[#64748b]">
                    <span className="truncate">{exampleCodeFile?.name ?? '선택된 파일 없음'}</span>
                  </div>
                  <button
                    type="button"
                    disabled={saving || !exampleCodeFile}
                    onClick={() => void handleUploadExampleCode()}
                    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-md bg-[#2563eb] px-4 text-[13px] font-black text-white transition hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-45"
                  >
                    {saving ? <Loader2 className="animate-spin" size={14} aria-hidden="true" /> : <Upload size={14} aria-hidden="true" />}
                    업로드
                  </button>
                </div>

                <div className="grid gap-2">
                  {selectedWeek.detail.exampleCodes?.length ? selectedWeek.detail.exampleCodes.map((example) => (
                    <div key={example.id} className="flex items-center gap-3 rounded-md border border-[#cbd5e1] bg-white px-3 py-2">
                      <FileCode2 className="shrink-0 text-[#64748b]" size={16} aria-hidden="true" />
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-[13px] font-black text-[#111827]">{example.title}</p>
                        <p className="mt-0.5 truncate text-[11px] font-bold text-[#64748b]">
                          {example.fileName}
                          {example.fileSizeBytes ? ` · ${formatFileSize(Number(example.fileSizeBytes))}` : ''}
                        </p>
                      </div>
                      <button
                        type="button"
                        disabled={saving}
                        onClick={() => void handleDeleteReference(example.id, '예제 코드')}
                        className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48] disabled:cursor-not-allowed disabled:opacity-45"
                        aria-label={`${example.title} 삭제`}
                        title="예제 코드 삭제"
                      >
                        <Trash2 size={14} aria-hidden="true" />
                      </button>
                    </div>
                  )) : (
                    <p className="rounded-md border border-dashed border-[#d1d9e6] bg-white px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 예제 코드가 없습니다.</p>
                  )}
                </div>
              </div>
            </section>
          </div>
	          ) : (
          <div className="grid gap-4 p-5">
            <section className="grid gap-3 pb-2">
              <label className="block">
                <span className="text-[12px] font-black text-[#475569]">주차 제목</span>
                <input
                  className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
                  value={draftTitle}
                  onChange={(event) => setDraftTitle(event.target.value)}
                />
              </label>
              <label className="block">
                <span className="text-[12px] font-black text-[#475569]">플랫폼 배지</span>
                <select
                  className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
                  value={selectedTagLabel}
                  onChange={(event) => setDraftTagLabel(event.target.value)}
                >
                  {tagOptions.length ? tagOptions.map((option) => (
                    <option key={option.key} value={option.label}>{option.label}</option>
                  )) : (
                    <option value="없음">없음</option>
                  )}
                </select>
              </label>
              <label className="block h-[100px]">
                <span className="text-[12px] font-black text-[#475569]">주차 개요</span>
                <textarea
                  className="mt-1.5 h-[76px] w-full resize-none rounded-md border border-[#d1d9e6] bg-white px-3 pb-0 pt-2 text-[13px] font-semibold leading-relaxed text-[#111827] outline-none focus:border-[#2563eb]"
                  value={draftOverview}
                  onChange={(event) => setDraftOverview(event.target.value)}
                />
              </label>
              <label className="block">
                <span className="text-[12px] font-black text-[#475569]">예상 학습 시간</span>
                <input
                  className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
                  value={draftDuration}
                  placeholder="예: 8-10시간"
                  onChange={(event) => setDraftDuration(event.target.value)}
                />
              </label>
            </section>

            <section>
              <div className="flex items-center justify-between gap-3">
                <h3 className="text-[15px] font-black text-[#111827]">학습단계</h3>
                <button
                  type="button"
                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
                  onClick={handleAddLearningStep}
                >
                  <Plus size={14} aria-hidden="true" />
                  추가
                </button>
              </div>
              <div className="mt-3 grid gap-2">
                {selectedTopics.length ? (
                  selectedTopics.map((topic, index) => (
                    <div
                      key={`${selectedWeek?.week}-${index}`}
                      className="flex items-start gap-3 rounded-lg border border-[#d1d9e6] bg-white px-4 py-3 text-left transition hover:bg-[#f8fafc]"
                    >
                      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-[#f1f5f9] text-[12px] font-black text-[#64748b]">
                        {index + 1}
                      </span>
                      <span className="grid min-w-0 flex-1 gap-2">
                        <input
                          className="h-9 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-black text-[#111827] outline-none focus:border-[#2563eb]"
                          value={topic}
                          placeholder="제목"
                          onChange={(event) => {
                            const next = [...draftTopics];
                            next[index] = event.target.value;
                            setDraftTopics(next);
                          }}
                        />
                        <textarea
                          className="min-h-[58px] resize-none rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b] outline-none focus:border-[#2563eb]"
                          value={draftTopicDetails[index] ?? ''}
                          placeholder="내용"
                          onChange={(event) => {
                            const next = [...draftTopicDetails];
                            next[index] = event.target.value;
                            setDraftTopicDetails(next);
                          }}
                        />
                        <label className="inline-flex w-fit cursor-pointer items-center gap-2 text-[12px] font-black text-[#475569]">
                          <input
                            type="checkbox"
                            className="h-4 w-4 rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
                            checked={draftTopicVideoEnabled[index] || Boolean(draftTopicVideoUrls[index]?.trim())}
                            onChange={(event) => {
                              const checked = event.target.checked;
                              setDraftTopicVideoEnabled((current) => {
                                const next = [...current];
                                next[index] = checked;
                                return next;
                              });
                              if (!checked) {
                                setDraftTopicVideoUrls((current) => {
                                  const next = [...current];
                                  next[index] = '';
                                  return next;
                                });
                              }
                            }}
                          />
                          동영상강의
                        </label>
                        {(draftTopicVideoEnabled[index] || Boolean(draftTopicVideoUrls[index]?.trim())) && (
                          <input
                            className="h-9 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-semibold text-[#111827] outline-none focus:border-[#2563eb]"
                            value={draftTopicVideoUrls[index] ?? ''}
                            placeholder="YouTube URL"
                            onChange={(event) => {
                              const next = [...draftTopicVideoUrls];
                              next[index] = event.target.value;
                              setDraftTopicVideoUrls(next);
                            }}
                          />
                        )}
                        <label className="grid gap-1.5">
                          <span className="text-[12px] font-black text-[#475569]">핵심개념</span>
                          <textarea
                            className="min-h-[70px] resize-y rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b] outline-none focus:border-[#2563eb]"
                            value={draftTopicConcepts[index] ?? ''}
                            placeholder="한 줄에 하나씩 입력"
                            onChange={(event) => {
                              const next = [...draftTopicConcepts];
                              next[index] = event.target.value;
                              setDraftTopicConcepts(next);
                            }}
                          />
                        </label>
                      </span>
                      <button
                        type="button"
                        onClick={() => handleDeleteLearningStep(index)}
                        className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48]"
                        aria-label={`${index + 1}번 학습단계 삭제`}
                        title="학습단계 삭제"
                      >
                        <Trash2 size={14} aria-hidden="true" />
                      </button>
                    </div>
                  ))
                ) : (
                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-8 text-center text-[13px] font-bold text-[#64748b]">학습단계가 없습니다.</p>
                )}
              </div>
            </section>

            <section>
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h3 className="text-[15px] font-black text-[#111827]">실습 내용</h3>
                </div>
                <button
                  type="button"
                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
                  onClick={handleAddPracticeContent}
                >
                  <Plus size={14} aria-hidden="true" />
                  추가
                </button>
              </div>
              <div className="mt-3 grid gap-2">
                {draftPracticeContents.length ? draftPracticeContents.map((item, index) => (
                  <div key={`practice-${index}`} className="flex items-start gap-3 rounded-lg border border-[#d1d9e6] bg-white px-4 py-3">
                    <span className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{index + 1}</span>
                    <span className="grid min-w-0 flex-1 gap-2">
                      <input
                        className="h-9 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-black text-[#111827] outline-none focus:border-[#2563eb]"
                        value={item.title}
                        placeholder="제목"
                        onChange={(event) => handleUpdatePracticeContent(index, 'title', event.target.value)}
                      />
                      <textarea
                        className="min-h-[58px] resize-none rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[12px] font-semibold leading-relaxed text-[#64748b] outline-none focus:border-[#2563eb]"
                        value={item.description}
                        placeholder="설명"
                        onChange={(event) => handleUpdatePracticeContent(index, 'description', event.target.value)}
                      />
                    </span>
                    <button
                      type="button"
                      onClick={() => handleDeletePracticeContent(index)}
                      className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48]"
                      aria-label={`${index + 1}번 실습 내용 삭제`}
                      title="실습 내용 삭제"
                    >
                      <Trash2 size={14} aria-hidden="true" />
                    </button>
                  </div>
                )) : (
                  <p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-8 text-center text-[13px] font-bold text-[#64748b]">실습 내용이 없습니다.</p>
                )}
              </div>
            </section>
            <label className="block">
              <div className="flex items-center justify-between gap-3">
                <h3 className="text-[15px] font-black text-[#111827]">제출 기준</h3>
                <label className="inline-flex cursor-pointer items-center gap-2 text-[12px] font-black text-[#475569]">
                  <input
                    type="checkbox"
                    className="h-4 w-4 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
                    checked={draftRequiresSourceSubmission}
                    onChange={(event) => setDraftRequiresSourceSubmission(event.target.checked)}
                  />
                  소스제출
                </label>
              </div>
              <textarea
                className="mt-1.5 min-h-[84px] w-full resize-none rounded-md border border-[#d1d9e6] bg-white px-3 py-2 text-[13px] font-semibold leading-relaxed text-[#111827] outline-none focus:border-[#2563eb]"
                value={draftDeliverable}
                onChange={(event) => setDraftDeliverable(event.target.value)}
              />
            </label>

            <section>
              <div className="flex items-center justify-between gap-3">
                <h3 className="text-[15px] font-black text-[#111827]">참고자료</h3>
                <button
                  type="button"
                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
                  onClick={() => referenceFileInputRef.current?.click()}
                >
                  <FileText size={14} aria-hidden="true" />
                  파일 선택
                </button>
              </div>

              <input
                ref={referenceFileInputRef}
                type="file"
                className="hidden"
                onChange={(event) => {
                  const file = event.target.files?.[0] ?? null;
                  setReferenceFile(file);
                  if (file && !referenceTitle.trim()) setReferenceTitle(file.name);
                }}
              />

              <div className="mt-3 grid gap-2 rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
                <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
                  <input
                    className="h-10 rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
                    value={referenceTitle}
                    placeholder="자료명"
                    onChange={(event) => setReferenceTitle(event.target.value)}
                  />
                  <div className="flex h-10 min-w-0 items-center rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-bold text-[#64748b]">
                    <span className="truncate">{referenceFile?.name ?? '선택된 파일 없음'}</span>
                  </div>
                  <button
                    type="button"
                    disabled={saving || !referenceFile}
                    onClick={() => void handleUploadReference()}
                    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-md bg-[#2563eb] px-4 text-[13px] font-black text-white transition hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-45"
                  >
                    {saving ? <Loader2 className="animate-spin" size={14} aria-hidden="true" /> : <Upload size={14} aria-hidden="true" />}
                    업로드
                  </button>
                </div>

                <div className="grid gap-2">
                  {selectedWeek.detail.references?.length ? selectedWeek.detail.references.map((reference) => (
                    <div key={reference.id} className="flex items-center gap-3 rounded-md border border-[#cbd5e1] bg-white px-3 py-2">
                      <FileText className="shrink-0 text-[#64748b]" size={16} aria-hidden="true" />
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-[13px] font-black text-[#111827]">{reference.title}</p>
                        <p className="mt-0.5 truncate text-[11px] font-bold text-[#64748b]">
                          {reference.fileName}
                          {reference.fileSizeBytes ? ` · ${formatFileSize(Number(reference.fileSizeBytes))}` : ''}
                        </p>
                      </div>
                      <button
                        type="button"
                        disabled={saving}
                        onClick={() => void handleDeleteReference(reference.id)}
                        className="grid h-8 w-8 shrink-0 place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fff1f2] hover:text-[#e11d48] disabled:cursor-not-allowed disabled:opacity-45"
                        aria-label={`${reference.title} 삭제`}
                        title="참고자료 삭제"
                      >
                        <Trash2 size={14} aria-hidden="true" />
                      </button>
                    </div>
                  )) : (
                    <p className="rounded-md border border-dashed border-[#d1d9e6] bg-white px-4 py-6 text-center text-[13px] font-bold text-[#64748b]">등록된 참고자료가 없습니다.</p>
                  )}
                </div>
              </div>
            </section>
          </div>
          )}
        </div>
      </section>

      <ConfirmDialog
        open={deleteConfirmOpen && Boolean(selectedWeek)}
        title={selectedWeek ? `${selectedWeek.week}주차를 삭제할까요?` : '주차를 삭제할까요?'}
        message="삭제한 주차는 강의 진행 목록과 학생 앱에서 사라집니다. 이 작업은 바로 적용됩니다."
        detail={selectedWeek ? (
          <div className="rounded-lg border border-[#fee2e2] bg-[#fff1f2] px-4 py-3">
            <p className="truncate text-[13px] font-black text-[#111827]">{selectedWeek.title}</p>
            <p className="mt-1 text-[12px] font-bold text-[#e11d48]">추가 주차만 삭제할 수 있습니다.</p>
          </div>
        ) : null}
        confirmLabel="삭제"
        loading={saving}
        danger
        icon={Trash2}
        onCancel={() => setDeleteConfirmOpen(false)}
        onConfirm={() => void handleDeleteWeek()}
      />
      <ConfirmDialog
        open={completeConfirmOpen && Boolean(selectedWeek)}
        title={selectedWeek ? `${selectedWeek.week}주차를 완료할까요?` : '주차를 완료할까요?'}
        message="확인하면 선택한 그룹의 해당 주차가 완료 처리됩니다."
        detail={selectedWeek ? (
          <div className="rounded-lg border border-[#dbeafe] bg-[#eff6ff] px-4 py-3">
            <p className="truncate text-[13px] font-black text-[#111827]">{selectedWeek.title}</p>
            <p className="mt-1 text-[12px] font-bold text-[#2563eb]">현재 단계: {activeLearningStep ?? '미선택'}</p>
          </div>
        ) : null}
        confirmLabel="완료처리"
        loading={saving}
        icon={CheckCircle2}
        onCancel={() => setCompleteConfirmOpen(false)}
        onConfirm={() => {
          setCompleteConfirmOpen(false);
          void handleCompleteWeek();
        }}
      />
    </div>
  );
}

function SummaryCard({ label, value, icon: Icon }: { label: string; value: string; icon: LucideIcon }) {
  return (
    <article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0">
          <p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
          <p className="mt-2 truncate text-[18px] font-black leading-none text-[#111827]">{value}</p>
        </div>
        <span className="grid h-11 w-11 shrink-0 place-items-center rounded-md bg-[#eff6ff] text-[#2563eb]">
          <Icon size={24} aria-hidden="true" />
        </span>
      </div>
    </article>
  );
}

function formatFileSize(bytes: number): string {
  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}