/* global React, Icon, UI, LessonHighData */
// ============================================================
// 상담일지 — 풀스크린 라우트 (수업일지와 동일한 셸을 공유)
//   - 상담 진행 중 켜두는 작성 화면
//   - 좌측 rail: 상담자 컨텍스트 + 단계 + 액션
//   - 우측 main: 오늘 상담 카드 (editable) + 과거 상담 이력
// ============================================================
(function () {
const { useState, useEffect, useMemo, useRef } = React;
const Dc = LessonHighData;

const STAGES = [
  { id: 'lead',      label: '리드',      tone: 'neutral' },
  { id: 'scheduled', label: '상담 예약', tone: 'warning' },
  { id: 'met',       label: '상담 완료', tone: 'accent'  },
  { id: 'enrolled',  label: '등록 완료', tone: 'success' },
  { id: 'lost',      label: '이탈',      tone: 'danger'  },
];

function ConsultJournal({ consultId, onClose, onOpenRegister }) {
  // 'new' = 신규 워크인 작성, 그 외 = 기존 상담 카드 편집
  const isNew = !consultId || consultId === 'new';
  const existing = !isNew ? Dc.consultations.find(c => c.id === consultId) : null;

  // 신규 상담일지 — 헤더 입력 폼 (이름·전화·유입)
  const [prospect, setProspect] = useState(existing?.prospect || '');
  const [phone, setPhone]       = useState(existing?.phone || '');
  const [source, setSource]     = useState(existing?.source || '인스타그램');
  const [stage, setStage]       = useState(existing?.stage || 'lead');

  // 폼 필드 (학원이 설정에서 편집한 양식 사용)
  const formFields = Dc.settings.consultFormFields;
  const initialFields = useMemo(() => {
    const fields = {};
    formFields.forEach(f => {
      // 기존 데이터에서 매핑 시도
      if (f.label === '목표')          fields[f.id] = existing?.goal || '';
      else if (f.label === '음역대')    fields[f.id] = existing?.range || '';
      else if (f.label === '유입 채널') fields[f.id] = existing?.source || '';
      else                             fields[f.id] = '';
    });
    return fields;
  }, [consultId]);
  const [fieldValues, setFieldValues] = useState(initialFields);

  const [memo, setMemo]       = useState('');
  const [scheduleNext, setScheduleNext] = useState(''); // 후속 상담 일시
  const [savedAt, setSavedAt] = useState(null);
  const [sendKakao, setSendKakao] = useState(true); // 상담 완료 알림톡 발송

  // 자동 저장 표시
  useEffect(() => {
    const hasContent = prospect || phone || Object.values(fieldValues).some(v => v) || memo;
    if (!hasContent) return;
    const t = setTimeout(() => setSavedAt(new Date()), 1200);
    return () => clearTimeout(t);
  }, [prospect, phone, fieldValues, memo]);

  // Esc 닫기
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  // 마운트 후 첫 필드 포커스
  const todayCardRef = useRef(null);
  useEffect(() => {
    todayCardRef.current?.querySelector('input, textarea')?.focus();
  }, [consultId]);

  // 같은 이름/번호 과거 상담 (단순 매칭)
  const pastConsults = useMemo(() => {
    if (!prospect && !phone) return [];
    return Dc.consultations.filter(c =>
      c.id !== consultId &&
      (c.prospect === prospect || (phone && c.phone === phone))
    );
  }, [prospect, phone, consultId]);

  return (
    <div className="journal-page consult-journal">
      {/* 상단 바 */}
      <header className="journal-top">
        <button className="journal-back" onClick={onClose} title="닫기 (Esc)">
          <Icon.ChevLeft size={18}/>
          <span>상담 목록으로</span>
        </button>

        <div className="journal-breadcrumb">
          <span className="t-caption">상담일지</span>
          <Icon.ChevRight size={12} style={{ color: 'var(--text-tertiary)' }}/>
          <span className="journal-breadcrumb__member consult-journal__crumb">
            <UI.Avatar name={prospect || '?'} tone="tone-b" size="sm"/>
            <span>{prospect || (isNew ? '신규 상담' : '상담')}</span>
            {!isNew && <UI.Badge tone="neutral">{STAGES.find(s => s.id === stage)?.label}</UI.Badge>}
          </span>
        </div>

        <div className="journal-top__right">
          {savedAt && (
            <span className="t-caption journal-saved">
              <Icon.Check size={12}/>
              <span>{formatTime(savedAt)} 자동 저장됨</span>
            </span>
          )}
          <UI.Button icon={Icon.Eye} variant="ghost">미리보기</UI.Button>
          <UI.Button icon={Icon.Plus} variant="ghost" onClick={onOpenRegister}>회원 등록</UI.Button>
          <UI.Button icon={Icon.Check} variant="primary">상담일지 저장</UI.Button>
        </div>
      </header>

      <div className="journal-body">
        {/* ── 좌측 rail ─────────────────────────────────────── */}
        <aside className="journal-rail consult-journal__rail">
          <div className="journal-rail__inner">
            {/* 신규 상담은 이름/전화/유입을 rail에서 입력 */}
            {isNew && (
              <React.Fragment>
                <div className="t-micro" style={{ marginBottom: 10 }}>상담자 정보</div>
                <div className="field" style={{ marginBottom: 10 }}>
                  <label className="field__label">이름</label>
                  <input className="input" placeholder="상담자 이름" value={prospect} onChange={(e) => setProspect(e.target.value)}/>
                </div>
                <div className="field" style={{ marginBottom: 10 }}>
                  <label className="field__label">연락처</label>
                  <input className="input" placeholder="010-0000-0000" value={phone} onChange={(e) => setPhone(e.target.value)}/>
                </div>
                <div className="field" style={{ marginBottom: 4 }}>
                  <label className="field__label">유입 채널</label>
                  <select className="select" value={source} onChange={(e) => setSource(e.target.value)}>
                    {(Dc.settings.consultFormFields.find(f => f.label === '유입 채널')?.options || ['인스타그램','네이버 검색','지인 추천','오프라인 전단','기타'])
                      .map(o => <option key={o} value={o}>{o}</option>)}
                  </select>
                </div>
              </React.Fragment>
            )}

            {/* 기존 상담은 정보 표시 + 단계 편집 */}
            {!isNew && existing && (
              <React.Fragment>
                <div className="row" style={{ gap: 10, marginBottom: 12 }}>
                  <UI.Avatar name={existing.prospect} tone="tone-b" size="lg"/>
                  <div className="col" style={{ gap: 0, flex: 1 }}>
                    <div className="t-h3" style={{ marginBottom: 2 }}>{existing.prospect}</div>
                    <div className="t-caption t-mono num" style={{ fontSize: 12 }}>{existing.phone}</div>
                  </div>
                </div>
                <div className="journal-rail__divider"/>
                <RailRow label="유입 채널" value={existing.source}/>
                {existing.utm && (
                  <RailRow
                    label="UTM"
                    value={<span className="t-mono" style={{ fontSize: 11 }}>{existing.utm.src}/{existing.utm.med}{existing.utm.cmp ? ` · ${existing.utm.cmp}` : ''}{existing.utm.ref ? ` · ref=${existing.utm.ref}` : ''}</span>}
                  />
                )}
              </React.Fragment>
            )}

            <div className="journal-rail__divider"/>

            <div className="t-micro" style={{ marginBottom: 8 }}>단계</div>
            <div className="consult-journal__stages">
              {STAGES.map(s => (
                <button
                  key={s.id}
                  className={`consult-journal__stage ${stage === s.id ? 'is-on' : ''} is-${s.tone}`}
                  onClick={() => setStage(s.id)}
                >{s.label}</button>
              ))}
            </div>

            <div className="journal-rail__divider"/>

            {/* 후속 액션 */}
            <div className="t-micro" style={{ marginBottom: 8 }}>후속 액션</div>
            <div className="field" style={{ marginBottom: 10 }}>
              <label className="field__label">다음 상담 예약</label>
              <input
                type="datetime-local"
                className="input"
                value={scheduleNext}
                onChange={(e) => setScheduleNext(e.target.value)}
              />
            </div>
            <div className={`consult-journal__kakao ${sendKakao ? 'is-on' : ''}`}>
              <UI.Toggle
                checked={sendKakao}
                onChange={setSendKakao}
                label="상담 완료 알림톡 발송"
                hint="감사 인사 + 다음 액션 안내 (저장 시 일괄 발송)"
              />
            </div>

            <div className="journal-rail__divider"/>

            {existing && existing.lastTouchAt && (
              <RailRow label="마지막 액션" value={<span className="t-mono num" style={{ fontSize: 12 }}>{Dc.fmt.timestamp(existing.lastTouchAt)}</span>}/>
            )}
            <RailRow
              label="상담 진행"
              value={
                <select className="select" style={{ height: 30, fontSize: 12.5 }} defaultValue="t1">
                  {Dc.teachers.map(t => <option key={t.id} value={t.id}>{t.name} 선생님</option>)}
                </select>
              }
            />
          </div>
        </aside>

        {/* ── 우측 main ────────────────────────────────────── */}
        <main className="journal-main">
          <div className="journal-main__inner">
            {/* 오늘 상담 카드 */}
            <article ref={todayCardRef} className="journal-card is-today consult-journal__today">
              <header className="journal-card__head">
                <div className="row" style={{ gap: 10 }}>
                  <span className="journal-marker is-today consult-journal__marker"/>
                  <div className="col" style={{ gap: 0 }}>
                    <div className="row" style={{ gap: 8 }}>
                      <span className="t-h2" style={{ margin: 0 }}>{isNew ? '신규 상담' : '오늘 상담'}</span>
                      <UI.Badge tone="accent" dot>작성 중</UI.Badge>
                    </div>
                    <div className="t-caption">
                      {Dc.formatDate(Dc.TODAY)}
                      {existing?.conductedAt && <span> · <span className="t-mono num">{Dc.fmt.shortTime(existing.conductedAt)}</span></span>}
                    </div>
                  </div>
                </div>
                <span className="t-caption" style={{ fontSize: 11 }}>학원 설정 → 상담일지 양식</span>
              </header>

              <div className="journal-card__body">
                <div className="col" style={{ gap: 16 }}>
                  {formFields.map(f => (
                    <div key={f.id} className="field journal-field">
                      <label className="field__label">
                        {f.label}
                        {f.required && <span style={{ color: 'var(--status-danger)', marginLeft: 4 }}>*</span>}
                      </label>
                      {f.type === 'longtext' ? (
                        <textarea
                          className="textarea"
                          rows={3}
                          placeholder={`${f.label} 입력`}
                          value={fieldValues[f.id] || ''}
                          onChange={(e) => setFieldValues(v => ({ ...v, [f.id]: e.target.value }))}
                        />
                      ) : f.type === 'select' ? (
                        <select
                          className="select"
                          value={fieldValues[f.id] || ''}
                          onChange={(e) => setFieldValues(v => ({ ...v, [f.id]: e.target.value }))}
                        >
                          <option value="">선택…</option>
                          {(f.options || []).map(o => <option key={o} value={o}>{o}</option>)}
                        </select>
                      ) : (
                        <input
                          className="input"
                          placeholder={`${f.label} 입력`}
                          value={fieldValues[f.id] || ''}
                          onChange={(e) => setFieldValues(v => ({ ...v, [f.id]: e.target.value }))}
                        />
                      )}
                    </div>
                  ))}
                </div>

                <div className="divider" style={{ margin: '12px 0' }}/>

                <div className="field">
                  <label className="field__label">
                    상담사 메모
                    <span className="muted" style={{ fontWeight: 400, marginLeft: 6 }}>학원 내부</span>
                  </label>
                  <textarea
                    className="textarea"
                    rows={5}
                    placeholder="상담 중 인상·온도, 가격 민감도, 결정권자 정보 등. 회원 화면에 노출되지 않습니다."
                    value={memo}
                    onChange={(e) => setMemo(e.target.value)}
                  />
                </div>

                {/* 시각적 가이드 — 상담 메모는 항상 비공개 */}
                <div className="consult-journal__notice">
                  <Icon.Eye size={14}/>
                  <span>상담일지는 기본적으로 <strong>학원 내부 전용</strong>입니다. 회원 등록 시 일부 필드(목표·음역대)는 회원 페이지로 이관됩니다.</span>
                </div>
              </div>
            </article>

            {/* 같은 상담자 과거 상담 */}
            {pastConsults.length > 0 && (
              <React.Fragment>
                <div className="journal-past-label">
                  <div className="journal-past-label__line"/>
                  <span className="t-micro">이전 상담 이력 · {pastConsults.length}건</span>
                  <div className="journal-past-label__line"/>
                </div>
                {pastConsults.map(c => (
                  <PastConsult key={c.id} c={c}/>
                ))}
              </React.Fragment>
            )}

            {pastConsults.length === 0 && !isNew && (
              <div className="journal-empty">
                <Icon.Chat size={28} style={{ color: 'var(--text-tertiary)' }}/>
                <div className="t-body-strong">첫 상담입니다</div>
                <div className="t-caption">이 상담자에 대한 이전 기록이 없습니다.</div>
              </div>
            )}

            <div style={{ height: 80 }}/>
          </div>
        </main>
      </div>
    </div>
  );
}

function PastConsult({ c }) {
  return (
    <article className="journal-card is-past">
      <header className="journal-card__head">
        <div className="row" style={{ gap: 10 }}>
          <span className="journal-marker"/>
          <div className="col" style={{ gap: 0 }}>
            <div className="row" style={{ gap: 8 }}>
              <span className="t-body-strong">{c.conductedAt ? Dc.fmt.timestamp(c.conductedAt) : '날짜 미상'}</span>
              <UI.Badge tone={c.joined ? 'success' : 'neutral'} dot>
                {STAGES.find(s => s.id === c.stage)?.label || '리드'}
              </UI.Badge>
            </div>
            <div className="t-caption">{c.source} · {Dc.getTeacher(c.teacherId)?.name} 선생님</div>
          </div>
        </div>
        <UI.Button size="sm" variant="ghost" icon={Icon.Edit}>편집</UI.Button>
      </header>
      <div className="journal-card__body">
        <div className="journal-past-fields">
          <div className="journal-past-field">
            <div className="t-micro">목표</div>
            <div style={{ fontSize: 14, lineHeight: 1.55 }}>{c.goal || '—'}</div>
          </div>
          <div className="journal-past-field">
            <div className="t-micro">음역대</div>
            <div className="t-mono num" style={{ fontSize: 14 }}>{c.range || '—'}</div>
          </div>
        </div>
      </div>
    </article>
  );
}

function RailRow({ label, value, mono, multiline }) {
  return (
    <div className="journal-rail__row">
      <div className="t-micro">{label}</div>
      <div className={`journal-rail__val ${mono ? 't-mono num' : ''} ${multiline ? 'is-multi' : ''}`}>
        {value}
      </div>
    </div>
  );
}

function formatTime(d) {
  const h = String(d.getHours()).padStart(2, '0');
  const m = String(d.getMinutes()).padStart(2, '0');
  return `${h}:${m}`;
}

window.ConsultJournalPage = { Open: ConsultJournal };
})();