/* global React, KpiCard, BoardPanel, Calendar */
const { useMemo: useDM, useState: useDS } = React;

function Dashboard({ branch = '광주봉선지점', studentCount = 128 }) {
  const [monthOffset, setMonthOffset] = useDS(0);
  const base = new Date(2026, 3, 21);
  const viewDate = useDM(() => {
    const d = new Date(base);
    d.setMonth(d.getMonth() + monthOffset);
    return d;
  }, [monthOffset]);

  const events = {
    '2026-4-2':  [{ label: '신규 상담 3건', tone: 'violet' }],
    '2026-4-3':  [{ label: '레벨테스트 · 초급', tone: 'teal' }],
    '2026-4-7':  [{ label: '초2 커리큘럼 레벨업 시리즈', tone: 'teal' }, { label: '강사 회의', tone: 'violet' }],
    '2026-4-10': [{ label: '중간고사 대비 설명회', tone: 'teal' }],
    '2026-4-14': [{ label: '4월 강사연수 부교재 신청 마감', tone: 'violet' }],
    '2026-4-15': [{ label: '수강료 납부일', tone: 'amber' }],
    '2026-4-17': [{ label: '챌린저AI 모의평가', tone: 'amber' }],
    '2026-4-21': [{ label: '4월 프레젠테이션 런칭', tone: 'teal' }, { label: '원장단 미팅', tone: 'violet' }],
    '2026-4-24': [{ label: '신규생 OT', tone: 'teal' }],
    '2026-4-28': [{ label: '월말 평가 (재원생 30일 기준)', tone: 'amber' }],
    '2026-4-30': [{ label: '4월 매출 마감', tone: 'danger' }],
  };

  const handleMonth = (delta) => {
    if (delta === 0) setMonthOffset(0);
    else setMonthOffset((m) => m + delta);
  };

  return (
    <div className="dash">
      <div className="dash-hero">
        <h1>
          <span className="pin">{branch}</span>과 함께{' '}
          <span className="count num">{studentCount}</span>
          <span>명의 학생들이 꿈을 향해 나아가고 있습니다.</span>
        </h1>
        <div className="dash-hero-meta">
          <span className="live">실시간 동기화</span>
          <span className="dot"></span>
          <span className="num">2026.04.21 14:32</span>
          <span className="dot"></span>
          <span>데이터 기준 · 광주봉선지점</span>
        </div>
      </div>

      <div className="dash-kpis">
        <KpiCard
          label="수강생"
          value="128"
          unit="명"
          delta="+3"
          deltaDir="up"
          hint="지난 주 대비"
          icon="users"
          tone="info"
          sparkline={[108, 112, 115, 118, 121, 124, 126, 128]}
        />
        <KpiCard
          label="수강권 미납"
          value="12"
          unit="건"
          delta="+2"
          deltaDir="up"
          hint="즉시 확인 필요"
          icon="alert-triangle"
          tone="warn"
          sparkline={[6, 8, 7, 9, 10, 10, 12]}
          cta="확인"
        />
        <KpiCard
          label="이번 달 매출"
          value="₩38,420,000"
          delta="+6.2%"
          deltaDir="up"
          hint="전월 대비"
          icon="trending-up"
          tone="ok"
          sparkline={[28, 30, 29, 33, 34, 36, 38]}
        />
        <KpiCard
          label="신규 등록"
          value="8"
          unit="명"
          delta="-2"
          deltaDir="down"
          hint="지난 주 대비"
          icon="user-plus"
          tone="info"
          sparkline={[12, 11, 10, 9, 10, 8, 8]}
        />
      </div>

      <div className="dash-grid">
        <BoardPanel />
        <Calendar
          month={viewDate.getMonth()}
          year={viewDate.getFullYear()}
          events={events}
          onMonthChange={handleMonth}
        />
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;