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

type Props = {
  requests: Array<{
    classroom: string;
    subject: string;
    absentCount: number;
    smsCost: number;
    createdAt: string;
  }>;
};

export default function ApprovalQueue({ requests }: Props) {
  const rows = requests.map((request) => [
    request.classroom,
    request.subject,
    formatCount(request.absentCount),
    formatCount(request.smsCost),
    request.createdAt,
  ]);

  return (
    <AppLayout title="صف تایید غیبت">
      <div className="page-stack">
        <section className="panel-card">
          <h2>تایید قبل از مصرف اعتبار پیامک</h2>
          <p>تا زمانی که مدیر یا معاون تایید نکند، پیامک غیبت ارسال نمی‌شود و اعتبار کیف پول کم نمی‌شود.</p>
        </section>
        {rows.length > 0
          ? <DataTable columns={['کلاس', 'درس', 'تعداد غایب', 'هزینه پیامک', 'زمان درخواست']} rows={rows} />
          : <section className="panel-card"><h2>درخواستی برای تایید نیست</h2><p>وقتی معلم غیبت ثبت کند و تنظیم مدرسه approval_required باشد، درخواست‌ها اینجا می‌آیند.</p></section>}
      </div>
    </AppLayout>
  );
}