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

type SchoolRow = {
  id: number;
  name: string;
  code: string;
  status: string;
  lastInteraction: string;
  inactiveDays: number | null;
};

type Props = {
  schools: SchoolRow[];
  filters: { days: number; sort: string };
};

export default function InactiveSchools({ schools, filters }: Props) {
  function apply(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    router.get('/super-admin/inactive-schools', {
      days: form.get('days'),
      sort: form.get('sort'),
    }, { preserveState: true });
  }

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

        <section className="panel-card">
          <form onSubmit={apply} className="form-grid">
            <div className="form-group">
              <label className="form-label">مدت غیرفعالی</label>
              <input name="days" className="form-input" type="number" min="1" max="365" defaultValue={filters.days} />
            </div>
            <div className="form-group">
              <label className="form-label">مرتب‌سازی</label>
              <select name="sort" className="form-input" defaultValue={filters.sort}>
                <option value="inactive_days">بیشترین روز غیرفعالی</option>
                <option value="last_interaction">قدیمی‌ترین فعالیت</option>
                <option value="name">نام مدرسه</option>
              </select>
            </div>
            <div style={{ alignSelf: 'end' }}>
              <button className="btn btn-primary" type="submit"><i className="bi bi-funnel" /> اعمال</button>
            </div>
          </form>
        </section>

        <section className="dashboard-grid">
          <article className="metric-card"><span>مدارس پیدا شده</span><strong>{schools.length}</strong></article>
          <article className="metric-card"><span>آستانه</span><strong>{filters.days} روز</strong></article>
        </section>

        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          {schools.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>
                  </tr>
                </thead>
                <tbody>
                  {schools.map((school) => (
                    <tr key={school.id}>
                      <td style={{ fontWeight: 700 }}>{school.name}</td>
                      <td>{school.code}</td>
                      <td><span className={school.status === 'active' ? 'badge badge-success' : 'badge badge-secondary'}>{school.status}</span></td>
                      <td style={{ whiteSpace: 'nowrap', color: 'var(--color-text-muted)' }}>{school.lastInteraction}</td>
                      <td><span className="badge badge-warning">{school.inactiveDays ?? '—'}</span></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </div>
    </AppLayout>
  );
}