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

type Props = {
  session: null | {
    title: string;
    date: string;
    status: string;
  };
  records: Array<{
    student: string;
    status: string;
    process: string;
    time: string;
  }>;
};

export default function ClassSheet({ session, records }: Props) {
  const rows = records.map((record) => [record.student, record.status, record.process, record.time]);

  return (
    <AppLayout title="برگه حضور و غیاب">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>{session ? session.title : 'چارت سریع کلاس'}</h2>
            {session ? <p>{session.date} — وضعیت: {session.status}</p> : null}
            <p>مثل برگه کاغذی کلاس طراحی شده؛ معلم وضعیت را می‌زند و غیبت‌ها برای تایید SMS به معاون/مدیر می‌رود.</p>
          </div>
          <button className="btn btn-primary" type="button"><i className="bi bi-save" /> ذخیره جلسه</button>
        </section>
        {rows.length > 0
          ? <DataTable columns={['دانش‌آموز', 'وضعیت', 'فرآیند', 'زمان']} rows={rows} />
          : <section className="panel-card"><h2>جلسه حضور و غیابی وجود ندارد</h2><p>بعد از ساخت جلسه و ثبت رکوردها، برگه واقعی کلاس از دیتابیس نمایش داده می‌شود.</p></section>}
      </div>
    </AppLayout>
  );
}
