import type { CurrentUser, SiteSettings } from '../../env';
import { AdminLayout } from './layout';

export function AdminDashboard(props: {
  settings: SiteSettings;
  currentUser: CurrentUser;
  csrfToken: string;
  stats: { users: number; posts: number; comments: number; likes: number; trend: Array<{ day: string; posts: number }> };
}) {
  const max = Math.max(1, ...props.stats.trend.map((item) => item.posts));
  const points = props.stats.trend.map((item, index) => `${index * 42},${80 - (item.posts / max) * 70}`).join(' ');
  return (
    <AdminLayout title="仪表盘" settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} active="/admin">
      <section class="admin-stats">
        <div><strong>{props.stats.users}</strong><span>用户</span></div>
        <div><strong>{props.stats.posts}</strong><span>内容</span></div>
        <div><strong>{props.stats.comments}</strong><span>评论</span></div>
        <div><strong>{props.stats.likes}</strong><span>点赞</span></div>
      </section>
      <section class="admin-panel">
        <h2>近 7 天发布</h2>
        <svg class="trend-svg" viewBox="0 0 252 90" role="img" aria-label="近 7 天发布趋势">
          <polyline points={points} fill="none" stroke="#07C160" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </section>
    </AdminLayout>
  );
}
