/* global React */
const { useMemo, useState: useS1 } = React;

function KpiCard({ label, value, unit, delta, deltaDir, hint, icon, tone, sparkline, cta }) {
  const toneClass = tone ? `is-${tone}` : '';
  const points = sparkline || [];
  const path = useMemo(() => {
    if (!points.length) return '';
    const w = 80, h = 24, max = Math.max(...points), min = Math.min(...points);
    const range = max - min || 1;
    return points.map((p, i) => {
      const x = (i / (points.length - 1)) * w;
      const y = h - ((p - min) / range) * h;
      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
    }).join(' ');
  }, [points]);
  const sparkColor = deltaDir === 'down' ? 'var(--danger)' : 'var(--teal-500)';

  return (
    <div className="stat">
      <div className="stat-head">
        <span className="stat-label">{label}</span>
        {icon && <span className={`stat-icon ${toneClass}`}><i data-lucide={icon}></i></span>}
      </div>
      <div className="stat-value num">
        {value}
        {unit && <span className="unit">{unit}</span>}
      </div>
      <div className="stat-meta">
        {delta && (
          <span className={`stat-delta ${deltaDir}`}>
            {deltaDir === 'up' ? '↑' : deltaDir === 'down' ? '↓' : '·'} {delta}
          </span>
        )}
        {hint && <span className="stat-hint">{hint}</span>}
        {cta && <span className="stat-cta">{cta} →</span>}
      </div>
      {points.length > 0 && (
        <svg className="stat-spark" width="80" height="24" viewBox="0 0 80 24" fill="none">
          <path d={path} stroke={sparkColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      )}
    </div>
  );
}
window.KpiCard = KpiCard;

function BoardPanel() {
  const [tab, setTab] = useS1('notice');

  const notices = [
    { d: '2026.04.20', t: '26년 4월 월급 정산 (상여, 초과, 야자수당) 안내', tag: '행사안내', tone: 'danger', pin: true, isNew: true },
    { d: '2026.04.18', t: 'EBS 수능특강 Light 영어·영어독해연습 업로드 일정 및 범위 안내', tag: '지점공지', tone: 'info', isNew: true },
    { d: '2026.04.16', t: '26년 04월 광주 원장단 자율평가 7월 심사 일정 변경 안내', tag: '운영공지', tone: 'neutral' },
    { d: '2026.04.14', t: '4월 강사연수과정 부교재 신청 안내', tag: '지점공지', tone: 'info' },
    { d: '2026.04.12', t: '고등 교재서 영어Ⅰ 저작시(하) 5대 및 후속 교재 업로드 일정 안내', tag: '콘텐츠제작부', tone: 'brand' },
    { d: '2026.04.10', t: '26년 2분기 지점 마케팅 리소스 배포 및 제도 변경 안내', tag: '운영공지', tone: 'neutral' },
  ];

  const schedule = [
    { time: '09:00', sub: '-10:30', title: '중2 정규반 A', where: '201호 · 김민서 T' },
    { time: '11:00', sub: '-12:30', title: '고1 수능독해 B', where: '301호 · 박지훈 T' },
    { time: '14:00', sub: '-15:30', title: '초6 예비중 집중반', where: '102호 · 이수현 T' },
    { time: '16:00', sub: '-17:30', title: '중3 내신대비 심화', where: '202호 · 정하영 T' },
    { time: '19:00', sub: '-21:00', title: '고2 수능 Final', where: '302호 · 류준형 원장' },
  ];

  const requests = [
    { av: '김', tone: 'teal', name: '김서연', sub: '중2', meta: '수강권 결제 대기 · 2026.04.21 09:12', actions: ['승인', '반려'] },
    { av: '이', tone: 'warn', name: '이도윤', sub: '초6', meta: '결석계 제출 · 오늘 14:00 수업', actions: ['처리'] },
    { av: '박', tone: 'pink', name: '박하린', sub: '중1', meta: '레벨테스트 상담 신청 · 2026.04.22 16:00 희망', actions: ['승인', '반려'] },
    { av: '최', tone: 'violet', name: '최준우 학부모', sub: '고1', meta: '수강권 환불 문의 · 채널톡', actions: ['답변'] },
    { av: '정', tone: 'teal', name: '정유나', sub: '신규', meta: '신규 등록 완료 · 배정 필요', actions: ['배정'] },
  ];

  return (
    <section className="card" style={{display:'flex', flexDirection:'column', minHeight: 520}}>
      <div className="card-subtabs">
        <button className={`card-subtab ${tab==='notice'?'is-active':''}`} onClick={()=>setTab('notice')}>
          공지 및 일정 <span className="count">6</span>
        </button>
        <button className={`card-subtab ${tab==='class'?'is-active':''}`} onClick={()=>setTab('class')}>
          오늘 시간표 <span className="count">5</span>
        </button>
        <button className={`card-subtab ${tab==='req'?'is-active':''}`} onClick={()=>setTab('req')}>
          출결 · 회원 신청 <span className="count" style={{color:'var(--danger)'}}>5</span>
        </button>
        <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:6, padding:'0 6px'}}>
          <button className="card-hd-more">
            전체 보기 <i data-lucide="arrow-right"></i>
          </button>
        </div>
      </div>

      {tab === 'notice' && (
        <div className="board-list">
          {notices.map((it, i) => (
            <div key={i} className="board-item">
              <div className="board-date num">{it.d}</div>
              <div className="board-title">
                {it.pin && <i data-lucide="pin" style={{width:12, height:12, color:'var(--danger)', flexShrink:0}}></i>}
                <span className="board-title-text">{it.t}</span>
                {it.isNew && <span className="board-new">N</span>}
              </div>
              <span className={`badge badge-${it.tone}`}>{it.tag}</span>
            </div>
          ))}
        </div>
      )}

      {tab === 'class' && (
        <div className="sched-list">
          {schedule.map((it, i) => (
            <div key={i} className="sched-row">
              <div className="sched-time num">{it.time}<span className="sub">{it.sub}</span></div>
              <div className="sched-title">{it.title}<span className="where">· {it.where}</span></div>
              <span className="badge badge-info">진행 전</span>
            </div>
          ))}
        </div>
      )}

      {tab === 'req' && (
        <div className="req-list">
          {requests.map((it, i) => (
            <div key={i} className="req-row">
              <div className={`req-av ${it.tone}`}>{it.av}</div>
              <div className="req-body">
                <div className="req-name">{it.name}<span className="sub">{it.sub}</span></div>
                <div className="req-meta">{it.meta}</div>
              </div>
              <div className="req-actions">
                {it.actions.map((a, ai) => (
                  <button key={ai} className={`req-btn ${ai===0 ? 'primary' : ''}`}>{a}</button>
                ))}
                <button className="req-btn ghost" aria-label="무시"><i data-lucide="x" style={{width:12, height:12}}></i></button>
              </div>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}
window.BoardPanel = BoardPanel;