import { router } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { JalaliDateTimePicker } from '@/Components/Forms/JalaliDateTimePicker';
import { useState } from 'react';

type Option = { value: number; label: string };
type Item = {
  id: number;
  classroom: string;
  subject: string;
  absentTeacher: string;
  substituteTeacher: string;
  startsAt: string;
  endsAt: string;
  status: string;
  note: string | null;
};
type Props = { items: Item[]; teachers: Option[]; classrooms: Option[]; subjects: Option[] };

export default function Substitutes({ items, teachers, classrooms, subjects }: Props) {
  const [startsAt, setStartsAt] = useState('');
  const [endsAt, setEndsAt] = useState('');

  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.currentTarget));
    data.starts_at = startsAt;
    data.ends_at = endsAt;
    router.post('/school/substitutes', data, { preserveScroll: true });
    e.currentTarget.reset();
    setStartsAt('');
    setEndsAt('');
  }

  return (
    <AppLayout title="جانشین معلم">
      <div className="page-stack">
        <section className="section-header"><div><h2>مدیریت جانشین معلم</h2><p>ثبت جایگزین برای زمان غیبت معلم</p></div></section>
        <form className="panel-card" onSubmit={submit}>
          <div className="form-grid">
            <select className="form-select" name="absent_teacher_id"><option value="">معلم غایب</option>{teachers.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}</select>
            <select className="form-select" name="substitute_teacher_id" required><option value="">معلم جانشین</option>{teachers.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}</select>
            <select className="form-select" name="classroom_id"><option value="">کلاس</option>{classrooms.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}</select>
            <select className="form-select" name="subject_id"><option value="">درس</option>{subjects.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select>
            <JalaliDateTimePicker label="شروع" value={startsAt} onChange={setStartsAt} />
            <JalaliDateTimePicker label="پایان" value={endsAt} onChange={setEndsAt} />
            <textarea className="form-input" name="note" placeholder="یادداشت" style={{ gridColumn: '1 / -1' }} />
          </div>
          <button className="btn btn-primary" type="submit" style={{ marginTop: 16 }}><i className="bi bi-person-workspace" /> ثبت جانشین</button>
        </form>
        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          <table className="data-table">
            <thead><tr><th>زمان</th><th>کلاس</th><th>درس</th><th>غایب</th><th>جانشین</th><th>وضعیت</th></tr></thead>
            <tbody>
              {items.map((item) => (
                <tr key={item.id}>
                  <td>{item.startsAt}<br /><small>{item.endsAt}</small></td>
                  <td>{item.classroom}</td>
                  <td>{item.subject}</td>
                  <td>{item.absentTeacher}</td>
                  <td>{item.substituteTeacher}</td>
                  <td><span className="badge badge-warning">{item.status}</span></td>
                </tr>
              ))}
              {items.length === 0 && <tr><td colSpan={6} style={{ textAlign: 'center' }}>جانشینی ثبت نشده است.</td></tr>}
            </tbody>
          </table>
        </section>
      </div>
    </AppLayout>
  );
}