/* global React, Icon, UI, LessonHighData */
// ============================================================
// I10 · 이탈 위험 / 리텐션 자동화 — F5
//   - <RiskWidget> : 대시보드 합류 위젯 ("이번 주 챙겨야 할 회원")
//   - <RiskCard>   : 회원 상세 안에 들어가는 위험 점수 카드
//   - <RiskModal>  : 위험 회원 일괄 처리 모달
// ============================================================
(function () {
const { useState } = React;
const D = LessonHighData;

const LEVEL_META = {
  high: { label: '높음', tone: 'danger',  color: 'var(--status-danger)' },
  mid:  { label: '중간', tone: 'warning', color: 'var(--status-warning)' },
  low:  { label: '낮음', tone: 'success', color: 'var(--status-success)' },
};

// ────────────────────────────────────────────────────────────
// 대시보드 위젯
// ────────────────────────────────────────────────────────────
function RiskWidget({ onOpenMember }) {
  const [modalOpen, setModalOpen] = useState(false);
  const top = D.getTopRisk(5);
  const queuedTriggers = D.retentionTriggers.filter(t => t.status === 'queued').length;

  return (
    <React.Fragment>
      <UI.Card className="risk-widget">
        <UI.CardHeader
          title={<span>이번 주 챙겨야 할 회원 <UI.Badge tone="danger" style={{ marginLeft: 6 }}>{top.filter(t => t.level === 'high').length}</UI.Badge></span>}
          subtitle={`위험 점수 + 자동 트리거 ${queuedTriggers}건 대기 · F1 알림톡 인프라 위에서 동작`}
          actions={<UI.Button size="sm" variant="ghost" onClick={() => setModalOpen(true)}>모두 보기</UI.Button>}
        />
        <UI.CardBody flush>
          {top.map(r => {
            const m = D.getMember(r.memberId);
            const meta = LEVEL_META[r.level];
            return (
              <div key={r.memberId} className="risk-row" onClick={() => onOpenMember && onOpenMember(r.memberId)}>
                <div className="risk-row__avatar">
                  <UI.Avatar name={m.name} tone={m.tone}/>
                  <span className="risk-row__score" style={{ background: meta.color }}>{r.score}</span>
                </div>
                <div className="risk-row__body">
                  <div className="risk-row__name">
                    <strong>{m.name}</strong>
                    <UI.Badge tone={meta.tone}>{meta.label}</UI.Badge>
                  </div>
                  <div className="risk-row__factors">
                    {r.factors.slice(0, 2).map((f, i) => (
                      <span key={i} className="risk-chip">{f.label}</span>
                    ))}
                    {r.factors.length > 2 && <span className="risk-chip risk-chip--more">+{r.factors.length - 2}</span>}
                  </div>
                </div>
                <div className="risk-row__action">
                  {r.suggestedActions[0] && (
                    <UI.Button size="sm" variant="primary" onClick={(e) => {
                      e.stopPropagation();
                      window.toast && window.toast(`${m.name}님 — ${r.suggestedActions[0].label} 실행됨`, { tone: 'success' });
                    }}>액션</UI.Button>
                  )}
                </div>
              </div>
            );
          })}
        </UI.CardBody>
      </UI.Card>
      <RiskModal open={modalOpen} onClose={() => setModalOpen(false)} onOpenMember={onOpenMember}/>
    </React.Fragment>
  );
}

// ────────────────────────────────────────────────────────────
// 회원 상세 안에 들어가는 카드
// ────────────────────────────────────────────────────────────
function RiskCard({ memberId }) {
  const r = D.getRisk(memberId);
  if (!r) return null;
  const meta = LEVEL_META[r.level];
  const ringPct = Math.max(0, Math.min(100, r.score));

  return (
    <UI.Card className="risk-card">
      <UI.CardBody>
        <div className="risk-card__head">
          <div className="risk-ring">
            <svg viewBox="0 0 60 60" width="60" height="60">
              <circle cx="30" cy="30" r="26" fill="none" stroke="var(--bg-inset)" strokeWidth="6"/>
              <circle cx="30" cy="30" r="26" fill="none" stroke={meta.color} strokeWidth="6"
                strokeDasharray={`${ringPct * 1.63} 1000`}
                transform="rotate(-90 30 30)"
                strokeLinecap="round"/>
              <text x="30" y="35" textAnchor="middle" fontSize="16" fontWeight="700" fill={meta.color} fontFamily="JetBrains Mono">{r.score}</text>
            </svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>이탈 위험 점수</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <strong style={{ fontSize: 18, letterSpacing: '-0.014em' }}>위험도 {meta.label}</strong>
              <UI.Badge tone={meta.tone}>{r.score} / 100</UI.Badge>
            </div>
            {r.lastReviewedAt && <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>최근 검토 {r.lastReviewedAt}</div>}
          </div>
        </div>

        <div className="t-micro" style={{ margin: '14px 0 6px' }}>위험 / 안정 요인</div>
        {r.factors.map((f, i) => (
          <div key={i} className="risk-factor">
            <span className={`risk-factor__bullet ${f.weight < 0 ? 'is-good' : ''}`}></span>
            <span style={{ flex: 1, fontSize: 12.5 }}>{f.label}</span>
            <span className="t-mono" style={{ fontSize: 11, color: f.weight >= 0 ? 'var(--text-tertiary)' : 'var(--status-success)' }}>
              {f.weight >= 0 ? '+' : ''}{f.weight}
            </span>
          </div>
        ))}

        <div className="t-micro" style={{ margin: '14px 0 6px' }}>권장 액션</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {r.suggestedActions.map(a => (
            <button
              key={a.id}
              className={`risk-action ${a.primary ? 'is-primary' : ''}`}
              onClick={() => window.toast && window.toast(`${a.label} 실행됨 · 알림 로그에서 확인`, { tone: 'success' })}
            >
              <span>{a.label}</span>
              <Icon.ChevRight size={14}/>
            </button>
          ))}
        </div>

        <div className="risk-card__foot">
          <strong>왜 이 점수인가?</strong> 점수는 4주 출석률·패스 잔여·결제 지연·일지 키워드를 가중합한 결과입니다. 안정 요인(음수)이 위험 요인을 상쇄. 학원장이 사유 칩을 보고 직접 조정할 수 있습니다.
        </div>
      </UI.CardBody>
    </UI.Card>
  );
}

// ────────────────────────────────────────────────────────────
// "모두 보기" 모달 — 위험 회원 일괄 처리
// ────────────────────────────────────────────────────────────
function RiskModal({ open, onClose, onOpenMember }) {
  const [filter, setFilter] = useState('all');
  const [selected, setSelected] = useState({});

  const all = Object.entries(D.riskScores).map(([memberId, r]) => ({ memberId, ...r }))
    .sort((a, b) => b.score - a.score);
  const filtered = filter === 'all' ? all : all.filter(r => r.level === filter);
  const selectedCount = Object.values(selected).filter(Boolean).length;

  const toggle = (id) => setSelected(s => ({ ...s, [id]: !s[id] }));
  const bulkAction = (label) => {
    if (selectedCount === 0) {
      window.toast && window.toast('회원을 먼저 선택해 주세요', { tone: 'warning' });
      return;
    }
    window.toast && window.toast(`${selectedCount}명에게 ${label} 실행`, { tone: 'success' });
    setSelected({});
  };

  return (
    <UI.Modal open={open} onClose={onClose} title="이탈 위험 회원 일괄 관리" width={760}
      footer={
        <React.Fragment>
          <UI.Button variant="ghost" onClick={() => setSelected({})}>선택 해제</UI.Button>
          <div style={{ flex: 1 }}/>
          <UI.Button variant="ghost" icon={Icon.Send} onClick={() => bulkAction('갱신 제안 알림톡')}>갱신 안내 일괄</UI.Button>
          <UI.Button variant="ghost" icon={Icon.Note} onClick={() => bulkAction('강사 To-do 등록')}>강사 To-do 일괄</UI.Button>
          <UI.Button variant="primary" icon={Icon.Check} onClick={() => bulkAction('자동 트리거 활성화')}>자동화 ON</UI.Button>
        </React.Fragment>
      }>
      <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
        {[
          { id: 'all',  label: '전체', count: all.length },
          { id: 'high', label: '높음', count: all.filter(r => r.level === 'high').length },
          { id: 'mid',  label: '중간', count: all.filter(r => r.level === 'mid').length },
          { id: 'low',  label: '낮음', count: all.filter(r => r.level === 'low').length },
        ].map(t => (
          <button key={t.id} className={`pill ${filter === t.id ? 'is-active' : ''}`} onClick={() => setFilter(t.id)}>
            {t.label} <span style={{ opacity: 0.6 }}>{t.count}</span>
          </button>
        ))}
        <div style={{ flex: 1 }}/>
        {selectedCount > 0 && <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{selectedCount}명 선택됨</span>}
      </div>

      <div className="risk-table">
        {filtered.map(r => {
          const m = D.getMember(r.memberId);
          const meta = LEVEL_META[r.level];
          return (
            <div key={r.memberId} className={`risk-table__row ${selected[r.memberId] ? 'is-selected' : ''}`}>
              <input type="checkbox" checked={!!selected[r.memberId]} onChange={() => toggle(r.memberId)}/>
              <span className="risk-table__score" style={{ background: meta.color }}>{r.score}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <button className="t-link" onClick={(e) => { e.stopPropagation(); onClose(); onOpenMember && onOpenMember(r.memberId); }}>
                  <strong>{m.name}</strong>
                </button>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
                  {m.passType === 'SESSION' ? `${m.remaining}/${m.total}회` : '월정액'} · {m.risk || '—'}
                </div>
              </div>
              <div className="risk-table__factors">
                {r.factors.slice(0, 3).map((f, i) => (
                  <span key={i} className="risk-chip">{f.label}</span>
                ))}
              </div>
              <UI.Badge tone={meta.tone}>{meta.label}</UI.Badge>
            </div>
          );
        })}
      </div>

      <div className="t-micro" style={{ margin: '16px 0 6px' }}>예약된 자동 트리거 · {D.retentionTriggers.filter(t => t.status === 'queued').length}건</div>
      {D.retentionTriggers.filter(t => t.status === 'queued').map(t => {
        const m = D.getMember(t.memberId);
        return (
          <div key={t.id} className="trigger-row">
            <span className="dot" style={{ background: 'var(--accent-default)' }}/>
            <span style={{ flex: 1, fontSize: 12.5 }}>
              <strong>{m.name}</strong> — {t.action} <span style={{ color: 'var(--text-tertiary)' }}>({t.channel})</span>
            </span>
            <span className="t-mono" style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{D.fmt.timestamp(t.scheduledAt).slice(5)}</span>
            <UI.Button size="sm" variant="ghost" onClick={() => window.toast && window.toast(`${m.name}님 자동 트리거 취소`, { tone: 'warning' })}>취소</UI.Button>
          </div>
        );
      })}
    </UI.Modal>
  );
}

window.RetentionUI = { RiskWidget, RiskCard, RiskModal };
})();