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

type ExcuseRequest = {
  id: number;
  recordId: number;
  studentName: string;
  studentCode: string;
  classroom: string;
  date: string;
  status: string;
  attendanceStatus: string;
  reason: string | null;
  requestedBy: string;
  createdAt: string;
  reviewedAt: string | null;
};

type Props = {
  requests: ExcuseRequest[];
  filters: { status: string };
};

const statusLabel: Record<string, string> = {
  pending: 'در انتظار',
  approved: 'تایید شده',
  rejected: 'رد شده',
  cancelled: 'لغو شده',
};

const statusClass: Record<string, string> = {
  pending: 'badge badge-warning',
  approved: 'badge badge-success',
  rejected: 'badge badge-danger',
  cancelled: 'badge badge-secondary',
};

export default function ExcuseRequests({ requests, filters }: Props) {
  function changeStatus(status: string) {
    router.get('/school/attendance/excuse-requests', { status }, { preserveState: true });
  }

  function review(id: number, action: 'approve' | 'reject') {
    const msg = action === 'approve' ? 'این غیبت موجه شود؟' : 'این درخواست رد شود؟';
    if (!confirm(msg)) return;
    router.post(`/school/attendance/excuse-requests/${id}`, { action }, { preserveScroll: true });
  }

  return (
    <AppLayout title="درخواست‌های موجه شدن غیبت">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-shield-check" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />درخواست‌های موجه شدن غیبت</h2>
            <p>درخواست‌هایی که دانش‌آموزان برای تبدیل غیبت واقعی به غیبت موجه فرستاده‌اند.</p>
          </div>
        </section>

        <section className="panel-card">
          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
            {['pending', 'approved', 'rejected'].map((status) => (
              <button
                key={status}
                type="button"
                className={`btn btn-sm ${filters.status === status ? 'btn-primary' : 'btn-ghost'}`}
                onClick={() => changeStatus(status)}
              >
                {statusLabel[status]}
              </button>
            ))}
          </div>
        </section>

        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          {requests.length === 0 ? (
            <p style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted)' }}>درخواستی در این وضعیت نیست.</p>
          ) : (
            <div style={{ overflowX: 'auto' }}>
              <table className="data-table" style={{ width: '100%' }}>
                <thead>
                  <tr>
                    <th>دانش‌آموز</th>
                    <th>کلاس</th>
                    <th>تاریخ غیبت</th>
                    <th>دلیل</th>
                    <th>وضعیت</th>
                    <th>ثبت</th>
                    <th>عملیات</th>
                  </tr>
                </thead>
                <tbody>
                  {requests.map((req) => (
                    <tr key={req.id}>
                      <td>
                        <strong>{req.studentName}</strong>
                        <div style={{ color: 'var(--color-text-muted)', fontSize: '0.78rem' }}>{req.studentCode}</div>
                      </td>
                      <td>{req.classroom}</td>
                      <td style={{ whiteSpace: 'nowrap' }}>{req.date}</td>
                      <td style={{ minWidth: 260, whiteSpace: 'pre-wrap', color: 'var(--color-text-muted)' }}>{req.reason ?? '—'}</td>
                      <td><span className={statusClass[req.status] ?? 'badge badge-secondary'}>{statusLabel[req.status] ?? req.status}</span></td>
                      <td style={{ color: 'var(--color-text-muted)', fontSize: '0.82rem' }}>{req.createdAt}</td>
                      <td>
                        {req.status === 'pending' ? (
                          <div className="action-row--compact">
                            <button className="btn btn-primary btn-sm" type="button" onClick={() => review(req.id, 'approve')}>
                              <i className="bi bi-check2" /> تایید
                            </button>
                            <button className="btn btn-ghost btn-sm" type="button" onClick={() => review(req.id, 'reject')}>
                              <i className="bi bi-x-lg" /> رد
                            </button>
                          </div>
                        ) : (
                          <span style={{ color: 'var(--color-text-soft)', fontSize: '0.8rem' }}>{req.reviewedAt ?? '—'}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </div>
    </AppLayout>
  );
}