import { router } from '@inertiajs/react';
import { useForm } 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[];
  settings: { mode: string; recipients: string[]; lowBalanceThreshold: number };
};

const recipientLabels: Record<string, string> = { student: 'دانش‌آموز', father: 'پدر', mother: 'مادر' };

export default function SendToAbsents({ absents, settings }: Props) {
  const rows = absents.map((absent) => [absent.student, absent.classroom, absent.recipient, absent.status]);
  const form = useForm({
    absence_sms_mode: settings.mode,
    absence_sms_recipients: settings.recipients,
    sms_low_balance_threshold: String(settings.lowBalanceThreshold),
  });

  function toggleRecipient(key: string) {
    form.setData('absence_sms_recipients', form.data.absence_sms_recipients.includes(key)
      ? form.data.absence_sms_recipients.filter((r) => r !== key)
      : [...form.data.absence_sms_recipients, key]);
  }

  return (
    <AppLayout title="پیامک غایبین">
      <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 })}>ساخت درخواست تایید پیامک</button>
        </section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); form.put('/school/sms-absents/settings'); }}>
          <h2>تنظیم اعلان SMS غیبت</h2>
          <div className="form-grid">
            <div className="field-wrap">
              <label className="field-label">روش ارسال</label>
              <select className="field-input" value={form.data.absence_sms_mode} onChange={(e) => form.setData('absence_sms_mode', e.target.value)}>
                <option value="disabled">غیرفعال</option>
                <option value="approval_required">نیازمند تایید مدیر</option>
                <option value="instant">ارسال فوری</option>
              </select>
            </div>
            <div className="field-wrap">
              <label className="field-label">هشدار موجودی کم</label>
              <input className="field-input" type="number" value={form.data.sms_low_balance_threshold} onChange={(e) => form.setData('sms_low_balance_threshold', e.target.value)} />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '0.75rem 0' }}>
            {Object.entries(recipientLabels).map(([key, label]) => (
              <label key={key} className="badge" style={{ cursor: 'pointer' }}>
                <input type="checkbox" checked={form.data.absence_sms_recipients.includes(key)} onChange={() => toggleRecipient(key)} /> {label}
              </label>
            ))}
          </div>
          <button className="btn btn-primary" disabled={form.processing} type="submit">ذخیره تنظیمات</button>
        </form>
        {rows.length > 0
          ? <DataTable columns={['دانش‌آموز', 'کلاس', 'گیرنده', 'وضعیت']} rows={rows} />
          : <section className="panel-card"><h2>غایبی برای ارسال پیامک نیست</h2><p>غیبت‌های امروز بعد از ثبت حضور و غیاب از دیتابیس اینجا نمایش داده می‌شود.</p></section>}
      </div>
    </AppLayout>
  );
}