/* global React, Icon, UI, LessonHighData */
(function () {
const { useState, useMemo } = React;
const Dx = LessonHighData;

// ============================================================
// 회원 등록 폼 모달 (v3)
// ============================================================
function RegisterMemberModal({ open, onClose, onCreate }) {
  const [step, setStep] = useState(1); // 1: form, 2: success
  const [sendImmediately, setSendImmediately] = useState(true);
  const [channel, setChannel] = useState('katalk'); // katalk | sms
  const [smsFallback, setSmsFallback] = useState(true);
  const [recipMember, setRecipMember] = useState(true);
  // Multiple additional recipients (학부모, 보호자 등) — list-driven.
  const [recipients, setRecipients] = useState([
    { id: 'r1', name: '어머니 박서영', phone: '010-3471-5678', relation: '모', send: true },
  ]);
  const addRecipient = () => setRecipients(rs => [...rs, { id: 'r' + Date.now(), name: '', phone: '', relation: '모', send: true }]);
  const removeRecipient = (id) => setRecipients(rs => rs.filter(r => r.id !== id));
  const updateRecipient = (id, key, val) => setRecipients(rs => rs.map(r => r.id === id ? { ...r, [key]: val } : r));

  function reset() {
    setStep(1);
    setSendImmediately(true);
    setChannel('katalk');
    setSmsFallback(true);
    setRecipMember(true);
    setRecipients([{ id: 'r1', name: '어머니 박서영', phone: '010-3471-5678', relation: '모', send: true }]);
  }

  return (
    <UI.Modal
      open={open}
      onClose={() => { onClose(); reset(); }}
      title={step === 1 ? '회원 등록' : '등록 완료'}
      width={680}
      footer={
        step === 1 ? (
          <React.Fragment>
            <UI.Button variant="ghost" onClick={onClose}>취소</UI.Button>
            <UI.Button variant="primary" icon={Icon.Check} onClick={() => setStep(2)}>등록 + 발송</UI.Button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <UI.Button onClick={() => { onClose(); reset(); }}>닫기</UI.Button>
            <UI.Button variant="primary" icon={Icon.User}>회원 페이지 열기</UI.Button>
          </React.Fragment>
        )
      }
    >
      {step === 1 && (
        <div className="col" style={{ gap: 20 }}>
          {/* 회원 기본 정보 */}
          <FormSection title="회원 기본 정보">
            <div className="grid-2" style={{ gap: 12 }}>
              <Field label="이름" required>
                <input className="input" placeholder="예: 김지호"/>
              </Field>
              <Field label="생년월일" required>
                <input className="input" placeholder="YYYY-MM-DD" defaultValue="2014-05-18"/>
              </Field>
              <Field label="성별">
                <select className="select"><option>—</option><option>남</option><option>여</option></select>
              </Field>
              <Field label="회원 본인 전화번호" hint="회원 본인 폰이 없으면 비워두세요">
                <input className="input" placeholder="010-0000-0000"/>
              </Field>
            </div>
          </FormSection>

          {/* 담당 / 수업권 */}
          <FormSection title="담당 / 수업권 / 결제">
            <div className="grid-2" style={{ gap: 12 }}>
              <Field label="담당 선생님" required>
                <select className="select" defaultValue="t3">
                  {Dx.teachers.map(t => <option key={t.id} value={t.id}>{t.name} 선생님</option>)}
                </select>
              </Field>
              <Field label="수업권 종류">
                <select className="select"><option>회차권</option><option>기간권</option></select>
              </Field>
              <Field label="총 횟수">
                <input className="input" defaultValue="10"/>
              </Field>
              <Field label="결제 금액 (원)">
                <input className="input" defaultValue="220000"/>
              </Field>
            </div>
          </FormSection>

          {/* 추가 알림 수신자 — 여러 명 가능 */}
          <FormSection
            title="추가 알림 수신자 (선택)"
            sub="회원 외에 알림톡·메시지를 받을 사람. 예: 미성년 학생의 학부모, 보호자 등. 회원 본인 폰이 없으면 이쪽 폰만으로도 등록 가능. 여러 명 등록할 수 있습니다."
            inset
          >
            <div className="col" style={{ gap: 10 }}>
              {recipients.length > 0 && (
                <div style={{ display: 'grid', gridTemplateColumns: '2fr 2fr 1fr 32px', gap: 12, alignItems: 'center' }}>
                  <span className="t-micro" style={{ fontSize: 11 }}>이름</span>
                  <span className="t-micro" style={{ fontSize: 11 }}>전화번호</span>
                  <span className="t-micro" style={{ fontSize: 11 }}>관계</span>
                  <span></span>
                </div>
              )}
              {recipients.map((r) => (
                <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '2fr 2fr 1fr 32px', gap: 12, alignItems: 'center' }}>
                  <input className="input" value={r.name} onChange={(e) => updateRecipient(r.id, 'name', e.target.value)} placeholder="예: 어머니 김선화"/>
                  <input className="input" value={r.phone} onChange={(e) => updateRecipient(r.id, 'phone', e.target.value)} placeholder="010-0000-0000"/>
                  <select className="select" value={r.relation} onChange={(e) => updateRecipient(r.id, 'relation', e.target.value)}>
                    <option>모</option><option>부</option><option>조부모</option><option>보호자</option><option>기타</option>
                  </select>
                  <button
                    type="button"
                    className="icon-btn"
                    onClick={() => removeRecipient(r.id)}
                    title="삭제"
                  >
                    <Icon.X size={14}/>
                  </button>
                </div>
              ))}
              {recipients.length === 0 && (
                <div className="t-caption" style={{ fontSize: 12 }}>등록된 추가 수신자가 없습니다. 아래 버튼으로 추가하세요.</div>
              )}
              <button
                type="button"
                onClick={addRecipient}
                className="btn is-ghost is-sm"
                style={{ alignSelf: 'flex-start', paddingLeft: 8 }}
              >
                <Icon.Plus size={14}/>
                <span>수신자 추가</span>
              </button>
            </div>
          </FormSection>

          {/* 발송 옵션 */}
          <FormSection title="발송 옵션">
            <UI.Check checked={sendImmediately} onChange={setSendImmediately} label="등록 후 즉시 링크 발송" hint="회원 전용 접근 링크를 알림톡/SMS로 전송"/>
            {sendImmediately && (
              <div style={{ marginTop: 12, paddingLeft: 28, display: 'grid', gap: 16 }}>
                <div className="col" style={{ gap: 8 }}>
                  <div className="t-micro">수신자</div>
                  <UI.Check checked={recipMember} onChange={setRecipMember}
                    label={<span>김지호 (회원 본인) <span className="t-mono num" style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>—</span></span>}
                    hint="회원 본인 폰을 입력하지 않았습니다"/>
                  {recipients.filter(r => r.name && r.phone).map(r => (
                    <UI.Check
                      key={r.id}
                      checked={r.send}
                      onChange={(v) => updateRecipient(r.id, 'send', v)}
                      label={r.name}
                      hint={`${r.phone} · 관계: ${r.relation}`}
                    />
                  ))}
                </div>
                <div className="col" style={{ gap: 8 }}>
                  <div className="t-micro">채널</div>
                  <div className="row" style={{ gap: 16 }}>
                    <UI.Radio name="ch" checked={channel === 'katalk'} onChange={() => setChannel('katalk')} label="알림톡"/>
                    <UI.Radio name="ch" checked={channel === 'sms'} onChange={() => setChannel('sms')} label="SMS"/>
                  </div>
                  <UI.Check checked={smsFallback} onChange={setSmsFallback} label="알림톡 실패 시 SMS 자동 폴백"/>
                </div>
              </div>
            )}
          </FormSection>

          <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
            ※ 회원 본인 폰과 추가 알림 수신자 폰 중 최소 하나는 입력해야 합니다.
          </div>
        </div>
      )}

      {step === 2 && (
        <div style={{ padding: '8px 0' }}>
          <div style={{ width: 48, height: 48, borderRadius: 99, background: 'var(--status-success-bg)', color: 'var(--status-success)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
            <Icon.Check size={24}/>
          </div>
          <div className="t-h2" style={{ marginBottom: 6 }}>김지호 회원이 등록되었습니다</div>
          <div className="t-caption" style={{ marginBottom: 20 }}>전용 접근 링크가 자동 발급되었으며, 선택한 수신자에게 알림톡이 전송됩니다.</div>

          <div className="token-card">
            <div className="t-micro" style={{ marginBottom: 6 }}>접근 링크</div>
            <div className="token-url">
              <Icon.Layers size={14}/>
              <span>https://lessonhigh.com/m/tk-9U7N</span>
              <UI.Button size="sm" variant="ghost" icon={Icon.Edit}>복사</UI.Button>
            </div>
            <div style={{ marginTop: 12 }}>
              <div className="t-micro" style={{ marginBottom: 8 }}>발송 대상</div>
              <div className="col" style={{ gap: 6 }}>
                {recipients.filter(r => r.send && r.name && r.phone).map(r => (
                  <div key={r.id} className="row" style={{ gap: 8, fontSize: 13 }}>
                    <Icon.Send size={14} style={{ color: 'var(--status-success)' }}/>
                    <span><strong>{r.name}</strong> · <span className="t-mono num">{r.phone}</span></span>
                    <UI.Badge tone="success" dot>{channel === 'katalk' ? '알림톡 전송됨' : 'SMS 전송됨'}</UI.Badge>
                  </div>
                ))}
                {recipients.filter(r => r.send && r.name && r.phone).length === 0 && (
                  <div className="t-caption" style={{ fontSize: 12 }}>발송 대상이 없습니다.</div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </UI.Modal>
  );
}

// ============================================================
// 링크 발송 모달
// ============================================================
function SendLinkModal({ open, onClose, memberId }) {
  const m = memberId ? Dx.getMember(memberId) : null;
  const token = m ? Dx.tokens[m.id] : null;
  const [channel, setChannel] = useState('katalk');
  const [smsFallback, setSmsFallback] = useState(true);
  const [memberPhone, setMemberPhone] = useState(!!m?.phone);
  const [additionalPhone, setAdditionalPhone] = useState(true);

  if (!m) return null;

  return (
    <UI.Modal
      open={open} onClose={onClose}
      title={`${m.name} 회원 — 링크 발송`}
      width={560}
      footer={
        <React.Fragment>
          <UI.Button variant="ghost" onClick={onClose}>취소</UI.Button>
          <UI.Button variant="primary" icon={Icon.Send}>발송</UI.Button>
        </React.Fragment>
      }
    >
      <div className="col" style={{ gap: 20 }}>
        <div className="token-card">
          <div className="t-micro" style={{ marginBottom: 6 }}>접근 링크</div>
          <div className="token-url">
            <Icon.Layers size={14}/>
            <span style={{ flex: 1 }}>https://lessonhigh.com/m/{token.id}</span>
            <UI.Button size="sm" variant="ghost" icon={Icon.Edit}>복사</UI.Button>
          </div>
          <div className="t-caption" style={{ marginTop: 8, fontSize: 12 }}>
            이 링크는 회원당 1개. 받으신 분이 이름·생년월일을 확인하면 동일 화면이 열립니다.
          </div>
        </div>

        <div className="col" style={{ gap: 8 }}>
          <div className="t-micro">수신자</div>
          {m.phone ? (
            <UI.Check checked={memberPhone} onChange={setMemberPhone}
              label={<span>{m.name} <span className="muted" style={{ fontSize: 12, fontWeight: 400 }}>(회원 본인)</span></span>}
              hint={m.phone}/>
          ) : (
            <div className="row" style={{ gap: 12, color: 'var(--text-tertiary)', fontSize: 13, padding: '4px 0' }}>
              <Icon.User size={14}/>
              <span>{m.name} (회원 본인) — 등록된 폰 없음</span>
            </div>
          )}
          {m.additionalContact && (
            <UI.Check checked={additionalPhone} onChange={setAdditionalPhone}
              label={m.additionalContact.name}
              hint={`${m.additionalContact.phone} · 관계: ${m.additionalContact.relation}`}/>
          )}
          {!m.additionalContact && !m.phone && (
            <div style={{ fontSize: 13, color: 'var(--status-danger)' }}>
              발송할 수신자가 없습니다. 회원 기본 정보에서 폰을 등록하세요.
            </div>
          )}
        </div>

        <div className="col" style={{ gap: 8 }}>
          <div className="t-micro">채널</div>
          <div className="row" style={{ gap: 16 }}>
            <UI.Radio name="ch2" checked={channel === 'katalk'} onChange={() => setChannel('katalk')} label="알림톡"/>
            <UI.Radio name="ch2" checked={channel === 'sms'} onChange={() => setChannel('sms')} label="SMS"/>
          </div>
          <UI.Check checked={smsFallback} onChange={setSmsFallback} label="알림톡 실패 시 SMS 자동 폴백"/>
        </div>

        <div className="token-card" style={{ background: 'var(--bg-subtle)' }}>
          <div className="t-micro" style={{ marginBottom: 6 }}>미리보기</div>
          <div style={{ fontSize: 13, lineHeight: 1.6 }}>
            <strong>[송유이보컬발성클래스]</strong><br/>
            학원에서 <strong>{m.name} 학생</strong>의 정보를 확인하실 수 있습니다.<br/>
            <span className="t-mono" style={{ color: 'var(--text-tertiary)' }}>https://lessonhigh.com/m/{token.id}</span>
          </div>
        </div>
      </div>
    </UI.Modal>
  );
}

// ============================================================
// 수업일지 작성 모달
// ============================================================
function LessonNoteModal({ open, onClose, memberId, reservationId }) {
  const m = memberId ? Dx.getMember(memberId) : null;
  if (!m) return null;

  return (
    <UI.Modal
      open={open} onClose={onClose}
      title={`수업일지 — ${m.name} · ${Dx.formatDate('2025-11-20', { short: true })}`}
      width={640}
      footer={
        <React.Fragment>
          <UI.Button variant="ghost" onClick={onClose}>취소</UI.Button>
          <UI.Button variant="primary" icon={Icon.Check}>저장 + 회원에게 알림톡</UI.Button>
        </React.Fragment>
      }
    >
      <div className="col" style={{ gap: 18 }}>
        <div className="t-micro">정형 필드 (학원이 정의)</div>

        {Dx.settings.lessonFormFields.map(f => (
          <div key={f.id} className="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} 입력`}/>
              : f.type === 'select'
                ? <select className="select">{f.options.map(o => <option key={o}>{o}</option>)}</select>
                : <input className="input" placeholder={`${f.label} 입력`}/>}
          </div>
        ))}

        <div className="divider"/>

        <div className="field">
          <label className="field__label" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon.Lock size={12} style={{ color: 'var(--text-tertiary)' }}/>
            강사 내부 메모 <span className="muted" style={{ fontWeight: 400 }}>(강사·원장만 열람)</span>
          </label>
          <textarea className="textarea" rows={4} placeholder="컨디션·태도·다음 시간 어조 등 솔직한 내부 기록. 회원은 절대 볼 수 없습니다."/>
        </div>

        <div className="field">
          <label className="field__label" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon.Eye size={12} style={{ color: 'var(--accent-default)' }}/>
            회원에게 한마디 <span className="muted" style={{ fontWeight: 400 }}>(선택 · 입력 시 회원 일지에 표시)</span>
          </label>
          <textarea className="textarea" rows={3} placeholder="예) 오늘 후렴 끊음 안정 좋았어요! 다음 시간에 브릿지 이어서 가봅시다 🎤"/>
          <span className="field__hint">회원 본인과 추가 알림 수신자(폰 등록 시) 모바일 일지에서 읽을 수 있습니다.</span>
        </div>

        <div className="field">
          <label className="field__label">외부 링크 <span className="muted" style={{ fontWeight: 400 }}>(선택)</span></label>
          <input className="input" placeholder="유튜브, 드라이브, 녹음 파일 등"/>
        </div>
      </div>
    </UI.Modal>
  );
}

// ============================================================
// Helpers
// ============================================================
function FormSection({ title, sub, children, inset, actions }) {
  return (
    <section style={{
      padding: 16,
      background: inset ? 'var(--bg-inset)' : 'var(--bg-canvas)',
      border: '1px solid var(--border-default)',
      borderRadius: 'var(--radius-md)',
    }}>
      <div className="row" style={{ marginBottom: sub ? 6 : 12 }}>
        <span className="t-h3">{title}</span>
        {actions && <span style={{ marginLeft: 'auto' }}>{actions}</span>}
      </div>
      {sub && <div className="t-caption" style={{ marginBottom: 12, fontSize: 12 }}>{sub}</div>}
      {children}
    </section>
  );
}

function Field({ label, required, hint, children }) {
  return (
    <div className="field">
      <label className="field__label">
        {label}{required && <span style={{ color: 'var(--status-danger)', marginLeft: 4 }}>*</span>}
      </label>
      {children}
      {hint && <div className="field__hint">{hint}</div>}
    </div>
  );
}

// ============================================================
// 접근 링크 관리 — 회원 상세 안에서 inline으로 렌더되는 섹션
// (내부 식별자는 token 유지, UI에서만 "접근 링크"로 표시)
// ============================================================
function TokenManager({ memberId, onSend }) {
  const m = Dx.getMember(memberId);
  const token = Dx.tokens[memberId];
  if (!m || !token) return null;

  const url = `https://lessonhigh.com/m/${token.id}`;
  const isPaused = token.status === 'PAUSED';
  const isRevoked = token.status === 'REVOKED';

  return (
    <UI.Card>
      <UI.CardHeader
        title="접근 링크 관리"
        subtitle={`회원당 1개 · ${token.id}`}
        actions={
          isRevoked
            ? <UI.Badge tone="danger" dot>비활성화됨</UI.Badge>
            : isPaused
              ? <UI.Badge tone="warning" dot>일시 정지</UI.Badge>
              : <UI.Badge tone="success" dot>활성</UI.Badge>
        }
      />
      <UI.CardBody>
        <div className="col" style={{ gap: 14 }}>
          {/* URL */}
          <div>
            <div className="t-micro" style={{ marginBottom: 6 }}>접근 링크</div>
            <div className="token-url">
              <Icon.Layers size={14}/>
              <span style={{ flex: 1 }}>{url}</span>
            </div>
            <div className="t-caption" style={{ marginTop: 6, fontSize: 12 }}>
              회원 본인·추가 알림 수신자 누구든 이 링크 + 이름·생년월일 확인으로 접속.
            </div>
          </div>

          {/* Stats */}
          <div className="grid-3" style={{ gap: 8 }}>
            <TokenStat label="마지막 발송" value={token.lastSentAt ? Dx.fmt.timestamp(token.lastSentAt) : '발송 전'} icon={Icon.Send}/>
            <TokenStat label="마지막 본인 확인" value={token.lastVerifiedAt ? Dx.fmt.timestamp(token.lastVerifiedAt) : '아직 없음'} icon={Icon.Eye}/>
            <TokenStat label="실패 횟수" value={`${token.failureCount}회`} icon={Icon.Warn}
              tone={token.failureCount >= 3 ? 'warning' : null}/>
          </div>

          {/* Recipients */}
          <div>
            <div className="t-micro" style={{ marginBottom: 8 }}>발송 대상</div>
            <div className="col" style={{ gap: 6 }}>
              {m.phone ? (
                <div className="recipient-row">
                  <UI.Avatar name={m.name} tone={m.tone} size="sm"/>
                  <div className="col" style={{ gap: 0, flex: 1 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</span>
                    <span className="t-caption" style={{ fontSize: 12 }}>회원 본인 · <span className="t-mono num">{m.phone}</span></span>
                  </div>
                  <UI.Badge tone="neutral">본인</UI.Badge>
                </div>
              ) : (
                <div className="recipient-row" style={{ borderStyle: 'dashed', color: 'var(--text-tertiary)' }}>
                  <Icon.User size={14}/>
                  <span style={{ fontSize: 13 }}>회원 본인 폰 없음</span>
                </div>
              )}
              {m.additionalContact && (
                <div className="recipient-row">
                  <span style={{ width: 24, height: 24, borderRadius: 99, background: 'var(--bg-subtle)', color: 'var(--text-secondary)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon.Phone size={12}/>
                  </span>
                  <div className="col" style={{ gap: 0, flex: 1 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{m.additionalContact.name}</span>
                    <span className="t-caption" style={{ fontSize: 12 }}>관계: {m.additionalContact.relation} · <span className="t-mono num">{m.additionalContact.phone}</span></span>
                  </div>
                  <UI.Badge tone="neutral">추가</UI.Badge>
                </div>
              )}
              {!m.additionalContact && (
                <UI.Button size="sm" variant="ghost" icon={Icon.Plus} block>추가 알림 수신자 등록</UI.Button>
              )}
            </div>
          </div>

          {/* Actions */}
          <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
            <UI.Button variant="primary" icon={Icon.Send} onClick={onSend}>전체 재발송</UI.Button>
            <UI.Button icon={Icon.Edit}>링크 복사</UI.Button>
            <UI.Button icon={Icon.Refresh}>링크 재발급</UI.Button>
            <UI.Button variant="ghost" icon={Icon.X}>접근 차단</UI.Button>
          </div>
        </div>
      </UI.CardBody>
    </UI.Card>
  );
}

function TokenStat({ label, value, icon: IconC, tone }) {
  const c = tone === 'warning' ? 'var(--status-warning)' : 'var(--text-primary)';
  return (
    <div style={{ background: 'var(--bg-canvas)', borderRadius: 'var(--radius-md)', padding: '10px 12px', border: '1px solid var(--border-default)' }}>
      <div className="row" style={{ gap: 6, color: 'var(--text-tertiary)', marginBottom: 2 }}>
        <IconC size={12}/>
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</span>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: c }} className="t-mono num">{value}</div>
    </div>
  );
}

window.Modals = { RegisterMemberModal, SendLinkModal, LessonNoteModal, TokenManager };
})();