/* global React */
/* hotfix16 TASK 4: 강의 단위 재배정 모달 (SessionReassignModal_v1_0426).
 *
 *  진입 모드:
 *    - 'pre_retirement' (staffId 있음) : 퇴직 직전 그 강사 담당 강의 재배정
 *    - 'unassigned_resolve' (staffId 없음/null) : 알림에서 모든 미배정 강의 일괄 처리
 *
 *  UI:
 *    - 일괄 적용 row (강사 select + "일괄 적용" 버튼) → 모든 강의에 같은 강사 채움
 *    - 강의 카드 목록 — 강의별 select + ▼ 학생 expand
 *    - "모두 처리 (N/M)" 버튼 → 지정된 강의만 reassignSession. 미지정은 호출자가 처리 (퇴직 모달이면 미배정 마킹)
 *
 *  전역 진입점: window.openSessionReassignModal(staffId)  // staffId 없으면 unassigned_resolve 모드
 *  마운트: window.GlobalSessionReassignModalMount  (Settings/Students 등 admin 페이지에 마운트)
 */
(function () {
  const { useState, useEffect } = React;
  const ROLE_LABEL = { 1: '원장', 2: '부원장', 3: '강사', 4: '조교' };

  function SessionReassignModal({ staffId, onClose, onSuccess }) {
    const [sessions, setSessions] = useState([]);
    const [teachers, setTeachers] = useState([]);
    const [staff, setStaff] = useState(null);
    const [assignments, setAssignments] = useState({});       /* { classId: 'u_tXXX' } */
    const [bulkTeacherId, setBulkTeacherId] = useState('');
    const [expandedSessions, setExpandedSessions] = useState({});
    const [processing, setProcessing] = useState(false);
    const [error, setError] = useState('');
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
      let cancelled = false;
      async function load() {
        try {
          if (staffId) {
            const u = (window.mockUsers || {})[staffId];
            if (!cancelled) setStaff(u || null);
          }
          /* 처리 대상 강의 — 모드별 */
          let target;
          if (staffId) {
            target = await window.getSessionsByTeacher(staffId);
          } else {
            target = await window.getUnassignedSessions();
          }
          /* 학생 미리 로드 (n+1 방지) */
          const withStudents = [];
          for (let i = 0; i < target.length; i++) {
            const sess = target[i];
            const students = await window.getStudentsBySession(sess.id);
            withStudents.push(Object.assign({}, sess, { _students: students }));
          }
          if (cancelled) return;
          setSessions(withStudents);
          /* 활성 강사 목록 (퇴직 대상 본인 제외, 원장·부원장·강사만) */
          if (typeof window.getAllStaff === 'function') {
            const all = await window.getAllStaff('active');
            if (cancelled) return;
            setTeachers(all.filter(t =>
              (t.role_id === 1 || t.role_id === 2 || t.role_id === 3) &&
              (!staffId || t.id !== staffId)
            ));
          }
          setLoaded(true);
        } catch (e) {
          if (!cancelled) { setError(e.message || String(e)); setLoaded(true); }
        }
      }
      load();
      return () => { cancelled = true; };
    }, [staffId]);

    useEffect(() => {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }, []);

    useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

    function handleBulkApply() {
      if (!bulkTeacherId) { setError('일괄 적용할 강사를 선택하세요'); return; }
      const next = {};
      sessions.forEach(s => { next[s.id] = bulkTeacherId; });
      setAssignments(next);
      setError('');
    }

    function handleSessionAssign(classId, teacherId) {
      setAssignments(prev => {
        const next = Object.assign({}, prev);
        if (teacherId) next[classId] = teacherId;
        else delete next[classId];
        return next;
      });
    }

    function toggleExpand(classId) {
      setExpandedSessions(prev => Object.assign({}, prev, { [classId]: !prev[classId] }));
    }

    async function handleSubmit() {
      setProcessing(true); setError('');
      try {
        let processed = 0;
        const reason = staffId ? 'teacher_retired' : 'manual';
        const meta = staffId
          ? { previous_teacher_id: staffId, previous_teacher_name: staff && staff.name }
          : { resolved_via: 'unassigned_modal' };
        for (const classId in assignments) {
          if (!assignments[classId]) continue;
          await window.reassignSession(classId, assignments[classId], reason, meta);
          processed++;
        }

        /* 미배정 해결 모드 — 알림 자동 resolved (전체/부분) */
        if (!staffId) {
          const notis = window.mockNotifications || [];
          notis.forEach(n => {
            if (n.type !== 'session_unassigned' || n.resolved_at) return;
            const stillUnassigned = (n.related_session_ids || []).filter(sid => !assignments[sid]);
            if (stillUnassigned.length === 0) {
              if (typeof window.markNotificationResolved === 'function') {
                window.markNotificationResolved(n.id);
              }
            } else {
              n.related_session_ids = stillUnassigned;
              if (Array.isArray(n.session_summaries)) {
                n.session_summaries = n.session_summaries.filter(s => stillUnassigned.indexOf(s.session_id) >= 0);
              }
            }
          });
          try { localStorage.setItem('c200-admin.notifications', JSON.stringify(window.mockNotifications)); } catch(_) {}
          window.dispatchEvent(new CustomEvent('c200-notifications-change', { detail: { resolveBulk: true } }));
        }

        /* 시간표/학생 목록 refresh 트리거 */
        window.dispatchEvent(new CustomEvent('c200-sessions-reassigned', { detail: { processed: processed } }));
        window.dispatchEvent(new CustomEvent('c200-students-reassigned'));
        if (typeof onSuccess === 'function') onSuccess({ processed, total: sessions.length });
        onClose(true);
      } catch (e) {
        setError(e.message || String(e));
        setProcessing(false);
      }
    }

    if (!loaded) {
      return (
        <div className="modal-overlay" onMouseDown={e => e.target === e.currentTarget && onClose(false)}>
          <div className="modal-content modal-md">
            <div className="modal-body" style={{padding: 32, textAlign: 'center', color: 'var(--fg-muted)'}}>
              불러오는 중…
            </div>
          </div>
        </div>
      );
    }

    if (sessions.length === 0) {
      return (
        <div className="modal-overlay" onMouseDown={e => e.target === e.currentTarget && onClose(false)}>
          <div className="modal-content modal-md">
            <div className="modal-header">
              <h3>{staffId ? '담당 강의 재배정' : '미배정 강의 재배정'}</h3>
              <button className="modal-close" onClick={() => onClose(false)}>×</button>
            </div>
            <div className="modal-body" style={{padding: 32, textAlign: 'center', color: 'var(--fg-muted)'}}>
              처리할 강의가 없습니다.
            </div>
            <div className="modal-footer">
              <button className="btn-secondary" onClick={() => onClose(false)}>닫기</button>
            </div>
          </div>
        </div>
      );
    }

    const totalStudents = sessions.reduce((sum, s) => sum + ((s._students || []).length), 0);
    const assignedCount = Object.keys(assignments).filter(k => assignments[k]).length;
    const headerTitle = staffId
      ? (staff ? staff.name : '') + ' 선생님 담당 강의 재배정'
      : '미배정 강의 재배정';

    return (
      <div className="modal-overlay" onMouseDown={e => e.target === e.currentTarget && onClose(false)}>
        <div className="modal-content modal-lg session-reassign-modal">
          <div className="modal-header">
            <h3>{headerTitle}</h3>
            <button className="modal-close" onClick={() => onClose(false)}>×</button>
          </div>
          <div className="modal-body">
            <div className="reassign-summary">
              담당 강의 <strong>{sessions.length}개</strong>, 학생 총 <strong>{totalStudents}명</strong>
              {assignedCount > 0 && (
                <span className="rg-dim"> · 재배정 지정 {assignedCount}/{sessions.length}</span>
              )}
            </div>

            <div className="bulk-assign-row">
              <label>모두 같은 강사로 일괄 이전</label>
              <select value={bulkTeacherId} onChange={e => setBulkTeacherId(e.target.value)}>
                <option value="">강사 선택</option>
                {teachers.map(t => (
                  <option key={t.id} value={t.id}>
                    {t.name} ({ROLE_LABEL[t.role_id] || '직원'})
                  </option>
                ))}
              </select>
              <button type="button" className="btn-secondary btn-sm-tall" onClick={handleBulkApply}>
                일괄 적용
              </button>
            </div>

            <div className="divider-with-label"><span>또는 강의별 개별 지정</span></div>

            <div className="session-cards">
              {sessions.map(sess => {
                const isExpanded = !!expandedSessions[sess.id];
                const students = sess._students || [];
                const schedule = window.formatSchedule ? window.formatSchedule(sess) : '';
                const room = (window.roomsMock || []).find(r => r.id === sess.room_id);
                const roomName = room ? room.name : (sess.room_id || '—');
                const courseName = sess.name || '강의';
                return (
                  <div key={sess.id} className="session-card">
                    <div className="session-card-header">
                      <div className="session-card-info">
                        <div className="session-card-title">
                          {sess.class_type && <span className={'badge-class-type type-' + sess.class_type}>{sess.class_type}</span>}
                          <strong>{courseName}</strong>
                          <span className="schedule-tag">{schedule}</span>
                        </div>
                        <div className="session-card-meta">
                          <span>📍 {roomName}</span>
                          {/* hotfix16.5 TASK 4.2: "학생 N명 ▼" → "👥 등록 학생 N명 ▶/▼"
                              (▶ = 펼치기 전, ▼ = 펼친 후. 등록 명시로 액션 의미 제거) */}
                          <button
                            type="button"
                            className={'session-students-toggle ' + (isExpanded ? 'is-open' : '')}
                            aria-expanded={isExpanded}
                            onClick={() => toggleExpand(sess.id)}
                          >
                            👥 등록 학생 <strong>{students.length}명</strong>
                            <span className="expand-arrow">{isExpanded ? '▼' : '▶'}</span>
                          </button>
                        </div>
                      </div>
                      <div className="session-card-action">
                        <select
                          value={assignments[sess.id] || ''}
                          onChange={e => handleSessionAssign(sess.id, e.target.value)}
                        >
                          <option value="">강사 선택</option>
                          {teachers.map(t => (
                            <option key={t.id} value={t.id}>
                              {t.name} ({ROLE_LABEL[t.role_id] || '직원'})
                            </option>
                          ))}
                        </select>
                      </div>
                    </div>
                    {isExpanded && students.length > 0 && (
                      <div className="session-students-list">
                        {students.map(stu => (
                          <div key={stu.id} className="session-student-row">
                            <div className="ssr-l">
                              <span className="student-name">{stu.name}</span>
                              <span className="student-meta">
                                {stu.school || '—'} · {stu.grade || '—'}
                                {stu.student_code && <> · <span className="ssr-code">{stu.student_code}</span></>}
                                {stu.phone && <> · {stu.phone}</>}
                              </span>
                            </div>
                            <div className="ssr-r">
                              현재 {staff ? staff.name + 'T' : '—'} · {courseName}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                    {isExpanded && students.length === 0 && (
                      <div className="session-students-empty">등록된 학생이 없습니다</div>
                    )}
                  </div>
                );
              })}
            </div>

            {error && <div className="error-message">{error}</div>}
            <div className="hint-text" style={{marginTop: 12}}>
              💡 강사 미지정 강의는 {staffId ? '퇴직 처리 후 ' : ''}미배정 알림으로 등록됩니다.
              나중에 알림에서 재배정 가능합니다.
            </div>
          </div>
          <div className="modal-footer">
            <button className="btn-secondary" onClick={() => onClose(false)} disabled={processing}>
              취소
            </button>
            <button className="btn-primary" onClick={handleSubmit} disabled={processing || assignedCount === 0}>
              {processing ? '처리 중…' : '모두 처리 (' + assignedCount + '/' + sessions.length + ')'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  /* 전역 진입점 — TopBar 알림 / 퇴직 모달에서 호출 */
  window.openSessionReassignModal = function (staffId) {
    window.dispatchEvent(new CustomEvent('c200-open-session-reassign-modal', {
      detail: { staffId: staffId || null },
    }));
  };

  /* 글로벌 마운트 컴포넌트 */
  function GlobalSessionReassignModalMount() {
    const [state, setState] = useState(null);
    useEffect(() => {
      function onOpen(e) { setState(e.detail || {}); }
      window.addEventListener('c200-open-session-reassign-modal', onOpen);
      return () => window.removeEventListener('c200-open-session-reassign-modal', onOpen);
    }, []);
    if (!state) return null;
    return (
      <SessionReassignModal
        staffId={state.staffId}
        onClose={() => setState(null)}
        onSuccess={(result) => {
          if (window.showToast) {
            window.showToast(`강의 ${result.processed}개 재배정 완료`);
          }
        }}
      />
    );
  }

  window.SessionReassignModal = SessionReassignModal;
  window.GlobalSessionReassignModalMount = GlobalSessionReassignModalMount;
})();