import { AppLayout } from '@/Components/Layout/AppLayout';

type GradeRow = { subject: string; classroom: string; count: number; average: number | null };
type AttendanceRow = { classroom: string; status: string; count: number };

type Props = {
  year: { id: number; title: string; status: string; startsOn: string | null; endsOn: string | null };
  grades: GradeRow[];
  attendance: AttendanceRow[];
};

const statusLabel: Record<string, string> = { present: 'حاضر', absent: 'غایب', late: 'تاخیر', excused: 'موجه' };

export default function YearArchive({ year, grades, attendance }: Props) {
  return (
    <AppLayout title={`آرشیو ${year.title}`}>
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>آرشیو سال {year.title}</h2>
            <p>نمای read-only از داده‌های بسته‌شده این سال تحصیلی.</p>
          </div>
          <a className="btn btn-ghost" href="/school/years"><i className="bi bi-arrow-right" /> بازگشت</a>
        </section>

        <section className="dashboard-grid">
          <article className="metric-card"><span>وضعیت</span><strong>{year.status === 'active' ? 'فعال' : 'بایگانی'}</strong></article>
          <article className="metric-card"><span>شروع</span><strong>{year.startsOn ?? '—'}</strong></article>
          <article className="metric-card"><span>پایان</span><strong>{year.endsOn ?? '—'}</strong></article>
        </section>

        <section className="panel-card">
          <h2>خلاصه نمرات</h2>
          <div className="table-wrap">
            <table className="data-table">
              <thead><tr><th>کلاس</th><th>درس</th><th>تعداد نمره</th><th>میانگین</th></tr></thead>
              <tbody>{grades.map((g, i) => <tr key={i}><td>{g.classroom}</td><td>{g.subject}</td><td>{g.count}</td><td>{g.average ?? '—'}</td></tr>)}</tbody>
            </table>
          </div>
        </section>

        <section className="panel-card">
          <h2>خلاصه حضور و غیاب</h2>
          <div className="table-wrap">
            <table className="data-table">
              <thead><tr><th>کلاس</th><th>وضعیت</th><th>تعداد</th></tr></thead>
              <tbody>{attendance.map((a, i) => <tr key={i}><td>{a.classroom}</td><td>{statusLabel[a.status] ?? a.status}</td><td>{a.count}</td></tr>)}</tbody>
            </table>
          </div>
        </section>
      </div>
    </AppLayout>
  );
}