/* Admin — Sidebar + Dashboard */

function AdminSidebar({ route, go, onLogout, email }) {
  const items = [
    { id: 'dashboard', label: '대시보드', icon: ICONS.dash },
    { id: 'materials', label: '수업지원자료 관리', icon: ICONS.doc },
    { id: 'family', label: '확장수업 관리', icon: ICONS.home2 },
    { id: 'downloads-list', label: '다운로드 자료 관리', icon: ICONS.download, extraActive: 'downloads' },
    { id: 'upload', label: '새 콘텐츠 등록', icon: ICONS.upload },
  ];
  return (
    <aside className="admin-side">
      <div className="admin-brand">
        <img className="logo-img" src="assets/logo-full.png" alt="모모, 테리" />
      </div>
      <nav className="admin-nav">
        <div className="admin-nav-group">
          <div className="admin-nav-label">콘텐츠</div>
          {items.map((it) => (
            <a key={it.id} href="#" className={(route === it.id || route === it.extraActive) ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); go(it.id); }}>
              <Ico d={it.icon} />{it.label}
            </a>
          ))}
        </div>
        <div className="admin-nav-group">
          <div className="admin-nav-label">사이트 이용자</div>
          <a href="#" className={route === 'members' ? 'active' : ''}
             onClick={(e) => { e.preventDefault(); go('members'); }}>
            <Ico d={ICONS.users} />회원 관리
          </a>
        </div>
      </nav>
      <div className="admin-side-foot">
        <Char who="모모" size={34} />
        <div><b style={{ fontSize: 13.5, fontWeight: 800 }}>관리자</b><small>{email}</small></div>
        <button className="icon-logout-btn" onClick={onLogout} aria-label="로그아웃" title="로그아웃"><Ico d={ICONS.logout} size={17}/></button>
      </div>
    </aside>
  );
}

function DashboardScreen({ go }) {
  const [rows, setRows] = React.useState(null);

  const reload = React.useCallback(() => {
    fetchContents().then(setRows);
  }, []);
  React.useEffect(() => { reload(); }, [reload]);

  if (!rows) return <div className="admin-panel">불러오는 중…</div>;

  const total = rows.length;
  const published = rows.filter((c) => c.status === 'published').length;
  const draft = total - published;
  const byType = ['수업지원자료', '확장수업'].map((t) => ({ type: t, count: rows.filter((c) => c.type === t).length }));

  return (
    <div>
      <div className="admin-topbar">
        <div>
          <h1>대시보드</h1>
          <p>콘텐츠 현황을 한눈에 확인하세요.</p>
        </div>
        <button className="btn btn-primary" onClick={() => go('upload')}><Ico d={ICONS.plus} size={16}/> 새 콘텐츠 등록</button>
      </div>

      <div className="admin-stats">
        <div className="admin-stat"><div className="lbl">전체 콘텐츠</div><div className="val">{total}</div></div>
        <div className="admin-stat"><div className="lbl">공개중</div><div className="val">{published}</div><div className="delta">전체의 {total ? Math.round(published/total*100) : 0}%</div></div>
        <div className="admin-stat"><div className="lbl">임시저장</div><div className="val">{draft}</div><div className="delta" style={{ color: 'var(--muted)' }}>검토 대기</div></div>
        <div className="admin-stat"><div className="lbl">이번 주 조회수</div><div className="val">12.4K</div><div className="delta">전주 대비 +8%</div></div>
      </div>

      <div className="admin-stats" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
        {byType.map((b) => (
          <button key={b.type} className="admin-stat admin-stat-link" onClick={() => go(b.type === '수업지원자료' ? 'materials' : 'family')}>
            <div className="lbl">{b.type}</div>
            <div className="val">{b.count}</div>
            <div className="delta">목록 보기 →</div>
          </button>
        ))}
      </div>

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>최근 등록 콘텐츠</h3>
          <button className="chip" onClick={() => go('materials')}>전체 보기</button>
        </div>
        <ContentTable rows={rows.slice(0, 5)} onDelete={async (id) => { await deleteContent(id); reload(); }} onEdit={(id) => go('downloads', id)} />
      </div>
    </div>
  );
}

function ContentTable({ rows, onDelete, onEdit }) {
  if (!rows.length) {
    return <p style={{ color: 'var(--muted)', fontSize: 14, padding: '16px 0' }}>등록된 콘텐츠가 없습니다.</p>;
  }
  return (
    <table className="admin-table">
      <thead>
        <tr><th>콘텐츠</th><th>구분</th><th>주제</th><th>상태</th><th>등록일</th><th></th></tr>
      </thead>
      <tbody>
        {rows.map((r) => {
          const p = PASTELS[(r.pastel || 0) % PASTELS.length];
          return (
            <tr key={r.id}>
              <td>
                <div className="admin-row-title">
                  <div className="admin-thumb" style={{ background: p.bg }}></div>
                  <div><b>{r.title}</b><small>{r.step ? r.step : ''}</small></div>
                </div>
              </td>
              <td>
                {r.type}
                {r.type === '수업지원자료' && r.track && (
                  <span className="badge" style={{ marginLeft: 6, background: r.track === '모모' ? 'color-mix(in srgb, #56abe6 16%, #fff)' : 'color-mix(in srgb, #82c247 16%, #fff)', color: r.track === '모모' ? '#357fc4' : '#4f8a1f' }}>
                    {r.track === '모모' ? 'STEP1' : 'STEP2'}
                  </span>
                )}
              </td>
              <td>{r.topic}</td>
              <td><span className={'status-pill ' + r.status}>{r.status === 'published' ? '공개중' : '임시저장'}</span></td>
              <td style={{ color: 'var(--muted)' }}>{String(r.created_at).slice(0, 10)}</td>
              <td>
                <div className="row-actions">
                  <button className="icon-btn" title="다운로드 자료 관리" onClick={() => onEdit && onEdit(r.id)}><Ico d={ICONS.edit} size={15}/></button>
                  <button className="icon-btn" onClick={() => onDelete && onDelete(r.id)}><Ico d={ICONS.trash} size={15}/></button>
                </div>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Object.assign(window, { AdminSidebar, DashboardScreen, ContentTable });