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

type StudentOption = { id: number; name: string; classroom: string };
type Classroom = { id: number; name: string };
type Incident = {
  id: number;
  date: string;
  severity: 'low' | 'medium' | 'high';
  title: string;
  description: string | null;
  actionTaken: string | null;
  student: string;
  classroom: string;
  createdBy: string;
};
type Props = {
  students: StudentOption[];
  classrooms: Classroom[];
  incidents: Incident[];
  filters: { classroom_id: number | null };
};

const severityLabel = { low: 'کم', medium: 'متوسط', high: 'جدی' };
const severityClass = { low: 'badge badge-secondary', medium: 'badge badge-warning', high: 'badge badge-danger' };

export default function Discipline({ students, classrooms, incidents, filters }: Props) {
  const form = useForm({
    student_id: '',
    classroom_id: filters.classroom_id ? String(filters.classroom_id) : '',
    incident_date: '',
    severity: 'medium',
    title: '',
    description: '',
    action_taken: '',
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    form.post('/school/discipline', {
      preserveScroll: true,
      onSuccess: () => form.reset('student_id', 'incident_date', 'title', 'description', 'action_taken'),
    });
  }

  function filterClass(classId: string) {
    router.get('/school/discipline', { classroom_id: classId || undefined }, { preserveState: true });
  }

  return (
    <AppLayout title="پرونده انضباطی">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2><i className="bi bi-clipboard-pulse" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />پرونده انضباطی</h2>
            <p>ثبت و پیگیری رویدادهای انضباطی دانش‌آموزان.</p>
          </div>
          <select className="form-input" value={filters.classroom_id ?? ''} onChange={(e) => filterClass(e.target.value)} style={{ maxWidth: 240 }}>
            <option value="">همه کلاس‌ها</option>
            {classrooms.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </section>

        <form className="panel-card" onSubmit={submit}>
          <h2>ثبت مورد جدید</h2>
          <div className="form-grid">
            <div className="form-group">
              <label className="form-label">دانش‌آموز</label>
              <select className="form-input" value={form.data.student_id} onChange={(e) => form.setData('student_id', e.target.value)} required>
                <option value="">انتخاب...</option>
                {students.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.classroom})</option>)}
              </select>
              {form.errors.student_id && <p className="form-error">{form.errors.student_id}</p>}
            </div>
            <div className="form-group">
              <label className="form-label">کلاس</label>
              <select className="form-input" value={form.data.classroom_id} onChange={(e) => form.setData('classroom_id', e.target.value)}>
                <option value="">بدون کلاس</option>
                {classrooms.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </div>
            <JalaliDatePicker label="تاریخ" value={form.data.incident_date} onChange={(value) => form.setData('incident_date', value)} error={form.errors.incident_date} />
            <div className="form-group">
              <label className="form-label">شدت</label>
              <select className="form-input" value={form.data.severity} onChange={(e) => form.setData('severity', e.target.value)}>
                <option value="low">کم</option>
                <option value="medium">متوسط</option>
                <option value="high">جدی</option>
              </select>
            </div>
            <TextInput label="عنوان" value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} error={form.errors.title} />
            <div className="form-group" style={{ gridColumn: '1 / -1' }}>
              <label className="form-label">شرح</label>
              <textarea className="form-input" rows={3} value={form.data.description} onChange={(e) => form.setData('description', e.target.value)} />
            </div>
            <div className="form-group" style={{ gridColumn: '1 / -1' }}>
              <label className="form-label">اقدام انجام‌شده</label>
              <textarea className="form-input" rows={2} value={form.data.action_taken} onChange={(e) => form.setData('action_taken', e.target.value)} />
            </div>
          </div>
          <button className="btn btn-primary" type="submit" disabled={form.processing}><i className="bi bi-check2" /> ثبت</button>
        </form>

        <section className="panel-card" style={{ padding: 0, overflow: 'hidden' }}>
          {incidents.length === 0 ? (
            <p style={{ padding: '2rem', textAlign: 'center', 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>
                  {incidents.map((i) => (
                    <tr key={i.id}>
                      <td>{i.date}</td>
                      <td>{i.student}</td>
                      <td>{i.classroom}</td>
                      <td><span className={severityClass[i.severity]}>{severityLabel[i.severity]}</span></td>
                      <td>
                        <strong>{i.title}</strong>
                        {i.description && <div style={{ color: 'var(--color-text-muted)', fontSize: '0.8rem' }}>{i.description}</div>}
                      </td>
                      <td>{i.actionTaken || '—'}</td>
                      <td>{i.createdBy}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </div>
    </AppLayout>
  );
}