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

type Absent = {
  student: string;
  classroom: string;
  recipient: string;
  status: string;
};

type Props = {
  absents: Absent[];
};

export default function SendToAbsents({ absents }: Props) {
  const rows = absents.map((absent) => [absent.student, absent.classroom, absent.recipient, absent.status]);

  return (
    <AppLayout title="SMS غایبین">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>ارسال پیامک غیبت</h2>
            <p>معلم درخواست می‌سازد؛ مدیر/معاون تایید می‌کند؛ بعد provider ارسال را انجام می‌دهد.</p>
          </div>
          <button className="btn btn-primary" type="button" onClick={() => router.post('/school/sms-absents', {}, { preserveScroll: true })}>ساخت درخواست تایید SMS</button>
        </section>
        {rows.length > 0
          ? <DataTable columns={['دانش‌آموز', 'کلاس', 'گیرنده', 'وضعیت']} rows={rows} />
          : <section className="panel-card"><h2>غایبی برای ارسال SMS نیست</h2><p>غیبت‌های امروز بعد از ثبت حضور و غیاب از دیتابیس اینجا نمایش داده می‌شود.</p></section>}
      </div>
    </AppLayout>
  );
}
