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

type AbsenceRecord = {
  recordId: number;
  studentName: string;
  classroomName: string;
  dateJalali: string;
  teacherName: string;
};

type Classroom = { id: number; name: string };

type Props = {
  records: AbsenceRecord[];
  classrooms: Classroom[];
  filters: { classroom_id: number | null; date: string };
};

export default function AbsencesList({ records: initialRecords, classrooms, filters }: Props) {
  const [records, setRecords] = useState(initialRecords);
  const [classroomId, setClassroomId] = useState(filters.classroom_id ? String(filters.classroom_id) : '');
  const [date, setDate] = useState(filters.date);
  const [excusingId, setExcusingId] = useState<number | null>(null);

  function applyFilters() {
    router.get('/school/attendance/absences', {
      ...(classroomId ? { classroom_id: classroomId } : {}),
      ...(date ? { date } : {}),
    }, { preserveState: true, replace: true });
  }

  function handleExcuse(recordId: number) {
    if (!confirm('این غیبت به عنوان موجه ثبت شود؟')) return;
    setExcusingId(recordId);

    fetch(`/school/attendance/excuse/${recordId}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') as HTMLMetaElement)?.content ?? '',
        'Accept': 'application/json',
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setExcusingId(null);
        if (data.ok) {
          // Remove from list (excused → no longer absent)
          setRecords((prev) => prev.filter((r) => r.recordId !== recordId));
        }
      })
      .catch(() => { setExcusingId(null); alert('خطا. لطفاً دوباره تلاش کنید.'); });
  }

  return (
    <AppLayout title="لیست غیبت‌ها — موجه کردن">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-person-x" /> لیست غیبت‌های ثبت‌شده</h2>
            <p>معاون می‌تواند هر غیبت را موجه کند. غیبت موجه به صورت دایره آبی در جدول معلم نمایش داده می‌شود.</p>
          </div>
        </section>

        <section className="panel-card">
          <div className="form-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}>
            <div className="field-wrap">
              <label className="field-label">فیلتر کلاس</label>
              <select className="field-input" value={classroomId} onChange={(e) => setClassroomId(e.target.value)}>
                <option value="">همه کلاس‌ها</option>
                {classrooms.map((c) => (
                  <option key={c.id} value={String(c.id)}>{c.name}</option>
                ))}
              </select>
            </div>
            <JalaliDatePicker label="تاریخ" value={date} onChange={setDate} />
            <div className="field-wrap" style={{ alignSelf: 'flex-end' }}>
              <button className="btn btn-primary" type="button" onClick={applyFilters}>
                <i className="bi bi-funnel" /> اعمال فیلتر
              </button>
            </div>
          </div>
        </section>

        {records.length > 0 ? (
          <div className="table-wrap">
            <table className="data-table">
              <thead>
                <tr>
                  <th>نام دانش‌آموز</th>
                  <th>کلاس</th>
                  <th>تاریخ</th>
                  <th>معلم</th>
                  <th>عملیات</th>
                </tr>
              </thead>
              <tbody>
                {records.map((rec) => (
                  <tr key={rec.recordId}>
                    <td>{rec.studentName}</td>
                    <td>{rec.classroomName}</td>
                    <td>{rec.dateJalali}</td>
                    <td>{rec.teacherName}</td>
                    <td>
                      <button
                        className="btn btn-soft btn-sm"
                        type="button"
                        disabled={excusingId === rec.recordId}
                        onClick={() => handleExcuse(rec.recordId)}
                        style={{ color: '#3b82f6', borderColor: '#3b82f6' }}
                      >
                        {excusingId === rec.recordId
                          ? <><i className="bi bi-hourglass-split" /> در حال ثبت…</>
                          : <><i className="bi bi-circle-fill" style={{ color: '#3b82f6' }} /> موجه کردن</>}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <section className="panel-card">
            <h2>غیبت ثبت‌نشده‌ای یافت نشد</h2>
            <p>همه غیبت‌ها یا موجه شده‌اند یا هنوز حضور و غیاب ثبت نشده است.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}