import { AppLayout } from '@/Components/Layout/AppLayout';
import { UsageChart } from '@/Components/Charts/UsageChart';
import { formatCount } from '@/lib/formatters';

type Props = {
  metrics: {
    loginsToday: number;
    absencesToday: number;
    smsThisMonth: number;
    exportsThisMonth: number;
  };
  usage: number[];
  availableReports: string[];
};

export default function Reports({ metrics, usage, availableReports }: Props) {
  const max = Math.max(...usage, 1);
  const chartValues = usage.map((value) => Math.max(8, Math.round((value / max) * 100)));

  return (
    <AppLayout title="گزارش‌های مدرسه">
      <div className="page-stack">
        <section className="dashboard-grid">
          <article className="metric-card"><span>ورود کاربران امروز</span><strong>{formatCount(metrics.loginsToday)}</strong></article>
          <article className="metric-card"><span>غیبت ثبت‌شده امروز</span><strong>{formatCount(metrics.absencesToday)}</strong></article>
          <article className="metric-card"><span>مصرف SMS ماه</span><strong>{formatCount(metrics.smsThisMonth)}</strong></article>
          <article className="metric-card"><span>خروجی‌های ماه</span><strong>{formatCount(metrics.exportsThisMonth)}</strong></article>
        </section>
        <section className="split-panel">
          <article className="panel-card">
            <h2>فعالیت هفتگی</h2>
            {usage.length > 0 ? <UsageChart values={chartValues} /> : <p>هنوز داده usage روزانه ثبت نشده است.</p>}
          </article>
          <article className="panel-card">
            <h2>گزارش‌های آماده</h2>
            <ul className="check-list">
              {availableReports.map((report) => <li key={report}><span>{report}</span><i className="bi bi-check2-circle" /></li>)}
            </ul>
          </article>
        </section>
      </div>
    </AppLayout>
  );
}
